39.RESTful案例

RESTful案例

准备环境

Employee.java

public class Employee {
    private Integer id;
    private String lastName;
    private String email;
    //1 male, 0 female
    private Integer gender;
}
//省略get、set和构造方法

EmployeeDao.java

package com.atguigu.SpringMVC.dao;

import com.atguigu.SpringMVC.pojo.Employee;
import org.springframework.stereotype.Repository;
import java.util.Collection;
import java.util.HashMap;
import java.util.Map;

@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);
    }
}

将之前仅扫描"控制层组件"，更改为扫描SpringMVC目录

功能清单

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

查询所有员工信息

EmployeeController.java

package com.atguigu.SpringMVC.controller;

import com.atguigu.SpringMVC.dao.EmployeeDao;
import com.atguigu.SpringMVC.pojo.Employee;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

import java.util.Collection;

@Controller
public class EmployeeController {
    @Autowired
    private EmployeeDao employeeDao;

    @GetMapping("/employee")
    public String getAllEmployee(Model model){
        //获取所有员工信息
        Collection<Employee> allEmployee = employeeDao.getAll();
        //将所有的员工信息在请求域中共享
        model.addAttribute("allEmployees",allEmployee);
        //跳转到列表页面
        return "employee_list";
    }
}

employee_list.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
    <table>
        <tr>
            <!--合并五列内容为一列显示-->
            <th colspan="5">employee list</th>
        </tr>
        <tr>
            <th>id</th>
            <th>lastName</th>
            <th>email</th>
            <th>gender</th>
            <th>options</th>
        </tr>
        <!--employee为在循环列中的别名，通过${allEmployees}将request域中的数据取出来，两者通过":"分隔-->
        <tr th:each="employee:${allEmployees}">
            <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>delete</a>
                <a>update</a>
            </td>
        </tr>
    </table>
</body>
</html>

静态资源

将static目录放入webapp目录下

当Tomcat的默认配置文件与WEB-INF目录下的web.xml存在配置冲突时，以当前工程的web.xml为准

静态资源的处理应该由默认的servlet进行处理，但是这里与配置的DispatcherServlet代替处理了请求，所以在配置默认的servlet的同时也要开启mvc注解驱动

运行效果

添加员工信息

添加流程：前端发送添加请求(GET)(th:href="@{/addEmployee}")–>后端转发到添加页面(view-name="employee_add")–>用户在表单填写信息后发送请求(POST)–>后端执行信息保存(employeeDao.save(employee))后回到显示页(return "redirect:/employee")

因为SpringMVC是通过请求处理再转发页面，而不是像JavaWeb一样通过地址直接转发到页面

发送添加请求

index.html

	<a th:href="@{/addEmployee}">添加员工信息</a>

为了方便，在employee_list.html中修改语句为：

	<th>options(<a th:href="@{/addEmployee}">add</a>)</th>

转发到添加页面

对于发送添加请求只需要执行转发到添加页面即可，所以配置视图控制器即可

SpringMVC.xml

    <mvc:view-controller path="/addEmployee" view-name="employee_add" />

employee_add.html

<form th:action="@{/employee}" method="post">
    <table>
        <tr>
            <th colspan="2">add Employee</th>
        </tr>
        <tr>
            <td>lastName</td>
            <td><input type="text" name="lastName"></td>
        </tr>
        <tr>
            <td>email</td>
            <td><input type="email" name="email"></td>
        </tr>
        <tr>
            <td>gender</td>
            <td>
                <input type="radio" name="gender" value="1">male
                <input type="radio" name="gender" value="0">female
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="add">
            </td>
        </tr>
    </table>
</form>

保存信息后回到显示页

EmployeeController.java

    //添加员工信息
    @PostMapping("/employee")
	//自动匹配提交的表单信息将匹配成功的变量调用set方法保存到employee中
    public String addEmployee(Employee employee){
        employeeDao.save(employee);
        //重定向到显示员工信息的方法中-->这里不能使用转发，因为转发则依旧会将POST请求转发出去，导致又调用了自身，进入了死循环，所以需要通过重定向的方式发送GET请求进入"显示页"方法中
        return "redirect:/employee";
    }

注意：EmployeeDao中的数据是用static关键字定义的，在没有保存数据的前提下重定向后数据没有丢失

运行效果

修改员工信息

更新流程：前端发送修改请求(GET)(th:href="@{'/employee/'+${employee.id}})–>后端获取员工信息后(employeeDao.get(id))在前端更新页面中显示(return "employee_update")—>用户在表单更新信息后发送请求(PUT)–>后端执行数据保存(employeeDao.save(employee))后回到显示页(return "redirect:/employee")

发送修改请求

在employee_list.html修改语句为：

    <!--如果采用"/employee/${employee.id}"的写法后面的$运算符也会被当成地址-->
    <a th:href="@{'/employee/'+${employee.id}}">update</a>

定义请求方法体

EmployeeController.java

    //转发更新请求定位到更新页面
    @GetMapping("/employee/{id}")
    public String toUpdateEmployee(@PathVariable("id") Integer id,Model model){
        //根据id查询员工信息
        Employee employee = employeeDao.get(id);
        //将员工信息共享到请求域中
        model.addAttribute("employee",employee);
        //跳转到employee_update.html
        return "employee_update";
    }

    //更新员工信息
    @PutMapping("/employee")
    public String updateEmployee(Employee employee){
        //修改员工信息
        employeeDao.save(employee);
        //重定向到显示员工信息的方法中
        return "redirect:/employee";
    }

定义更新页面内容

employee_update.html

<form th:action="@{/employee}" method="post">
    <input name="_method" value="put" type="hidden">
    <input name="id" th:value="${employee.id}" type="hidden">
    <table>
        <tr>
            <th colspan="2">update Employee</th>
        </tr>
        <tr>
            <td>lastName</td>
            <td><input type="text" name="lastName" th:value="${employee.lastName}"></td>
        </tr>
        <tr>
            <td>email</td>
            <td><input type="email" name="email" th:value="${employee.email}"></td>
        </tr>
        <tr>
            <td>gender</td>
            <td>
                <!--如果"gender"的value值和${employee.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
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="update">
            </td>
        </tr>
    </table>
</form>

运行结果

删除员工信息

删除流程：前端通过VUE实现点击超链接时提交绑定的表单–>前端通过表单发送删除请求(DELETE)–>后端执行数据删除后回到显示页(return "redirect:/employee")

发送删除请求

将employee_list.html为：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{/static/css/index_work.css}">
</head>
<body>
<div id="app">
    <table>
        <tr>
            <!--合并五列内容为一列显示-->
            <th colspan="5">employee list</th>
        </tr>
        <tr>
            <th>id</th>
            <th>lastName</th>
            <th>email</th>
            <th>gender</th>
            <th>options(<a th:href="@{/addEmployee}">add</a>)</th>
        </tr>
        <!--employee为在循环列中的别名，通过${allEmployees}将request域中的数据取出来，两者通过":"分隔-->
        <tr th:each="employee:${allEmployees}">
            <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>
                <!--通过绑定表单事件实现点击时调用表单进行提交实现发送delete请求(VUE实现)-->
                <a @click="deleteEmployee()" th:href="@{'/employee/'+${employee.id}}">delete</a>
                <!--如果采用"/employee/${employee.id}"的写法后面的$运算符也会被当成地址-->
                <a th:href="@{'/employee/'+${employee.id}}">update</a>
            </td>
        </tr>
    </table>
</div>

    <form method="post">
        <input type="hidden" name="_method" value="delete">
    </form>

    <!--引入VUE-->
    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <!--实现点击超链接时提交对应的表单-->
    <script type="text/javascript">
        var vue = new Vue({
            el:"#app",
            methods:{
                deleteEmployee(){
                    //获取form表单
                    var form = document.getElementsByTagName("form")[0];
                    //将超链接的href属性给form表单的action属性
                    form.action = event.target.href; //event.target表示当前触发事件的标签
                    //将表单提交
                    form.submit();
                    //阻止超链接的默认跳转行为
                    event.preventDefault();
                }
            }
        });
    </script>
</body>
</html>

定义方法体行为

EmployeeController.java

    //删除员工信息
    @DeleteMapping("/employee/{id}")
    public String deleteEmployee(@PathVariable("id") Integer id){
        //根据id删除员工信息
        employeeDao.delete(id);
        //重定向到显示员工信息的方法中
        return "redirect:/employee";
    }

运行结果：成功实现删除操作

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

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

相关文章

C++信息学奥赛1178：成绩排序

C++信息学奥赛1178：成绩排序

#include<bits/stdc.h> using namespace std; int main(){int n;cin>>n; // 输入整数 n&#xff0c;表示数组的大小int arr[n]; // 创建大小为 n 的整型数组 arrstring brr[n]; // 创建大小为 n 的字符串数组 brrfor(int i0;i<n;i) cin>>brr[i]>>ar…
阅读更多...
有线耳机插入电脑没声音

有线耳机插入电脑没声音

有线耳机插入电脑没声音 首先确保耳机和电脑都没问题&#xff0c;那就有可能是声音输出设备设置错误 右击任务栏的声音图标-打开声音设置-选择输出设备。
阅读更多...
2 hadoop的目录

2 hadoop的目录

1. 目录结构&#xff1a; 其中比较的重要的路径有&#xff1a; hdfs,mapred,yarn &#xff08;1&#xff09;bin目录&#xff1a;存放对Hadoop相关服务&#xff08;hdfs&#xff0c;yarn&#xff0c;mapred&#xff09;进行操作的脚本 &#xff08;2&#xff09;etc目录&#x…
阅读更多...
线上问诊：业务数据采集

线上问诊：业务数据采集

系列文章目录 线上问诊&#xff1a;业务数据采集 线上问诊&#xff1a;数仓数据同步 文章目录 系列文章目录前言一、环境安装1.DataX 二、全量同步1.DataX配置文件生成2.启动hadoop测试一下。3.全量同步 三、增量同步1.配置Flume2.编写Flume拦截器3.通道测试4.修改Maxwell参数…
阅读更多...
Pytorch学习：神经网络模块torch.nn.Module和torch.nn.Sequential

Pytorch学习：神经网络模块torch.nn.Module和torch.nn.Sequential

文章目录 1. torch.nn.Module1.1 add_module&#xff08;name&#xff0c;module&#xff09;1.2 apply(fn)1.3 cpu()1.4 cuda(deviceNone)1.5 train()1.6 eval()1.7 state_dict() 2. torch.nn.Sequential2.1 append 3. torch.nn.functional.conv2d 1. torch.nn.Module 官方文档…
阅读更多...
环保数字化，让污染无处遁形

环保数字化，让污染无处遁形

环保一直以来都是我国大力推崇的举措&#xff0c;“保护环境、人人有责”的标语深入人心&#xff0c;但是环保绝不是某一天某一年就能做好的事情&#xff0c;而在于一朝一夕坚持不懈&#xff0c;下文将针对环保的场景介绍一下数字孪生技术在环保领域的应用。 一、环保背景 新中…
阅读更多...
几个nlp的小项目（文本分类）

几个nlp的小项目（文本分类）

几个nlp的小项目（文本分类） 导入加载数据类、评测类查看数据集精确展示数据测评方法设置参数tokenizer，token化的解释对数据集进行预处理加载预训练模型进行训练设置训练模型的参数一个根据任务名获取，测评方法的函数创建预训练模型开始训练本项目的工作完成了什么任务？导…
阅读更多...
CNN 02(CNN原理)

CNN 02(CNN原理)

一、卷积神经网络(CNN)原理 1.1 卷积神经网络的组成 定义 卷积神经网络由一个或多个卷积层、池化层以及全连接层等组成。与其他深度学习结构相比&#xff0c;卷积神经网络在图像等方面能够给出更好的结果。这一模型也可以使用反向传播算法进行训练。相比较其他浅层或深度神经…
阅读更多...
景联文科技数据标注：人体关键点标注用途及各点的位置定义

景联文科技数据标注：人体关键点标注用途及各点的位置定义

人体关键点标注是一种计算机视觉任务&#xff0c;指通过人工的方式&#xff0c;在指定位置标注上关键点&#xff0c;例如人脸特征点、人体骨骼连接点等&#xff0c;常用来训练面部识别模型以及统计模型。这些关键点可以表示图像的各个方面&#xff0c;例如角、边或特定特征。在…
阅读更多...
unity 之参数类型之引用类型

unity 之参数类型之引用类型

文章目录 引用类型引用类型与值类型的差异 引用类型 在Unity中&#xff0c;引用类型是指那些在内存中存储对象引用的数据类型。以下是在Unity中常见的引用类型的介绍&#xff1a; 节点&#xff08;GameObject&#xff09;&#xff1a; 在Unity中&#xff0c;游戏对象&#xff…
阅读更多...
day28 异常

day28 异常

to{}catch{} try{}catch{}的流传输 try {fis new FileInputStream("file-APP\\fos.txt");fos new FileOutputStream("fos.txt");int a ;while ((a fis.read())! -1){fos.write(a);}System.out.println(a); } catch (IOException e) {e.printStackTrace()…
阅读更多...
在编辑器中使用正则

在编辑器中使用正则

正则是一种文本处理工具&#xff0c;常见的功能有文本验证、文本提取、文本替换、文本切割等。有一些地方说的正则匹配&#xff0c;其实是包括了校验和提取两个功能。 校验常用于验证整个文本的组成是不是符合规则&#xff0c;比如密码规则校验。提取则是从大段的文本中抽取出…
阅读更多...
0基础学习VR全景平台篇 第92篇：智慧景区-智慧景区常见问题

0基础学习VR全景平台篇 第92篇：智慧景区-智慧景区常见问题

Q&#xff1a;怎么编辑景区里面各个景点的介绍和推荐该景点A&#xff1a;在下方素材栏中该景点&#xff08;素材&#xff09;的右上角选择【编辑场景】里面就可以在场景介绍中编辑该场景的介绍并且在该选项中可以将此场景设置为推荐景点。 Q&#xff1a;景区项目可不可以离线浏…
阅读更多...
数字孪生智慧工厂：电缆厂 3D 可视化管控系统

数字孪生智慧工厂：电缆厂 3D 可视化管控系统

近年来&#xff0c;我国各类器材制造业已经开始向数字化生产转型&#xff0c;使得生产流程变得更加精准高效。通过应用智能设备、物联网和大数据分析等技术&#xff0c;企业可以更好地监控生产线上的运行和质量情况&#xff0c;及时发现和解决问题&#xff0c;从而提高生产效率…
阅读更多...
【大虾送书第七期】深入浅出SSD：固态存储核心技术、原理与实战

【大虾送书第七期】深入浅出SSD：固态存储核心技术、原理与实战

目录 ✨写在前面 ✨内容简介 ✨作者简介 ✨名人推荐 ✨文末福利 &#x1f990;博客主页&#xff1a;大虾好吃吗的博客 &#x1f990;专栏地址&#xff1a;免费送书活动专栏地址 写在前面 近年来国家大力支持半导体行业&#xff0c;鼓励自主创新&#xff0c;中国SSD技术和产业…
阅读更多...
ChromeOS 的 Linux 操作系统和 Chrome 浏览器分离

ChromeOS 的 Linux 操作系统和 Chrome 浏览器分离

导读科技媒体 Ars Technica 报道称&#xff0c;谷歌正在将 ChromeOS 的浏览器从操作系统中分离出来 —— 让它变得更像 Linux。虽然目前还没有任何官方消息&#xff0c;但这项变化可能会在本月的版本更新中推出。 据介绍&#xff0c;谷歌将该项目命名为 "Lacros"——…
阅读更多...
数据驱动的生活：探索未来七天生活指数API的应用

数据驱动的生活：探索未来七天生活指数API的应用

前言 随着科技的不断发展&#xff0c;数据已经成为我们生活中不可或缺的一部分。从社交媒体上的点赞和分享&#xff0c;到电子邮件和搜索引擎的历史记录&#xff0c;数据正在以前所未有的速度积累。而这些数据的利用不仅仅停留在社交媒体或商业领域&#xff0c;它们还可以为我…
阅读更多...
机器学习：争取被遗忘的权利

机器学习：争取被遗忘的权利

随着越来越多的人意识到他们通过他们经常访问的无数应用程序和网站共享了多少个人信息&#xff0c;数据保护和隐私一直在不断讨论。看到您与朋友谈论的产品或您在 Google 上搜索的音乐会迅速作为广告出现在您的社交媒体提要中&#xff0c;这不再那么令人惊讶。这让很多人感到担…
阅读更多...
【炼气境】Java集合框架篇

【炼气境】Java集合框架篇

【炼气境】Java集合框架篇 文章目录 【炼气境】Java集合框架篇概述接口Collection接口List接口ArrayList类LinkedList类 Set接口HashSet类LinkedHashSet类TreeSet类 Queue接口LinkedList类PriorityQueue类ArrayDeque Map接口HashMap类LinkedHashMap类TreeMap类 常用方法特性适用…
阅读更多...
软件工程(八) UML之类图与对象图

软件工程(八) UML之类图与对象图

1、类图与对象图 1.1、类图与对象图的概念 类图（class diagram）描述一组类、接口、协作和它们之间的关系 对象图（object diagram）描述一组对象及它们之间的关系、对象图描述了在类图中所建立的事物实例的静态快照。 1.2、类图与对象图的区别 类图和对象图基本上是一样…
阅读更多...
最新文章

Copyright @ 2022~2023