springboot+mybatis+thymeleaf+ajax+mysql实现异步获取数据

springboot+mybatis+thymeleaf+ajax+mysql实现异步获取数据

配置所需要的pom文件

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.0</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

配置application.properties文件

 #项目端口号
 server.port=8080
#开启mybatis二级缓存
mybatis.configuration.cache-enabled=true

spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/super
spring.datasource.username=root
spring.datasource.password=root
#控制台打印sql
logging.level.com.example.demo.mapper=debug

#模板模式,支持HTML,XML,TEXT,JAVASCRIPT
spring.thymeleaf.mode=HTML5
#编码格式 可以不用配置
spring.thymeleaf.encoding=utf-8
#内容类别 可不用配置
spring.thymeleaf.servlet.content-type=text/html
#开发配置为false 避免修改模板还要重启服务器
spring.thymeleaf.cache=false
#配置模板路径,默认是templates下 可以不用配置
spring.thymeleaf.prefix=classpath:/templates/
#配置后缀名
spring.thymeleaf.suffix=.html

在springboot入口类配置扫描mapper

@SpringBootApplication
@MapperScan("com.mapper")
public class SpringThymeleafApplication {
    public static void main(String[] args) {
        SpringApplication.run(SpringThymeleafApplication.class, args);
    }
}

如果需要缓存数据,则实体类需要实现序列化

public class User implements Serializable {

    private int id;

    private String name;

    private int sex;


    public User(int id, String name, int sex) {
        this.id = id;
        this.name = name;
        this.sex = sex;
    }

    public User() {
    }

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getSex() {
        return sex;
    }

    public void setSex(int sex) {
        this.sex = sex;
    }

    @Override
    public boolean equals(Object o) {
        if (this == o) return true;
        if (o == null || getClass() != o.getClass()) return false;
        User user = (User) o;
        return id == user.id &&
                sex == user.sex &&
                Objects.equals(name, user.name);
    }

    @Override
    public int hashCode() {
        return Objects.hash(id, name, sex);
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", sex=" + sex +
                '}';
    }
}

mybatis二级缓存是基于mapper文件,只需要在接口上加注解就OK

@Mapper
/*开启二级缓存*/
@CacheNamespace
public interface UserMapper {

    @Select("select * from user")
    List<User> getList();

    @Insert("insert into user(name,sex)values(#{name},#{sex})")
    int  save(User user);
}

controller控制跳转页面和返回数据,如果mapper注入报错,只需要把SpringIoc的拼写检查去掉就好

@Controller
@RequestMapping("/user")
public class UserController {

    @Autowired
    UserMapper userMapper;

    @GetMapping("/get")
    public String get(){
        return "show";
    }

    @GetMapping("/getList")
    public String  getList(Model model){
        List<User> list = userMapper.getList();
        model.addAttribute("list",list);
        /*show 是返回的试图,div1是要渲染的DOM*/
        return "show::div1";
    }

    @GetMapping("/save")
    public @ResponseBody
    String save(User user){
        String msg=userMapper.save(user)>0?"添加成功":"添加失败";
        return msg;
    }
}

最后就是通过thymeleaf渲染页面,thymeleaf类似于JSP,可以通过表达式取值和做一些逻辑判断

<!DOCTYPE html>
 <!--是Thyme leaf 命名空间，通过引入该
 命名空间就可以在HTML 文件中使用Thymeleaf 标签语言，用关键字“ th ” 来标注。-->
<html  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Show User</title>
    <script type="text/javascript" th:src="@{/jquery.min.js}"></script>
    <script type="text/javascript">
        $(function () {
            $("#get").click(function () {
                $.ajax({
                    url:"/user/getList",
                    type:"get",
                    success:function (data) {
                        $("#div1").html(data);
                    }
                });
            });
        });
    </script>
</head>
<body>
   <input type="button" value="获取数据" id="get">
   /*th:fragment是刚才controller返回的容器,通过ajax把数据给到这个容器*,然后通过thymeleaf渲染即可/
       <table border="1" th:width="500" id="div1" th:fragment="div1">
           <tr>
             <td>编号</td>
             <td>姓名</td>
             <td>性别</td>
           </tr>
           <tr th:each="user:${list}">
               <td th:text="${user.id}"></td>
               <td th:text="${user.name}"></td>
               <td th:text="${user.sex eq 0?'男':'女'}"></td>
           </tr>
       </table>
</body>
</html>

下面是我的数据表结构,比较简单

/*
 Navicat Premium Data Transfer

 Source Server         : demo
 Source Server Type    : MySQL
 Source Server Version : 50726
 Source Host           : localhost:3306
 Source Schema         : super

 Target Server Type    : MySQL
 Target Server Version : 50726
 File Encoding         : 65001

 Date: 01/08/2019 14:02:58
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL,
  `sex` int(11) NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 8 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, '小明', 0);
INSERT INTO `user` VALUES (2, '小红', 1);
INSERT INTO `user` VALUES (3, '小白', 0);
INSERT INTO `user` VALUES (4, '小黄', 1);
INSERT INTO `user` VALUES (5, '小绿', 0);
INSERT INTO `user` VALUES (6, '小小', 0);
INSERT INTO `user` VALUES (7, '大大', 0);

SET FOREIGN_KEY_CHECKS = 1;

最后就是我的项目结构图