SpringMVC RESTful案例

news2024/11/17 15:36:06

文章目录

      • 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.coloradmin.cn/o/1385270.html

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

相关文章

多元化的App封装打包平台,解锁应用发布效率

在数字化时代&#xff0c;移动应用已成为连接用户与服务的重要桥梁。对于开发者而言&#xff0c;将应用从代码转化为用户可以直接下载安装的产品&#xff0c;这一过程的效率和质量至关重要。App封装打包平台的出现&#xff0c;为开发者提供了便捷的应用构建、测试和分发解决方案…

Robot Framework之python脚本调用

目录 目录结构 ​编辑 Python函数作为关键字 一、通过Import Library关键字在*** Test Cases ***中引用python脚本 ​编辑 二、通过Library关键字在*** Settings ***中引入python脚本 Python类作为测试库 一、通过Library关键字在*** Settings ***引入python脚本中的类 …

机器学习_7、KNN

数据采用&#xff1a;电离层数据 KNN完整的代码电离层数据资源-CSDN文库 代码 import os import csv import numpy as np from sklearn.model_selection import train_test_split from sklearn.neighbors import KNeighborsClassifier from sklearn.model_selection import …

DNS域名解析协议

文章目录 DNS域名解析协议一、DNS系统的作用1、DNS的定义2、DNS域名解析2.1 正向解析2.2 反向解析 3、DNS域名结构 二、DNS服务器类型1、主域名服务器2、从域名服务器3、缓存域名服务器4、权威dns服务器 三、DNS查询类型及原理1、查询方式1.1 递归查询1.2 迭代查询 2、DNS查询原…

墙地砖外形检测的技术方案-图像增强

基础理论 本例中使用漫射场光源&#xff0c;在采集图像的过程中&#xff0c;更容易可能会受环境中光源照射不足的可能性&#xff0c;导致采集的图像对比度不足&#xff0c;图像视觉效果较暗。可通过直方图均衡化或者直方图规定化。利用直方图规定化进行图像增强。 案例图片 如…

实例分割论文精读:Mask R-CNN

1.摘要 本文提出了一种概念简单、灵活、通用的实例分割方法&#xff0c;该方法在有效地检测图像中的物体同时&#xff0c;为每个物体实例生成一个实例分割模板&#xff0c;添加了一个分支&#xff0c;用于预测一个对象遮罩&#xff0c;与现有的分支并行&#xff0c;用于边界框…

node各个版本的下载地址

下载地址&#xff1a; https://nodejs.org/dist/ 可以下载多个版本&#xff0c;使用nvm控制切换&#xff08;需要先安装nvm再安装node&#xff09; nvm下载地址&#xff08;访问的是github&#xff0c;请科学上网&#xff0c;下载后解压安装exe即可&#xff09;&#xff1a;h…

【leetcode题解C++】54.螺旋矩阵I and 59.螺旋矩阵II

54.螺旋矩阵I 给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8,9]] 输出&#xff1a;[1,2,3,6,9,8,7,4,5]示例 2&#xff1a; 输入&#xff1a;m…

通俗易懂实现功能强大的实战项目 springboot+java+vue+mysql 汽车租赁管理系统

✍✍计算机编程指导师 ⭐⭐个人介绍&#xff1a;自己非常喜欢研究技术问题&#xff01;专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目&#xff1a;有源码或者技术上的问题欢迎在评论区一起讨论交流&#xff01; ⚡⚡ Java实战 |…

如何在免费云Colab上使用扩散模型生成图片?

前言 在人工智能技术的迅猛发展下&#xff0c;内容生成领域也迎来了一系列创新的突破。其中&#xff0c;使用扩散模型&#xff08;如Stable Diffusion&#xff09;从文字生成图片的AI技术备受瞩目。这一技术的出现&#xff0c;为我们创造栩栩如生的图像提供了全新的可能性。本…

ceph、gluster、longhorn选型对比

Ceph Ceph是一个分布式的存储系统&#xff0c;可以在统一的系统中提供唯一的对象、块和文件存储。 名词解释&#xff1a; RADOS&#xff1a; 由自我修复、自我管理、智能存储节点组成的可靠、自主、分布式对象存储LIBRADOS&#xff1a; 一个允许应用程序直接访问 RADO 的库&…

机器学习 | 无监督聚类K-means和混合高斯模型

机器学习 | 无监督聚类K-means和混合高斯模型 1. 实验目的 实现一个K-means算法和混合高斯模型&#xff0c;并用EM算法估计模型中的参数。 2. 实验内容 用高斯分布产生 k k k个高斯分布的数据&#xff08;不同均值和方差&#xff09;&#xff08;其中参数自己设定&#xff…

网络分流规则

现在的网络是越来越复杂。 有必要进行分流。 有一些geosite.dat是已经整理好的&#xff0c;包含许多的网站的分类&#xff1a; 分流规则&#xff1a; route规则 主要是: {"type": "field","outboundTag": "direct","domain&quo…

【Windows】你不能访问此共享文件夹,因为你的组织安全策略...解决方法

WinR键打开运行窗口&#xff0c;输入gpedit.msc进入本地组策略编辑器。 找到计算机配置&#xff0c;然后点击管理模板&#xff0c;找到网络&#xff0c;然后点击lanman工作站&#xff0c;将右侧窗口中的启用不安全的来吧登录开启就解决了 设置为已启用&#xff0c;应用后确定&a…

定时器--JAVA

定时器是软件开发中的一个重要组件&#xff0c;类似于一个"闹钟"当达到一个设定的时间之后,就执行某个指定好的代码(任务)。 Timer JAVA标准库中已经为我们实现了一个定时器&#xff0c;我们直接new就行了。 Timer timer new Timer(); Timer类中最重要的一个方法…

Fine-tuning:个性化AI的妙术

随着人工智能&#xff08;AI&#xff09;技术的迅猛发展&#xff0c;Fine-tuning作为一项重要而神奇的技术崭露头角。Fine-tuning俗称“微调技术。其本质上是对已有模型进行能力的迁移学习扩展&#xff0c;由于重新训练神经网络模型的成本太高&#xff0c;所以使用微调技术可以…

GZ075 云计算应用赛题第8套

2023年全国职业院校技能大赛&#xff08;高职组&#xff09; “云计算应用”赛项赛卷8 某企业根据自身业务需求&#xff0c;实施数字化转型&#xff0c;规划和建设数字化平台&#xff0c;平台聚焦“DevOps开发运维一体化”和“数据驱动产品开发”&#xff0c;拟采用开源OpenSt…

MySQL——深入数据库原理(事务及锁)

文章目录 锁行级锁共享 (S) 锁排他 (X) 锁间隙锁 表级锁意向锁自增锁Lock Table/DDL 事务ACID 原则1. 原子性 A2. 一致性 C3. 隔离性 I4. 持久性 D 隔离级别1. READ UNCOMMITTED&#xff08;未提交读&#xff09;2. READ COMMITTED&#xff08;提交读&#xff09;3. REPEATABLE…

强化学习应用(五):基于Q-learning的物流配送路径规划研究(提供Python代码)

一、Q-learning算法简介 Q-learning是一种强化学习算法&#xff0c;用于解决基于马尔可夫决策过程&#xff08;MDP&#xff09;的问题。它通过学习一个值函数来指导智能体在环境中做出决策&#xff0c;以最大化累积奖励。 Q-learning算法的核心思想是使用一个Q值函数来估计每…

《计算思维导论》笔记:10.2 什么是数据库与数据库系统?

《大学计算机—计算思维导论》&#xff08;战德臣 哈尔滨工业大学&#xff09; 《10.2 什么是数据库与数据库系统&#xff1f;》 数据库 简单来讲&#xff0c;数据库就是相互有关联关系的数据的集合。 一个表聚集了具有相同结构类型的若干个对象一行数据反映了某一对象的相关…