SpringMVC4+thymeleaf3的一个简单实例（篇五：页面和MySql的数据交互-展示以及存储）

这一篇将介绍怎样把页面数据保存的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&amp;useUnicode=true&amp;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.