Spring MVC + MyBatis3 实现的简单个人博客

关注

原创最新推荐文章于 2026-08-12 19:04:20 发布 2.7k 阅读 AI 写同款· GEO 优化 ›

【图书介绍】《Spring+Spring MVC+MyBatis从零开始学（视频教学版）（第3版）》本书全面讲解使用流行轻量级框架SSM（Spring+Spring MVC+MyBatis）进行JavaEE Web开发的技术，并以综合案例“学生选课管理系统”为主线贯穿全书，知识内容层层推进，将知识点有机地串联起来，便于读者掌握与理解。本书共16章，分4部分。第1部分是MyBatis篇，包括第1～5章，涵盖MyBatis基础、MyBatis的核心XML配置文件等内容；第2部分是Spring篇，包括第6～10章，涵盖Spring基础、使用Spring管理Bean等；阅读详情

SpringMVC + MyBatis3 实现的个人博客

为了学习spring MVC，而做的一个简单的个人博客，项目地址如下：

https://github.com/DreamFinderHou/PersonalBlog

项目用到的技术：

Spring MVC
Mybatis3 + MySQL
Bootstrap(页面样式)+JSP+JSTL
TinyMCE 富文本编辑器，使用非常简单
Windows10+eclipse+tomcat7+chrome

实现的功能：

博客的增删改
富文本编辑器编写博客如下图：
博客多关键字查询

开发过程中遇到的问题及解决办法：

1. 绿色版MySQL的安装与启动：

参考：http://blog.youkuaiyun.com/anndy_/article/details/51093326

根据该向导操作时，可能在修改密码步骤报错，这是需要使用命令mysqld --initialize（生成一个随机密码），然后 net start mysql，再去修改密码。

2. 当使用Navicat建立连接时出现如下错误：

2005 -Unknown MySQL server host ‘localhost’(0)

那是因为你电脑没联网，Navicat的使用需要联网。

3. 各种资源找不到的情况：

切记一点：你项目中的各种路径的参照都是以最后你打成的war包的路径去找的。如果不确定export一个war包看一下。

Classpath和classpath*的使用：参照 http://perfy315.iteye.com/blog/2009258

4. Spring MVC开发项目，welcome-page的实现：

1) 如果要配置为index.html等静态页面为welcome-page，首先需要在web.xml中配置<welcome-file-list>，其次需要在springMVC-servlet.xml中配置静态资源，以跳过dispatcher的过滤，方法如下：

<mvc:annotation-driven/>

<mvc:resourcesmapping="/*.html"location="/"/>

如果没有<annotation-driven>，<resources/>元素会阻止任意控制器被调用。若不需要使用resources,则不需要<annotation-driven>，但是当使用Flash跳转页面是还是需要该元素的。

2) 在@Controller类中声明一个@RequestMapping（value=”/”）的方法，返回作为项目默认访问页的页面，当你的默认访问页为JSP时，必须采用这种方法。

如下：

	@RequestMapping(value="/")
	public String welcomePage(Model Model){
		
		return "welcome";
	}

5. 页面中引用CSS文件，路径找不到：

可以使用JSTL来解决，如下：

<c:url>会处理context的问题。

6. Spring MVC + JSP + JSTL + EL 实现分页：

	<div class="bloglist-height content-top container">
		<div class="content row">
			<div class="col-md-9">
				<ul class="media-list">
					<!--<li><span>PageCount: ${responseParm.pageCount}/CurrentPage: ${responseParm.currentPage}</span></li> -->
					<c:forEach items="${responseParm.bloglist}" var="blog" begin="0" end="${responseParm.bloglist.size()}" step="1">
						<li><span class="month"><fmt:formatDate type="both" value="${blog.createDate}" pattern="yyyy.MM.dd"/></span><span>  ·  </span><a href="<c:url value="/blog/${blog.blogID}"/>">${blog.blogTile}</a></li>
					</c:forEach>	
				</ul>
			</div>
		</div>
	</div>
	<nav class="content-bottom">
  		<ul class="pagination">
  			<c:if test="${responseParm.currentPage == 1}">
  				<li><a href="#" class="disable">«</a></li>
  			</c:if>
  			<c:if test="${responseParm.currentPage != 1}">
  				<li><a href="<c:url value="/findAllBlogs/${responseParm.keyTag}/${responseParm.currentPage - 1}"/>">«</a></li>
  			</c:if>
  			<c:forEach var="pageNo" begin="1" end="${responseParm.pageCount}" step="1">
  				<c:if test="${responseParm.currentPage == pageNo}">
  					<li><a href="#" class="disable">${pageNo}</a></li>
  				</c:if>
  				<c:if test="${responseParm.currentPage != pageNo}">
  					<li><a href="<c:url value="/findAllBlogs/${responseParm.keyTag}/${pageNo}"/>">${pageNo}</a></li>
  				</c:if>
  			</c:forEach>
		    <c:if test="${responseParm.currentPage == responseParm.pageCount}">
  				<li><a href="#" class="disable">»</a></li>
  			</c:if>
  			<c:if test="${responseParm.currentPage != responseParm.pageCount}">
  				<li><a href="<c:url value="/findAllBlogs/${responseParm.keyTag}/${responseParm.currentPage + 1}"/>">»</a></li>
  			</c:if>
 		 </ul>
	</nav>

7. 当更新了CCS文件并且重启了Tomcat服务器后，更改后的CSS样式不起作用，记得重启浏览器，清空缓存。

8. 新建和编辑公用一个JSP页面的处理方法：

因为重新编辑一个blog需要保存它的ID传到后台处理，所以我采用了如下方法，当然也可以用路径变量在前台页面加些判断控制，或者在后台controller处理时将ID放到model变量中保存，不过我感觉下面的更简单一点：

前台和后台采用了表单绑定，具体细节可以查看《Sping MVC学习指南》这本书关于表单绑定和表单标签库一节。

blogediter.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!-- 表单标签库 -->
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html>
<head>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
<!-- my personal blog's css file  -->
<link rel="stylesheet" href="/PersonalBlog/resource/blog/myblogstyle.css">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<!-- thinyMCE	 -->
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript">
  tinymce.init({
	    selector: '#blogcontent',
	    theme: 'modern',
	    width: 900,
	    height: 300,
	    plugins: [
	      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
	      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
	      'save table contextmenu directionality emoticons template paste textcolor'
	    ],
	    content_css: 'css/content.css',
	    toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons'
	  });
  </script>
<title>New Blog</title>
</head>
<body >
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
	        	<a class="navbar-brand" href="<c:url value="/"/>">MyBlog</a>
	        </div>
	        <div class="collapse navbar-collapse navbar-ex1-collapse">
	        	<ul class="nav navbar-nav">
	            	<li><a href="#about">About</a></li>
	                <li class="dropdown">
	                	<a href="#services" class="dropdown-toggle" data-toggle="dropdown">Blog<span class="caret"></span></a>
	                	<ul class="dropdown-menu" role="menu">
	                		<li><a href="<c:url value="/findAllBlogs/all/1"/>">All Blogs</a></li>
	                		<li class="divider"></li>
	                		<li><a href="<c:url value="/findAllBlogs/Spring/1"/>">Spring related</a></li>
	                		<li><a href="<c:url value="/findAllBlogs/bootstrap/1"/>">bootstrap</a></li>
	                		<li><a href="<c:url value="/findAllBlogs/mybatis/1"/>">MyBatis</a></li>
	                		<li><a href="<c:url value="/findAllBlogs/java/1"/>">java knowledge</a></li>
	                		<li><a href="<c:url value="/findAllBlogs/web/1"/>">web knowledge</a></li>
	                		<li class="divider"></li>
	                		<li><a href="<c:url value="/findAllBlogs/others/1"/>">others</a></li>
	                	</ul>
	                </li>
	                <li><a href="#contact">Contact</a></li>
	            </ul>
	            <form class="navbar-form navbar-right" role="search" action="<%=basePath%>search">
       				<div class="form-group">
          				<input name="searchKey" type="text" class="form-control" placeholder="Search">
        			</div>
        			<button type="submit" class="btn btn-default">Search</button>
      			</form>
				<ul class="nav navbar-nav navbar-right">
					<li><a class="header-user-name" href="#"><c:out value="${user.userName}"/></a></li>
					<li><a href="<c:url value="/addBlog"/>">New Blog</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="content-top container">
		<div class="row">
			<div class="col-md-6">
				<div class="content">
					<c:url var="saveAndUpdate" value="/saveAndUpdateBlog?blogID=${blog.blogID}" />
					<form:form commandName="blog" role="form" action="${saveAndUpdate}" method="post">
					  <div class="form-group">
					    <label for="blogtitle">Blog Title</label>
					    <form:input path="blogTile" type="text" class="form-control" id="blogtitle" placeholder="Enter title"/>
					  </div>
					  <div class="form-group">
					    <label for="blogtag">Blog Tags</label>
					    <form:input path="blogTags" type="text" class="form-control" id="blogtag" placeholder="Enter tags"/>
					  </div>
					  <div class="form-group">
					    <label for="blogcontent">Blog Content</label>
					    <form:textarea path="blogContent" id="blogcontent" class="form-control" placeholder="Enter content"></form:textarea>
					  </div>
  					  <span><button type="submit" class="btn btn-default btn-sm">Submit</button></span>
					  <span><button type="reset" class="btn btn-default btn-sm">Clear</button></span>
					</form:form>
				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<div class="footer">
			<div class="footer-wrapper">
				<hr><p> © · 2016-2xxx  <a href="#">HouShaoli's Personal Blog</a></p>
			</div>
		</div>
	</div>
</body>
</html>

为什么要将表单标签<form:form>的action关联到一个JSTL标签<c:url>？

首先如果直接在<form:form>的action中按照如下写法：

<form:form commandName="blog"role="form" action="/saveAndUpdateBlog?blogID=${blog.blogID}"method="post">

则请求至后台的http路径会报错如下：

http://localhost:8080/saveAndUpdateBlog?blogID=144(正确应该为http://localhost:8080/PersonalBlog/saveAndUpdateBlog?blogID=144)

并且不允许在<form:form>中添加<%=basePath%>

<form:formcommandName="blog" role="form" action="<%=basePath%>saveAndUpdateBlog?blogID=${blog.blogID}"method="post">

所以采用action关联<c:url>的方法传递ID参数，当然你也可以将ID作为路径变量处理，只不过后台如果你想只用一个controller处理的话，那么你要匹配/add和/update/blogID这两种情况的@RequestMapping参数，即将/add/{blogID设置为0，当为添加的时候}。

controller实现

@RequestMapping(value="/saveAndUpdateBlog")
	public String saveAndUpdateBlog(@RequestParam int blogID, @ModelAttribute Blog blog, RedirectAttributes redirectAttributes){
		
		if(blogID == 0){
			blogMapper.save(blog);	
		}else{
			Map<String, Object> parm = new HashMap<>();
			parm.put("blogID", blogID);
			parm.put("blog", blog);
			blogMapper.update(parm);
		}			
		
		String tags = blog.getBlogTags();
		String[] tagList = tags.split("\\s+");
		
		/**返回前台结果**/
		Map<String, Object> responseParm = new HashMap<>();
		responseParm.put("blog", blog);
		responseParm.put("tagList", tagList);
		
		redirectAttributes.addFlashAttribute("responseParm",responseParm);
		
		return "redirect:/blog/" + blog.getBlogID();
	}

9. basePath的使用：

在<a>的href或者<c:url>的value或者<form>的action中，url地址访问出错，这时候使用basePath都可以解决，其实建议编码刚开始后就加上该参数，一是为了保证编码质量，达到统一的效果，二是防止后期出错浪费不必要的时间，使用方法如下：

10. 前台数据传到后台乱码的问题：

首先背景情况为，我的JSP页面和MySQL中的varchar和TEXT的编码都设置为了UTF-8，可是保存到数据库中的数据还是乱码。我用logger.info方法在controller中打印出日志发现，日志中数据就已经是乱码，这说明在前台传递数据到controller的过程中就已经是乱码，跟数据库无关。