springboot+mybatis+thymeleaf项目搭建及前后端交互-白红宇

springboot+mybatis+thymeleaf项目搭建及前后端交互

阅读量：6440 次

发布时间：2019-06-23

本文共 10852 字，大约阅读时间需要 36 分钟。

前言

spring boot简化了spring的开发, 开发人员在开发过程中省去了大量的配置, 方便开发人员后期维护.

使用spring boot可以快速的开发出restful风格微服务架构.

本文将详细的介绍如何搭建一套spring boot 项目, 实现前后端交互.

开发工具 : IDEA , jdk 8 , mysql

开发完成后目录截图 :

一. 新建项目

file-new-project-Spring Initializr

Project SDK选择JDK1.8, 后面直接下一步就可以

项目新建完成, 我们可以看到初始的目录结构, 修改pom.xml, 配置上项目开发需要的包. xml配置如下 :


     
         
      
       4.0.0
          
      
       com.example
          
      
       demo
          
      
       0.0.1-SNAPSHOT
          
      
       jar
          
      
       demo
          
      
       Demo project for Spring Boot
          
              
       
        org.springframework.boot
               
       
        spring-boot-starter-parent
               
       
        2.0.6.RELEASE
               
        
           
          
              
       
        UTF-8
               
       
        UTF-8
               
       
        1.8
           
          
              
                   
        
         org.springframework.boot
                    
        
         spring-boot-starter-web
                
               
                   
        
         org.springframework.boot
                    
        
         spring-boot-starter-test
                    
        
         test
                
               
                   
        
         org.springframework.boot
                    
        
         spring-boot-starter-logging
                
               
                   
        
         org.mybatis.spring.boot
                    
        
         mybatis-spring-boot-starter
                    
        
         1.1.1
                
               
                   
        
         mysql
                    
        
         mysql-connector-java
                    
        
         5.1.21
                
               
                   
        
         org.springframework.boot
                    
        
         spring-boot-starter-thymeleaf
                
           
          
              
                   
                        
         
          org.springframework.boot
                         
         
          spring-boot-maven-plugin

修改application.properties 配置文件, 连接数据库.

spring.datasource.url=jdbc:mysql://localhost:3306/test?useUnicode=true&&characterEncoding=utf8spring.datasource.username=rootspring.datasource.password=123456spring.datasource.driver-class-name=com.mysql.jdbc.Driverspring.thymeleaf.encoding=utf-8spring.thymeleaf.cache=falsespring.thymeleaf.mode=html5

二.项目开发

1.新建bo包, 存放实体类bean.

2.新建controller包, 存放控制层类.

3.新建dao包, 存放操作类.

4.新建service包, 存放服务接口类和实现类.

新建完成, 项目结构如下图:

项目包新建完毕, 首先我们新增实体类, UserInfo

package com.example.bo;public class UserInfo {    private String psname;    private String cardno;    private int id;    public void setId(int id) {        this.id = id;    }    public void setCardno(String cardno) {        this.cardno = cardno;    }    public void setPsname(String psname) {        this.psname = psname;    }    public String getPsname() {        return psname;    }    public String getCardno() {        return cardno;    }    public int getId() {        return id;    }}

在我们之前新建的接口包里新增接口IUserInterFace , 新建接口实现类UserInterFace, 实现人员信息的查询, 新增, 修改, 删除. 实现类代码如下:

package com.example.service.impl;import com.example.bo.UserInfo;import com.example.dao.UserDao;import com.example.service.IUserInterFace;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import org.slf4j.LoggerFactory;import org.slf4j.Logger;import java.util.List;@Servicepublic class UserInterFace implements IUserInterFace {    private final Logger log = LoggerFactory.getLogger(UserInterFace.class);    @Autowired UserDao ud;    @Override    public UserInfo getUserByCardno(String cardno){        return ud.getUserByCardno(cardno);    }    @Override    public UserInfo getUserById(int id){        return ud.getUserById(id);    }    @Override    public int getIntUser() {        return 0;    }    @Override    public int insertUser(String cardno , String psname){        log.info("UserInterFace insertUser info log start");        return ud.insertUser(cardno,psname);    }    @Override    public List
     
       getAllUser(){        log.info("UserInterFace getAllUser info log start");        return ud.getAllUser();    }    @Override    public int deleteById(int id){        log.info("UserInterFace deleteById info log start");        return ud.deleteById(id);    }    @Override    public int updateById(int id , String cardno , String psname){        log.info("UserInterFace updateById info log start");        return ud.updateByid(id,cardno,psname);    }}

注意: 接口实现类, 调用了DAO层的方法, 在dao包下新建UserDao类 , 实现与数据库的交互, 代码如下 :

package com.example.dao;import com.example.bo.UserInfo;import org.apache.ibatis.annotations.*;import java.util.List;@Mapperpublic interface UserDao {    /**     * 通过主键id号码查询人员信息     */    @Select("select * from person where id = #{id}")    UserInfo getUserById(@Param("id") int id);    /**     * 通过身份证号码查询人员信息     */    @Select("select * from person where cardno = #{cardno}")    UserInfo getUserByCardno(@Param("cardno") String cardno);    /**     * 新增人员信息     */    @Insert("insert into person(cardno,psname) values(#{cardno},#{psname})")    int insertUser(@Param("cardno") String cardno, @Param("psname") String psname);    /**     * 查询所有人员信息     */    @Select("select * from person")    List
     
       getAllUser();    /**     * 通过id删除人员信息     */    @Delete("delete from person where id = #{id}")    int deleteById(@Param("id") int id);    @Update("update person set cardno=#{cardno},psname=#{psname} where id=#{id}")    int updateByid(@Param("id") int id , @Param("cardno") String cardno,@Param("psname") String psname);}

在controller包中, 新建测试类去调用接口, 测试能不能查到数据. 测试类代码如下:

package com.example.controller; import com.example.service.IUserInterFace; import com.example.bo.UserInfo; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import java.util.List; @Controller @RequestMapping(value = "/test") public class TestUserController {
       private final Logger log = LoggerFactory.getLogger(TestUserController.class);     @Autowired     private IUserInterFace iuser;     @RequestMapping("/num")     @ResponseBody     int home(){
           int i = iuser.getIntUser();         return i;     }     @RequestMapping("/getUser")     @ResponseBody     List
     
       getUser(){
           //打印日志         log.info("TestUserController getUser info");         return iuser.getAllUser();     } }

修改 , 新建项目时生成的DemoApplication类,启动项目,修改代码如下:

package com.example;import org.springframework.boot.SpringApplication;import org.springframework.boot.autoconfigure.EnableAutoConfiguration;import org.springframework.context.annotation.ComponentScan;@EnableAutoConfiguration@ComponentScan(basePackages={"com.example"})public class DemoApplication {    public static void main(String[] args) {        SpringApplication.run(DemoApplication.class, args);    }}

项目启动完成, 我们在网页输入 http://localhost:8080/test/getUser , 既可以查到数据如下 :

至此, 项目已经可以从数据库查询数据返回到页面, 但是返回的是一串字符. 我们如何让返回的数据在页面以列表形式展示, 而且在页面可以直接进行增删改查操作呢? 这就是我们接下来要说的了.

首先在配置文件引入如下包, 最上面的配置文件里面已经引入 .


        
     
      org.springframework.boot
         
     
      spring-boot-starter-thymeleaf

然后在/resources/templates文件夹下面新建我们需要的页面. 新建common文件夹,存放公共的页面, 新建user文件夹, 存放人员相关页面. 新建公共页面success.html做为操作成功提示页面.

新建form.html提交页面, userlist.html列表展示页面, userview.html详细信息展示页面. 新建完目录如下 :

页面代码如下 :

form.html

userlist.html

    
         Content
         
              新建用户    
     
     
                                             id                     名字                     证件号码                     管理                
                                                                                               删除

userview.html

至此, 页面新增完成 , 我们需要新增ThymeleafUserController类, 来与页面实现交互

package com.example.controller;import com.example.bo.UserInfo;import com.example.service.IUserInterFace;import org.slf4j.LoggerFactory;import org.slf4j.Logger;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Controller;import org.springframework.ui.Model;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.bind.annotation.PathVariable;import org.springframework.web.bind.annotation.PostMapping;import org.springframework.web.bind.annotation.RequestMapping;@Controller@RequestMapping(value = "/user")public class ThymeleafUserController {    private final Logger log = LoggerFactory.getLogger(ThymeleafUserController.class);    @Autowired    private IUserInterFace iuser;    @GetMapping("/userlist")    public String userList(Model model){        //打印日志        log.info("ThymeleafUserController userList info log start");        model.addAttribute("contents",iuser.getAllUser());        return "/user/userlist";    }    @GetMapping("/form")    public String form(Model model){        log.info("ThymeleafUserController form info log start");        model.addAttribute("user" , new UserInfo());        return "/user/form";    }    @GetMapping("{id}")    public String userview(@PathVariable("id") int id , Model model){        UserInfo user = iuser.getUserById(id);        model.addAttribute("user",user);        return "/user/userview";    }    @PostMapping    public String saveUser(UserInfo user){        log.info("ThymeleafUserController saveUser info log start");        if(user.getId()==0){            iuser.insertUser(user.getCardno(),user.getPsname());        }else{            int a = iuser.updateById(user.getId(),user.getCardno(),user.getPsname());        }        return "/common/success";    }    @GetMapping(value = "edit/{id}")    public String editForm(@PathVariable("id") int id , Model model){        log.info("ThymeleafUserController editForm info log start");        UserInfo user = iuser.getUserById(id);        model.addAttribute("user" , user);        return "/user/form";    }    @GetMapping(value = "delete/{id}")    public String delete(@PathVariable("id") int id){        iuser.deleteById(id);        return "/common/success";    }}

启动项目, 输入网址 http://localhost:8080/user/userlist 查询数据, 显示列表 :