这一篇将介绍怎样把页面数据保存的MySQL数据库，并将数据库内容展示到页面上。
首先做一个基础工作，添加以下jar到lib：
1: mysql-connector-Java-5.1.40-bin.jar 下载 http://dev.mysql.com/downloads/connector/j/
2: spring-jdbc-4.3.3.RELEASE.jar
3: spring-tx-4.3.3.RELEASE.jar
2和3从spring framework发布包里面找。
继续沿用前面篇节的程序代码。我们开始吧！
一、创建数据库
打开ubuntu终端，输入命令: mysql -u root -p，提示输入用户root的密码后即可进入数据库，你也可用其它有创建数据库权限的用户进入：
创建名为test的schema（数据库）：CREATE SCHEMA `test` DEFAULT CHARACTER SET utf8 ;
完成后进入test数据库：mysql> use test;
创建数据表：
CREATE TABLE `animals` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(45) DEFAULT NULL,
`count` int(11) DEFAULT NULL,
`memo` varchar(45) DEFAULT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `id_UNIQUE` (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
插入几条数据：
INSERT INTO animals(name, count, memo) VALUES('大马猴', 10, '散养');
INSERT INTO animals(name, count, memo) VALUES('小绵阳', 8, '圈养');
INSERT INTO animals(name, count, memo) VALUES('火星猿', 1, '圈养');
用select * from animals;看看结果：
大功告成！
以上所有操作也可通过MysqlWorkbench图形界面来操作完成，界面是这个样子：
二、在Spring中配置MySql数据库
添加以下代码到spring-mvc.xml文件
<context:component-scan base-package="com.zoo.dao"/>
<context:component-scan base-package="com.zoo.service"/>
<!-- 数据源配置 -->
<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">
<property name="driverClassName" value="com.mysql.jdbc.Driver"/>
<property name="url" value="jdbc:mysql://localhost:3306/test?useSSL=true&useUnicode=true&characterEncoding=UTF-8"/>
<property name="username" value="root"/>
<property name="password" value="password"/>
</bean> <bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">
<property name="dataSource" ref="dataSource"></property>
</bean>
解释：
component-scan用于扫描dao包和service包以便让spring对有注解的组件进行配置，比如组件注册，绑定组件（用@Autowired标注的代码）等。
数据源让spring来管理，记得把password改成你自己的哦。重点说一下url属性，格式为 jdbc:mysql://host:port/database?prams，其中host是数据库所在服务器的ip或者名称；port为端口号，默认是3306；使用test数据库（我在我的数据库中创建了一个名叫test的库）；问号后面是各种参数，本例设置了3个。
注意useUnicode和characterEncoding这两个参数，为了确保保存到数据库的字符不出现乱码，记得把它们设置成useUnicode=true&characterEncoding=UTF-8，否则很有可能在开发的时候碰到：页面传到后台程序的字符是正常的，但是保存到数据库就是乱码了。
另外细心的同学已经发现url的字符串里怎么会有”&“，这是因为”&“符号对xml来说是个特殊字符，如果不将其转义为"&"，你会收到一个解析exception，类似这个：org.xml.sax.SAXParseException; lineNumber: 24; columnNumber: 95; 对实体 "characterEncoding" 的引用必须以 ';' 分隔符结尾？
三、添加几个java类
(1)新建三个包：com.zoo.service，com.zoo.service.impl，com.zoo.dao，com.zoo.entity
(2)在com.zoo.entity中添加类AnimalEntity.java，对应数据表内的一条数据，从数据库取出的数据会放在这个类的实例中
package com.zoo.entity;
public class AnimalEntity {
//数据库自动生成的id
private Long id;
//动物名称
private String name;
//动物数量
private Integer count;
//备注
private String memo;
//getters and setters
}
(3)在com.zoo.dao内添加AnimalDAO.java，dao用于操作数据表（增删改查等）
package com.zoo.dao;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;
import com.zoo.entity.AnimalEntity;
@Repository
public class AnimalDAO {
@Autowired
private JdbcTemplate jdbcTmplt;
//从animals表检索出所有数据
public List<AnimalEntity> getAll() {
String sql = "SELECT id, name, count, memo FROM animals";
List<AnimalEntity> list = this.jdbcTmplt.query(sql, new BeanPropertyRowMapper<AnimalEntity>(AnimalEntity.class));
return list;
}
//插入一条数据到animals表
public int insertOne(AnimalEntity entity){
int cnt = this.jdbcTmplt.update("INSERT INTO animals(name, count, memo) VALUES(?, ?, ?)",
entity.getName(), entity.getCount(), entity.getMemo());
return cnt;
}
}
解释：
@Service标注，还记得上面spring-mvc.xml中的context:component-scan么标签？它用于扫描指定包下（含子包）所有带@Component, @Service, @Controller以及@Repository的类，并将其注册到spring容器，以供其它代码使用。spring推荐将@Service用于业务逻辑层，@Controller用于控制层，@Repository用于持久化层。
@Autowired标注的字段，spring容器会自动从已经注册的组件中找到对应的component，并将其绑定。
注意：在getAll方法中我们用到了spring提供的一个非常实用的工具类：BeanPropertyRowMapper，它的作用就是将数据表里每条数据填充到指定类中，用了它好省心呀。注意指定类里的字段和数据表的字段名称要保持一致哦。
(4)在com.zoo.service里添加接口类AnimalService.java，controller会调用service层的方法
package com.zoo.service;
import java.util.List;
import com.zoo.entity.AnimalEntity;
public interface AnimalService {
public List<AnimalEntity> getAllAnimals();
public int insertOne(AnimalEntity entity);
}
(5)在com.zoo.service.impl中添加AnimalService的实现类AnimalServiceImpl.java：
package com.zoo.service.impl;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.zoo.dao.AnimalDAO;
import com.zoo.entity.AnimalEntity;
import com.zoo.service.AnimalService;
@Service
public class AnimalServiceImpl implements AnimalService {
@Autowired
private AnimalDAO dao;
@Override
public List<AnimalEntity> getAllAnimals() {
return dao.getAll();
}
@Override
public int insertOne(AnimalEntity entity) {
return dao.insertOne(entity);
}
}
(6)修改ZooController，定义AnimalService字段并将其标注为自动绑定@Autowired；修改showZooList方法，调用service取出数据库数据
@Autowired
private AnimalService service; @RequestMapping(path = "/list", method = RequestMethod.GET)
public ModelAndView showZooList(){
//从数据库取出数据
List<AnimalEntity> animals = service.getAllAnimals();
ModelAndView mav = new ModelAndView();
mav.setViewName("zoolist");
mav.addObject("animalForm", new AnimalForm());
mav.addObject("animalsList", animals);
return mav;
}
我们调用service的getAllAnimals方法，取得动物列表，并将这个list传递给页面用于展示。
(7)修改zoolist.html，由于我们在页面上一直用的是静态数据，现在有了数据库就可以用动态的了，但是需要修改代码以便显示list中的内容，只修改table那段
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>动物名称</th>
<th>数量</th>
<th>备注</th>
</tr>
</thead>
<tbody th:remove="all-but-first">
<tr th:each="obj, objStat: ${animalsList}">
<td th:text="${objStat.count}">1</td>
<td th:text="${obj.name}">大马猴</td>
<td th:text="${obj.count}">10</td>
<td th:text="${obj.memo}">机灵古怪，俏皮活泼</td>
</tr>
<tr>
<td>2</td>
<td>大熊猫</td>
<td>80</td>
<td>体型笨重，喜欢吃竹子</td>
</tr>
<tr>
<td>3</td>
<td>澳洲羊驼</td>
<td>13</td>
<td>长相奇特，大国人俗称其*</td>
</tr>
<tr>
<td>4</td>
<td>峨眉山猴</td>
<td>90</td>
<td>不怕人，有时候发贱抢游客面包吃</td>
</tr>
</tbody>
</table>
注意：我们在table里增加了thead和tbody标签，用于将table分成两部分；
在tbody标签中的th:remove="all-but-first"，意思是只保留tbody中第一个子标签，其它子标签全都删掉，什么意思呢，让我们先看看tbody里的内容：它有4组tr标签，也就是有4条静态数据，当thymeleaf解析到这里的时候一看有个th:remove="all-but-first"，好吧，它就会把第一组tr保留，剩下的三个给删掉，等下运行画面让你有个直观感受。
th:remove的5个备选值及其含义：
1. all：删除所在的标签以及所在标签的所有子节点
2. body：除所在标签外，删除所有所在标签的子节点
3. tag：删除所在标签，但保留所在标签的子节点
4. all-but-first：删除除所在标签第一个子节点外的所有其他子节点
5. none：不做任何事情，等同于不声明th:remove表达式
<tr th:each="obj, objStat: ${animalsList}">，里面的th:each表达式意思是把${animalList}变量进行迭代，以将list里的所有数据条目显示出来。注意前面的两个变量obj和objStat，obj表示list里面的具体实例，我们这里是AnimalEntity的实例；objStat是一个状态变量，表示迭代的当前状态，这个状态变量包含以下属性，代码中可直接使用：
index：当前迭代的index，从0开始
count：当前迭代的index，从1开始
size：迭代变量所含元素总数
current：表示当前迭代的元素，也就是某个AnimalEntity的实例
even/odd：布尔值，表示当前迭代是奇数还是偶数
first：布尔值，表示当前迭代是不是第一条记录
last：布尔值，表示当前迭代是不是最后一条记录
我们运行tomcat看看：
ok，一切正常，是我们想要的结果。
这个过程中你是否感受到了thymeleaf不同于其它template(比如jsp，freeMarker，volecity等)的地方？
thymeleaf同一个页面既可用于展示静态数据也可以用于运行动态数据。
如果把th:remove去掉会是怎样的效果呢：
嗯，聪明的你看懂了吧！有兴趣你还可以试一试th:remove其它的值。
ok，接下来我们制作最后一个步骤：插数据库。
四、保存数据到数据库
修改ZooCotroller，增加copyDataFromForm2Entity方法将form里的数据copy到entity中；
在doAdd方法中调用service的insertOne方法保存数据；
完整代码：
package com.zoo.web.controller; import java.util.List; import javax.validation.Valid; import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView; import com.zoo.entity.AnimalEntity;
import com.zoo.service.AnimalService;
import com.zoo.web.form.AnimalForm; @Controller
public class ZooController { @Autowired
private AnimalService service; @RequestMapping(path = "/list", method = RequestMethod.GET)
public ModelAndView showZooList(){
//从数据库取出数据
List<AnimalEntity> animals = service.getAllAnimals();
ModelAndView mav = new ModelAndView();
mav.setViewName("zoolist");
mav.addObject("animalForm", new AnimalForm());
mav.addObject("animalsList", animals);
return mav;
} @RequestMapping(path = "/list", params = {"save"}, method = RequestMethod.POST)
public String doAdd(Model model, @Valid AnimalForm form, BindingResult result){
if(result.hasErrors()){
model.addAttribute("MSG", "出错啦！");
}else{
//保存数据到数据库
service.insertOne(this.copyDataFromForm2Entity(form));
model.addAttribute("MSG", "提交成功！");
}
//从数据库取出数据
List<AnimalEntity> animals = service.getAllAnimals();
model.addAttribute("animalsList", animals);
return "zoolist";
} //把form里的数据copy到entity中
private AnimalEntity copyDataFromForm2Entity(AnimalForm form){
AnimalEntity entity = new AnimalEntity();
entity.setName(form.getOname());
entity.setCount(Integer.valueOf(form.getOcount()));
entity.setMemo(form.getMemo());
return entity;
}
}
删除之前的system.out.print语句，在数据保存后，需要重新从数据库选出数据以刷新画面。
试一试吧！
嗯，这说明页面的数据已经保存到了数据库。聪明的你一定做出来了吧！
我们这个主题的实例小制作也就结束了，希望这些代码能让你对springMVC+thymeleaf+mysql有所了解，那我也就开心了！
末语：
在这个实例中，我仅简单的介绍了最基本的一些用法，希望能帮助到你们。本人水平有限，也只能写成这样了，如果哪里写错了请毫无保留的披头盖脸的向我指出来，在下必虚心改之！
springMVC和thymeleaf都是非常优秀的开源项目，而且相应的文档也很详细，如果大家遇到了问题，请先查阅文档以及API，应该会让你找到答案的。
END.