狂神说笔记——SpringBoot开发单体应用21
Spring Boot 开发单体应用2
6.配置环境及首页
- 新建spring boot项目，导入依赖包。
<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.0modelVersion>
<parent>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-parentartifactId>
<version>2.1.7.RELEASEversion>
<relativePath/>
parent>
<groupId>com.githubgroupId>
<artifactId>springboot-04-demoartifactId>
<version>0.0.1-SNAPSHOTversion>
<name>springboot-04-demoname>
<description>springboot-04-demodescription>
<properties>
<java.version>1.8java.version>
<project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8project.reporting.outputEncoding>
properties>
<dependencies>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-webartifactId>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>
<dependency>
<groupId>org.projectlombokgroupId>
<artifactId>lombokartifactId>
dependency>
<dependency>
<groupId>org.mybatis.spring.bootgroupId>
<artifactId>mybatis-spring-boot-starterartifactId>
<version>2.1.4version>
dependency>
<dependency>
<groupId>mysqlgroupId>
<artifactId>mysql-connector-javaartifactId>
<scope>runtimescope>
dependency>
<dependency>
<groupId>org.webjarsgroupId>
<artifactId>jqueryartifactId>
<version>3.6.0version>
dependency>
<dependency>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-starter-testartifactId>
<scope>testscope>
dependency>
dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.bootgroupId>
<artifactId>spring-boot-maven-pluginartifactId>
plugin>
plugins>
build>
project>
- 导入实体类
// 部门类
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Department {
private Integer id;
private String departmentName;
}
// 员工类
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Employee {
private Integer id;
private String lastName;
private String email;
private Integer gender;
private Department department;
private Date birth;
}
- 配置dao层
package com.github.dao;
import com.github.pojo.Department;
import org.springframework.stereotype.Repository;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
/**
* 部门dao
* @author subeiLY
* @create 2021-11-05 14:52
*/
@Repository
public class DepartmentDao {
// 模拟数据库中的数据
private static Map<Integer, Department> departments=null;
static {
departments = new HashMap<Integer, Department>(); // 创建一个部门
departments.put(101,new Department(101,"运营部"));
departments.put(102,new Department(102,"策划部"));
departments.put(103,new Department(103,"法务部"));
departments.put(104,new Department(104,"开发部"));
departments.put(105,new Department(105,"宣传部"));
}
// 获得所有部门的信息
public Collection<Department> getDepartments(){
return departments.values();
}
// 通过ID查询部门
public Department getDepartment(Integer id){
return departments.get(id);
}
}
package com.github.dao;
import com.github.pojo.Department;
import com.github.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import java.util.Collection;
import java.util.Date;
import java.util.HashMap;
import java.util.Map;
/**
* @author subeiLY
* @create 2021-11-05 14:58
*/
@Repository
public class EmployeeDao {
// 模拟数据库中的数据
private static Map<Integer, Employee> employees=null;
// 员工所属部门
@Autowired
private DepartmentDao departmentDao;
static {
employees = new HashMap<>(); // 创建一个部门
employees.put(1001,new Employee(1001,"Quary","[email protected]",1,new Department(1001,"运营部"),new Date()));
employees.put(1002,new Employee(1002,"Quary","[email protected]",0,new Department(1002,"策划部"),new Date()));
employees.put(1003,new Employee(1003,"Quary","[email protected]",1,new Department(1003,"法务部"),new Date()));
employees.put(1004,new Employee(1004,"Quary","[email protected]",0,new Department(1004,"开发部"),new Date()));
employees.put(1005,new Employee(1005,"Quary","[email protected]",1,new Department(1005,"宣传部"),new Date()));
}
// 增加员工,主键自增
private static Integer initid=1006;
public void save(Employee employee){
if(employee.getId()==null){
employee.setId(initid);
}
employee.setDepartment(departmentDao.getDepartment(employee.getDepartment().getId()));
employees.put(employee.getId(),employee);
}
// 查询全部员工信息
public Collection<Employee> getAll(){
return employees.values();
}
// 通过ID查询员工
public Employee getEmployee(Integer id){
return employees.get(id);
}
// 删除员工
public void delete(Integer id){
employees.remove(id);
}
}
- 导入静态资源
- css，js等放在static文件夹下
- html 放在 templates文件夹下
- 启动类由于是未连接数据库，需要修改为如下：
package com.github;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration;
@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})
public class Springboot04DemoApplication {
public static void main(String[] args) {
SpringApplication.run(Springboot04DemoApplication.class, args);
}
}
- 最终结构如下：
报错 ：java: 程序包org.junit.jupiter.api不存在
- 在pom.xml中添加
<dependency>
<groupId>org.junit.jupitergroupId>
<artifactId>junit-jupiter-apiartifactId>
<version>5.5.0version>
<scope>testscope>
dependency>
IDEA springboot启动报错:APPLICATION FAILED TO START : Failed to configure a DataSource
-
原因：基于IDEA自带的spring Initializr 来创建springboot项目的,选取了MySQL Driver的依赖包配置,但却没有在配置文件(.yml/.properties/.yaml)中配置过数据源等相关信息,因此就会报错,无法找到数据源Datasource的路径。这里由于我是为了掩饰nacos的某些功能，因此暂时不需要用到数据库。
-
解决方法:
-
在配置文件里面,配置数据源
-
如果你不需要使用到数据库的话,可以直接在启动类的注解上修改即可:
@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class}) -
首页实现
- 方式一：写一个controller实现！
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class IndexController {
/**
* 会解析到templates目录下的index.html页面
* @return
*/
@RequestMapping({"/","/index.html"})
public String index(){
return "index";
}
}
- 方式二：自己编写MVC的扩展配置
package com.github.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Controller
public class IndexController implements WebMvcConfigurer {
@Override
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/").setViewName("index");
registry.addViewController("/index.html").setViewName("index");
}
}
- 解决了首页问题，还需要解决一个资源导入的问题；为了保证资源导入稳定，建议在所有资源导入时候使用 th:去替换原有的资源路径！这也是模板规范。
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Signin Template for Bootstraptitle>
<link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
<link th:href="@{/css/signin.css}" rel="stylesheet">
head>
<body class="text-center">
<form class="form-signin" action="dashboard.html">
<img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign inh1>
<label class="sr-only">Usernamelabel>
<input type="text" class="form-control" placeholder="Username" required="" autofocus="">
<label class="sr-only">Passwordlabel>
<input type="password" class="form-control" placeholder="Password" required="">
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Remember me
label>
div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign inbutton>
<p class="mt-5 mb-3 text-muted">© 2020-2021p>
<a class="btn btn-sm">中文a>
<a class="btn btn-sm">Englisha>
form>
body>
html>
7.页面国际化
- 有的时候，我们的网站会去涉及中英文甚至多语言的切换，这时候我们就需要学习国际化了！
准备工作
- 先在IDEA中统一设置properties的编码问题！
- 编写国际化配置文件，抽取页面需要显示的国际化页面消息。
配置文件编写
-
在resources资源文件下新建一个i18n目录，存放国际化配置文件
-
建立一个login.properties文件，还有一个login_zh_CN.properties；发现IDEA自动识别了我们要做 国际化操作；文件夹变了！
- 在这上面去新建一个文件；
- 弹出如下页面：再添加一个英文的；
- 编写配置，依次添加其他页面内容即可！
- login.properties ： 默认
login.btn=登录
login.password=密码
login.remember=记住我
login.tip=请登录
login.username=用户名
- 英文
login.btn=Sign in
login.password=Password
login.remember=Remember me
login.tip=Please sign in
login.username=Username
- 中文
login.btn=登录
login.password=密码
login.remember=记住我
login.tip=请登录
login.username=用户名
- 配置文件完成。
配置文件生效探究
- 去看一下SpringBoot对国际化的自动配置！这里又涉及到一个类：
MessageSourceAutoConfiguration里面有一个方法，这里发现SpringBoot已经自动配置好了管理我们国际化资源文件的组件 ResourceBundleMessageSource；
// 获取 properties 传递过来的值进行判断
@Bean
public MessageSource messageSource(MessageSourceProperties properties) {
ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource();
if (StringUtils.hasText(properties.getBasename())) {
// 设置国际化文件的基础名（去掉语言国家代码的）
messageSource.setBasenames(StringUtils.commaDelimitedListToStringArray(StringUtils.trimAllWhitespace(properties.getBasename())));
}
if (properties.getEncoding() != null) {
messageSource.setDefaultEncoding(properties.getEncoding().name());
}
messageSource.setFallbackToSystemLocale(properties.isFallbackToSystemLocale());
Duration cacheDuration = properties.getCacheDuration();
if (cacheDuration != null) {
messageSource.setCacheMillis(cacheDuration.toMillis());
}
messageSource.setAlwaysUseMessageFormat(properties.isAlwaysUseMessageFormat());
messageSource.setUseCodeAsDefaultMessage(properties.isUseCodeAsDefaultMessage());
return messageSource;
}
- 真实的情况是放在了i18n目录下，所以要去配置这个messages的路径；
spring.messages.basename=i18n.login
配置页面国际化值
- 去页面获取国际化的值，查看Thymeleaf的文档，找到message取值操作为： #{…}。我们去页面测试下：
- 可以去启动项目，访问一下，发现已经自动识别为中文的了！
配置国际化解析
- 在Spring中有一个国际化的Locale （区域信息对象）；里面有一个叫做LocaleResolver （获取区域信息 对象）的解析器！去webmvc自动配置文件找一下！看到SpringBoot默认配置：
@Bean
@ConditionalOnMissingBean
@ConditionalOnProperty(
prefix = "spring.mvc",
name = {"locale"}
)
public LocaleResolver localeResolver() {
// 容器中没有就自己配，有的话就用用户配置的
if (this.mvcProperties.getLocaleResolver() == org.springframework.boot.autoconfigure.web.servlet.WebMvcProperties.LocaleResolver.FIXED) {
return new FixedLocaleResolver(this.mvcProperties.getLocale());
} else {
// 接收头国际化分解
AcceptHeaderLocaleResolver localeResolver = new AcceptHeaderLocaleResolver();
localeResolver.setDefaultLocale(this.mvcProperties.getLocale());
return localeResolver;
}
}
- AcceptHeaderLocaleResolver 这个类中有一个方法。
public Locale resolveLocale(HttpServletRequest request) {
Locale defaultLocale = this.getDefaultLocale();
// 默认的就是根据请求头带来的区域信息获取Locale进行国际化
if (defaultLocale != null && request.getHeader("Accept-Language") == null) {
return defaultLocale;
} else {
Locale requestLocale = request.getLocale();
List<Locale> supportedLocales = this.getSupportedLocales();
if (!supportedLocales.isEmpty() && !supportedLocales.contains(requestLocale)) {
Locale supportedLocale = this.findSupportedLocale(request, supportedLocales);
if (supportedLocale != null) {
return supportedLocale;
} else {
return defaultLocale != null ? defaultLocale : requestLocale;
}
} else {
return requestLocale;
}
}
}
- 如果我们想点击链接让个人的国际化资源生效，就需要让我们自己的Locale生效！ 需要去自己写一个自己的LocaleResolver，可以在链接上携带区域信息！
- 先修改一下前端页面的跳转：
<a class="btn btn-sm" th:href="@{/index.html(l='zh_CN')}">中文a>
<a class="btn btn-sm" th:href="@{/index.html(l='en_US')}">Englisha>
- 写一个处理的组件类！
package com.github.component;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.LocaleResolver;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Locale;
/**
* 可以在链接上携带区域信息
*/
public class MyLocaleResolver implements LocaleResolver {
// 解析请求
@Override
public Locale resolveLocale(HttpServletRequest request) {
String language = request.getParameter("l");
Locale locale = Locale.getDefault(); // 如果没有获取到就使用系统默认的
// 如果请求链接不为空
if (!StringUtils.isEmpty(language)) {
// 分割请求参数
String[] split = language.split("_");
// 国家，地区
locale = new Locale(split[0], split[1]);
}
return locale;
}
@Override
public void setLocale(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {
}
}
- 为了让区域化信息能够生效，需要再配置一下这个组件！在个人的MvcConofig下添加 bean；
@Bean
public LocaleResolver localeResolver(){
return new MyLocaleResolver();
}
- 重启项目，访问一下，发现点击按钮可以实现成功切换！
8.登录功能实现
禁用模板缓存
- 页面存在缓存，所以我们需要禁用模板引擎的缓存。
# 禁用模板缓存
spring.thymeleaf.cache=false
- 模板引擎修改后，想要实时生效！页面修改完毕后，Ctrl + F9 重新编译！即可生效！
登录
- 先不连接数据库了，输入任意用户名都可以登录成功！
- 把登录页面的表单提交地址写一个controller！
<form class="form-signin" th:action="@{/user/login}" method="post">
//这里面的所有表单标签都需要加上一个name属性
</form>
- 编写对应的controller
@Controller
public class LoginController {
//
@PostMapping("/user/login")
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
Model model, HttpSession session){
if (!StringUtils.isEmpty(username) && "123456".equals(password)){
// 登录成功！将用户信息放入session
session.setAttribute("loginUser",username);
return "dashboard"; // 跳转到首页
}else {
// 登录失败！存放错误信息
model.addAttribute("msg","用户名密码错误");
return "index";
}
}
}
- 测试登录，默认用户名：admin，密码：123456
- 登录失败的话，需要将后台信息输出到前台，可以在首页标题下面加上判断！
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}">
p>
- 重启登陆失败测试：
- 优化，登录成功后，由于是转发，链接不变，可以重定向到首页！
- 再添加一个视图控制映射，在自己的MyMvcConfig中：
registry.addViewController("/main.html").setViewName("dashboard");
- 将 Controller 的代码改为重定向；
//登录成功！防止表单重复提交，我们重定向
return "redirect:/main.html";
- 重启测试，重定向成功！后台主页正常显示！
登录拦截器
- 使用拦截器机制，实现登录检查！
- 先自定义一个拦截器：
package com.github.controller;
import org.springframework.web.servlet.HandlerInterceptor;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* 登录拦截器
* @author subeiLY
* @create 2021-11-06 23:57
*/
public class LoginHandlerInterceptor implements HandlerInterceptor {
@Override
public boolean preHandle(HttpServletRequest request, HttpServletResponse
response, Object handler) throws Exception {
// 获取 loginuser 信息进行判断
Object user = request.getSession().getAttribute("loginUser");
if(user==null){
// 未登录，返回首页
request.setAttribute("msg","没有权限，请登录账户");
request.getRequestDispatcher("/index.html").forward(request,response);
return false;
}else {
// 登录，放行
return true;
}
}
}
- 然后将拦截器注册到SpringMVC配置类当中——
MyMVCConfig.java！
@Override
public void addInterceptors(InterceptorRegistry registry) {
// 注册拦截器，及拦截请求和要剔除哪些请求!
// 还需要过滤静态资源文件，否则样式显示不出来
registry.addInterceptor(new LoginHandlerInterceptor())
.addPathPatterns("/**")
.excludePathPatterns("/index.html","/","/user/login","/static/**");
}
- 然后在后台主页，获取用户登录的信息——
dashboard.html。
[[${session.loginUser}]]
- 登录测试拦截！成功！
报错：No mapping for GET /css/bootstrap.min.css
- 在MyMvcConfig.java内加上这两个函数
private static final String[] CLASSPATH_RESOURCE_LOCATIONS = {
"classpath:/META-INF/resources/", "classpath:/resources/",
"classpath:/static/", "classpath:/public/" };
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
if (!registry.hasMappingForPattern("/webjars/**")) {
registry.addResourceHandler("/webjars/**").addResourceLocations(
"classpath:/META-INF/resources/webjars/");
}
if (!registry.hasMappingForPattern("/**")) {
registry.addResourceHandler("/**").addResourceLocations(
CLASSPATH_RESOURCE_LOCATIONS);
}
}
9.员工列表实现
RestFul 风格
- 要求： 需要使用 Restful风格实现CRUD操作！
| 普通CRUD（uri来区分操作） | RestfulCRUD | |
|---|---|---|
| 查询 | getEmp | emp–GET |
| 添加 | addEmp?xxx | emp–POST |
| 修改 | updateEmp?id=xxx&xxx=xx | emp/{id}–PUT |
| 删除 | deleteEmp?id=1 | emp/{id}—DELETE |
- 看看一些具体的要求，就是需要实现的架构；
| 实验功能 | 请求URI | 请求方式 |
|---|---|---|
| 查询所有员工 | emps | GET |
| 查询某个员工（来到修改页面） | emp/1 | GET |
| 来到添加页面 | emp | GET |
| 添加员工 | emp | POST |
| 来到修改页面（查出员工进行信息回显） | emp/1 | GET |
| 修改员工 | emp | PUT |
| 删除员工 | emp/1 | DELETE |
- 根据这些要求，来完成第一个功能，即员工列表功能！
员工列表的跳转
- 在主页点击Customers，就显示列表页面；
- 修改首页侧边栏的Customers为员工管理。
- a链接添加请求
<li class="nav-item">
<a class="nav-link" th:href="@{/emps}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2">path>
<circle cx="9" cy="7" r="4">circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87">path>
<path d="M16 3.13a4 4 0 0 1 0 7.75">path>
svg>
员工管理
a>
li>
- 将list文件放到emp文件夹下
- 编写Controller
@Controller
public class EmployeeController {
@Autowired
EmployeeDao employeeDao;
/**
* 查询所有员工，返回列表页面
* @param model
* @return
*/
@RequestMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
// 结果返回前端
model.addAttribute("emps",employees);
return "emp/list";
}
}
- 启动测试。
- 当侧边栏和顶部都相同时，如何将其抽取出来？
Thymeleaf 公共页面元素抽取
步骤：
- 抽取公共片段 th:fragment 定义模板名；
- 引入公共片段 th:insert 插入模板名；
实现：
- 使用list列表做演示！要抽取头部nav标签，在dashboard中将nav部分定义一个模板名；
- 在
templates目录下新建一个commons包，其中新建commons.html用来放置公共页面代码。
DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" th:fragment="topbar">
<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">[[${session.loginUser}]]a>
<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
<ul class="navbar-nav px-3">
<li class="nav-item text-nowrap">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">Sign outa>
li>
ul>
nav>
<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="siderbar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-home">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z">path>
<polyline points="9 22 9 12 15 12 15 22">polyline>
svg>
Dashboard <span class="sr-only">(current)span>
a>
li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-file">
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z">path>
<polyline points="13 2 13 9 20 9">polyline>
svg>
Orders
a>
li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-shopping-cart">
<circle cx="9" cy="21" r="1">circle>
<circle cx="20" cy="21" r="1">circle>
<path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6">path>
svg>
Products
a>
li>
<li class="nav-item">
<a class="nav-link" th:href="@{/emps}">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-users">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2">path>
<circle cx="9" cy="7" r="4">circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87">path>
<path d="M16 3.13a4 4 0 0 1 0 7.75">path>
svg>
员工管理
a>
li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-bar-chart-2">
<line x1="18" y1="20" x2="18" y2="10">line>
<line x1="12" y1="20" x2="12" y2="4">line>
<line x1="6" y1="20" x2="6" y2="14">line>
svg>
Reports
a>
li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-layers">
<polygon points="12 2 2 7 12 12 22 7 12 2">polygon>
<polyline points="2 17 12 22 22 17">polyline>
<polyline points="2 12 12 17 22 12">polyline>
svg>
Integrations
a>
li>
ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Saved reportsspan>
<a class="d-flex align-items-center text-muted"
href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-plus-circle">
<circle cx="12" cy="12" r="10">circle>
<line x1="12" y1="8" x2="12" y2="16">line>
<line x1="8" y1="12" x2="16" y2="12">line>
svg>
a>
h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-file-text">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z">path>
<polyline points="14 2 14 8 20 8">polyline>
<line x1="16" y1="13" x2="8" y2="13">line>
<line x1="16" y1="17" x2="8" y2="17">line>
<polyline points="10 9 9 9 8 9">polyline>
svg>
Current month
a>
li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-file-text">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z">path>
<polyline points="14 2 14 8 20 8">polyline>
<line x1="16" y1="13" x2="8" y2="13">line>
<line x1="16" y1="17" x2="8" y2="17">line>
<polyline points="10 9 9 9 8 9">polyline>
svg>
Last quarter
a>
li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-file-text">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z">path>
<polyline points="14 2 14 8 20 8">polyline>
<line x1="16" y1="13" x2="8" y2="13">line>
<line x1="16" y1="17" x2="8" y2="17">line>
<polyline points="10 9 9 9 8 9">polyline>
svg>
Social engagement
a>
li>
<li class="nav-item">
<a class="nav-link" href="http://getbootstrap.com/docs/4.0/examples/dashboard/#">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round" class="feather feather-file-text">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z">path>
<polyline points="14 2 14 8 20 8">polyline>
<line x1="16" y1="13" x2="8" y2="13">line>
<line x1="16" y1="17" x2="8" y2="17">line>
<polyline points="10 9 9 9 8 9">polyline>
svg>
Year-end sale
a>
li>
ul>
div>
nav>
html>
- 删除
dashboard.html和list.html中顶部导航栏和侧边栏的代码。
- 分别在
dashboard.html和list.html删除的部分插入提取出来的公共部分topbar和sidebar。
<div th:replace="~{commons/commons::topbar}">div>
<div class="container-fluid">
<div class="row">
<div th:replace="~{commons/commons::siderbar}">div>
点亮高亮
- 在页面中，使高亮的代码是
class="nav-link active"属性。
- 可以通过传递参数判断点击了哪个标签实现相应的高亮，首先在
dashboard.html的侧边栏标签传递参数active为dashboard.html。
<div th:replace="~{commons/commons::siderbar(active='dashboard.html')}">div>
- 同样在
list.html的侧边栏标签传递参数active为list.html。
<div th:replace="~{commons/commons::siderbar(active='list.html')}">div>
- 在公共页面
commons.html相应标签部分利用thymeleaf接收参数active，利用三元运算符判断决定是否高亮。
- 重启主程序测试，登录成功后，高亮显示。
显示员工信息
- 修改
list.html页面，显示自己的数据值。
- 运行测试
修改性别的显示和date的显示，并添加
编辑和删除两个标签。
<table class="table table-striped table-sm">
<thead>
<tr>
<th>idth>
<th>lastNameth>
<th>emailth>
<th>genderth>
<th>departmentth>
<th>birthth>
<th>操作th>
tr>
thead>
<tbody>
<tr th:each="emp:${emps}">
<td th:text="${emp.getId()}">td>
<td th:text="${emp.getLastName()}">td>
<td th:text="${emp.getEmail()}">td>
<td th:text="${emp.getGender()==0?'女':'男'}">td>
<td th:text="${emp.getDepartment().getDepartmentName()}">td>
<td th:text="${#dates.format(emp.getBirth(),'yyyy-MM-dd HH:mm')}">td>
<td>
<a class="btn btn-sm btn-primary">编辑a>
<a class="btn btn-sm btn-danger">删除a>
td>
tr>
tbody>
table>
10.增加员工实现
- 在
list.html页面增添一个增加员工按钮，点击该按钮时发起一个请求/add。
- 编写对应的controller。
// 添加页面
@GetMapping("/add")
public String add(Model model){
return "emp/add";
}
- 创建添加员工页面add
- 在
templates/emp下新建一个add.html。 - bootstrap官网文档 ： https://v4.bootcss.com/docs/4.0/components/forms/，去可以里面找自己喜欢的样式！这里提供了编辑好的：
<form>
<div class="form-group">
<label>LastNamelabel>
<input type="text" class="form-control" placeholder="quary">
div>
<div class="form-group">
<label>Emaillabel>
<input type="email" class="form-control"
placeholder="[email protected]">
div>
<div class="form-group">
<label>Genderlabel><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender"
value="1">
<label class="form-check-label">男label>
div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender"
value="0">
<label class="form-check-label">女label>
div>
div>
<div class="form-group">
<label>departmentlabel>
<select class="form-control">
<option>1option>
<option>2option>
<option>3option>
<option>4option>
<option>5option>
select>
div>
<div class="form-group">
<label>Birthlabel>
<input type="text" class="form-control" placeholder="quary">
div>
<button type="submit" class="btn btn-primary">添加button>
form>
- 修改一下前端和后端，处理点击
添加员工的请求。通过get方式提交请求，在EmployeeController中添加一个方法add用来处理list页面点击提交按钮的操作，返回到add.html添加员工页面。- Controller
@Autowired
DepartmentDao departmentDao;
@GetMapping("/add")
public String add(Model model){
// 查出所有的部门信息
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("departments",departments);
return "emp/add";
}
- 前端
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<form>
<div class="form-group">
<label>LastNamelabel>
<input type="text" name="lastName" class="form-control" placeholder="quary">
div>
<div class="form-group">
<label>Emaillabel>
<input type="email" name="email" class="form-control"
placeholder="[email protected]">
div>
<div class="form-group">
<label>Genderlabel><br/>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender"
value="1">
<label class="form-check-label">男label>
div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="gender"
value="0">
<label class="form-check-label">女label>
div>
div>
<div class="form-group">
<label>departmentlabel>
<select class="form-control" name="department.id">
<option th:each="department:${departments}" th:text="${department.getDepartmentName()}" th:value="${department.getId()}">option>
select>
div>
<div class="form-group">
<label>Birthlabel>
<input type="text" name="birth" class="form-control" placeholder="birth:yyyy/MM/dd">
div>
<button type="submit" class="btn btn-primary">添加button>
form>
main>
- 重启主程序，点击添加员工，成功跳转到
add.html页面。
完整增加员工功能
- 由于在
add.html页面，当我们填写完信息，点击添加按钮，应该完成添加返回到list页面，展示新的员工信息；因此在add.html点击添加按钮的一瞬间，我们同样发起一个请求/add，与上述提交按钮发出的请求路径一样，但这里发出的是post请求。
- 修改add页面form表单提交地址和方式
<form th:action="@{/add}" method="post">
- 编写对应的controller，在
EmployeeController中添加一个方法addEmp用来处理点击添加按钮的操作。
@PostMapping("/add")
public String addEmp(Employee employee) {
return "redirect:/emps";
}
- 原理探究 ： ThymeleafViewResolver
public static final String REDIRECT_URL_PREFIX = "redirect:";
public static final String FORWARD_URL_PREFIX = "forward:";
protected View createView(String viewName, Locale locale) throws Exception {
if (!this.alwaysProcessRedirectAndForward && !this.canHandle(viewName, locale)) {
vrlogger.trace("[THYMELEAF] View \"{}\" cannot be handled by ThymeleafViewResolver. Passing on to the next resolver in the chain.", viewName);
return null;
} else {
String forwardUrl;
if (viewName.startsWith("redirect:")) {
vrlogger.trace("[THYMELEAF] View \"{}\" is a redirect, and will not be handled directly by ThymeleafViewResolver.", viewName);
forwardUrl = viewName.substring("redirect:".length(), viewName.length());
RedirectView view = new RedirectView(forwardUrl, this.isRedirectContextRelative(), this.isRedirectHttp10Compatible());
return (View)this.getApplicationContext().getAutowireCapableBeanFactory().initializeBean(view, viewName);
} else if (viewName.startsWith("forward:")) {
vrlogger.trace("[THYMELEAF] View \"{}\" is a forward, and will not be handled directly by ThymeleafViewResolver.", viewName);
forwardUrl = viewName.substring("forward:".length(), viewName.length());
return new InternalResourceView(forwardUrl);
} else if (this.alwaysProcessRedirectAndForward && !this.canHandle(viewName, locale)) {
vrlogger.trace("[THYMELEAF] View \"{}\" cannot be handled by ThymeleafViewResolver. Passing on to the next resolver in the chain.", viewName);
return null;
} else {
vrlogger.trace("[THYMELEAF] View {} will be handled by ThymeleafViewResolver and a {} instance will be created for it", viewName, this.getViewClass().getSimpleName());
return this.loadView(viewName, locale);
}
}
}
- 编写controller接收调试打印。
@PostMapping("/add")
public String addEmp(Employee employee) {
System.out.println(employee);
// 添加员工
employeeDao.save(employee);
return "redirect:/emps";
}
- 重启主程序，进行测试，进入添加页面，填写相关信息，注意日期格式默认为
yyyy/MM/dd。
- 提交发现页面出现了400错误！
- 生日是我们提交的是一个日期， 第一次使用的 / 正常提交成功了，后面使用 - 就错误了，所以这里面应该存在一个日期格式化的问题； SpringMVC会将页面提交的值转换为指定的类型，默认日期是按照 / 的方式提交 ； 比如将2021/11/09 转换为一个date对象。 那思考一个问题？那能不能修改这个默认的格式呢？ 先去看webmvc的自动配置文件；找到一个日期格式化的方法：
@Bean
public FormattingConversionService mvcConversionService() {
WebConversionService conversionService = new WebConversionService(this.mvcProperties.getDateFormat());
this.addFormatters(conversionService);
return conversionService;
}
- 调用了 getDateFormat 方法；
public String getDateFormat() {
return this.dateFormat;
}
- 所以可以自定义的去修改这个时间格式化问题，在配置文件中修改一下；
# 日期格式化
spring.mvc.date-format=yyyy-MM-dd
11.修改员工信息
- list页面编辑按钮增添请求。
- 当用户点击
编辑标签时，应该跳转到编辑页面update.html（开始创建）进行编辑。将list.html页面的编辑标签添加href属性，实现点击请求/edit/id号到编辑页面。
<a class="btn btn-sm btn-primary" th:href="@{/edit/{id}(id=${emp.getId()})}">编辑a>
- 编写对应的controller
@RequestMapping("/edit/{id}")
public String toUpdateAll(@PathVariable("id") int id, Model model) {
// 查询指定id的员工,添加到emp中,用于前端接收
Employee employee = employeeDao.getEmployee(id);
model.addAttribute("emp", employee);
// 查出所有的部门信息,添加到departments中,用于前端接收
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("departments", departments);
return "/emp/update";
// 返回到编辑员工页面
}
- 将add页面复制一份，改为update页面；需要修改页面，将后台查询数据回显。
<form th:action="@{/edit}" method="post">
<div class="form-group">
<label>LastNamelabel>
<input th:value="${emp.getLastName()}" type="text" name="lastName" class="form-control"
placeholder="lastname:zsr">
div>
<div class="form-group">
<label>Emaillabel>
<input th:value="${emp.getEmail()}" type="email" name="email" class="form-control"
placeholder="email:[email protected]">
div>
<div class="form-group">
<label>Genderlabel><br/>
<div class="form-check form-check-inline">
<input th:checked="${emp.getGender()==1}" class="form-check-input" type="radio"
name="gender" value="1">
<label class="form-check-label">男label>
div>
<div class="form-check form-check-inline">
<input th:checked="${emp.getGender()==0}" class="form-check-input" type="radio"
name="gender" value="0">
<label class="form-check-label">女label>
div>
div>
<div class="form-group">
<label>departmentlabel>
<select class="form-control" name="department.id">
<option th:selected="${department.getId()==emp.department.getId()}"
th:each="department:${departments}" th:text="${department.getDepartmentName()}"
th:value="${department.getId()}">
option>
select>
div>
<div class="form-group">
<label>Birthlabel>
<input th:value="${emp.getBirth()}" type="text" name="birth" class="form-control" placeholder="birth:yyyy/MM/dd">
div>
<button type="submit" class="btn btn-primary">修改button>
form>
- 启动程序测试
- 规定一下显示的日期格式。
<input th:value="${#dates.format(emp.getBirth(),'yyyy-MM-dd')}" type="text" name="date" class="form-control"
placeholder="birth:yy/MM/dd">
- 修改表单提交的地址：
<form th:action="@{/updateEmp}" method="post">
- 编写对应的controller
@PostMapping("/updateEmp")
public String updateEmp(Employee employee){
employeeDao.save(employee);
// 回到员工列表页面
return "redirect:/emps";
}
- 指定修改人的id。
- 重启测试。
12.删除员工
- list页面，编写提交地址。点击
删除标签时，应该发起一个请求，删除指定的用户，然后重新返回到list页面显示员工数据。
<a class="btn btn-sm btn-danger" th:href="@{/delete/{id}(id=${emp.getId()})}">删除a>
- 编写Controller
@GetMapping("/delete/{id}")
public String delete(@PathVariable("id") Integer id) {
employeeDao.delete(id);
return "redirect:/emps";
}
- 重启测试，点击删除按钮即可删除指定员工。
404页面
- 在模板目录下添加一个error文件夹，文件夹中存放我们相应的错误页面；比如404.html 或者 4xx.html 等等，SpringBoot就会帮我们自动使用了！
- 测试使用！
13.注销页面
- 注销请求，在提取出来的公共
commons页面，顶部导航栏处中的标签添加href属性，实现点击发起请求/user/logout。
<a class="nav-link" href="#" th:href="@{/user/loginOut}">Sign outa>
- 编写对应的controller，处理点击
注销标签的请求，在LoginController中编写对应的方法，清除session，并重定向到首页。
@RequestMapping("/user/loginOut")
public String logout(HttpSession session) {
session.invalidate();
return "redirect:/index.html";
}
- 测试登录。
14.定制错误数据
SpringBoot 默认的错误处理机制
- 浏览器访问的默认的错误处理效果：
- 如果是其他客户端，默认响应一个 json 数据；
错误处理原理分析:
我们看到自动配置类：ErrorMvcAutoConfiguration 错误处理的自动配置类；
这里面注入了几个很重要的 bean；
-
DefaultErrorAttributes
-
BasicErrorController
-
ErrorPageCustomizer
-
DefaultErrorViewResolver
错误处理步骤：
- 一旦系统出现了 4xx 或者 5xx 之类的错误，ErrorPageCustomizer 就会生效（定制错误的响应规则）
@Bean
public ErrorPageCustomizer errorPageCustomizer(DispatcherServletPath
dispatcherServletPath) {
// 点进这个类
return new ErrorPageCustomizer(this.serverProperties,
dispatcherServletPath);
}
- 发现一个方法 registerErrorPages 注册错误页面：
@Override
public void registerErrorPages(ErrorPageRegistry errorPageRegistry) {
ErrorPage errorPage = new ErrorPage(
// 这里有个 getPath() 路径，我们点进去
this.dispatcherServletPath.getRelativePath(this.properties.getError().getPath()));
errorPageRegistry.addErrorPages(errorPage);
}
// getPath
public String getPath() {
return this.path;
}
// this.path;
@Value("${error.path:/error}")
private String path = "/error";
- 系统一旦出现错误之后就会来到 /error 请求进行处理；这个请求会被 BasicErrorController 处理：
@Controller
// 处理默认的 /error 请求
@RequestMapping("${server.error.path:${error.path:/error}}")
public class BasicErrorController extends AbstractErrorController {
}
- 这个类有两个方法：
// 产生html类型的数据，浏览器发送的请求会被这个方法处理
@RequestMapping(produces = MediaType.TEXT_HTML_VALUE)
public ModelAndView errorHtml(HttpServletRequest request,
HttpServletResponse response) {
HttpStatus status = getStatus(request);
Map<String, Object> model = Collections.unmodifiableMap(getErrorAttributes(request,
isIncludeStackTrace(request, MediaType.TEXT_HTML)));
response.setStatus(status.value());
// 去哪个页面拿错误页面呢？resolveErrorView 方法
ModelAndView modelAndView = resolveErrorView(request, response, status,model);
return (modelAndView != null) ? modelAndView : new ModelAndView("error",model);
}
// 返回 json 类型的数据，其他的客户端请求会被这个方法处理
@RequestMapping
public ResponseEntity<Map<String, Object>> error(HttpServletRequest request)
{
HttpStatus status = getStatus(request);
if (status == HttpStatus.NO_CONTENT) {
return new ResponseEntity<>(status);
}
Map<String, Object> body = getErrorAttributes(request,
isIncludeStackTrace(request, MediaType.ALL));
return new ResponseEntity<>(body, status);
}
- 来看看resolveErrorView 这个方法：
protected ModelAndView resolveErrorView(HttpServletRequest request,
HttpServletResponse response,
HttpStatus status,
Map<String, Object> model) {
// 拿到所有的 errorViewResolvers 错误视图解析器
for (ErrorViewResolver resolver : this.errorViewResolvers) {
ModelAndView modelAndView = resolver.resolveErrorView(request,
status, model);
if (modelAndView != null) {
return modelAndView;
}
}
return null;
}
- 在之前看到有这样一个bean DefaultErrorViewResolver 默认的错误视图解析器 :
public class DefaultErrorViewResolver implements ErrorViewResolver, Ordered
{
private static final Map<Series, String> SERIES_VIEWS;
static {
Map<Series, String> views = new EnumMap<>(Series.class);
views.put(Series.CLIENT_ERROR, "4xx"); // 客户端错误
views.put(Series.SERVER_ERROR, "5xx"); // 服务端错误
SERIES_VIEWS = Collections.unmodifiableMap(views);
}
// .....
@Override // HttpStatus 状态码
public ModelAndView resolveErrorView(HttpServletRequest request,
HttpStatus status, Map<String, Object> model) {
ModelAndView modelAndView = resolve(String.valueOf(status.value()),
model);
if (modelAndView == null &&
SERIES_VIEWS.containsKey(status.series())) {
// 通过状态码解析视图
modelAndView = resolve(SERIES_VIEWS.get(status.series()),
model);
}
return modelAndView;
}
// 去 error 路径下解析视图
private ModelAndView resolve(String viewName, Map<String, Object> model)
{
// 比如 error/404 error/500
String errorViewName = "error/" + viewName;
TemplateAvailabilityProvider provider =
this.templateAvailabilityProviders.getProvider(errorViewName,
this.applicationContext);
if (provider != null) {
return new ModelAndView(errorViewName, model);
}
return resolveResource(errorViewName, model);
}
}
- 所以说：定制错误页面，我们可以建立一个 error 目录，然后放入对应的错误码html文件！ 比如：404.html 500.html 4xx.html 5xx.html
- 这些页面的信息数据在哪里呢？
- 我们找到 DefaultErrorAttributes 这个bean对象；里面有很多的 addxx 方法，就是添加不同的信息；
// addStatus
// addErrorDetails
// addErrorMessage
// addStackTrace
// addPath
// 这里面存了一些错误的信息，我们可以在错误页面直接取出来
至此，用SpringBoot开发一个简单的单体应用对我们来说就没什么太大的问题了！