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;}
}

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

public class Room {private int roomId; //房间idprivate String place; //位置private String fy;  //房源private float fymj;  //房源面积private float jzmj;  // 计租面积private String type;  // 户型private String jzjg;  // 建筑结构private String nature; // 租赁性质private String status; // 状态
}

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

/*Navicat Premium Data TransferSource Server         : localhost_3306Source Server Type    : MySQLSource Server Version : 80022Source Host           : localhost:3306Source Schema         : springbootdbTarget Server Type    : MySQLTarget Server Version : 80022File Encoding         : 65001Date: 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;

整合Mybatis

application.yml

spring:datasource:username: rootpassword: 123456#?serverTimezone=UTC解决时区的报错url: jdbc:mysql://localhost:3306/springbootdb?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8driver-class-name: com.mysql.cj.jdbc.Drivertype: com.alibaba.druid.pool.DruidDataSource#Spring Boot 默认是不注入这些属性值的，需要自己绑定#druid 数据源专有配置initialSize: 5minIdle: 5maxActive: 20maxWait: 60000timeBetweenEvictionRunsMillis: 60000minEvictableIdleTimeMillis: 300000validationQuery: SELECT 1 FROM DUALtestWhileIdle: truetestOnBorrow: falsetestOnReturn: falsepoolPreparedStatements: true#配置监控统计拦截的filters，stat:监控统计、log4j：日志记录、wall：防御sql注入#如果允许时报错  java.lang.ClassNotFoundException: org.apache.log4j.Priority#则导入 log4j 依赖即可，Maven 地址：https://mvnrepository.com/artifact/log4j/log4jfilters: stat,wall,log4jmaxPoolPreparedStatementPerConnectionSize: 20useGlobalDataSourceStat: trueconnectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500mybatis:mapper-locations: classpath:Mybatis/mapper/*.xmlconfiguration:auto-mapping-behavior: partialmap-underscore-to-camel-case: true

AdminMapper

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

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapperPUBLIC "-//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>

Controller

@Controller
@RequestMapping("/user")
public class AdminController {@Autowiredprivate 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";}}

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

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

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

之后可以启动查看效果

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

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

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

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

在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>