• SpringMVC ---- RESTful案例

    SpringMVC ---- RESTful案例

    1. 准备工作

    和传统 CRDU 一样，实现对员工信息的增删改查。

    • 搭建环境
    • 准备实体类
    package com.fickler.rest.bean;

public class Employee {

    private Integer id;
    private String lastName;

    private String email;
    //1 male, 0 female
    private Integer gender;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public Integer getGender() {
        return gender;
    }

    public void setGender(Integer gender) {
        this.gender = gender;
    }

    public Employee(Integer id, String lastName, String email, Integer gender) {
        super();
        this.id = id;
        this.lastName = lastName;
        this.email = email;
        this.gender = gender;
    }

    public Employee() {
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 准备 dao 模拟数据
    package com.fickler.rest.dao;

import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

import com.fickler.rest.bean.Employee;
import org.springframework.stereotype.Repository;


@Repository
public class EmployeeDao {

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

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

        employees.put(1001, new Employee(1001, "E-AA", "aa@163.com", 1));
        employees.put(1002, new Employee(1002, "E-BB", "bb@163.com", 1));
        employees.put(1003, new Employee(1003, "E-CC", "cc@163.com", 0));
        employees.put(1004, new Employee(1004, "E-DD", "dd@163.com", 0));
        employees.put(1005, new Employee(1005, "E-EE", "ee@163.com", 1));
    }

    private static Integer initId = 1006;

    public void save(Employee employee){
        if(employee.getId() == null){
            employee.setId(initId++);
        }
        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);
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46

    2. 功能清单

    功能URL地址请求方式
    访问首页/GET
    查询全部数据/employeeGET
    删除/employee/2DELETE
    跳转到添加数据页面/toAddGET
    执行保存/employeePOST
    跳转到更新数据页面/employee/2GET
    执行更新/employeePUT

    3. 具体功能：访问首页

    a>配置view-controller

        
    <mvc:view-controller path="/" view-name="index">mvc:view-controller>

    
    <mvc:annotation-driven>mvc:annotation-driven>

    • 1
    • 2
    • 3
    • 4
    • 5

    b>创建页面

    DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页title>
head>
<body>
<h1>首页h1>
<a th:href="@{/employee}">查看员工信息a>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    4. 具体功能：查询所有员工数据

    a>控制器方法

        @RequestMapping(value = "/employee", method = RequestMethod.GET)
    public String getEmployeeList(Model model){
        Collection<Employee> employees = employeeDao.getAll();
        model.addAttribute("employees", employees);
        return "employee_list";
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    b>创建employee_list.html

    DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Employee Infotitle>
head>
<body>
<table border="1" cellpadding="0" cellspacing="0" style="text-align: center;" id="dataTable">
    <tr>
        <th colspan="5">Employee Infoth>
    tr>
    <tr>
        <th>idth>
        <th>lastNameth>
        <th>emailth>
        <th>genderth>
        <th>optionsth>
    tr>
    <tr th:each="employee : ${employees}">
        <td th:text="${employee.id}">td>
        <td th:text="${employee.lastName}">td>
        <td th:text="${employee.email}">td>
        <td th:text="${employee.gender}">td>
        <td>
            <a>deletea>
            <a>updatea>
        td>
    tr>
table>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    5. 具体功能：删除

    a>创建处理delete请求方式的表单

    
<form id="delete_form" method="post">
    <input type="hidden" name="_method" value="delete">
form>

    • 1
    • 2
    • 3
    • 4

    b>删除超链接绑定点击事件

    引入 vue.js

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

    • 1

    删除超链接

                <a class="deleteA" @click = "deleteEmployee" th:href="@{'/employee/' + ${employee.id}}">deletea>

    • 1

    通过 vue 处理点击事件

    <script type="text/javascript">
    var vue = new Vue({
        el:"#dataTable",
        methods:{
            deleteEmployee:function (event) {
                //根据id获取表单元素
                var delete_form = document.getElementById("delete_form");
                //将触发点击事件的超链接href属性赋值给表单的action
                delete_form.action = event.target.href;
                //提交表单
                delete_form.submit();
                //取消超链接的默认行为
                event.preventDefault();
            }
        }
    });
script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    c>控制器方法

        @RequestMapping(value = "/employee/{id}", method = RequestMethod.DELETE)
    public String deleteEmployee(@PathVariable("id") Integer id){
        employeeDao.delete(id);
        return "redirect:/employee";
    }

    • 1
    • 2
    • 3
    • 4
    • 5

    6. 具体功能：跳转到添加数据页面

    a>配置view-controller

        <mvc:view-controller path="/toAdd" view-name="employee_add">mvc:view-controller>

    • 1

    b>创建employee_add.html

    DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Add Employeetitle>
head>
<body>
<h1>添加信息h1>
<form th:action="@{/employee}" method="post">
    lastName：<input type="text" name="lastName"><br>
    email：<input type="text" name="email"><br>
    gender：<input type="radio" name="gender" value="1">male
    <input type="radio" name="gender" value="0">female<br>
    <input type="submit" value="add"><br>
form>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    7. 具体功能：执行保存

    a>控制器方法

        @RequestMapping(value = "/employee", method = RequestMethod.POST)
    public String addEmployee(Employee employee){
        employeeDao.save(employee);
        return "redirect:/employee";
    }

    • 1
    • 2
    • 3
    • 4
    • 5

    8. 具体功能：跳转到更新数据页面

    a>修改超链接

                <a th:href="@{'/employee/' + ${employee.id}}">updatea>

    • 1

    b>控制器方法

        @RequestMapping(value = "/employee/{id}", method = RequestMethod.GET)
    public String getEmployeeById(@PathVariable("id") Integer id, Model model){
        Employee employee = employeeDao.get(id);
        model.addAttribute("employee", employee);
        return "employee_update";
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    c>创建employee_update.html

    DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Update Employeetitle>
head>
<body>
<h1>Update Employeeh1>
<form th:action="@{/employee}" method="post">
    <input type="hidden" name="_method" value="put">
    <input type="hidden" name="id" th:value="${employee.id}">
    lastName：<input type="text" name="lastName" th:value="${employee.lastName}"><br>
    email：<input type="text" name="email" th:value="${employee.email}"><br>
    
    gender：<input type="radio" name="gender" value="1" th:field="${employee.gender}">male
    <input type="radio" name="gender" value="0" th:field="${employee.gender}">female<br>
    <input type="submit" value="update"><br>
form>
body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    9. 具体功能：执行更新

    a>控制器方法

        @RequestMapping(value = "/employee", method = RequestMethod.PUT)
    public String updateRmployee(Employee employee){
        employeeDao.save(employee);
        return "redirect:/employee";
    }

    • 1
    • 2
    • 3
    • 4
    • 5
  • 相关阅读:
    学习typescript（1）
    远程桌面连接接入路由器的电脑(Windows10)
    【infiniband】 MAD、 uMAD、Verbs、RDMACM
    手把手带你使用ZigBee——通过爱智控制EFR32，以及 Simplicity Studio 使用过程中注意事项
    Pycharm终端没法敲代码让我看日志重装也那样！
    不重装系统，如何将系统从SSD迁移到M2固态硬盘
    openFeign夺命连环9问，这谁受得了？
    计算机毕业设计Java机票实时比价系统(源码+系统+mysql数据库+lw文档)
    蓝桥杯每日一题203.11.7
    基于Java+SpringBoot+Vue前后端分离的房屋租赁管理系统
  • 原文地址：https://blog.csdn.net/qq_52354698/article/details/127039935