相关准备

和传统 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. .net 温故知新：【10】.NET ORM框架EFCore使用入门之CodeFirs、DBFirst

    前言:本系列是我自己学习.net相关知识,以便跟上.net跨平台的步伐,目前工作原因基本在.net Framework4.7以下,所以才有了这一系列的学习总结,但是并不是从基本的C#语法和基础知识开始 ...

  2. WeakHashMap 和 HashMap 的区别是什么，何时使用？

    本文已收录到 AndroidFamily,技术和职场问题,请关注公众号 [彭旭锐] 提问. 前言 大家好,我是小彭. 在之前的文章里,我们聊到了 Java 标准库中 HashMap 与 LinkedH ...

  3. JavaScript入门④-万物皆对象:Object

    01.Object对象 Object 是 JavaScript 的一种 数据类型,它用于存储各种键值集合和更复杂的实体,是一组数据和功能的集合.JS中几乎所有对象都是继承自Object,Array.R ...

  4. windows GO语言环境配置

    目录 GO语言下载 安装goland go目录简介 配置gopath goland里添加goroot和gopath GO语言下载 参考教程:https://www.cnblogs.com/Domini ...

  5. Python 什么是flask框架？快速入门(flask安装，登录，新手三件套，登录认证装饰器，配置文件，路由系统，CBV)

    目录 一:Python flask框架 前言 补充一下,我们前面学习的库都是叫模块,那么框架与库的区别? 二:flask 框架概述 1.简介 2.须知: 3.flask框架的优势 三:flask 安装 ...

  6. 常用模块二——hashlib加密模块，subprocess模块，logging日志模块

    一.hashlib加密模块 1.何为加密 将明文数据处理成密文数据 让人无法看懂 2.为什么加密 保证数据的安全 3.如何判断数据是否是加密的 一串没有规律的字符串(数字.字母.符号) 4.密文的长短 ...

  7. java中方法传参形式

    成员方法传参形式: 1.基本数据类型:传递的是值 public class Object03 { public static void main(String[] args) { AA aa = ne ...

  8. java中的自增运算

    本文主要阐明java中的自增运算 1.当i ++ 与 ++ i作为单独语句时,作用与i = i +1一样 2.当赋值时,结果就不一样了 temp = i ++: 操作顺序:1)temp = i: 2) ...

  9. [深度学习] RBM及DBN

    转载于:http://blog.csdn.net/app_12062011/article/details/54313082 我们目前的讨论的神经网络,虽然学习算法不同,但基本上架构还是相同的,就是都 ...

  10. 网络安全之frp内网穿透

    前言 内网穿透,也即 NAT 穿透,进行 NAT 穿透是为了使具有某一个特定源 IP 地址和源端口号的数据包不被 NAT 设备屏蔽而正确路由到内网主机 环境需求 一台公网服务器(linux操作系统) ...