相关准备

和传统 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. vue3项目，记录我是如何用1h实现产品预估1天工作量的界面需求

    最近在编写前端界面,硬是一人一周时间加班加点写完了一个项目的前端界面(一级菜单有12个页面+一个控制台大屏,二三级界面有N个),之前预估前端界面的编写需要一个月,我是自己把自己卷死了(没有办法,项目经 ...

  2. Jmeter 函数助手之__time

    接口中需要传入time时,可使用Jmeter 函数助手中的__time函数传入当前时间 格式和参数名称两个字段非必填,当都不填时直接点击生成按钮,得到13位时间戳:按图填写后,得到10位时间戳,获取当 ...

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

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

  4. uniapp 微信小程序 改变头部的信号、时间、电池显示颜色

    修改前 修改后 修改方法:"navigationBarTextStyle":"white"

  5. 解读JVM级别本地缓存Caffeine青出于蓝的要诀3 —— 讲透Caffeine的数据驱逐淘汰机制与用法

    大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 上一篇文章中,我们聊了下Caffein ...

  6. 在生产中部署 ES2015+ 代码

    大多数 Web 开发人员都喜欢编写具有所有最新语言特性的 JavaScript--async/await.类.箭头函数等.然而,尽管事实上所有现代浏览器都可以运行 ES2015+ 代码并原生支持我刚才 ...

  7. 【博学谷学习记录】超强总结，用心分享|前端开发HTML知识总结

    HTML知识总结 字体加粗标签 注释快捷键 Ctrl + / 代码后缩进:shift + tad 1HTML标签 1.1排版标签介绍 1.1.1标题标签 <h1>1级标题<h1/&g ...

  8. Redis set数据类型命令使用及应用场景使用总结

    转载请注明出处: 目录 1.sadd 集合添加元素 2.srem移除元素 3.smembers 获取key的所有元素 4.scard 获取key的个数 5.sismember 判断member元素是否 ...

  9. Proxyless Mesh 在 Dubbo 中的实践

    背景 随着 Dubbo 3.1 的 release,Dubbo 在云原生的路上又迈出了重要的一步.在这个版本中添加了 Proxyless Mesh 的新特性,Dubbo Proxyless Mesh ...

  10. [编程基础] Python日志记录库logging总结

    Python日志记录教程展示了如何使用日志记录模块在Python中进行日志记录. 文章目录 1 介绍 1.1 背景 1.2 Python日志记录模块 1.3 根记录器 2 Python logging ...