【自用 不全面】
这一期用到的技术栈有ssm，mybatis-plus，junit4，maven视图层 thymeleaf
记录一点可以复用的配置吧，这些都是新建项目时必须关注的：
一、之后可复用的配置
- maven一开始要引入的包–6个初始化的时候勾选+mybatis-plus+junit
<?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>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.0</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.kkex</groupId>
<artifactId>community</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>community</name>
<description>community</description>
<properties>
<java.version>17</java.version>
</properties>
<dependencies>
<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.2.2</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.13</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.5.1</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
- 数据库连接 配置
application.yml
spring:
application:
name: community
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/community?useUnicode=true&characterEncoding=utf8&useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=GMT%2B8
username: root
password: 123456
server:
port: 8080
mvc的三层已经不需要note了。。
比较不熟的有thymeleaf视图层。
二、thymeleaf视图层修改要点
-
相对路径的处理
对于相对路径都需要这样处理
-
帖子列表从静态变成动态（循环）
原代码：
<!-- 帖子列表 -->
<ul class="list-unstyled">
<li class="media pb-3 pt-3 mb-3 border-bottom">
<a href="site/profile.html">
<img src="http://images.nowcoder.com/head/1t.png" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
</a>
<div class="media-body">
<h6 class="mt-0 mb-3">
<a href="site/discuss-detail.html">备战春招，面试刷题跟他复习，一个月全搞定！</a>
<span class="badge badge-secondary bg-primary">置顶</span>
<span class="badge badge-secondary bg-danger">精华</span>
</h6>
<div class="text-muted font-size-12">
<u class="mr-3">寒江雪</u> 发布于 <b>2019-04-15 15:32:18</b>
<ul class="d-inline float-right">
<li class="d-inline ml-2">赞 11</li>
<li class="d-inline ml-2">|</li>
<li class="d-inline ml-2">回帖 7</li>
</ul>
</div>
</div>
</li>
</ul>
改后：
引入模版引擎
<html lang="en" xmlns:th="http://www.thymeleaf.org">
相对路径的修改（举例）：
<link rel="stylesheet" th:href="@{/css/global.css}" />
<script th:src="@{/js/global.js}"></script>
<script th:src="@{/js/index.js}"></script>
说明： 对于链接(比如href标签)，使用链接表达式:
@{…}
帖子列表：
定义变量名为map
th:each="map:${discussPosts}
<!-- 帖子列表 -->
<ul class="list-unstyled">
<li class="media pb-3 pt-3 mb-3 border-bottom" th:each="map:${discussPosts}">
<a href="site/profile.html">
<img th:src="${map.user.headerUrl}" class="mr-4 rounded-circle" alt="用户头像" style="width:50px;height:50px;">
</a>
<div class="media-body">
<h6 class="mt-0 mb-3">
<a href="#" th:utext="${map.post.title}">备战春招，面试刷题跟他复习，一个月全搞定！</a>
<span class="badge badge-secondary bg-primary" th:if="${map.post.type==1}">置顶</span>
<span class="badge badge-secondary bg-danger" th:if="${map.post.status==1}">精华</span>
</h6>
<div class="text-muted font-size-12">
<u class="mr-3" th:utext="${map.user.username}">寒江雪</u> 发布于 <b th:text="${#dates.format(map.post.createTime,'yyyy-MM-dd HH:mm:ss')}">2019-04-15 15:32:18</b>
<ul class="d-inline float-right">
<li class="d-inline ml-2">赞 11</li>
<li class="d-inline ml-2">|</li>
<li class="d-inline ml-2">回帖 7</li>
</ul>
</div>
</div>
</li>
</ul>
三、分页要点
- Model中封装Page类
package com.example.community.model;
/**
* @program: community
* @description: 封装分页相关的信息
* @author: zjx
* @create: 2022-05-22 23:27
**/
public class Page {
//当前页码
private int current=1;
//显示上限
private int limit=10;
//数据总数（用于计算总页数）
private int rows;
//查询路径(用于复用分页链接）
private String path;
private int totalPage=this.getTotalPage();
public int getCurrent() {
return current;
}
public void setCurrent(int current) {
if(current>=1)
this.current = current;
}
public int getLimit() {
return limit;
}
public void setLimit(int limit) {
if(limit>=1&&limit<=100)
this.limit = limit;
}
public int getRows() {
return rows;
}
public void setRows(int rows) {
if(rows>=0)
this.rows = rows;
}
public String getPath() {
return path;
}
public void setPath(String path) {
this.path = path;
}
/**
* 获取当前页的起始行
*/
public int getOffset(){
return (current-1)*limit;
}
/**
* 获取总页数
*/
public int getTotalPage(){
if(rows%limit==0){
return rows/limit;
}
else{
return rows/limit+1;
}
}
/**
* 获取起始页码(显示的tag的范围）
*/
public int getFrom(){
int from=current-2;
return Math.max(from, 1);
}
/**
* 获取终止页码
*/
public int getTo(){
int to=current+2;
return Math.min(to, getTotalPage());
}
}
- Controller类
Page类会被Spring MVC自动实例化，并将Page注入到Model中。（所有实体类都会做这样的处理）
/**
* @program: community
* @description: 首页。这个controller没有指定路径
* @author: zjx
* @create: 2022-05-22 20:15
**/
@Controller
public class HomeController {
@Resource
private DiscussPostService discussPostService;
@Resource
private UserService userService;
//使用userService，这样查到的数据就全面了
@GetMapping("/index") //响应的是网页，所以不需要用ResponseBody注解
public String getIndexPage(Model model, Page page){//String是视图的名字
// 方法调用前，SpringMVC会自动实例化Model和Page，并将Page注入Model (MVC之妙)
//所以，在thymeleaf中可以直接访问Page对象中数据
//服务器也要给page设置一点值
page.setRows(discussPostService.findDiscussPostRows(0));
page.setPath("/index");
List<DiscussPost> list = discussPostService.findDiscussPosts(0, page.getOffset(), page.getLimit());
List<Map<String,Object>> discussPosts=new ArrayList<>();
for(DiscussPost discussPost:list){
Map<String,Object> map=new HashMap<>();
map.put("post",discussPost);
String userId = discussPost.getUserId();
Integer userIdNumber = Integer.valueOf(userId);
User userById = userService.findUserById(userIdNumber);
map.put("user",userById);
discussPosts.add(map);
}
model.addAttribute("discussPosts",discussPosts);
return "index";
}
}
- 模版修改
消息表达式: #{…}，国际化时使用，也可以使用内置的对象，比如date格式化数据。 这里用了内置对象numbers.sequence()，一个数字集合，集合命名为i，用于下方遍历
<!-- 分页 -->
<nav class="mt-5" th:if="${page.rows>0}">
<ul class="pagination justify-content-center">
<li class="page-item">
<a class="page-link" th:href="@{${page.path}(current=1)}">首页</a>
</li>
<li th:class="|page-item ${page.current==1?'disabled':''}|">
<a class="page-link" th:href="@{${page.path}(current=${page.current-1})}">上一页</a>
</li>
<li th:class="|page-item ${i==page.current?'active':''}|" th:each="i:${#numbers.sequence(page.from,page.to)}">
<a class="page-link" th:href="@{${page.path}(current=${i})}" th:text="${i}">1</a>
</li>
<li th:class="|page-item ${page.current==page.totalPage?'disabled':''}|">
<a class="page-link" th:href="@{${page.path}(current=${page.current+1})}">下一页</a>
</li>
<li class="page-item"><a class="page-link" th:href="@{${page.path}(current=${page.totalPage})}">末页</a></li>
</ul>
</nav>
- 一些问题
current没看到有设置（并没有调用setCurrent）？
根据评论区： cuurent由前端给的路径直接封装到page里了，这是SpringMVC自动提供的封装。
thymeleaf的each标签用于遍历集合，用法th:each="objName: ${list}"
