1.
2.
3.
4.打开pom文件引入webjars依赖
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1</version>
</dependency>
5.在(当前目录)静态资源resources文件夹下创建两个文件夹:public,resources
6.将实验路径下的asserts文件夹放入static文件夹下
如上图放入后界面显示
7. (默认)首页访问
在静态资源文件夹下的public里面创建index.html
<!DOCTYPE html>
<html lang="en">
<link rel="icon" href="/resources/favicon.ico" >
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<h1>首页</h1>
</body>
</html>
spring boot默认会访问静态资源文件夹下的所有index.html页面。
输入 http://localhost:8080/ 网页显示如下
8.图标修改
将静态资源目录下的resources文件夹里加入favicon.ico文件(见实验文件)
图标显示如图
9.导入网页模板引擎Thymeleaf
引入依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
若引入依赖右键pom文件界面Reimport后
仍然出现spring-boot-starter-thymeleaf报错红标。
则需要打开idea的settings界面搜索maven
找到该路径下的settings.xml文件将源改为阿里源。
重新关闭打开工程。
10.Thymeleaf的使用
(1)success.html的显示
在HellorController下添加如下代码:
package com.example.demo.Controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.Arrays;
import java.util.Map;
@Controller //@Controller配置后当前网页根路径 为thymeleaf 配置的html文件路径 (默认是在templates)
public class HelloController {
@ResponseBody
@RequestMapping("/hello")
public String hello(){
return "hello wdsssss";
}
@RequestMapping("/success") //success.html文件在网页显示的路径
public String success(Map<String,Object> map){
map.put("hello","你好啊");
map.put("users", Arrays.asList("zhangsan","lisi","wangwu"));
return "success"; //返回到success.html文件
}
}
success.html代码如下:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF‐8">
<title>Title</title>
</head>
<body>
<h1>成功!</h1>
<!--th:text 中text的内容替换"这是显示欢迎信息"-->
<!--<div th:text="${hello}">这是显示欢迎信息</div>-->
<div id="div01" class="myDiv" th:id="${hello}" th:class="${hello}" th:text="${hello}">huanas</div>
<hr/>
<div th:text="${hello}"></div>
<div th:utext="${hello}"></div>
<hr/>
<h4 th:text="${user}" th:each="user:${users}" ></h4>
<hr/>
<h4>
<span th:each="user:${users}" > [[${user}]] </span>
</h4>
</body>
</html>
11.引入资源
将实验文件里的dao和entities复制加入工程
1.访问crud首页
将实验文件里的四个html文件加入工程的静态资源路径的templates下
(Thymeleaf默认路径),才能首使用Thymeleaf引擎。
将index.html重命名为login.html
修改HelloController文件加入login()方法,设置login.html为首页
完整代码如下:
package com.example.demo.Controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.Arrays;
import java.util.Map;
@Controller //@Controller配置后当前网页根路径 为thymeleaf 配置的html文件路径 (默认是在templates)
public class HelloController {
@RequestMapping({"/","/login.html"})//{"/","/index.html"}
public String login(){
return "login";
}
@ResponseBody
@RequestMapping("/hello")
public String hello(){
return "hello wdsssss";
}
@RequestMapping("/success") //success.html文件在网页显示的路径
public String success(Map<String,Object> map){
map.put("hello","你好啊");
map.put("users", Arrays.asList("zhangsan","lisi","wangwu"));
return "success"; //返回到success.html文件
}
}
在浏览器输入 http://localhost:8080/,显示如下
2.引入webjars下的bootstrap资源
根据之前引入的webjars路径来修改login.html的路径
<!-- Bootstrap core CSS -->
<link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.5.0/css/bootstrap.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="asserts/css/signin.css" th:href="@{asserts/css/signin.css}" rel="stylesheet">
</head>
<body class="text-center">
<form class="form-signin" action="dashboard.html">
<img class="mb-4" th:src="@{asserts/img/bootstrap-solid.svg}" src="asserts/img/bootstrap-solid.svg" alt="" width="72" height="72">
通过 th: 这样修改路径的好处是通过THymeleaf改写路径能够在修改项目的访问名后自动加载修改的项目路径。如:
直接在项目配置文件中修改访问名(改为/crud)
输入http://localhost:8080/crud/ 直接访问首页
12.登录页面的国际化
1.编写国际化配置文件
在静态资源(resources)下新建i18n文件夹,并在里面创建需要国际化页面的配置文件login.properties(默认)和 login_zh_CN.properties(具体语言)
之后idea 会自动添加国际化视图。
在该路径下创建英文配置文件
编辑配置文件
点击加号配置如下文件
分别对应login页面的五处
2.SpringBoot自动配置管理国际化资源文件的组件;
在login.html里修改:
login页面就会根据浏览器环境语言切换语言
3.手动切换国际化语言
修改login.html
在demo下新建文件夹component,并在里面创建MyLocaleResolver
在该文件中加入如下代码:
/**
* 可以在连接上携带区域信息
*/
public class MyLocaleResolver implements LocaleResolver {
@Override
public Locale resolveLocale(HttpServletRequest request) {
String l = request.getParameter("l");
Locale locale = Locale.getDefault();
if(!StringUtils.isEmpty(l)){
String[] split = l.split("_");
locale = new Locale(split[0],split[1]);
}
return locale;
}
@Override
public void setLocale(HttpServletRequest request, HttpServletResponse response, Locale
locale) {
}
}
在MyMvConfig的类中添加如下代码:
@Bean
public LocaleResolver localeResolver(){
return new MyLocaleResolver();
}
运行工程,刷新网页,就可根据手动点击切换语言
13.登录和拦截操作
1.登录
在login.html文件下修改加入如下:
创建loginController 加入如下代码:
@Controller
public class LoginController {
@PostMapping(value = "/user/login")
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
Map<String,Object> map){
if(!StringUtils.isEmpty(username) && "123456".equals(password)){
//登录成功
return "dashboard";
}
else{
//登陆失败
map.put("msg","用户密码错误");
return "login";
}
}
}
此时我们输入任意账号,密码:123456登录页面 ,提示如下错误:
这时需要在login.html文件中加入代码,图中框处:
修改完好在该页面 按 ctrl+F9 重新编译
进入网页重新登录,可以看到页面加载成功(但格式不对)
2.密码错误提示
根据logincontroller里预先设置的
我们在login.html文件中添加p标签。
注:Thymefeaf中 th:if 的优先级高于 th:text ,th:if判断条件成立以后该标签内的所有th: 才会生效(msg值不为null才会返回提示)。
<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}" ></p>
重定向。
我们在HelloController中添加:
在loginController中修改:
刷新页面能重定向到 main.html 路径的页面能避免表单重复提交。
3.拦截器
在LoginController修改代码:
@Controller
public class LoginController {
@PostMapping(value = "/user/login")
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
Map<String,Object> map, HttpSession session){
if(!StringUtils.isEmpty(username) && "123".equals(password)){
//登录成功,防止表单重复提交,可以重定向到主页
session.setAttribute("loginUser",username);
return "redirect:/main.html";
}
else{
//登陆失败
map.put("msg","用户密码错误");
return "login";
}
}
}
在component下创建LoginHandlerinterceptor
/*
登录状态检查
*/
public class LoginHandlerInterceptor implements HandlerInterceptor {
//目标方法执行之前
public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
Object user = request.getSession().getAttribute("loginUser");
if (user == null) {
//未登陆,返回登陆页面
request.setAttribute("msg", "没有权限请先登陆");
request.getRequestDispatcher("/login.html").forward(request, response);
return false;
} else {
//已登陆,放行请求
return true;
}
}
public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, @Nullable ModelAndView modelAndView) throws Exception {
}
public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, @Nullable Exception ex) throws Exception {
}
}
在MyMvcConfig中配置如下:
@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
@Bean
public LocaleResolver localeResolver(){
return new MyLocaleResolver();
}
@Override
public void addInterceptors(InterceptorRegistry registry) {
registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")
.excludePathPatterns("/","/user/login","/login.html","/asserts/**","/static/**","/webjars/**");
}
}
效果如下(有时请登录字样上方图标消失情况不明):
14.员工列表
1.公告页抽取
在list.html和dashboard.html文件里按照之前的方法将静态文件路径修改成 th: 形式。dashboard如下图(list修改同理):
在程中新建EmployeeController类
@Controller
public class EmployeeController {
@Autowired
EmployeeDao employeeDao;
//查询所有员工返回列表页面(list.html显示页面)
@GetMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
//放在请求域中
model.addAttribute("emps",employees);
//thymeleaf默认会拼串,会将emp/list拼接在/templates/下,即:/templates/../xxxx.html
return "emp/list";
}
}
在templates下新建emp文件夹
将list.html拉倒该目录下。
在http://localhost:8080/crud/emps和http://localhost:8080/crud/main.html页面下右键鼠标,点击 检查 ,可以看到头部栏对应html文件的代码。
我们抽取dashboard文件里的topbar来替换list文件里的代码(重复利用)。
首先找到dashboard文件下的nav标签里的代码如下,在里面修改加入代码如下图:
删除list文件下对应的nav标签代码,加入如下图div标签插入提取的topbar。
重新打开网页,可以看到顶部栏对应的div替换代码。
抽取引入的方式有多种。我们用第二种方式抽取侧边栏sidebar。
首先查看侧边栏在大叔board文件中的代码位置。
我们在dashboard文件下的侧边栏标签添加id 如下图:
同时删除list文件sidebar相关nav标签代码,加入dashboard引入的侧边栏如下:
接下来我们将页面的公共区域整合到一个html文件中。在templates下新建commons文件在里面创建bar.html文件。将顶部栏、侧边栏等公共区域的页面代码移到bar文件中。
在dashboard和list文件里修改引用路径:
2。链接高亮和列表完成
在bar文件下加入高亮显示的判断语句
修改dashboard和list文件中的抽取语句
列表
将list中原来的列表数据删除,加入如下tbody标签代码,替换插入employeeDao中的数据。
可以看到页面的列表显示如下
15.员工添加功能
1.修改员工生日显示格式和添加编辑按钮
在数据源插入代码出修改生日格式并增加两个按钮。
在该段代码上方加入 员工添加 按钮
最后显示如下:
2.添加超链接
修改list文件
修改EmployeeController文件,添加员工添加页码方法AddPage:
//来到员工添加页面
@GetMapping("/emp")
public String toAddPage(){
//来到添加页面
return "emp/add";
}
在emp文件夹下添加add.html文件。
复制list.html内容到add.html中。
删除如图所示的内容:
<form>
<div class="form-group">
<label>LastName</label>
<input type="text" class="form-control" placeholder="zhangsan">
</div>
<div class="form‐group">
<label>Email</label>
<input type="email" class="form-control" placeholder="zhangsan@atguigu.com">
</div>
<div class="form-group">
<label>Gender</label><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>department</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label>Birth</label>
<input type="text" class="form-control" placeholder="zhangsan">
</div>
<button type="submit" class="btn btn-primary">添加</button>
</form>
ps:从笔记文档(pdf格式)里复制过来的form代码,“-”符号是有问题的,会导致到/emp页面显示样式出错,将“-”全部重新写一遍就能恢复。
修改前后如下图。
修改EmployeeController文件,修改后如下:
@Controller
public class EmployeeController {
@Autowired
EmployeeDao employeeDao;
@Autowired
DepartmentDao departmentDao;
//查询所有员工返回列表页面(list.html显示页面)
@GetMapping("/emps")
public String list(Model model){
Collection<Employee> employees = employeeDao.getAll();
//放在请求域中
model.addAttribute("emps",employees);
//thymeleaf默认会拼串,会将emp/list拼接在/templates/下,即:/templates/../xxxx.html
return "emp/list";
}
//通过list.html文件中的th:href="@{/emp}按钮超链接跳转来到员工添加页面
@GetMapping("/emp")
public String toAddPage(Model model){
//进入方法后跳转来到添加页面
Collection<Department> departments = departmentDao.getDepartments();
model.addAttribute("depts",departments);
return "emp/add";
}
}
删除add文件中的部分代码:
加入遍历操作:
网页界面如下:
在add文件下修改如下:
在EmployeeController文件添加新方法:
@PostMapping("/emp")
public String addEmp(Employee employee){
//该方法会跳转到员工列表页面
employeeDao.save(employee);
//redirect:表示重定向到一个页面路径
//forwad:表示转发到一个页面路径
return "redirect:/emps";
}
根据employee对象属性在add文件添加 name 属性
添加员工后就能在员工列表看到添加的新员工了(日期必须是“/”分割)
16.员工编辑
在list文件修改编辑按钮,添加超链接用于响应EmployeeController。
在EmployeeController类下添加方法:
@GetMapping("/emp/{id}")
public String toEditPage(@PathVariable("id")Integer id,Model model){
Employee employee = employeeDao.get(id);
model.addAttribute("emp", employee);
return "emp/edit";
}
在emp下复制add创建edit.html文件
修改edit文件,加入如下:
运行工程,打开网页
17.员工删除功能
方法一
在list文件修改如下:
在EmployeeController里加入方法:
//员工删除
@PostMapping("/emp/{id}")
public String deleteEmployee(@PathVariable("id") Integer id){
employeeDao.delete(id);
return "redirect:/emps";
}
打开网页,点击删除,功能实现。