SpringBoot-14-模块开发-环境和首页

5.6.1 环境准备

• 静态资源js/css/img的导入，位置static/asserts,静态资源地址或者demo静态资源
• html页面导入到templates

我们可以使用开源的前端页面模板,里面有非常优秀的静态资源页面和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

下一篇：SpringBoot-15-模块开发-页面国际化