相关准备

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

  • 搭建环境
  • 准备实体类
public class Employee {

    private Integer id;

    private String lastName;

    private String email;

    //1 male, 0 female

    private Integer gender;

    //getter,setter,有参无参

}
  • 准备dao模拟数据
@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);

    }

}

功能清单

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

具体功能：访问首页

①配置view-controller

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

②创建页面

<!DOCTYPE html>

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

    <head>

        <meta charset="UTF-8" >

        <title>Title</title>

    </head>

    <body>

        <h1>首页</h1>

        <a th:href="@{/employee}">访问员工信息</a>

    </body>

</html>

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

①控制器方法

@RequestMapping(value = "/employee", method = RequestMethod.GET)

public String getEmployeeList(Model model){

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

    model.addAttribute("employeeList", employeeList);

    return "employee_list";

}

②创建employee_list.html

<!DOCTYPE html>

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

    <head>

        <meta charset="UTF-8">

        <title>Employee Info</title>

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

    </head>

    <body>

        <table border="1" cellpadding="0" cellspacing="0" style="text-align:center;" id="dataTable">

            <tr>

                <th colspan="5">Employee Info</th>

            </tr>

            <tr>

                <th>id</th>

                <th>lastName</th>

                <th>email</th>

                <th>gender</th>

                <th>options(<a th:href="@{/toAdd}">add</a>)</th>

            </tr>

            <tr th:each="employee : ${employeeList}">

                <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 class="deleteA" @click="deleteEmployee"

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

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

                </td>

            </tr>

        </table>

    </body>

</html>

具体功能：删除

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

<!-- 作用：通过超链接控制表单的提交，将post请求转换为delete请求 -->

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

    <!-- HiddenHttpMethodFilter要求：必须传输_method请求参数，并且值为最终的请求方式 -->

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

</form>

引入vue.js

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

删除超链接

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

通过vue处理点击事件

<script type="text/javascript">

    var vue = new Vue({

        el:"#dataTable",

        methods:{

            //event表示当前事件

            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>

③控制器方法

@RequestMapping(value = "/employee/{id}", method = RequestMethod.DELETE)

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

    employeeDao.delete(id);

    return "redirect:/employee";

}

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

①配置view-controller

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

②创建employee_add.html

<!DOCTYPE html>

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

    <head>

        <meta charset="UTF-8">

        <title>Add Employee</title>

    </head>

    <body>

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

具体功能：执行保存

①控制器方法

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

public String addEmployee(Employee employee){

    employeeDao.save(employee);

    return "redirect:/employee";

}

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

①修改超链接

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

②控制器方法

@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";

}

③创建employee_update.html

<!DOCTYPE html>

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

    <head>

        <meta charset="UTF-8">

        <title>Update Employee</title>

    </head>

    <body>

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

            <!--

                th:field="${employee.gender}"可用于单选框或复选框的回显

                若单选框的value和employee.gender的值一致，则添加checked="checked"属性

			-->

            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>

具体功能：执行更新

控制器方法

@RequestMapping(value = "/employee", method = RequestMethod.PUT)

public String updateEmployee(Employee employee){

    employeeDao.save(employee);

    return "redirect:/employee";

}

欢迎关注公众号：愚生浅末。

SpringMVC:RESTful案例的更多相关文章

  1. HTTP Status 405 - Request method 'GET' not supported？（尚硅谷Restful案例练习关于Delete方法出现的错误）

    哈罗大家好,最近在如火如荼的学习java开发----Spring系列框架,当学习到SpringMVC,动手实践RESTFUL案例时,发现了以上报错405,get请求方法没有被支持. 首先第一步,我查看 ...

  2. Java开发学习(二十三)----SpringMVC入门案例、工作流程解析及设置bean加载控制

    一.SpringMVC概述 SpringMVC是隶属于Spring框架的一部分,主要是用来进行Web开发,是对Servlet进行了封装.SpringMVC是处于Web层的框架,所以其主要的作用就是用来 ...

  3. SpringMVC入门案例及请求流程图（关于处理器或视图解析器或处理器映射器等的初步配置）

    SpringMVC简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 Spring结构图 Spr ...

  4. springMVC入门（二）------springMVC入门案例

    简介 本案例主要完成了springMVC的基本配置,可针对响应的HTTP URL返回数据与视图 一.###web.xml的配置 要使springMVC生效,首先需要对web.xml进行配置,配置spr ...

  5. Restful 介绍及SpringMVC+restful 实例讲解

    restful不是一个框架,称为一种编码更烦更贴切吧,其核心类位于spring-web.jar中,即RestTemplate.class restful是rpc通过http协议的一种实现方式,和web ...

  6. springmvc restful配置有一个小小的坑坑

    首先web.xml配置 <!-- spring-mvc --> <servlet> <servlet-name>springServlet</servlet- ...

  7. SpringMVC Restful api接口实现

    [前言] 面向资源的 Restful 风格的 api 接口本着简洁,资源,便于扩展,便于理解等等各项优势,在如今的系统服务中越来越受欢迎. .net平台有WebAPi项目是专门用来实现Restful ...

  8. 让SpringMVC Restful API优雅地支持多版本

    好久没有更新博客,难得有空,记录一下今天写的一个小工具,供有需要的朋友参考. 在移动APP开发中,多版本接口同时存在的情况经常发生,通常接口支持多版本,有以下两种方式: 1.通过不同路径区分不同版本 ...

  9. 关于CKEditor4.5.6的使用，自定义toolbar配置，上传图片案例（SpringMVC+MyBatis案例），自定义行高，去编辑器的中内容，将编辑器中内容设置到指定的位置等

     关于CKEditor的一个配置整理,改文件为config.js: 文件内容如下: /** * @license Copyright (c) 2003-2016, CKSource - Frede ...

  10. SpringMVC RESTful风格URL处理带点的参数

    使用了RESTful风格的URL.但是在处理带点的搜索参数,比如baidu.com的时候,后台就取不到正确的参数了. 搜索了下原因,原来是SpringMVC将点号看作扩展分隔符号了,因此后台没法拿到正 ...

随机推荐

  1. 【Java面试指北】Exception Error Throwable 你分得清么？

    读本篇文章之前,如果让你叙述一下 Exception Error Throwable 的区别,你能回答出来么? 你的反应是不是像下面一样呢? 你在写代码时会经常 try catch(Exception ...

  2. 【笔面试题目】Java集合相关的面试题-List、Map、Set等

    一.List 1.subList 不会返回新的list对象--与String的subString不同 返回原来list的从[fromIndex,toIndex)之间这一部分的视图,实际上,返回的lis ...

  3. 分布式日志：Exceptionless的安装与部署

    安装步骤 首先exceptionless依赖elasticsearch,而elasticsearch需要java环境,所以先安装jdk jdk下载地址:https://www.oracle.com/t ...

  4. 搭建漏洞环境及实战——搭建DVWA漏洞环境

    DVWA是一款开源的渗透测试漏洞练习平台,其中内涵XSS.SQL注入.文件上传.文件包含.CSRF和暴力破解等各个难度的测试环境. 1.在安装时需要在数据库里创建一个数据库名,进入MySQL管理中的p ...

  5. day04-功能实现03

    家居网购项目实现03 8.功能07-后台管理 显示家居 8.1需求分析/图解 给后台管理提供独立登录页面,管理员登录地址不对外公开 管理员登录成功后,显示管理菜单页面 管理员点击家居管理,显示所有家居 ...

  6. js将数组内属性值相同的项合并成二维数组

    var ary=[ {"RaDate":'2021-09-08',"Type":'Morning1','title':'测试1'}, {"RaDate ...

  7. UVA 673 Paretheses Balance

    原题Vjudge 题目大意 怼给你一堆括号,判断是否合法 有三条规则 (1)空串合法 (2)如果\(A和B\)都合法,则\(AB\)合法(例如:\(()和[]\)都合法,则\(()[]\)合法) (3 ...

  8. Window注册表的学习记录

    注册表的结构: 概述:注册表是一种树状结构,在很早之前是系统的其他配置信息存放的文件,通常以.ini结尾的文件,因为数量太多不方便管理,后来就整合在一起形成了注册表.你可以按住键盘win+r,然后输入 ...

  9. go_json_learn

    解析嵌套类型示例: func test3() { b := []byte(`{"Name":"tom","Age":20,"Ema ...

  10. [python]《Python编程快速上手:让繁琐工作自动化》学习笔记7

    1. 用GUI 自动化控制键盘和鼠标第18章 (代码下载) pyautogui模块可以向Windows.OS X 和Linux 发送虚拟按键和鼠标点击.根据使用的操作系统,在安装pyautogui之前 ...