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 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, 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.mfbz.cn/a/321867.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

docker部署私人云盘nextcloud

首先查看效果 1.拉取镜像 docker pull nextcloud 2.创建目录 mkdir -p /data/nextcloud/{config,data,apps} 3.创建实例 docker run -itd --name yznextcloud -v /data/nextcloud/config:/var/www/html/config -v /data/nextcloud/data:/var/www/html/data -v /data/nextc…

Minikube安装

文章目录 简介安装仪表盘 简介 Minikube是一个轻量级的工具&#xff0c;用于在本地机器上运行K8s集群。它允许开发人员在没有云环境的情况下进行K8s应用程序的开发和测试。 和k8s需要一个主机两个从机不同&#xff0c;Minikube用kubectl来控制节点&#xff0c;相当于在虚拟机…

如何制作网址链接活码?网址二维码生成器的使用方法

将网址转二维码图片来使用&#xff0c;是现在很常用的一种二维码类型&#xff0c;一般网址可以根据自己的用途来制作静态码或者活码两种形式。其中静态码只是单纯将网址链接转换成二维码&#xff0c;无法统计与修改&#xff0c;而生成网址活码可以在二维码图片不变情况下替换其…

基于RNN的模型

文本数据是一种典型的具有序列结构的数据&#xff0c;因为文本通常是由一系列的词语或字符组成的序列。每个词语或字符在文本中都有特定的位置和顺序&#xff0c;这种有序的结构对于理解和处理文本的含义至关重要。因此&#xff0c;多数情况下需要使用时间序列建模来完成相应的…

按键精灵调用奥迦插件实现图色字识别模拟键鼠操作源码

奥迦插件于2019年9月开始开发,在Windows 10操作系统上使用Visual Studio 2019编写,适用于所有较新的Windows平台,是一款集网络验证,深度学习,内核,视觉,文字,图色,后台,键鼠,窗口,内存,汇编,进程,文件,网络,系统,算法及其它功能于一身的综合插件 插件使用C语言和COM技术编写,是…

C#编程-属性和反射

属性和反射 属性是将元数据信息和行为添加到应用程序代码中的简单技术。属性是允许您将声明信息添加到程序的元素。此声明信息在运行时用途广泛,可使用应用程序开发工具在设计时使用。 介绍属性 对象是由其属性值描述的。例如,汽车可以使用它的构造、型号或颜色来描述。类似…

解决方案类常用网址

1.操作系统类&#xff08;原版操作系统下载网址&#xff09; https://next.itellyou.cn/ 之前的版本 https://msdn.itellyou.cn/ 2.ppt免费网站&#xff08;不用注册&#xff09; https://www.1ppt.com/

将 RGB 转换为十六进制、生成随机十六进制

RGB与十六进制 RGB&#xff08;Red, Green, Blue&#xff09;和十六进制是两种常用的颜色表示方式。 RGB是一种加法混色模式&#xff0c;它通过调节红、绿、蓝三个颜色通道的亮度来混合出各种颜色。对于每个颜色通道&#xff0c;取值范围是0到255&#xff0c;0表示该通道对应…

高并发IO底层原理-备份

1 概述 IO底层原理是隐藏在Java编程知识之下的基础知识&#xff0c;是开发人员必须掌握的基本原理。本文从操作系统的底层原理入手&#xff0c;通过图文的方式为大家深入剖析高并发IO的底层原理&#xff0c;并介绍如何通过设置来让操作系统支持高并发。 2 IO读写的基本原理 为…

使用JDK自带的jvisualvm工具查看堆dump文件【回顾】

JDK自带的jvisualvm的使用 打开方式&#xff1a; 直接命令行输入&#xff1a;jvisualvm ,然后回车​​​​​​​ ​​ 或者去jdk的bin目录下找到打开 安装visual GC插件 检测死锁 再点击“死锁 dump”就可以看到死锁的线程信息了&#xff1b;

JVM实战(16)——模拟Young GC

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 学习必须往深处挖&…

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分类网…

uniapp微信小程序投票系统实战 (SpringBoot2+vue3.2+element plus ) -关于我们页面实现

锋哥原创的uniapp微信小程序投票系统实战&#xff1a; uniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )_哔哩哔哩_bilibiliuniapp微信小程序投票系统实战课程 (SpringBoot2vue3.2element plus ) ( 火爆连载更新中... )共计21条视频…

6.Linux环境变量

Linux环境变量能帮你提升Linux shell体验。很多程序和脚本都通过环境变量来获取系统信息、存储临时数据和配置信息。在Linux系统上有很多地方可以设置环境变量&#xff0c;了解去哪里设置相应的环境变量很重要。 总结 命令作用示例注释env查看全局环境变量envprintenv查看全局…

【Scala】——面向对象

1 Scala 包 1.1 包风格 Scala 有两种包的管理风格。 第一种 Java 的包管理风格相同&#xff0c;每个源文件一个包&#xff08;包 名和源文件所在路径不要求必须一致&#xff09;&#xff0c;包名用“.”进行分隔以表示包的层级关系&#xff0c;如 com.atguigu.scala。另一种风…

【极光系列】springBoot集成xxl-job调度器

【springboot集成xxl-job】 一.gitee地址 直接下载可用 https://gitee.com/shawsongyue/aurora.git 模块&#xff1a;aurora_xxl_job 二.mysql安装教程 参考我的另一篇文章&#xff1a;https://blog.csdn.net/weixin_40736233/article/details/135582926?spm1001.2014.30…

手写netty通信框架以及常见问题

目录 通信框架设计 实现功能点 通信模型 消息定义 可靠性设计 代码 服务端代码 常见netty问题 如何让netty支持百万长连接? 1. 操作系统层面优化 2. netty层面优化 2.1 设置合理线程 2.2 心跳优化 2.3 合理使用内存池 2.4 IO线程与业务线程剥离 3. JVM层面优化 …

WinSCP传文件到Ubuntu提示Permission denied

使用WinSCP传文件到一台Ubuntu服务器时&#xff0c;提示Permission denied。 客户端&#xff1a;Windows 10 服务器&#xff1a;hyper-V虚拟机 Ubuntu 20.04 WinSCP版本&#xff1a;WinSCP 6.1 文章目录 WinSCP工具介绍WinSCP开源免费WinSCP优点 Permission denied 解决方法scp…

QA Office and Security Room

QA办公室和安全室是一个完全模块化的套件,有450多个对象,可以让你用任意数量的楼层构建自己的办公楼内部。 支持内置URP。 这个包的演示场景包含许多不同的房间,如接待大厅、办公室、主任室和秘书室、会议厅、卫生间、储藏室、保安室、地下停车场的出口。此外,这个包还包括…

Prepar3D多屏合成失败全屏显示失败

P3D需要设置全屏显示&#xff0c;详细设置参考P3D全屏设置中的方法。 一、排查硬件问题 包括屏幕数据链接线等。 二、没有启用Surround &#xff08;1&#xff09;查看是否启用了Surround方法 打开 NVIDIA 控制面板,通常可以在桌面上右键单击并选择相应的选项。在显卡控制…