SpringBoot学习(六)——springboot整合后台模板

发布时间:2024-11-18 13:01

springboot整合后台模板

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

选择模板

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

SpringBoot学习(六)——springboot整合后台模板_第1张图片

SpringBoot学习(六)——springboot整合后台模板_第2张图片

SpringBoot学习(六)——springboot整合后台模板_第3张图片

下载后解压,可以得到所有的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; //房间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; // 状态
}

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

/*
 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;

整合Mybatis

SpringBoot学习(六)——springboot整合后台模板_第4张图片

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

AdminMapper

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

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


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>

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

}

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

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

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

之后可以启动查看效果

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

SpringBoot学习(六)——springboot整合后台模板_第5张图片

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

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>

SpringBoot学习(六)——springboot整合后台模板_第6张图片

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号