SpringMVC RESTful案例

文章目录

      • 1、准备工作
      • 2、功能清单
      • 3、具体功能：访问首页
          • a>配置view-controller
          • b>创建页面
      • 4、具体功能：查询所有员工数据
          • a>控制器方法
          • b>创建employee_list.html
      • 5、具体功能：删除
          • a>创建处理delete请求方式的表单
          • b>删除超链接绑定点击事件
          • c>控制器方法
      • 6、具体功能：跳转到添加数据页面
          • a>配置view-controller
          • b>创建employee_add.html
      • 7、具体功能：执行保存
          • a>控制器方法
      • 8、具体功能：跳转到更新数据页面
          • a>修改超链接
          • b>控制器方法
          • c>创建employee_update.html
      • 9、具体功能：执行更新
          • a>控制器方法


在这里插入图片描述

1、准备工作

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

  • 搭建环境
  • 准备实体类
package com.atguigu.mvc.bean;public class Employee {private Integer id;private String lastName;private String email;//1 male, 0 femaleprivate 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, Integer gender) {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
查询全部数据√/employeeGET
删除√/employee/2DELETE
跳转到添加数据页面√/toAddGET
执行保存√/employeePOST
跳转到更新数据页面√/employee/2GET
执行更新√/employeePUT

3、具体功能：访问首页

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

b>创建页面
<!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、具体功能：查询所有员工数据

a>控制器方法
@RequestMapping(value = "/employee", method = RequestMethod.GET)
public String getEmployeeList(Model model){Collection<Employee> employeeList = employeeDao.getAll();model.addAttribute("employeeList", employeeList);return "employee_list";
}

b>创建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、具体功能：删除

a>创建处理delete请求方式的表单
<!-- 作用：通过超链接控制表单的提交，将post请求转换为delete请求 -->
<form id="delete_form" method="post"><!-- HiddenHttpMethodFilter要求：必须传输_method请求参数，并且值为最终的请求方式 --><input type="hidden" name="_method" value="delete"/>
</form>

b>删除超链接绑定点击事件

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

c>控制器方法
@RequestMapping(value = "/employee/{id}", method = RequestMethod.DELETE)
public String deleteEmployee(@PathVariable("id") Integer id){employeeDao.delete(id);return "redirect:/employee";
}

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

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

b>创建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、具体功能：执行保存

a>控制器方法
@RequestMapping(value = "/employee", method = RequestMethod.POST)
public String addEmployee(Employee employee){employeeDao.save(employee);return "redirect:/employee";
}

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

a>修改超链接
<a th:href="@{'/employee/'+${employee.id}}">update</a>

b>控制器方法
@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";
}

c>创建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、具体功能：执行更新

a>控制器方法
@RequestMapping(value = "/employee", method = RequestMethod.PUT)
public String updateEmployee(Employee employee){employeeDao.save(employee);return "redirect:/employee";
}


在这里插入图片描述



本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/623461.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Web3社交治理：用户参与决策的新模式

Web3社交治理：用户参与决策的新模式

Web3时代的到来不仅仅带来了区块链技术的创新&#xff0c;还为社交治理带来了全新的模式。传统社交平台上的决策权通常集中在平台的运营方&#xff0c;而Web3社交治理的兴起意味着用户能够更直接地参与到社交平台的决策过程中。本文将深入探讨Web3社交治理的背景、工作原理以及…
阅读更多...
帆软笔记-决策表报对象使用（两表格联动）

帆软笔记-决策表报对象使用（两表格联动）

效果描述如下&#xff1a; 数据库中有个聚合商表&#xff0c;和一个储能表&#xff0c;储能属于聚合商&#xff0c;桩表中有个字段是所属聚合商。 要求帆软有2个表格&#xff0c;点击某个聚合商&#xff0c;展示指定的储能数据。 操作&#xff1a; 帆软选中表格单元&#xf…
阅读更多...
SpringBoot 入门教程

SpringBoot 入门教程

1.复习SSM项目中&#xff0c;用spring&#xff0c;mybatis,springmvc这三个框架整合的项目。 SSM项目的所有类&#xff0c;这是用SSM整合一个搜索书籍种类和呈现的前端和后端的ssm的小项目。 2.springboot如何去开发这个页面&#xff1a; 新建springboot项目&#xff0c;勾选对…
阅读更多...
MeshLab生成分形地形

MeshLab生成分形地形

文章目录 分型地形脊状多重分形其他地形 分型地形 分形地形是一种较为复杂的几何对象&#xff0c;MeshLab提供了下列五种地形生成算法&#xff0c;并且贴心地给出了每种算法相对较好的参数。 算法SeedOctaves缺项性分形增量偏移增益fBM(fractal Brownian Motion)11021.2--Sta…
阅读更多...
【WPF.NET开发】WPF中的版式

【WPF.NET开发】WPF中的版式

本文内容 改进的文本质量和性能丰富的版式增强的国际文本支持增强的字体支持新的文本应用程序编程接口 (API) 本主题介绍 WPF 的主要版式功能。 这些功能包括改进的文本呈现质量和性能、OpenType 版式支持、增强的国际文本、增强的字体支持和新的文本应用程序编程接口 (API)。…
阅读更多...
VUE好看的个人博客源码

VUE好看的个人博客源码

文章目录 1.设计来源1.1 首页界面1.2 我的日记界面1.3 我的文章界面1.3.1 文章列表1.3.2 文章时间轴1.3.3 文章详细 1.4 我的相册界面1.5 我的源码界面1.6 认识我界面 2.效果和源码2.1 动态效果2.2 源码目录结构 源码下载 作者&#xff1a;xcLeigh 文章地址&#xff1a;https:/…
阅读更多...
从头安装与使用一个docker GPU环境

从头安装与使用一个docker GPU环境

GPU版docker的安装与使用 欢迎使用GPU版docker安装使用说明使用官方教程安装docker新建一个GPU版docker环境调用docker环境执行本地python文件 欢迎使用GPU版docker安装使用说明 使用官方教程安装docker 导入源仓库的GPG key curl -fsSL https://download.docker.com/linux/…
阅读更多...
【计算机组成原理】期末复习试卷

【计算机组成原理】期末复习试卷

目录 第一套试卷 第一套答案 第二套试卷 第二套答案 第三套试卷 第四套试卷 剩余试卷下载 第一套试卷 一、选择题&#xff08;共20分&#xff0c;每题1分&#xff09; 1&#xff0e;冯诺伊曼机工作方式的基本特点是______。 A&#xff0e;多指令流单数据流&#xff1b; B&#…
阅读更多...
03MARL-联合策略与期望回报

03MARL-联合策略与期望回报

文章目录 前言一、MARL问题组成二、联合策略与期望回报1.History-based expected return2.Recursive expected return 前言 多智能体强化学习问题中的博弈论知识——联合策略与期望回报 一、MARL问题组成 二、联合策略与期望回报 定义一种普遍的期望回报&#xff0c;能够用于…
阅读更多...
多线程——阻塞队列

多线程——阻塞队列

什么是阻塞队列 相比于一般的队列&#xff0c;有两个特点 1.线程安全 2.带有阻塞功能 1&#xff09;队伍为空时&#xff0c;出队列就会出现阻塞&#xff0c;阻塞到其他线程入队列为止 2&#xff09;队伍为满时&#xff0c;入队列就会出现阻塞&#xff0c;阻塞到其他线程出队列…
阅读更多...
九州金榜｜15岁初三男孩抑郁休学摆烂打游戏，高压教育要不得！

九州金榜｜15岁初三男孩抑郁休学摆烂打游戏，高压教育要不得！

有一次和朋友一块聚餐&#xff0c;邻座是一位妈妈、和她大概七八岁的儿子&#xff0c;小男孩长得很帅气&#xff0c;没有像同龄人那样调皮捣乱&#xff0c;而是和妈妈很温馨的就餐。 看的出来一家人的素质很高&#xff0c;就餐过程中桌面保持的很整洁&#xff0c;交流声音也不…
阅读更多...
你和家酿啤酒的距离，只差一台爱咕噜智能啤酒机

你和家酿啤酒的距离，只差一台爱咕噜智能啤酒机

喝过工业啤酒&#xff0c;喝过精酿啤酒&#xff0c;但是你喝过在家自酿的啤酒吗&#xff1f; 啤酒是世界上消耗较多的饮料之一&#xff0c;而我国的啤酒年消耗量位居世界第一。近年来&#xff0c;随着越来越多的精酿啤酒涌入市场&#xff0c;精酿啤酒的概念与文化被更多消费者…
阅读更多...
揭秘小米手机被疯狂吐槽的存储扩容技术

揭秘小米手机被疯狂吐槽的存储扩容技术

前段时间&#xff0c;在小米14的发布会上&#xff0c;雷布斯公布了名为“Xiaomi Ultra Space存储扩容”的技术&#xff0c;号称可以在512G的手机中再搞出来16G&#xff0c;256G的手机中再搞出8G。对于普通用户来说&#xff0c;能多得一些存储空间&#xff0c;无异是个很好的福利…
阅读更多...
PID横向控制和仿真实现

PID横向控制和仿真实现

文章目录 1. PID介绍2. PID横向控制原理3. 算法和仿真实现 1. PID介绍 PID是一种常见的控制算法&#xff0c;全称为Proportional-Integral-Derivative&#xff0c;即比例-积分-微分控制器。PID控制器是一种线性控制器&#xff0c;它将设定值与实际值进行比较&#xff0c;根据误…
阅读更多...
Python轴承故障诊断 (11)基于VMD+CNN-BiGRU-Attenion的故障分类

Python轴承故障诊断 (11)基于VMD+CNN-BiGRU-Attenion的故障分类

目录 往期精彩内容&#xff1a; 前言 模型整体结构 1 变分模态分解VMD的Python示例 2 轴承故障数据的预处理 2.1 导入数据 2.2 故障VMD分解可视化 2.3 故障数据的VMD分解预处理 3 基于VMD-CNN-BiGRU-Attenion的轴承故障诊断分类 3.1 定义VMD-CNN-BiGRU-Attenion分类网…
阅读更多...
【C#】当重复使用一段代码倒计时时，使用静态类和静态方法，实现简单的this扩展方法

【C#】当重复使用一段代码倒计时时，使用静态类和静态方法，实现简单的this扩展方法

欢迎来到《小5讲堂》 大家好&#xff0c;我是全栈小5。 这是《C#》序列文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识点的理解和掌握。…
阅读更多...
多特征变量序列预测(三)——CNN-Transformer风速预测模型

多特征变量序列预测(三)——CNN-Transformer风速预测模型

目录 往期精彩内容&#xff1a; 前言 1 多特征变量数据集制作与预处理 1.1 导入数据 1.2 数据集制作与预处理 2 基于Pytorch的CNN-Transformer 预测模型 2.1 定义CNN-Transformer预测模型 2.2 设置参数&#xff0c;训练模型 3 模型评估与可视化 3.1 结果可视化 3.2 …
阅读更多...
高效构建Java应用：Maven入门和进阶（五）

高效构建Java应用：Maven入门和进阶（五）

高效构建Java应用&#xff1a;Maven入门和进阶&#xff08;五&#xff09; Maven实战案例&#xff1a;搭建微服务Maven工程框架5.1 项目需求和结构分析5.2项目搭建和统一构建 总结 Maven实战案例&#xff1a;搭建微服务Maven工程框架 5.1 项目需求和结构分析 需求案例&#xf…
阅读更多...
SSH镜像、systemctl镜像、nginx镜像、tomcat镜像

SSH镜像、systemctl镜像、nginx镜像、tomcat镜像

目录 一、SSH镜像 二、systemctl镜像 三、nginx镜像 四、tomcat镜像 五、mysql镜像 一、SSH镜像 1、开启ip转发功能 vim /etc/sysctl.conf net.ipv4.ip_forward 1sysctl -psystemctl restart docker 2、 cd /opt/sshd/vim Dockerfile 3、生成镜像 4、启动容器并修改ro…
阅读更多...
【编码魔法师系列_构建型4】原型模式（Prototype Pattern）

【编码魔法师系列_构建型4】原型模式（Prototype Pattern）

学会设计模式&#xff0c;你就可以像拥有魔法一样&#xff0c;在开发过程中解决一些复杂的问题。设计模式是由经验丰富的开发者们&#xff08;GoF&#xff09;凝聚出来的最佳实践&#xff0c;可以提高代码的可读性、可维护性和可重用性&#xff0c;从而让我们的开发效率更高。通…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023