1. 准备工作

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

  • 搭建环境
  • 准备实体类
package com.atguigu.mvc.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, Integergender) {
       super();
       this.id = id;
       this.lastName = lastName;
       this.email = email;
       this.gender = gender;
  }
   public Employee() {
  }
}
  • 准备dao模拟数据
package com.atguigu.mvc.dao;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;
import com.atguigu.mvc.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);
  }
}

2. 功能清单

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

3. 具体功能:访问首页

①配置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>

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

①控制器方法

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

5. 具体功能:删除

①创建处理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";
}

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

①配置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>

7. 具体功能:执行保存

①控制器方法

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

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

①修改超链接

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

9. 具体功能:执行更新

①控制器方法

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

8. RESTful案例的更多相关文章

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

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

  2. 002 Spring Restful案例

    1:工程结构 需要注意的是需要额外导入以下三个包: jackson-annotations-2.6.1.jar jackson-core-2.6.1.jar jackson-databind-2.6. ...

  3. SpringMVC:RESTful案例

    目录 相关准备 功能清单 具体功能:访问首页 ①配置view-controller ②创建页面 具体功能:查询所有员工数据 ①控制器方法 ②创建employee_list.html 具体功能:删除 ① ...

  4. 【SpringMVC】RESTFul简介以及案例实现

    RESTful 概念 REST:Representational State Transfer,表现层资源状态转移. 资源 资源是一种看待服务器的方式,即,将服务器看作是由很多离散的资源组成.每个资源 ...

  5. SpringMVC学习笔记 - 第一章 - 工作流程、Bean加载控制、请求与响应(参数接收与内容返回)、RESTful

    [前置内容]Spring 学习笔记全系列传送门: Spring学习笔记 - 第一章 - IoC(控制反转).IoC容器.Bean的实例化与生命周期.DI(依赖注入) Spring学习笔记 - 第二章 ...

  6. 11.2Go gin

    11.1 Go gin 框架一直是敏捷开发中的利器,能让开发者很快的上手并做出应用. 成长总不会一蹴而就,从写出程序获取成就感,再到精通框架,快速构造应用. Gin是一个golang的微框架,封装比较 ...

  7. springmvc学习笔记(全)

    SpringMVC简介 什么是MVC MVC是一种软件架构的思想,将软件按照模型.视图.控制器来划分 M: Model:模型层,指工程中的JavaBean,作用是处理数据.JavaBean分为两类: ...

  8. SpringBoot2.0基础案例(01):环境搭建和RestFul风格接口

    一.SpringBoot 框架的特点 1.SpringBoot2.0 特点 1)SpringBoot继承了Spring优秀的基因,上手难度小 2)简化配置,提供各种默认配置来简化项目配置 3)内嵌式容 ...

  9. Jersey的RESTful简单案例demo

    REST基础概念: 在REST中的一切都被认为是一种资源. 每个资源由URI标识. 使用统一的接口.处理资源使用POST,GET,PUT,DELETE操作类似创建,读取,更新和删除(CRUD)操作. ...

  10. javaweb各种框架组合案例(八):springboot+mybatis-plus+restful

    一.介绍 1. springboot是spring项目的总结+整合 当我们搭smm,ssh,ssjdbc等组合框架时,各种配置不胜其烦,不仅是配置问题,在添加各种依赖时也是让人头疼,关键有些jar包之 ...

随机推荐

  1. 集合-TreeMap源码分析

    一.简介 TreeMap最早出现在JDK 1.2中,是 Java 集合框架中比较重要一个的实现.TreeMap 底层基于红黑树实现,可保证在log(n)时间复杂度内完成 containsKey.get ...

  2. 基于docker和cri-dockerd部署k8sv1.26.3

    cri-dockerd是什么? 在 Kubernetes v1.24 及更早版本中,我们使用docker作为容器引擎在k8s上使用时,依赖一个dockershim的内置k8s组件:k8s v1.24发 ...

  3. opengl helloworld vscode 通过glfw 绘制三角形

    opengl helloworld vscode 调用glfw 绘制三角形 目录 opengl helloworld vscode 调用glfw 绘制三角形 打开 glfw.org, 我下的64 目录 ...

  4. 安装Minikube并启动一个Kubernetes环境

    安装Minikube并启动一个Kubernetes环境 Minikube 是一种轻量级的Kubernetes 实现,可在本地计算机上创建VM 并部署仅包含一个节点的简单集群.Minikube 可用于L ...

  5. python之列表详解

    一组数据的集合,可以重复, 集合不可以重复 列表的定义 a=[] list(a) 常用操作 # 增加ss.append(1)#加到末尾ss.insert(0,7)#list_name.insert(i ...

  6. 基于SqlSugar的开发框架循序渐进介绍(25)-- 基于SignalR实现多端的消息通讯

    基于ASP.NET Core SignalR 可以实现客户端和服务器之间进行即时通信.本篇随笔介绍一些SignalR的基础知识,以及结合对SqlSugar的开发框架的支持,实现SignalR的多端处理 ...

  7. JS 一些基本正则校验

    记录下JS一些基本正则校验,以备后需. 1 //手机号码校验 2 function formCheckMobilePhone(data) { 3 var pattern = /^[1-9]{1}\d{ ...

  8. ASP.NET Core - 缓存之内存缓存(下)

    话接上篇 [ASP.NET Core - 缓存之内存缓存(上)],所以这里的目录从 2.4 开始. 2.4 MemoryCacheEntryOptions MemoryCacheEntryOption ...

  9. 对抗 ChatGPT,免费体验 Claude

    对抗 ChatGPT,免费体验 Claude Claude 是 Anthropic 构建的大型语言模型(LLM),对标ChatGPT. Anthropic 创始团队多是前openai研究员和工程师,C ...

  10. 如何在现有项目中使用`Masa MiniApi`?

    首先我们现有创建一个空的WebApi的项目模板,这个项目模板和MasaFramework本身没有任何关联,我们本博客只是使用的MasaFramework的MiniApi的包 创建Asp.NET Cor ...