39.RESTful案例

news2024/11/19 3:46:47

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";
    }

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【springboot】WebScoket双向通信:

文章目录 一、介绍&#xff1a;二、案例&#xff1a;三、使用&#xff1a;【1】导入WebSocket的maven坐标【2】导入WebSocket服务端组件WebSocketServer&#xff0c;用于和客户端通信【3】导入配置类WebSocketConfiguration&#xff0c;注册WebSocket的服务端组件【4】导入定时…

神经网络学习小记录75——Keras设置随机种子Seed来保证训练结果唯一

神经网络学习小记录75——Keras设置随机种子Seed来保证训练结果唯一 学习前言为什么每次训练结果不同什么是随机种子训练中设置随机种子 学习前言 好多同学每次训练结果不同&#xff0c;最大的指标可能会差到3-4%这样&#xff0c;这是因为随机种子没有设定导致的&#xff0c;我…

Django项目第一次打开加载不出css文件

你需要找到setting.py如下部分 修改你存放css文件和js等文件的目录 指定正确&#xff0c;本地就能跑了

[好书推荐] 之 <趣化计算机底层技术>

趣化计算机底层技术 底层技术优势购买 底层技术 相信很多老铁跟我一样, 在深入了解底层技术的时候 — — 就很头大 很多书籍看上去跟一个 老学究 一样, 说的话不是我们这些小白看的懂得… 看不懂就会 打击我们的自信心我们就有可能找一堆理由去玩(理所应当地去玩的那一种, 反…

如何使用腾讯云服务器搭建网站?新手建站教程

使用腾讯云服务器搭建网站全流程&#xff0c;包括轻量应用服务器和云服务器CVM建站教程&#xff0c;轻量可以使用应用镜像一键建站&#xff0c;云服务器CVM可以通过安装宝塔面板的方式来搭建网站&#xff0c;腾讯云服务器网分享使用腾讯云服务器建站教程&#xff0c;新手站长搭…

【教程分享】Docker搭建Zipkin,实现数据持久化到MySQL、ES

1 拉取镜像 指定版本&#xff0c;在git查看相应版本&#xff0c;参考&#xff1a; https://github.com/openzipkin/zipkin 如2.21.7 docker pull openzipkin/zipkin:2.21.7 2 启动 Zipkin默认端口为9411。启动时通过-e server.portxxxx设置指定端口 docker run --name zi…

04_21 slab分配器 分配对象实战

目的 ( slab块分配器分配内存)&#xff0c;编写个内核模块&#xff0c;创建名称为 “mycaches"的slab描述符&#xff0c;小为40字节, align为8字节&#xff0c; flags为0。 从这个slab描述符中分配个空闲对象。 代码大概 内核模块中 #include <linux/version.h>…

C++ 网络编程项目fastDFS分布式文件系统(九)总结

1. Location语法 1. 语法规则 location [ |~|~ * |^~ ] /uri/ { … } 正则表达式中的特殊字符 : - . () {} [] * ? 2. Location 优先级说明 在 nginx 的 location 和配置中 location 的顺序没有太大关系。 与 location 表达式的类型有关。 相同类型的表达式&a…

android系统启动流程之zygote如何创建SystemServer进程

SystemServer:是独立的进程&#xff0c;主要工作是管理服务的&#xff0c;它将启动大约90种服务Services. 它主要承担的职责是为APP的运行提供各种服务&#xff0c;像AMS,WMS这些服务并不是一个独立的进程&#xff0c; 它们其实都是SystemServer进程中需要管理的的众多服务之一…

CDN/DCDN(全站加速)排查过程中如何获取Eagle ID/UUID

目录 前言1.通过浏览器直接访问文件时获取Request ID 前言 阿里云CDN/DCDN(全站加速)为接收到的每个请求分配唯一的服务器请求ID&#xff0c;作为关联各类日志信息的标识符。当您在使用CDN/DCDN(全站加速)过程中遇到错误且希望阿里云技术支持提供协助时&#xff0c;需要提交失…

UnitTest笔记: 拓展库DDT的使用

DDT (Data-Drivers- Tests) 允许使用不同的测试数据运行同一个测试用例&#xff0c;展示为不同的测试用例。 第一步&#xff1a; pip安装 ddt 第二步&#xff1a; 创建test_baidu_ddt.py 1. 测试类要使用ddt 修饰 2. 不同形式的参数化&#xff1a; 列表&#xff0c;字典&a…

Java常见的排序算法

排序分为内部排序和外部排序&#xff08;外部存储&#xff09; 常见的七大排序&#xff0c;这些都是内部排序 。 1、插入排序&#xff1a;直接插入排序 1、插入排序&#xff1a;每次将一个待排序的记录&#xff0c;按其关键字的大小插入到前面已排序好的记录序列 中的适当位置…

新版-C语言学生信息管理系统

拥有基本的学生信息系统的功能, 功能点如下所示: 1.添加学生信息 2.修改学生信息 3.删除学生信息 4.查看学生信息 5.搜索学生信息 6.查看系统学生总人数 7.学生信息排序 8.保存学生信息(保存在D:/students.txt) 9.导入学生信息(导入D:/students.txt文件中的信息) 主界面 1.添加…

人工智能轨道交通行业周刊-第57期(2023.8.21-8.27)

本期关键词&#xff1a;桥梁养护、智慧天路、列车通信网络、AIGC产业报告、价值对齐、异常检测 1 整理涉及公众号名单 1.1 行业类 RT轨道交通人民铁道世界轨道交通资讯网铁路信号技术交流北京铁路轨道交通网上榜铁路视点ITS World轨道交通联盟VSTR铁路与城市轨道交通RailMet…

浅谈 Java 中的 Lambda 表达式

更好的阅读体验 \huge{\color{red}{更好的阅读体验}} 更好的阅读体验 Lambda 表达式是一种匿名函数&#xff0c;它可以作为参数传递给方法或存储在变量中。在 Java8 中&#xff0c;它和函数式接口一起&#xff0c;共同构建了函数式编程的框架。 什么是函数式编程 函数式编程是…

DebugInfo 模块功能系统介绍 文本上色 文本与表格对齐 分隔线 秒表计算器 语义日期

背景 今天系统性的为大家介绍一下 DebugInfo 模块。这个模块提供了一些丰富的基本功能的封装&#xff0c;希望能给有需要的人带来些许帮助。 文本上色 DebugInfo 模块引入了 colorama提供文本颜色支持。 # -*- coding:UTF-8 -*-# region 引入必要依赖 from DebugInfo.DebugI…

Modbus转Profinet网关在大型自动化仓储项目应用案例

在自动化仓储项目中&#xff0c;Modbus是一种常见的通信协议&#xff0c;用于连接各种设备&#xff0c;例如传感器、PLC和人机界面。然而&#xff0c;Modbus协议只支持串行通信&#xff0c;并且数据传输速度较慢。为了提高通信效率和整体系统性能&#xff0c;许多大型仓储项目选…

Vue的使用(2)

一个简单的Vue项目的创建 创建一个UserList.vue组件 在App.vue中使用该组件 使用组件的第一步&#xff0c;导入组件使用组件的第二部&#xff0c;申明这个组件使用组件的第三步&#xff1a;引用组件 结果&#xff1a; 事件和插值语法 <template> <div><!-- te…

五、性能测试之linux分析命令

linux分析命令 一、服务器基础知识二、linux文件结构三、linux文件权限四、linux命令1、安装应用fedora家族: 如centosdebain家族&#xff1a;如ubuntu 2、获取帮助第一种&#xff1a;command --help第二种&#xff1a;man command第三种&#xff1a;info 3、服务器性能分析基础…

VBA技术资料MF47:VBA_文件夹命令MkDir

【分享成果&#xff0c;随喜正能量】善待这漫长又短暂的岁月&#xff0c;劝君莫惜金缕衣&#xff0c;劝君惜取少年时。世事总是无常&#xff0c;人生没有如果&#xff0c;用一颗云水禅心&#xff0c;过平淡充实的日子&#xff0c;只要且行且珍惜&#xff0c;人生就会无限美好&a…