SpringBoot Restful Crud

一个简单的Restful Crud实验

默认首页的访问设置：

    // 注册 自定义的mvc组件，所有的WebMvcConfigurer组件都会一起起作用

    @Bean

    public WebMvcConfigurer webMvcConfigurer(){

          WebMvcConfigurer webMvcConfigureradapter = new WebMvcConfigurer(){

              // 添加视图解析

              @Override

              public void addViewControllers(ViewControllerRegistry registry) {

                  registry.addViewController("/").setViewName("login");

                  registry.addViewController("/index.html").setViewName("login");

                  registry.addViewController("/main.html").setViewName("dashboard");

              }

           /*注册拦截器

项目结构：

Bean.Department

package com.project.javasystem.Bean;

public class Department {

    private Integer id;

    private String departmentName;

    public Department() {

    }

    public Department(int i, String string) {

        this.id = i;

        this.departmentName = string;

    }

    public Integer getId() {

        return id;

    }

    public void setId(Integer id) {

        this.id = id;

    }

    public String getDepartmentName() {

        return departmentName;

    }

    public void setDepartmentName(String departmentName) {

        this.departmentName = departmentName;

    }

    @Override

    public String toString() {

        return "Department [id=" + id + ", departmentName=" + departmentName + "]";

    }

}

Bean.Employee

package com.project.javasystem.Bean;

public class Department {

    private Integer id;

    private String departmentName;

    public Department() {

    }

    public Department(int i, String string) {

        this.id = i;

        this.departmentName = string;

    }

    public Integer getId() {

        return id;

    }

    public void setId(Integer id) {

        this.id = id;

    }

    public String getDepartmentName() {

        return departmentName;

    }

    public void setDepartmentName(String departmentName) {

        this.departmentName = departmentName;

    }

    @Override

    public String toString() {

        return "Department [id=" + id + ", departmentName=" + departmentName + "]";

    }

}

Component.LoginHandlerInterceptor

package com.project.javasystem.Component;

import org.springframework.web.servlet.HandlerInterceptor;

import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

/*登录检查 */

public class LoginHandlerInterceptor implements HandlerInterceptor {

    // 目标方法执行之前

    @Override

    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("/index.html").forward(request,response);

            return false;

        }else {

            //已登录，放行请求

            return true;

        }

    }

    @Override

    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView modelAndView) throws Exception {

       /* response.setContentType("text/html;charset=UTF-8");*/

    }

    @Override

    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex) throws Exception {

    }

}

Component.MyLocaleResolver

package com.project.javasystem.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 httpServletRequest) {

        String l = httpServletRequest.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 httpServletRequest, HttpServletResponse httpServletResponse, Locale locale) {

    }

}

Config

package com.project.javasystem.Config;

import com.project.javasystem.Component.MyLocaleResolver;

import com.project.javasystem.Component.LoginHandlerInterceptor;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.web.servlet.LocaleResolver;

import org.springframework.web.servlet.config.annotation.InterceptorRegistry;

import org.springframework.web.servlet.config.annotation.ViewControllerRegistry;

import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration

public class MyMvcConfig implements WebMvcConfigurer {

    @Override

    public void addViewControllers(ViewControllerRegistry registry) {

        //super.addViewControllers(registry);

        //浏览器发送请求 hello 定位到first.html 页面

        registry.addViewController("/test").setViewName("/public/test");

        registry.addViewController("/").setViewName("login");

        registry.addViewController("/index.html").setViewName("login");

        registry.addViewController("/main.html").setViewName("dashboard");

    }

    @Override

    public void addInterceptors(InterceptorRegistry registry) {

        //添加拦截器并且放行对静态资源的拦截 Springboot5.x 不会默认放行静态资源

        registry.addInterceptor(new LoginHandlerInterceptor()).addPathPatterns("/**")

                .excludePathPatterns("/index.html","/","/login","/static/**","/error");

    }

    //注册地区区域解析器

    @Bean

    public LocaleResolver localeResolver(){

        return new MyLocaleResolver();

    }

}

Controller.LoginController

package com.project.javasystem.Controller;

import org.springframework.stereotype.Controller;

import org.springframework.util.StringUtils;

import org.springframework.web.bind.annotation.*;

import javax.servlet.http.HttpSession;

import java.util.Map;

@Controller

public class LoginController {

    @PostMapping(value = "/login") //restful 风格的请求方式，等于下面得value的值限定方式

    /*@RequestMapping(value = "/login",method = RequestMethod.POST)*/

    public String Login(@RequestParam("username") String username,

                        @RequestParam("password") String password,

                        Map<String,Object> map,

                        HttpSession session){

        if (!StringUtils.isEmpty(username) && "123456".equals(password)){

            // 登录成功。为了防止表单重复提交，用重定向的方式

            session.setAttribute("loginUser",username);

            return "redirect:/main.html";

        }else {

            //登录失败

            map.put("msg","用户名密码错误");

            return "login";

        }

    }

}

Controller.EmployeeController

package com.project.javasystem.Controller;

import com.project.javasystem.Bean.Department;

import com.project.javasystem.Bean.Employee;

import com.project.javasystem.Dao.DepartmentDao;

import com.project.javasystem.Dao.EmployeeDao;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Controller;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.*;

import java.util.Collection;

//和员工相关的请求

@Controller

public class EmployeeController {

    @Autowired

    DepartmentDao departmentDao;

    @Autowired

    EmployeeDao employeeDao ;

     // 查询所有员工列表

    @GetMapping("/emps")

    public String list(Model model){

        Collection<Employee>employee = employeeDao.getAll();

        // 放在请求域中

        model.addAttribute("emps",employee);

        return "emp/list";

    }

    //来到员工添加页面

    @GetMapping("/emp")

    public String toAddPage(Model model){

        // 来到添加页面 查出所有的部门，在页面显示

        Collection<Department> departments = departmentDao.getDepartments();  //Alt + Enter 键 一键生成

        model.addAttribute("depts",departments);

        return "emp/add";

    }

    // 员工添加功能

    // springMVC 自动将请求参数和入参对象的属性进行一一绑定，所以请求参数名称要和javabean的属性名称一样

    @PostMapping("/emp")

    public String addEmp(Employee employee){

        //来到员工列表页面

        //保存员工

        employeeDao.save(employee);

        // redirect:表示重定向一个地址，forward:表示转发到一个地址  / 代表当前项目路径

        return "redirect:/emps";

    }

    //员工修改页面

    @GetMapping("/emp/{id}")

    public String toEditPage(@PathVariable("id") Integer id,Model model){

        Employee employee = employeeDao.get(id);

        model.addAttribute("emp",employee);

        //查出部门。下拉列表要显示所有部门

        Collection<Department> departments = departmentDao.getDepartments();  //Alt + Enter 键 一键生成

        model.addAttribute("depts",departments);

        //回到修改页面。查出当前员工并回显

        return "emp/add";

    }

    // 员工修改： 需要提交员工ID

    @PutMapping("/emp")

    public String updateEmployee(Employee employee){

         employeeDao.save(employee);

        //重定向到员工列表页面

        return "redirect:/emps";

    }

    //员工删除 ; 也需要提交员工ID

    @DeleteMapping("/emp/{id}")

    public String deleteEmployee(@PathVariable("id") Integer id){

        employeeDao.delete(id);

        //重定向到员工列表页面

        return "redirect:/emps";

    }

}

Dao.DepartmentDao

package com.project.javasystem.Dao;

import java.util.Collection;

import java.util.HashMap;

import java.util.Map;

import com.project.javasystem.Bean.Department;

import org.springframework.stereotype.Repository;

@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();

    }

    public Department getDepartment(Integer id){

        return departments.get(id);

    }

}

Dao.EmployeeDao

package com.project.javasystem.Dao;

import java.util.Collection;

import java.util.HashMap;

import java.util.Map;

import com.project.javasystem.Bean.Department;

import com.project.javasystem.Bean.Employee;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Repository;

@Repository

public class EmployeeDao {

    private static Map<Integer, Employee> employees = null;

    @Autowired

    private DepartmentDao departmentDao;

    static{

        employees = new HashMap<Integer, Employee>();

        employees.put(1001, new Employee(1001, "John", "aa@163.com", 1, new Department(101, "总裁部")));

        employees.put(1002, new Employee(1002, "Jack", "bb@163.com", 1, new Department(102, "财务部")));

        employees.put(1003, new Employee(1003, "Dany", "cc@163.com", 0, new Department(103, "人力资源部")));

        employees.put(1004, new Employee(1004, "Alven", "dd@163.com", 0, new Department(104, "结算部")));

        employees.put(1005, new Employee(1005, "Tina", "ee@163.com", 1, new Department(105, "客服部")));

    }

    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();

    }

    public Employee get(Integer id){

        return employees.get(id);

    }

    public void delete(Integer id){

        employees.remove(id);

    }

}

抽取公共文件 bar.html

<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--topbar-->

<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 out</a>

        </li>

    </ul>

</nav>

<!--引入sidebar-->

<nav class="col-md-2 d-none d-md-block bg-light sidebar" th:fragment="sidebar">

    <div class="sidebar-sticky">

        <ul class="nav flex-column">

            <li class="nav-item">

                <a class="nav-link active" th:class="${activeUri == 'main.html'?'nav-link active':'nav-link'}"

                 th:href="@{/main.html}">

                    <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 active"  href="/#" th:href="@{/emps}" th:class="${activeUri =='emps'?'nav-link active':'nav-link'}">

                    <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 reports</span>

            <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>

</body>

</html>

add.html

<!DOCTYPE html>

<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->

<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>add</title>

        <!-- Bootstrap core CSS -->

        <link href="/static/css/bootstrap.min.css" rel="stylesheet">

        <!-- Custom styles for this template -->

        <link href="/static/css/dashboard.css" rel="stylesheet">

        <style type="text/css">

            /* Chart.js */

            @-webkit-keyframes chartjs-render-animation {

                from {

                    opacity: 0.99

                }

                to {

                    opacity: 1

                }

            }

            @keyframes chartjs-render-animation {

                from {

                    opacity: 0.99

                }

                to {

                    opacity: 1

                }

            }

            .chartjs-render-monitor {

                -webkit-animation: chartjs-render-animation 0.001s;

                animation: chartjs-render-animation 0.001s;

            }

        </style>

    </head>

    <body>

    <!--引入topbar-->

    <div th:replace="commons/bar::topbar"></div>

        <div class="container-fluid">

            <div class="row">

                <!--引入sidebar-->

                <div th:replace="commons/bar::sidebar(activeUri='emps')"></div>

                <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

                    <form th:action="@{/emp}" method="post">

                        <!--需要区分是员工修改还是添加-->

                        <!--发送Put请求来修改员工数据-->

                        <!--

                        1 Springmvc中配置hiddenhttpMrthodfilter(Springboot自动配置好的)

                        2 页面创建一个Post表单，

                        3 创建一个Input项，name='_method'; 值就是我们指定的请求方式

                        -->

                        <input type="hidden" name="_method" value="put" th:if="${emp!=null}" />

                        <input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">

                        <div class="form-group">

                            <label>LastName</label>

                            <input type="text" name="lastName" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">

                        </div>

                        <div class="form-group">

                            <label>Email</label>

                            <input type="email" name="email" class="form-control" placeholder="zhangsan@163.com" th:value="${emp!=null}?${emp.email}">

                        </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" th:checked="${emp!=null}?${emp.gender==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" th:checked="${emp!=null}?${emp.gender==0}">

                                <label class="form-check-label">女</label>

                            </div>

                        </div>

                        <div class="form-group">

                            <label>department</label>

                            <!--提交的是部门的ID-->

                            <select class="form-control" name="department.id">

                                <option  th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}" th:selected="${emp!=null}?${dept.id==emp.department}">1</option>

                            </select>

                        </div>

                        <div class="form-group">

                            <label>Birth</label>

                            <input type="text" name="birth" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${#dates.format(emp.birth,'yyyy-MM-dd HH:mm')}">

                        </div>

                        <button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>

                    </form>

                </main>

            </div>

        </div>

        <!-- Bootstrap core JavaScript

    ================================================== -->

        <!-- Placed at the end of the document so the pages load faster -->

        <script type="text/javascript" src="/static/js/jquery-3.2.1.slim.min.js"></script>

        <script type="text/javascript" src="/static/js/popper.min.js"></script>

        <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>

        <!-- Icons -->

        <script type="text/javascript" src="/static/js/feather.min.js"></script>

        <script>

            feather.replace()

        </script>

        <!-- Graphs -->

        <script type="text/javascript" src="/static/js/Chart.min.js"></script>

        <script>

            var ctx = document.getElementById("myChart");

            var myChart = new Chart(ctx, {

                type: 'line',

                data: {

                    labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],

                    datasets: [{

                        data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],

                        lineTension: 0,

                        backgroundColor: 'transparent',

                        borderColor: '#007bff',

                        borderWidth: 4,

                        pointBackgroundColor: '#007bff'

                    }]

                },

                options: {

                    scales: {

                        yAxes: [{

                            ticks: {

                                beginAtZero: false

                            }

                        }]

                    },

                    legend: {

                        display: false,

                    }

                }

            });

        </script>

    </body>

</html>

list.html

<!DOCTYPE html>

<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->

<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>list</title>

        <!-- Bootstrap core CSS -->

        <link href="/static/css/bootstrap.min.css" rel="stylesheet">

        <!-- Custom styles for this template -->

        <link href="/static/css/dashboard.css" rel="stylesheet">

        <style type="text/css">

            /* Chart.js */

            @-webkit-keyframes chartjs-render-animation {

                from {

                    opacity: 0.99

                }

                to {

                    opacity: 1

                }

            }

            @keyframes chartjs-render-animation {

                from {

                    opacity: 0.99

                }

                to {

                    opacity: 1

                }

            }

            .chartjs-render-monitor {

                -webkit-animation: chartjs-render-animation 0.001s;

                animation: chartjs-render-animation 0.001s;

            }

        </style>

    </head>

    <body>

    <!--引入topbar-->

    <div th:replace="commons/bar::topbar"></div>

        <div class="container-fluid">

            <div class="row">

                <!--引入sidebar-->

                <div th:replace="commons/bar::sidebar(activeUri='emps')"></div>

                <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

                    <h2><a class="btn btn-sm btn-success" href="emp" th:href="@{/emp}">添加员工</a></h2>

                    <div class="table-responsive">

                        <table class="table table-striped table-sm">

                            <thead>

                                <tr>

                                    <th>Number</th>

                                    <th>lashName</th>

                                    <th>email</th>

                                    <th>gender</th>

                                    <th>department</th>

                                    <th>birth</th>

                                </tr>

                            </thead>

                            <tbody>

                            <tr th:each="emp:${emps}">

                                <td th:text="${emp.id}"></td>

                                <td th:text="${emp.lastName}"></td>

                                <td th:text="${emp.email}"></td>

                                <td th:text="${emp.gender}==0?'女':'男'"></td>

                                <td th:text="${emp.department.departmentName }"></td>

                                <td th:text="${#dates.format(emp.birth,'yyyy-MM-dd HH:mm')}"></td>

                                <td >

                                    <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>

                                    <button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn" type="submit" >删除</button>

                                </td>

                            </tr>

                            </tbody>

                        </table>

                    </div>

                </main>

                <form method="post" id="deleteEmpForm">

                    <input type="hidden" name="_method" value="delete" />

                </form>

            </div>

        </div>

        <!-- Bootstrap core JavaScript

    ================================================== -->

        <!-- Placed at the end of the document so the pages load faster -->

        <script type="text/javascript" src="/static/js/jquery-3.2.1.slim.min.js"></script>

        <script type="text/javascript" src="/static/js/popper.min.js"></script>

        <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>

        <!-- Icons -->

        <script type="text/javascript" src="/static/js/feather.min.js"></script>

        <script>

            feather.replace()

        </script>

        <script>

            $(".deleteBtn").click(function () {

                // 删除当前员工的

                 $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();

                return false;

               })

        </script>

        <!-- Graphs -->

        <script type="text/javascript" src="/static/js/Chart.min.js"></script>

        <script>

            var ctx = document.getElementById("myChart");

            var myChart = new Chart(ctx, {

                type: 'line',

                data: {

                    labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],

                    datasets: [{

                        data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],

                        lineTension: 0,

                        backgroundColor: 'transparent',

                        borderColor: '#007bff',

                        borderWidth: 4,

                        pointBackgroundColor: '#007bff'

                    }]

                },

                options: {

                    scales: {

                        yAxes: [{

                            ticks: {

                                beginAtZero: false

                            }

                        }]

                    },

                    legend: {

                        display: false,

                    }

                }

            });

        </script>

    </body>

</html>

dashboard.html

<!DOCTYPE html>

<!-- saved from url=(0052)http://getbootstrap.com/docs/4.0/examples/dashboard/ -->

<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>Dashboard</title>

        <!-- Bootstrap core CSS -->

        <link href="/static/css/bootstrap.min.css"  rel="stylesheet">

        <!-- Custom styles for this template -->

        <link href="/css/dashboard.css"  th:href="@{/static/css/dashboard.css}" rel="stylesheet">

        <style type="text/css">

            /* Chart.js */

            @-webkit-keyframes chartjs-render-animation {

                from {

                    opacity: 0.99

                }

                to {

                    opacity: 1

                }

            }

            @keyframes chartjs-render-animation {

                from {

                    opacity: 0.99

                }

                to {

                    opacity: 1

                }

            }

            .chartjs-render-monitor {

                -webkit-animation: chartjs-render-animation 0.001s;

                animation: chartjs-render-animation 0.001s;

            }

        </style>

    </head>

    <body>

 <!--引入topbar-->

 <div th:replace="commons/bar::topbar"></div>

        <div class="container-fluid">

            <div class="row">

<!--引入sidebar-->

 <div th:replace="commons/bar::sidebar(activeUri='main.html')"></div>

                <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">

                    <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">

                        <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">

                            <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>

                        </div>

                        <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">

                            <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>

                        </div>

                    </div>

                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">

                        <h1 class="h2">Dashboard</h1>

                        <div class="btn-toolbar mb-2 mb-md-0">

                            <div class="btn-group mr-2">

                                <button class="btn btn-sm btn-outline-secondary">Share</button>

                                <button class="btn btn-sm btn-outline-secondary">Export</button>

                            </div>

                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle">

                <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-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>

                This week

              </button>

                        </div>

                    </div>

                    <canvas class="my-4 chartjs-render-monitor" id="myChart" width="1076" height="454" style="display: block; width: 1076px; height: 454px;"></canvas>

                </main>

            </div>

        </div>

        <!-- Bootstrap core JavaScript

    ================================================== -->

        <!-- Placed at the end of the document so the pages load faster -->

        <script type="text/javascript" src="/static/js/jquery-3.2.1.slim.min.js" th:href="@{/static/js/jquery-3.2.1.slim.min.js}"></script>

        <script type="text/javascript" src="/static/js/popper.min.js" th:href="@{/static/js/popper.min.js}"></script>

        <script type="text/javascript" src="/static/js/bootstrap.min.js" th:href="@{/static/js/bootstrap.min.js}"></script>

        <!-- Icons -->

        <script type="text/javascript" src="/static/js/feather.min.js" th:href="@{/static/js/feather.min.js}"></script>

        <script>

            feather.replace()

        </script>

        <!-- Graphs -->

        <script type="text/javascript" src="/static/js/Chart.min.js"  th:href="@{/static/js/Chart.min.js}"></script>

        <script>

            var ctx = document.getElementById("myChart");

            var myChart = new Chart(ctx, {

                type: 'line',

                data: {

                    labels: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"],

                    datasets: [{

                        data: [15339, 21345, 18483, 24003, 23489, 24092, 12034],

                        lineTension: 0,

                        backgroundColor: 'transparent',

                        borderColor: '#007bff',

                        borderWidth: 4,

                        pointBackgroundColor: '#007bff'

                    }]

                },

                options: {

                    scales: {

                        yAxes: [{

                            ticks: {

                                beginAtZero: false

                            }

                        }]

                    },

                    legend: {

                        display: false,

                    }

                }

            });

        </script>

    </body>

</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>login</title>

        <!-- Bootstrap core CSS -->

        <link href="/static/css/bootstrap.min.css" th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet">

        <!-- Custom styles for this template -->

        <link href="css/signin.css" th:href="@{/static/css/signin.css}" rel="stylesheet">

    </head>

    <body class="text-center">

        <form class="form-signin" action="dashboard.html" th:action="@{/login}" method="post">

            <img class="mb-4" th:src="@{/static/img/bootstrap-solid.svg}" src="img/bootstrap-solid.svg"  alt="" width="72" height="72">

            <h1 class="h3 mb-3 font-weight-normal" th:text="#{login.tip}">Please sign in</h1>

            <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>

            <label class="sr-only" th:text="#{login.username}">Username</label>

            <input type="text" class="form-control" name="username" placeholder="Username" required="" autofocus="" th:placeholder="#{login.username}">

            <label class="sr-only" th:text="#{login.password}">Password</label>

            <input type="password" class="form-control" name="password" placeholder="Password" required="" th:placeholder="#{login.password}">

            <div class="checkbox mb-3">

                <label><input type="checkbox" value="remember-me"/> [[#{login.remember}]] </label>

            </div>

            <button class="btn btn-lg btn-primary btn-block" type="submit" th:text="#{login.btn}">Sign in</button>

            <p class="mt-5 mb-3 text-muted">© 2010-2018 </p>

            <a class="btn btn-sm"  th:href="@{/login(l='zh_CN')}">中文</a>

            <a class="btn btn-sm"  th:href="@{/login(l='en_US')}">English</a>

        </form>

    </body>

</html>

application.properties

server.port=8080

spring.thymeleaf.cache=false

spring.messages.basename=i18n.login

spring.mvc.static-path-pattern=/static/**

spring.mvc.date-format=yyyy-MM-dd

Springboot2.X 配置了拦截器，会拦截所有资源
#properties 设置静态文件的解析路径，配置了登陆拦截器之后，便于放行
spring.mvc.static-path-pattern=/static/**

1）、RestfulCRUD：CRUD满足Rest风格；

URI： /资源名称/资源标识 HTTP请求方式区分对资源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

2）、实验的请求架构;

实验功能	请求URI	请求方式
查询所有员工	emps	GET
查询某个员工(来到修改页面)	emp/1	GET
来到添加页面	emp	GET
添加员工	emp	POST
来到修改页面（查出员工进行信息回显）	emp/1	GET
修改员工	emp	PUT
删除员工	emp/1	DELETE

thymeleaf公共页面元素抽取

1、抽取公共片段

<div th:fragment="copy">

&copy; 2011 The Good Thymes Virtual Grocery

</div>

2、引入公共片段

<div th:insert="~{footer :: copy}"></div>

~{templatename::selector}：模板名::选择器

~{templatename::fragmentname}:模板名::片段名

3、默认效果：

insert的公共片段在div标签中

如果使用th:insert等属性进行引入，可以不用写~{}：

行内写法可以加上：[[~{}]];[(~{})]；

三种引入公共片段的th属性：

th:insert：将公共片段整个插入到声明引入的元素中

th:replace：将声明引入的元素替换为公共片段

th:include：将被引入的片段的内容包含进这个标签中

<footer th:fragment="copy">

&copy; 2011 The Good Thymes Virtual Grocery

</footer>

引入方式

<div th:insert="footer :: copy"></div>

<div th:replace="footer :: copy"></div>

<div th:include="footer :: copy"></div>

效果

<div>

    <footer>

    &copy; 2011 The Good Thymes Virtual Grocery

    </footer>

</div>

<footer>

&copy; 2011 The Good Thymes Virtual Grocery

</footer>

<div>

&copy; 2011 The Good Thymes Virtual Grocery

</div>

引入片段的时候传入参数：

<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">

    <div class="sidebar-sticky">

        <ul class="nav flex-column">

            <li class="nav-item">

                <a class="nav-link active"

                   th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}"

                   href="#" th:href="@{/main.html}">

                    <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>

<!--引入侧边栏;传入参数-->

<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>

CRUD-员工添加

添加页面

<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>

提交的数据格式不对：生日：日期；

2017-12-12；2017/12/12；2017.12.12；

日期的格式化；SpringMVC将页面提交的值需要转换为指定的类型;

2017-12-12---Date；类型转换，格式化;

默认日期是按照/的方式；

7）、CRUD-员工修改

修改添加二合一表单

<!--需要区分是员工修改还是添加；-->

<form th:action="@{/emp}" method="post">

    <!--发送put请求修改员工数据-->

    <!--

1、SpringMVC中配置HiddenHttpMethodFilter;（SpringBoot自动配置好的）

2、页面创建一个post表单

3、创建一个input项，name="_method";值就是我们指定的请求方式

-->

    <input type="hidden" name="_method" value="put" th:if="${emp!=null}"/>

    <input type="hidden" name="id" th:if="${emp!=null}" th:value="${emp.id}">

    <div class="form-group">

        <label>LastName</label>

        <input name="lastName" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${emp.lastName}">

    </div>

    <div class="form-group">

        <label>Email</label>

        <input name="email" type="email" class="form-control" placeholder="zhangsan@atguigu.com" th:value="${emp!=null}?${emp.email}">

    </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" th:checked="${emp!=null}?${emp.gender==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" th:checked="${emp!=null}?${emp.gender==0}">

            <label class="form-check-label">女</label>

        </div>

    </div>

    <div class="form-group">

        <label>department</label>

        <!--提交的是部门的id-->

        <select class="form-control" name="department.id">

            <option th:selected="${emp!=null}?${dept.id == emp.department.id}" th:value="${dept.id}" th:each="dept:${depts}" th:text="${dept.departmentName}">1</option>

        </select>

    </div>

    <div class="form-group">

        <label>Birth</label>

        <input name="birth" type="text" class="form-control" placeholder="zhangsan" th:value="${emp!=null}?${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}">

    </div>

    <button type="submit" class="btn btn-primary" th:text="${emp!=null}?'修改':'添加'">添加</button>

</form>

CRUD-员工删除

<tr th:each="emp:${emps}">

    <td th:text="${emp.id}"></td>

    <td>[[${emp.lastName}]]</td>

    <td th:text="${emp.email}"></td>

    <td th:text="${emp.gender}==0?'女':'男'"></td>

    <td th:text="${emp.department.departmentName}"></td>

    <td th:text="${#dates.format(emp.birth, 'yyyy-MM-dd HH:mm')}"></td>

    <td>

        <a class="btn btn-sm btn-primary" th:href="@{/emp/}+${emp.id}">编辑</a>

        <button th:attr="del_uri=@{/emp/}+${emp.id}" class="btn btn-sm btn-danger deleteBtn">删除</button>

    </td>

</tr>

<script>

    $(".deleteBtn").click(function(){

        //删除当前员工的

        $("#deleteEmpForm").attr("action",$(this).attr("del_uri")).submit();

        return false;

    });

</script>

巴特西

SpringBoot Restful Crud

一个简单的Restful Crud实验

application.properties

Springboot2.X 配置了拦截器，会拦截所有资源
#properties 设置静态文件的解析路径，配置了登陆拦截器之后，便于放行
spring.mvc.static-path-pattern=/static/**

7）、CRUD-员工修改

CRUD-员工删除

最新文章

热门文章

巴特西

SpringBoot Restful Crud

一个简单的Restful Crud实验

application.properties

Springboot2.X 配置了 拦截器，会拦截所有资源#properties 设置静态文件的解析路径，配置了登陆拦截器之后，便于放行spring.mvc.static-path-pattern=/static/**

7）、CRUD-员工修改

CRUD-员工删除

最新文章

热门文章

Springboot2.X 配置了拦截器，会拦截所有资源
#properties 设置静态文件的解析路径，配置了登陆拦截器之后，便于放行
spring.mvc.static-path-pattern=/static/**