1. 9IM首页
  2. 热点

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

前言

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

新增博客功能实现

首先导航栏点击【新增博客】后,通过访问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;
	}

将最新代码部署到Tomcat上测试通过,感觉不错:

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

编辑博客功能的实现

编辑博客实际上就是按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;
	}

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

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

删除博客功能实现

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

	/**
	 * 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;
	}

测试之后,么有问题。

总结

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

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

原创文章,作者:9IM,如若转载,请注明出处:https://www.9im.cn/1087.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注