Spring之路(23)–SpringMVC+Bootstrap开发博客系统实例(其他功能实现)

简介: 本文目录1. 前言2.新增博客功能实现3. 编辑博客功能的实现4. 删除博客功能实现5. 总结

1. 前言

到目前来说,跟SpringMVC与Bootstrap相应的技术都已经引入到项目中来并进行过使用了,剩下的就是功能逐一实现了,我们只讲述一些没遇到过的重点问题,重复部分不再介绍。请注意代码中的注释部分就好了。


2.新增博客功能实现

首先导航栏点击【新增博客】后,通过访问blogAdd.do,跳转到了blogAdd.jsp,我们修改下blogAdd.jsp代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- 同样引入Bootstrap -->
<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous">
</head>
<body>
  <!-- 同样的导航栏 -->
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <ul class="nav navbar-nav">
        <li><a href="/myblog/blogView.do">浏览博客</a></li>
        <li><a href="/myblog/blogAdd.do">新增博客</a></li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <!-- 新增博客的表单 -->
        <form action="/myblog/blogAddSubmit.do" method="post">
          <div class="form-group">
            <label>标题</label>
            <input name="title" type="text" class="form-control">
          </div>
          <div class="form-group">
            <label>内容</label>
            <textarea name="content" class="form-control" rows="3"></textarea>
          </div>
          <div class="form-group">
            <label>作者</label>
            <input name="" type="text" class="form-control">
          </div>
          <button type="submit" class="btn btn-success">发布博客</button>
        </form>
      </div>
    </div>
  </div>
</body>
</html>

然后修改BlogController中blogAddSubmit方法代码

   /**
   * 4新增页面提交(新增完成后进入浏览博客页面)
   */
  @RequestMapping("/blogAddSubmit")
  public ModelAndView blogAddSubmit(BlogDo blog) {//注意SpringMVC会自动将表单内容放入blog对象对应属性,这个功能真是牛X
    //将表单提交内容入库
    blogService.addBlog(blog);
    ModelAndView mv = new ModelAndView();
    mv.setViewName("blogView.jsp");
    //查询最新的博客信息返回给页面
    mv.addObject("blogs", blogService.getBlogList());
    return mv;
  }

image.png

3. 编辑博客功能的实现

编辑博客实际上就是按ID修改其他内容,在进入blogEdit.jsp页面时,就应该先查出相关信息显示:


/**

 * 5进入编辑博客页面

 */

@RequestMapping("/blogEdit")

public ModelAndView blogEdit(Long id) {//SpringMVC自动将url里面含有的id=xx中的xx赋值给id,相当科幻相当智能啊!

 ModelAndView mv = new ModelAndView();

 mv.setViewName("blogEdit.jsp");

 //查询博客具体信息返回给页面

 mv.addObject("blog", blogService.getBlogById(id));

 return mv;

}


BlogService中还缺少一个按id查询博客信息的方法,添加如下:


/**

 * 按id获取博客信息

 */

public BlogDo getBlogById(Long id) {

 BlogDo blog=null;

 Connection conn = null;

 try {

  conn = dbHelper.getConnection();

  String sql = "select * from blog where id=?";

  PreparedStatement stmt = conn.prepareStatement(sql);

  stmt.setLong(1, id);

  ResultSet rs = stmt.executeQuery();

  if (rs.next()) {

   blog=new BlogDo();

   blog.setAuthor(rs.getString("author"));

   blog.setContent(rs.getString("content"));

   blog.setId(rs.getLong("id"));

   blog.setTitle(rs.getString("title"));

  }

 } catch (Exception e) {

  // 此处应打印日志

 } finally {

  dbHelper.closeConnection(conn);

 }

 return blog;

}


所以blogEdit.jsp进入时,应默认加载要修改内容博客项的信息,代码如下:


<!-- 头部与blogAdd.jsp一样 -->

<body>

<!-- 同样的导航栏 -->

<nav class="navbar navbar-inverse">

 <div class="container-fluid">

  <ul class="nav navbar-nav">

   <li><a href="/myblog/blogView.do">浏览博客</a></li>

   <li><a href="/myblog/blogAdd.do">新增博客</a></li>

  </ul>

 </div>

</nav>

<div class="container-fluid">

 <div class="row">

  <div class="col-md-12">

   <!-- 编辑博客的表单 -->

   <form action="/myblog/blogEditSubmit.do" method="post">

    <div class="form-group">

     <label>ID</label>

     <!-- 注意id不允许修改 -->

     <input name="id" type="text" class="form-control" value="${blog.id}" readonly>

    </div>

    <div class="form-group">

     <label>标题</label>

     <input name="title" type="text" value="${blog.title}" class="form-control">

    </div>

    <div class="form-group">

     <label>内容</label>

     <textarea name="content"  class="form-control" rows="3">${blog.content}</textarea>

    </div>

    <div class="form-group">

     <label>作者</label>

     <input name="author" type="text" value="${blog.author}" class="form-control">

    </div>

    <button type="submit" class="btn btn-success">提交修改</button>

   </form>

  </div>

 </div>

</div>

</body>


点击提交修改后,由blogEditSubmit方法处理,代码修改如下:


/**

 * 6编辑页面提交(编辑完成后进入浏览博客页面)

 */

@RequestMapping("/blogEditSubmit")

public ModelAndView blogEditSubmit(BlogDo blog) {// 注意SpringMVC会自动将表单内容放入blog对象对应属性,这个功能真是牛X

 //修改对应博客

 blogService.updateBlog(blog);

 ModelAndView mv = new ModelAndView();

 mv.setViewName("blogView.jsp");

 // 查询最新的博客信息返回给页面

 mv.addObject("blogs", blogService.getBlogList());

 return mv;

}


点击提交后更新成功!页面效果也不错:

image.png

4. 删除博客功能实现

这个最简单了,感觉没啥好说的了,上代码兄弟们:


/**

 * 7删除博客(删除完成后刷新浏览博客页面)

 */

@RequestMapping("/blogDelete")

public ModelAndView blogDelete(Long id) {// SpringMVC自动将url中的id赋值给此id

 //删除对应博客

 blogService.deleteBlog(id);

 ModelAndView mv = new ModelAndView();

 mv.setViewName("blogView.jsp");

 return mv;

}


测试之后,么有问题吭。


5. 总结

SpringMVC部分终于结束了,由于目前在真实项目开发中,SpringMVC+JSP这种模式已经使用的非常少了,更多的是采用前后端分离的模式。


接下里马上介绍使用Spring开发REST风格的web服务,这样就是后端提供服务接口,前端负责交互,前后端分离还是开发起来比较爽的。


)

相关文章
|
2月前
|
机器学习/深度学习 存储 算法
基于Flask+Bootstrap+机器学习的世界杯比赛预测系统
基于Flask+Bootstrap+机器学习的世界杯比赛预测系统
52 0
|
3月前
|
编解码 移动开发 前端开发
【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
【1月更文挑战第17天】【Bootstrap】<前端框架>Bootstrap布局容器&栅格网格系统
|
2月前
|
机器学习/深度学习 数据采集 算法
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统(上)
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统
52 0
|
22天前
|
SQL Java 数据库连接
挺详细的spring+springmvc+mybatis配置整合|含源代码
挺详细的spring+springmvc+mybatis配置整合|含源代码
31 1
|
15天前
|
敏捷开发 监控 前端开发
Spring+SpringMVC+Mybatis的分布式敏捷开发系统架构
Spring+SpringMVC+Mybatis的分布式敏捷开发系统架构
38 0
N..
|
18天前
|
开发框架 前端开发 容器
Bootstrap栅格系统
Bootstrap栅格系统
N..
9 0
|
27天前
|
JSON Java 数据库连接
【spring(五)】SpringMvc总结 SSM整合流程
【spring(五)】SpringMvc总结 SSM整合流程
|
1月前
|
前端开发 Java 数据库
【Spring原理进阶】SpringMVC调用链+JSP模板应用讲解
【Spring原理进阶】SpringMVC调用链+JSP模板应用讲解
|
2月前
|
机器学习/深度学习 数据可视化 Python
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统(下)
基于Flask+Bootstrap+机器学习的南昌市租房价格预测系统
47 0
|
3月前
|
前端开发 Java Spring
【Spring MVC】SpringMVC自动配置
【1月更文挑战第14天】【Spring MVC】SpringMVC自动配置