5.6.1 环境准备
我们可以使用开源的前端页面模板,里面有非常优秀的静态资源页面和js,css等资源,例如:php中文网,本节只是演示SpringBoot进行web模块开发的过程
-
模块结构
-
实体类pojo目录
-
Department/Employee
package com.zk.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/**
* @author CNCLUKZK
* @create 2022/7/31-22:55
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Department {
private Integer id;
private String departmentName;
}
package com.zk.pojo;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import java.util.Date;
/**
* @author CNCLUKZK
* @create 2022/7/31-22:56
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Employee {
private Integer id;
private String lastName;
private String email;
/**
* 0:女 1:男
*/
private Integer gender;
private Department department;
private Date birth;
}
- dao层:DepartmentDao、EmployeeDao用map来模拟数据的实现
package com.zk.dao;
import com.zk.pojo.Department;
import org.springframework.stereotype.Repository;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
/**
* @author CNCLUKZK
* @create 2022/7/31-23:03
*/
@Repository
public class DepartmentDao {
//模拟数据库中的数据
private static Map<Integer, Department> departmentMap = null;
static {
departmentMap = new HashMap<>();
departmentMap.put(101,new Department(101,"教学部"));
departmentMap.put(101,new Department(102,"统战部"));
departmentMap.put(101,new Department(103,"市场部"));
departmentMap.put(101,new Department(104,"后勤部"));
departmentMap.put(101,new Department(105,"运营部"));
departmentMap.put(101,new Department(106,"编辑部"));
}
public Collection<Department> getDepartments(){
return departmentMap.values();
}
public Department getDepartmentById(Integer id){
return departmentMap.get(id);
}
}
package com.zk.dao;
import com.zk.pojo.Department;
import com.zk.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 CNCLUKZK
* @create 2022/7/31-23:12
*/
@Repository
public class EmployeeDao {
private static Map<Integer, Employee> employeeMap = null;
@Autowired
private DepartmentDao departmentDao;
static {
employeeMap = new HashMap<>();
//就是alt加选中--批量操作
employeeMap.put(1001,new Employee(1001,"tony","11@163.com",1,new Department(101,"教学部"),new Date()));
employeeMap.put(1002,new Employee(1002,"mary","11@163.com",0,new Department(102,"统战部"),new Date()));
employeeMap.put(1003,new Employee(1003,"tom","11@163.com",1,new Department(103,"市场部"),new Date()));
employeeMap.put(1004,new Employee(1004,"hanni","11@163.com",0,new Department(104,"后勤部"),new Date()));
employeeMap.put(1005,new Employee(1005,"wanghua","11@163.com",1,new Department(105,"运营部"),new Date()));
employeeMap.put(1006,new Employee(1006,"hanmeimei","11@163.com",0,new Department(106,"编辑部"),new Date()));
}
public Collection<Employee> getEmployees(){
return employeeMap.values();
}
private Employee getEmployeeById(Integer id){
return employeeMap.get(id);
}
private static Integer eid = 1007;
public void saveEmployee(Employee employee){
if (employee.getId() == null) {
employee.setId(eid++);
}
employee.setDepartment(departmentDao.getDepartmentById(employee.getDepartment().getId()));
employeeMap.put(employee.getId(),employee);
}
public void updateEmployee(Employee employee){
if (employee.getId() == null) {
employee.setId(eid++);
}
employeeMap.put(employee.getId(),employee);
}
public void delateEmployeeById(Integer id){
employeeMap.remove(id);
}
}
5.6.2 首页实现
- 方式1:首页跳转实现Controller中写请求路径
@Controller
public class LoginController {
@RequestMapping({"/","/index"})
public String toindex(){
return "index";
}
}
- 方式2:自定义扩展springmvc
package com.zk.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
//扩展springmvc
//如果。你想diy一些定制化的功能,只要写这个组件,然后将它交给springboot,springboot就会帮我们自动装魔!
//应为类型要求为WebMvcConfigurer,所以我们实现其接口
//可以使用自定义类扩展springmvc的功能
@Configuration
@EnableWebMvc
public class MyMvcConfiguration implements WebMvcConfigurer {
//视图跳转
@Override
public void addViewControllers(ViewControllerRegistry registry) {
//浏览器发送特殊请求,就会跳转到特定页面
registry.addViewController("/").setViewName("index");
registry.addViewController("/index").setViewName("index");
}
}
- 关闭模板引擎的缓存
#关闭模板引擎的缓存
spring:
thymeleaf:
cache: false
- 首页index.html
<!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 Bootstrap</title>
<!-- Bootstrap core CSS -->
<link th:href="@{/asserts/css/bootstrap.min.css}" rel="stylesheet">
<!-- Custom styles for this template -->
<link 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}" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label class="sr-only">Username</label>
<input type="text" class="form-control" placeholder="Username" required="" autofocus="">
<label class="sr-only">Password</label>
<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 in</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
<a class="btn btn-sm">中文</a>
<a class="btn btn-sm">English</a>
</form>
</body>
</html>
- 仅仅用thymeleaf修改本地链接,在线链接不要改
- 首页配置:注意点,所有页面的静态资源都需要使用thymeleaf接管;链接@{}
server:
port: 8080
servlet:
context-path: /zk
- thymeleaf好处:一旦修改了项目根地址,静态资源即可自动加上根地址http://127.0.0.1:8081/zk/asserts/css/bootstrap.min.css