Spring Boot 整合layui
- 一、Spring Boot项目搭建
- 二、前端搭建
- 三、666666.彩蛋
一、Spring Boot项目搭建
🚄忘记搭建Spring Boot项目的上车
二、前端搭建
🕐layui介绍
- layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。
- 她更多是为后端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
- B话少说直接上手
🕑实战上手layui
- 下载layui资源包到本地---->解压---->copy…
- 在项目resources下创建Static放入css、js包
🕒搭建后台主页面
1.把后台页面源码copy到项目的index.html中
-----网页地址
2.修改index.html的css/js引用路径
- 声明页面支持thymeleaf模板引擎
<html xmlns:th="http://www.thymeleaf.org">
- 使用thymeleaf的方法去访问资源路径
<script th:src="@{/layui/layui.js}" charset="utf-8" />
3.配置热加载不需要重启项目
- 添加pom依赖
<!-- devtools -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
- 点击IDEA ->File ->Settungs ->Build,Execution,Deplyment ->Compiler如下图所示:
4.静态修改左边导航页
5.在内容主体区域嵌入html模块
<li class="layui-nav-item layui-nav-itemed">
<a class="" href="javascript:;">常用功能</a>
<dl class="layui-nav-child">
<dd><a href="/Course/list" target="content_iFrm">设备订单</a></dd>
<dd><a href="/Stuinfo/list" target="content_iFrm">员工信息</a></dd>
</dl>
</li>
- href="/Course/list" 指向Controller层返回的页面地址
- target=“content_iFrm” 指向内容主体区域
6.给功能模块添加数据表格
layui数据表格页面
注意:启动后会有一个冲突异常
Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.
Sat Jan 30 13:57:16 CST 2021
There was an unexpected error (type=Internal Server Error, status=500).
An error happened during template parsing (template: "class path resource [templates/courseorder/list.html]")
org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/courseorder/list.html]")
解决方法
1.把cols: [[ ]]换成
[
[
]
]
因为[[....]]之间的表达式在thymelear被认为是内联表达式,所以渲染错误
然后访问一下页面就可以了如下图所示:
7.实现数据接口
- 实现数据(创建数据库添加字段以及数据)
- 修改表格列标题修改
- Mapper,Serivce,Controller (MVC搭建)
- Model
- CourseOrder.java
- Mapper(dao)
- CourseOrderMapper.java
- findCountByMap(Map<String,object map>);
- findCourseOrderListByMap(Map<String,object map> map);
- CourseOrderMapper.xml
- Service
- ICourseOrderService.java
- impl.CourseOrderServiceimpl.java
- Controller
- IndexController.java
- CourseOrderController.java
使用测试工具测试数据:
三、666666.彩蛋
CourseOrder.java:
package com.example.crm.model;
@Data
public class CourseOrder implements Serializable {
private String Name; // 名称
private Integer Gender; // 性别
private Date Dirthday; // 出生年龄
private String Code;// 编号
private Date inDay;// 入职时间
private Date gmtCreate;// 创建时间
private Date gmtModify;// 结束时间
PageBean:
package com.example.crm.model;
import com.github.pagehelper.Page;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
/**
* 分页实体类.
*
* @author: zhuwenjie
* @date: 2019/9/27
*/
public class PageBean<T> implements Serializable {
private static final long serialVersionUID = 8656597559014685635L;
private long total; //总记录数
private List<T> list; //结果集
private int pageNum; // 第几页
private int pageSize; // 每页记录数
private int pages; // 总页数
private int size; // 当前页的数量 <= pageSize
/**
* 包装Page对象,因为直接返回Page对象,在JSON处理以及其他情况下会被当成List来处理,
* 而出现一些问题。
*
* @param list page结果
*/
public PageBean(List<T> list) {
if (list instanceof Page) {
Page<T> page = (Page<T>) list;
this.pageNum = page.getPageNum();
this.pageSize = page.getPageSize();
this.total = page.getTotal();
this.pages = page.getPages();
this.list = page;
this.size = page.size();
}
}
public PageBean(List<T> list,Page page) {
if (list instanceof ArrayList) {
this.pageNum = page.getPageNum();
this.pageSize = page.getPageSize();
this.total = page.getTotal();
this.pages = page.getPages();
this.list = list;
this.size = page.size();
}
}
public PageBean() {
}
public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
public List<T> getList() {
return list;
}
public void setList(List<T> list) {
this.list = list;
}
public int getPageNum() {
return pageNum;
}
public void setPageNum(int pageNum) {
this.pageNum = pageNum;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
public int getPages() {
return pages;
}
public void setPages(int pages) {
this.pages = pages;
}
public int getSize() {
return size;
}
public void setSize(int size) {
this.size = size;
}
}
CourseOrderMapper :
package com.example.crm.mapper;
import com.example.crm.model.CourseOrder;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;
import java.util.Map;
public interface CourseOrderMapper extends Mapper{
public int findCountByMap(Map<String,Object> map);
public List<CourseOrder> findCourseOrderListByMap(Map<String,Object> map);
}
CourseOrderMapper.xml:
<?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.crm.mapper.CourseOrderMapper">
<select id="findCountByMap" parameterType="map" resultType="int">
select count(*) from patient;
</select>
<select id="findCourseOrderListByMap" parameterType="map" resultType="com.example.crm.model.CourseOrder">
select id,name,gender as Gender,hospital_id as Code,birthday as Dirthday,in_day as inDay,gmt_create as gmtCreate,gmt_modify as gmtModify from patient
<if test="name != null">
<where>
name like concat('%',#{conditon.name},'%')
</where>
</if>
order by in_day desc limit #{start},#{pageSize};
</select>
</mapper>
ICourseOrderService:
package com.example.crm.service;
import com.example.crm.model.CourseOrder;
import com.example.crm.model.PageBean;
public interface ICourseOrderService {
public PageBean<CourseOrder> findPageResultBy(CourseOrder conditon,int page,int pageSize);
}
CourseOrderServiceimpl:
package com.example.crm.service.impl;
import com.example.crm.mapper.CourseOrderMapper;
import com.example.crm.model.CourseOrder;
import com.example.crm.model.PageBean;
import com.example.crm.service.ICourseOrderService;
import com.github.pagehelper.Page;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
@Service
public class CourseOrderServiceimpl implements ICourseOrderService {
@Autowired
CourseOrderMapper courseMapper;
@Override
public PageBean<CourseOrder> findPageResultBy(CourseOrder conditon, int page, int pageSize) {
PageBean<CourseOrder> result = new PageBean<CourseOrder>();
Map<String,Object> Map = new HashMap<String,Object>();
Map.put("start",(page-1) * pageSize);
Map.put("pageSize",pageSize);
Map.put("conditon",conditon);
//获取总记录数据
int totalCount = courseMapper.findCountByMap(Map);
result.setPageSize(totalCount);
//获取员工数据列表
List<CourseOrder> courselist = courseMapper.findCourseOrderListByMap(Map);
result.setList(courselist);
//返回结果集
return result;
}
}
IndexController:
package com.example.crm.controller;
@Controller
public class IndexController {
@RequestMapping("/index")
public String testindex() {
return "index";
}
@RequestMapping("/Course/list")
public String list() {
return "courseorder/list";
}
}
CourseOrderController:
package com.example.crm.controller;
@RestController
@RequestMapping("/Course")
public class CourseOrderController {
private static final Logger log = LoggerFactory.getLogger(CourseOrderController.class);
//员工信息
@Autowired
private CourseOrderServiceimpl courseService;
//查询员工信息
@RequestMapping("/Courselist")
public Map<String, Object> Courselist(CourseOrder courseOrder, PageBean page) {
Map<String, Object> map = new HashMap<>();
try {
if(courseOrder != null){
map.put("countCourse",courseService.findPageResultBy(courseOrder,page.getPages(),page.getPageSize()));
map.put("msge",1);
}
} catch (Exception e) {
e.printStackTrace();
log.error("员工数据查询异常", e);
}
return map;
}
}
CrmApplication:
package com.example.crm;
@SpringBootApplication
@MapperScan(basePackages = {"com.example.crm.mapper"})
public class CrmApplication {
public static void main(String[] args) {
SpringApplication.run(CrmApplication.class, args);
}
}
application.properties:
#访问本地端口号
server.port = 8888
#mysql连接参数
spring.datasource.url = jdbc:mysql://localhost:3306/hospital?characterEncoding=utf8&&serverTimezone=Asia/Shanghai&&useSSL=false
spring.datasource.username = root
spring.datasource.password = 123
spring.datasource.driverClassName = com.mysql.cj.jdbc.Driver
#mybatis配置
mybatis.type-aliases-package = com.example.crm.model
mybatis.mapper-locations = classpath:/mybatis/*.xml
#页面热加载
spring.thymeleaf.cache = false
pom.xml:
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.example</groupId>
<artifactId>crm</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>crm</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.2.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<dependencies>
<!-- thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- web-services -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web-services</artifactId>
</dependency>
<!-- mysql -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<!-- test -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- mybatis -->
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.1.1</version>
</dependency>
<!--<!– mybatis plus 代码生成器 –>-->
<!-- <dependency>-->
<!-- <groupId>com.baomidou</groupId>-->
<!-- <artifactId>mybatis-plus-boot-starter</artifactId>-->
<!-- <version>3.2.0</version>-->
<!-- </dependency>-->
<!-- <dependency>-->
<!-- <groupId>com.baomidou</groupId>-->
<!-- <artifactId>mybatis-plus-generator</artifactId>-->
<!-- <version>3.2.0</version>-->
<!-- </dependency>-->
<!-- devtools -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
<!-- pagehelper -->
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>5.1.1</version>
</dependency>
<!-- 异常判断lang3 -->
<dependency>
<groupId>org.apache.commons</groupId>
<artifactId>commons-lang3</artifactId>
<version>3.9</version>
</dependency>
<!-- 数据连接配置 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.10</version>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
</dependencies>
</project>
补充:GIT操作指令团队开发pull,push
- Git status #查找出现异常的位置
- Git log #查询历史记录
- Git add ./路径 #添加指定文件
- Git commit -m ‘备注XXXX’ #添加到本地
- Git push origin master #push到远程库