相关准备

和传统 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. 数电第11周周结_by_yc

    Lab7_时序逻辑验证 一.简易电子时钟 功能描述:   设计一简易电子时钟,支持时.分.秒显示,其中HEX7-HEX6显示时,HEX5-HEX4显示分,HEX1-HEX0显示秒,假设进制为:18秒= ...

  2. php+nginx环境搭建

    PHP安装教程参考:https://www.cnblogs.com/kyuang/p/6801942.html 1.安装基础环境: yum -y install gcc bison bison-dev ...

  3. 【每日一题】【排序】2021年11月13日-215. 数组中的第K个最大元素※

    给定整数数组 nums 和整数 k,请返回数组中第 k 个最大的元素. 请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 方法1:调库 class Solution ...

  4. 精华推荐 | 【深入浅出RocketMQ原理及实战】「性能原理挖掘系列」透彻剖析贯穿RocketMQ的事务性消息的底层原理并在分析其实际开发场景

    什么是事务消息 事务消息(Transactional Message)是指应用本地事务和发送消息操作可以被定义到全局事务中,要么同时成功,要么同时失败.RocketMQ的事务消息提供类似 X/Open ...

  5. 1、Idea自定义背景设置

    1.安装BackGroundImage插件.重启idea 2.按Ctrl+shift+A键,输入setBackGroundImage,设置图片

  6. 图计算引擎分析——Gemini

    前言 Gemini 是目前 state-of-art 的分布式内存图计算引擎,由清华陈文光团队的朱晓伟博士于 2016 年发表的分布式静态数据分析引擎.Gemini 使用以计算为中心的共享内存图分布式 ...

  7. IT编程相关内容汇总 - 进阶者系列 - 学习者系列文章

    笔者工作了十多年了,对于技术也有一定的经验,但是IT编程技术的更新是挺快的,特别是各种框架,各种中间件啥的都涌现出来了.这篇博文笔者打算将IT编程的前端.后端.数据库和移动端做一个博文知识汇总,让阅读 ...

  8. day06-Vue03

    Vue03 10.组件化编程 10.1基本说明 官网链接:https://v2.cn.vuejs.org/v2/guide/components-registration.html 在大型应用开发时, ...

  9. P8701 [蓝桥杯 2019 国 B] 第八大奇迹

    简要题意 你需要维护一个长度为 \(L\) 的序列 \(a\),初始时全部都是 \(0\),有 \(N\) 个操作,支持: C p x,将 \(a_p\) 修改为 \(x\). Q a b,输出 \( ...

  10. P3845 [TJOI2007]球赛

    简要题意 \(T\) 组数据,每一组数据给出 \(n\) 个数对 \((a,b)\).你需要将其分为几组,使得组单调不降.求最小组数. 思路 模拟赛考的题. 先来介绍 Dilworth 定理: 对于任 ...