SpringBoot学习（六）——springboot整合后台模板

springboot整合后台模板

在写web程序的时候，如果我们走后端路线的话，前端还是需要了解的，但是写一个前端页面是非常耗时间的，若果能有一个写好的前端模板，后台只要把数据传到前端就可以使用，就可以节省很多时间。

选择模板

首先，百度后台模板，选择一个合适的模板

下载后解压，可以得到所有的html和css样式

创建项目

创建一个springboot项目，把解压后的文件导入项目中，在resources目录下新建templates文件夹，把所有的html复制到templates下，新建static目录，将css样式，图片等其他文件导入static目录下。

创建实体类

根据前端模板先创建实体类，首先是用户实体类

public class Admin {
    private String userName; //账号
    private String passWord; //密码

    public Admin() {
    }

    public Admin(String userName, String passWord) {
        this.userName = userName;
        this.passWord = passWord;
    }

    public String getUserName() {
        return userName;
    }

    public void setUserName(String userName) {
        this.userName = userName;
    }

    public String getPassWord() {
        return passWord;
    }

    public void setPassWord(String passWord) {
        this.passWord = passWord;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

根据首页展示的房间的信息创建房间实体类

public class Room {
    private int roomId; //房间id
    private String place; //位置
    private String fy;  //房源
    private float fymj;  //房源面积
    private float jzmj;  // 计租面积
    private String type;  // 户型
    private String jzjg;  // 建筑结构
    private String nature; // 租赁性质
    private String status; // 状态
}
1
2
3
4
5
6
7
8
9
10
11

在数据库中添加对应的数据

/*
 Navicat Premium Data Transfer

 Source Server         : localhost_3306
 Source Server Type    : MySQL
 Source Server Version : 80022
 Source Host           : localhost:3306
 Source Schema         : springbootdb

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

 Date: 23/11/2021 10:56:28
*/

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for room
-- ----------------------------
DROP TABLE IF EXISTS `room`;
CREATE TABLE `room`  (
  `room_id` int NOT NULL AUTO_INCREMENT COMMENT 'id',
  `place` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '位置',
  `fy` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '房源',
  `fymj` float NULL DEFAULT NULL COMMENT '房源面积',
  `jzmj` float NULL DEFAULT NULL COMMENT '计租面积',
  `type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '户型',
  `jzjg` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '建筑结构',
  `nature` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '租赁性质',
  `status` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '状态',
  PRIMARY KEY (`room_id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 2 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of room
-- ----------------------------
INSERT INTO `room` VALUES (1, '城中区', '瑞景河畔16号楼1-111', 65.97, 65.97, '一室一厅一卫', '混凝土', '公租房	', '建成待租');

-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (
  `userName` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  `passWord` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('admin', 'admin');

SET FOREIGN_KEY_CHECKS = 1;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

整合Mybatis

application.yml

spring:
  datasource:
    username: root
    password: 123456
    #?serverTimezone=UTC解决时区的报错
    url: jdbc:mysql://localhost:3306/springbootdb?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource
    #Spring Boot 默认是不注入这些属性值的，需要自己绑定
    #druid 数据源专有配置
    initialSize: 5
    minIdle: 5
    maxActive: 20
    maxWait: 60000
    timeBetweenEvictionRunsMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: SELECT 1 FROM DUAL
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true
    #配置监控统计拦截的filters，stat:监控统计、log4j：日志记录、wall：防御sql注入
    #如果允许时报错  java.lang.ClassNotFoundException: org.apache.log4j.Priority
    #则导入 log4j 依赖即可，Maven 地址：https://mvnrepository.com/artifact/log4j/log4j
    filters: stat,wall,log4j
    maxPoolPreparedStatementPerConnectionSize: 20
    useGlobalDataSourceStat: true
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500

mybatis:
  mapper-locations: classpath:Mybatis/mapper/*.xml
  configuration:
    auto-mapping-behavior: partial
    map-underscore-to-camel-case: true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

AdminMapper

@Mapper
public interface AdminMapper {
//    @Select("select * from user where userName = #{userName} and passWord = #{passWord}")
    public Admin login(Admin admin);
}
1
2
3
4
5

在resources文件下新建Mybatis文件夹，再新建mapper文件夹

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.demo.mapper07.AdminMapper">

    <select id="login" resultType="com.example.demo.pojo.Admin" parameterType="com.example.demo.pojo.Admin">
        select * from user where userName = #{userName} and passWord = #{passWord}
    </select>
</mapper>
1
2
3
4
5
6
7
8
9
10

Controller

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

    @Autowired
    private AdminService adminServiceImpl;

    @RequestMapping(value = "/login")
    public String Login(@RequestParam("userEntity.userCode") String userName,
                        @RequestParam("userEntity.password") String passWord,
                        Model model){
        Admin admin = new Admin(userName,passWord);
        try {
            if(adminServiceImpl.login(admin)!=null) {
                return "index";
            }else {
                model.addAttribute("msg","用户名或密码错误");
                return "login";
            }
        } catch (Exception e){
            System.out.println(e);
        }
       return "login";
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在html文件夹下找到登录界面

调用接口，当登录成功时，跳转到主页，当没有查询到用户时，显示用户名或密码错误，在html中添加以下内容显示返回的文字

<p style="color:red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}" ></p>
1

之后可以启动查看效果

在输入错误的用户名和密码后，系统将会清除数据，并提示用户名或密码错误

在输入正确的用户名和密码后进入系统主页，主页显示房间列表

public interface RoomMapper {
    //获取房间列表
    public List<Room> getRoomList();
}
1
2
3
4

@RequestMapping("/house_list")
public String  getRoomList(Model model){
    model.addAttribute("roomList",roomServiceImpl.getRoomList());
    return "house_list";
}
1
2
3
4
5

在html页面接收list

<tr th:each="room:${roomList}">
   <td><input type="checkbox" name="IDCheck" th:value="${room.getRoomId()}" class="acb" /></td>
   <td th:text="${room.getPlace()}"></td>
   <td th:text="${room.getFy()}"></td>
   <td th:text="${room.getFymj()}"></td>
   <td th:text="${room.getJzmj()}"></td>
   <td th:text="${room.getType()}"></td>
   <td th:text="${room.getJzjg()}"></td>
   <td th:text="${room.getNature()}"></td>
   <td th:text="${room.getStatus()}"></td>
   <td>
      <a th:href="@{/house_edit/{id}(id=${room.getRoomId()})}" class="edit" th:text = "a编辑"></a>
      <a th:href="@{/roomDelete/{id}(id=${room.getRoomId()})}" th:text="删除">删除</a>
   </td>

</tr>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16