基于springboot+mybatis+vue的项目实战之增删改查CRUD—Restful风格

devtools/2024/12/22 2:08:51/

整个代码与前面的案例基于springboot+mybatis+vue的项目实战之增删改查CRUD-CSDN博客

mapper和servie没有任何的变化。

有变化的主要是controller和html页面

1、controller

package com.example.controller;import com.example.pojo.Peot;
import com.example.pojo.Result;
import com.example.service.PeotService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.List;@RestController
public class PeotRestfulController {@Autowiredprivate PeotService peotService;//-------查询所有-------@GetMapping("/peots")public Result findAllJson1() {return Result.seccess(peotService.findAll());}//-------按id进行删除-------@DeleteMapping("/peots/{id}")public void deletePeot1(@PathVariable("id") Integer id) {peotService.deletePeot(id);}// -------按id进行查询-------@GetMapping("/peots/{id}")public Result peotfindById(@PathVariable("id") Integer id) {return Result.seccess(peotService.peotfindById(id));}//-----更新-------@PutMapping("/peots")public Result updatePeot(@RequestBody Peot peot) {boolean r = peotService.updatePeot(peot);if (r) {// 成功  code==1return Result.success();} else {// 失败  code==0return Result.erro("更新失败");}}//-------插入-------@PostMapping("/peots")public Result insertUser(@RequestBody Peot peot) {boolean result = peotService.insertUser(peot);if (result) {// 成功  code==1return Result.success();} else {// 失败  code==0return Result.erro("添加失败");}}}

2、html页面

peot_listAll_restful.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>显示所有（删除用按钮和链接均实现）</title><script src="./js/vue.js"></script><script src="./js/axios-0.18.0.js"></script></head>
<body>
<h1 align="center">诗人信息列表listAll</h1>
<div id="app" align="center"><a href="peot_insert.html">新增</a><table  border="1"><tr><th>id</th><th>author</th><th>gender</th><th>dynasty</th><th>title</th><th>style</th><th>操作</th></tr><tr v-for="peot in peotList"><td>{{peot.id}}</td><td>{{peot.author}}</td><td>{{peot.gender}}</td><td>{{peot.dynasty}}</td><td>{{peot.title}}</td><td>{{peot.style}}</td><td><!--<button type="button" @click="deleteId(peot.id)">删除</button>--><button type="button" @click="deleteId_restful(peot.id)">删除</button><a :href="'peot_delete2.html?id='+peot.id">删除</a><a :href="'peot_edit.html?id='+peot.id">修改</a></td></tr></table>
</div></body><script>new Vue({el:"#app",data() {return {peotList:[]}},methods:{findAll:function () {var _this = this;axios.get('/peots', {}).then(function (response) {_this.peotList = response.data.data;//响应数据给peotList赋值}).catch(function (error) {console.log(error);});},// 采用restful模式，url来传递。deleteId_restful:function (id) {var _thisd = this;if (window.confirm("确定要删除该条数据吗？？？")){//${this.id}var url = `peots/${id}`  //注意这里是反引号// 当您想要引用当前对象或类的实例的 id 属性时，使用 this.id。//当您想要引用一个名为 id 的变量（无论它是在函数外部定义的，还是作为参数传递的），使用 id。axios.delete(url).then(function (response) {alert("删除成功")_thisd.findAll();}).catch(function (error) {console.log(error);});}}},created() {// 获得参数id值// this.id = location.href.split("?id=")[1]// 通过id查询详情this.findAll();},})</script></html>

peot_edit.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><script src="./js/axios-0.18.0.js"></script></head>
<body>
<div id="app" align="center"><table border="1"><tr><td>编号</td><td><input type="text" v-model="this.id"> </td></tr><tr><td>姓名</td><td><input type="text" v-model="peot.author"> </td></tr><tr><td>性别</td><td><input type="radio" name="gender" v-model="peot.gender" value="1"> 男<input type="radio" name="gender" v-model="peot.gender" value="0"> 女</td></tr><tr><td>朝代</td><td><input type="text" v-model="peot.dynasty"> </td></tr><tr><td>头衔</td><td><input type="text" v-model="peot.title"> </td></tr><tr><td>风格</td><td><input type="text" v-model="peot.style"> </td></tr><tr><td></td><td><input type="button" @click="updatePeot" value="更新"> </td></tr></table>{{peot}}
</div></body>
<script>new Vue({el: '#app',data: {id: '',peot: {},        //详情},methods: {selectById() {//${this.id}//   var url = `peotfindById/${this.id}`  //注意这里是反引号var url = `peots/${this.id}`// 当您想要引用当前对象或类的实例的 id 属性时，使用 this.id。//当您想要引用一个名为 id 的变量（无论它是在函数外部定义的，还是作为参数传递的），使用 id。//反引号（backticks，也称为模板字符串或模板字面量）是ES6（ECMAScript 2015）中引入的一种新字符串字面量功能，// 它允许您在字符串中嵌入表达式。反引号用`（键盘上通常位于Tab键上方）来界定字符串的开始和结束。axios.get(url).then(response => {var baseResult = response.dataif(baseResult.code == 1) {this.peot = baseResult.data}}).catch( error => {})},updatePeot() {//   var url = 'peotupdate'var url = 'peots'axios.put(url,this.peot).then(res => {var baseResult = res.dataif(baseResult.code == 1) {// 成功location.href = 'peot_listAll_restful.html'} else {// 失败alert(baseResult.message)}}).catch(err => {console.error(err);})},},created() {// 获得参数id值this.id = location.href.split("?id=")[1]// 通过id查询详情this.selectById()},})</script></html>

peot_insert.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><script src="./js/axios-0.18.0.js"></script></head>
<body>
<div id="app" align="center"><table border="1"><tr><td>姓名</td><td><input type="text" v-model="peot.author"> </td></tr><tr><td>性别</td><td><input type="radio" name="gender" v-model="peot.gender" value="1"> 男<input type="radio" name="gender" v-model="peot.gender" value="0"> 女</td></tr><tr><td>朝代</td><td><input type="text" v-model="peot.dynasty"> </td></tr><tr><td>头衔</td><td><input type="text" v-model="peot.title"> </td></tr><tr><td>风格</td><td><input type="text" v-model="peot.style"> </td></tr><tr><td></td><td><input type="button" @click="addPeot" value="增加"> </td></tr></table></div>
</body>
<script>new Vue({el: '#app',data: {peot: {"author":"","gender":"","dynasty":"","title":"","style":""}        //详情},methods: {addPeot() {//   var url = 'peotinsert'var url = 'peots'axios.post(url,this.peot).then(res => {var baseResult = res.dataif(baseResult.code == 1) {// 成功location.href = 'peot_listAll_restful.html'} else {// 失败alert(baseResult.message)}}).catch(err => {console.error(err);})}},})
</script></html>

peot_delete2.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="./js/vue.js"></script><script src="./js/axios-0.18.0.js"></script></head>
<body>
<h1 align="center">诗人信息列表</h1>
<div id="app">
</div></body><script>new Vue({el:"#app",data() {},methods:{deleteId:function (id) {var _thisd = this;var url = `peots/${this.id}`  //注意这里是反引号if (window.confirm("确定要删除该条数据吗？？？")){axios.delete(url).then(function (response) {alert("删除成功")// _thisd.findAll();location.href = 'peot_listAll.html'}).catch(function (error) {console.log(error);});}}},created() {// 获得参数id值this.id = location.href.split("?id=")[1]// 通过id查询详情this.deleteId();},})</script></html>


http://www.ppmy.cn/devtools/42181.html

相关文章

Maven 依赖排查

Maven 依赖排查

先从项目去看显而易见&#xff0c;假如我们有一个项目&#xff0c;父工程中包含一些子工程&#xff0c;如下&#xff1a; 我们想看一下samples-account中的依赖关系&#xff0c;那么我们可以打开 samples-account的pom文件&#xff0c;查看其maven依赖关系图。 我们可以看到此项…
阅读更多...
Kibana使用

Kibana使用

一、什么是Kibana　　 Kibana 是一个开源的分析和可视化平台&#xff0c;Kibana 提供搜索、查看和与存储在 Elasticsearch 索引中的数据进行交互的功能。开发者或运维人员可以轻松地执行高级数据分析&#xff0c;并在各种图表、表格和地图中可视化数据。 Kibana使用&#xff1a…
阅读更多...
【Maven】Nexus私服简介_下载安装_登录

【Maven】Nexus私服简介_下载安装_登录

1、简介 1.1介绍 Nexus私服&#xff0c;也被称为Maven仓库管理器&#xff0c;是许多公司在自己的局域网内搭建的远程仓库服务器。提供了强大的仓库管理功能和构件搜索功能&#xff0c;使得开发人员能够更方便地管理和使用Maven项目中的依赖库。 1.2作用 内网访问&#xff1…
阅读更多...
网络安全快速入门（十三）linux及vmware软件的网络配置

网络安全快速入门（十三）linux及vmware软件的网络配置

13.1 前言 在通过我们前面的了解&#xff0c;我们现在已经对Linux的基础知识有了大致的了解&#xff0c;今天我们来大概讲一下关于linux系统及vmware的网络配置问题&#xff0c;在这之前&#xff0c;我们需要对网络有一个大概的认识和了解&#xff0c;话不多说&#xff0c;我们…
阅读更多...
【JS】基于原生JavaScript的大文件切片上传及断点续传实现

【JS】基于原生JavaScript的大文件切片上传及断点续传实现

基于原生JavaScript的大文件切片上传及断点续传实现 在现代Web应用中，大文件上传是一个常见但具有挑战性的功能。随着文件大小的增加，如何高效可靠地上传文件至服务器成为亟待解决的问题。在本文中，我将介绍如何使用原生JavaScript实现大文件切片上传及断点续传功能。 为什…
阅读更多...
Python数据分析与数据可视化 概念

Python数据分析与数据可视化 概念

考试题型&#xff1a; 一、填空题&#xff08;1分*10&#xff09; 二、程序代码填空&#xff08;1分*20&#xff09; 三、读程序写结果&#xff08;10分*4&#xff09; 四、程序设计&#xff08;10分*1&#xff09; 五、问答题&#xff08;20分*1&#xff09; 考试范围&#x…
阅读更多...
JavaScript-基本数据类型和变量

JavaScript-基本数据类型和变量

基本数据类型 JavaScript支持数字、字符串和布尔值3种基本数据类型 字符串型 字符串型是JavaScript用来表示文本的数据类型&#xff0c;字符串通常由单引号或双引号括起来&#xff0c;如果字符串存在特殊字符&#xff0c;可以用转义字符代替 数字型 数字型也是JavaScript中的基…
阅读更多...
听力 5.16

听力 5.16

directing&#xff1a;指示 defend&#xff1a;保护 on the heels of :在xx之后 intellectual property theft :窃取知识产权 force tech transfer&#xff1a;强迫技术转让 artificially&#xff1a;人为 corner the market&#xff1a;垄断市场 tremendous vulnerabi…
阅读更多...
最新文章

Copyright @ 2022~2023