vue-axios demo_user 展示数据删除修改新增

项目
1.
https://gitee.com/zhao-qing-jing/ssmpro2104-jt/tree/master/d-mvc
https://gitee.com/zhao-qing-jing/ssmpro2104-jt/tree/master/e-vue
2.
https://gitee.com/zhao-qing-jing/ssmpro2104-jt/tree/master/f-test-company-user-ssm-vue-axios
理解

# vue-axios  demo_user  展示数据  删除  修改  新增
## vue页面数据传递
表格设计, tbody tr td
--[查]结果集:       axios请求获取到结果, 赋值给 userList数组获取一条:      v-for(users in userList)   迭代userList获取每条展示到td:      {{user.name}} / v-text="user.name"  展示到td中
--[删]获取要删的数据的id:    每一条数据,后面有删除, 因此可以获得每条数据各自的id, 执行:                 按钮@click="deleteBtn(user.id)" 方法:                 deleteBtn(user.id)
--[修]页面:        写要修改的数据的内容页面 input框   v-show="disU"用于显示隐藏数据:        在获取每条数据时, 跟一个修改  可以直接获取到每条数据  users更新按钮:     @click="updateB(users)"    功能 this.user = user;展示数据:    v-model="user.name" 双向绑定   因为  this.user = user;  提交,执行:   updateBtn()   页面中数据已经是 user
--[增]页面:        和update一样按钮:        @click="insertB()"数据:        开始展示数据为空,  添加数据 v-model="user.name" 双向绑定提交:        insertBtn(user)> 按钮删除       deleteBtn(id)  user.id,v-for()得到更新       updateB(user)  user,v-for()得到  展示input更新提交   updateBtn()    this.user,input v-model 双向绑定得到新增       insertB()      展示input新增提交   insertBtn()    this.user,input v-model 双向绑定得到返回       returnBtn()    div的v-show清空       clearBtn()     清空input## axios各种请求 get delete put post
--     [get]axios请求:    axios.get(`http://localhost:8614/user/find`).then(result=>{this.userList = result.data;});页面接收:     使用UserList数组 --     [delete]axios请求:    axios.delete(`http://localhost:8614/user/delete/${id}`)--     [put]axios请求:    axios.put('http://localhost:8614/user/update', this.user)--     [post]axios请求:    axios.post("",参数)    axios.post('http://localhost:8614/user/insert',this.user)发生的请求:   两次请求 1.跨域(预检) 2.403(正常)数据:         使用的input表单 和put一样 input v-model="user.name"(双向绑定)传递的数据:    json串 --     [url参数]params:{}data:{} 只能用在post/put
--     [成功].then()  箭头函数可以使用 this.删除 / 新增 / 修改 之后的查询 getUserList()放在 .then() 中   --原因异步请求

页面

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>axios-2</title>
<!--vue axios--><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--bootstrap--><link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--font-awesome图标--><link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><style>table thead tr th{text-align: center;}table tbody tr td{text-align: center;}</style></head><body><div id="qwe" class="container"><div  v-show="disQwe" ><h3 align="center">demo_user</h3><button class="btn btn-primary" style="position: absolute;right: 250px;top: 20px" @click="saveB()"><i class="fa fa-plus-square-o"></i> 添加</button><table class="table table-hover"><thead><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr></thead><tbody><tr v-for="users in userList" :key="users.id"><td>{{users.id}}</td><td>{{users.name}}</td><td>{{users.age}}</td><td>{{users.sex}}</td><td><button @click="deleteById(users.id)" class="btn btn-danger"><i class="fa fa-trash-o fa-lg"></i> 删除</button><button @click="updateById(users)" class="btn btn-success"><i class="fa fa-upload"></i> 修改</button></td></tr></tbody></table></div><div v-show="disAsd"><h3 style="text-align: center;margin: 30px 0;">insert / update demo_user</h3><form class="form-horizontal"><div class="form-group" v-show="disId"><label for="id" class="col-sm-4 control-label">id</label><div class="col-sm-4"><input type="text" class="form-control" id="id" autocomplete="off" v-model="user.id" disabled></div></div><div class="form-group"><label for="name" class="col-sm-4 control-label">name</label><div class="col-sm-4"><input type="text" class="form-control" id="name" placeholder="name" autocomplete="off" v-model="user.name"></div></div><div class="form-group"><label for="age" class="col-sm-4 control-label">age</label><div class="col-sm-4"><input type="number" class="form-control" id="age" placeholder="age" autocomplete="off" v-model="user.age"></div></div><div class="form-group"><label for="sex" class="col-sm-4 control-label">sex</label><div class="col-sm-4"><input type="text" class="form-control" id="sex" placeholder="sex" autocomplete="off" v-model="user.sex"></div></div><div class="form-group"><div class="col-sm-offset-4 col-sm-5"><button type="button" class="btn btn-info" style="margin-left: 30px" @click="updateBtn()">修改</button><button type="button" class="btn btn-info" style="margin-left: 20px" @click="saveBtn(user)">添加</button><button type="button" class="btn btn-default" style="background-color: darkgrey;color: white;margin-left: 20px" @click="clearAll()">清空</button><button type="button" class="btn btn-info" style="margin-left: 20px;background-color: blueviolet" @click="returnBtn()">返回</button></div></div></form></div></div><script>axios.defaults.baseURL="http://localhost:8614/user/";/*  http://localhost:8614/user/find  */new Vue({el: "#qwe",data: {userList: [],user: {id: '',name: '',age: '',sex: ''},disQwe: true,disAsd: false,disId: true},methods: {getUserList(){var that = this;axios.get(`http://localhost:8614/user/find`).then(function (result){that.userList = result.data;})// .then(result=>{this.userList = result.data;});},deleteById(id){axios.delete(`http://localhost:8614/user/delete/${id}`).then(result=>{if (result.data==1){alert("删除成功");this.getUserList();}else{alert("删除失败");}})},updateById(user){this.user = user;this.disQwe = false;this.disAsd = true;this.disId = true;},updateBtn(){axios.put('http://localhost:8614/user/update', this.user).then(result=>{if (result.data==1){alert("更新成功");this.getUserList();this.disQwe = true;this.disAsd = false;}else{alert("更新失败");}})},clearAll(){this.user.name='';this.user.age='';this.user.sex='';},returnBtn(){this.disQwe = true;this.disAsd = false;this.getUserList();},saveB(){this.disQwe = false;this.disAsd = true;this.disId = false;this.clearAll();},saveBtn(){axios.post('http://localhost:8614/user/insert',this.user).then(result=>{if (result.data==1){alert("添加成功");this.getUserList();this.disQwe = true;this.disAsd = false;}else{alert("添加失败");}})}},/* 页面加载完成之前调用 函数  获取User的数据 */created(){this.getUserList();}})</script></body>
</html>

controller

@CrossOrigin
@RestController
@RequestMapping("/user/")
public class UserController {@Autowiredprivate UserService userService;@GetMapping("find")public List<User> findUsers(){List<User> users = userService.findUsers();System.out.println("find");return users;}@DeleteMapping("delete/{id}")public int deleteById(@PathVariable Integer id){int i = userService.deleteById(id);System.out.println(i+"delete");return i;}@PutMapping("update")public int updateById(@RequestBody User user){int i = userService.updateById(user);System.out.println(i+"update");return i;}@PostMapping("insert")public int insertUser(@RequestBody User user){int i = userService.insertUser(user);System.out.println(i+"insert");return i;}
}

vue-axios demo_user 展示数据删除修改新增相关推荐

删除多个表_合并汇总多个工作簿多个工作表，删除修改新增更新内容只需刷新...
要求:1.把多个工作簿的多个工作表内容合并汇总 2.后续在任一工作表内删除修改新增内容,无需再重新做表 3.后续在任一工作簿中新增一个或多个工作表,无需再重新做表 4.后续在文件夹中添加一个或多个Ex ...
如何解决@RequestParam无法接收vue+axios传递json数据
文章目录 axios的post请求无法发送到后端 1.问题 : axios的post的传递的json数据无法接收 2.问题代码 3.问题归因 4.问题解决 5.查漏补缺 axios的post请求无法发 ...
html + vue + axios能获取数据但是无法渲染
原来的代码如下 axios.get("./json/monitorList.json").then(function (data) {// 隐私计算任务数据this.monitor ...
Spring Data JPA OneToMany级联，多方删除修改新增详解（好文章！！申精！！）
前言近期的项目中使用Spring Data JPA.JPA带来很大的便捷,但它内部映射关系及持久化机制如果理解不到位会出现很多问题.不同的配置将会产生不同的执行过程.如果不了解其运行机制,很容易在一 ...
vue疫情大屏数据展示+数据导出+地图图片下载
不废话,先上效果图审美有限下午5点开工去掉吃饭时间我的审美也只能让我做到这一步哈哈有需要可以去github下载 github上代码是不加注释的看注释在这个文章 github地址 https ...
vue页面回显数据_解决vue表单回显数据无法修改的问题
前言:今天在做修改操作的时候遇到了一个问题,数据回显到修改表单之后,发现无法输入,也不能实现修改项目环境:springboot+vue前后端分离问题:修改操作数据回显无法输入值一.问题截图二. ...
vue获取图片流数据并展示
vue获取图片流数据并展示一.问题描述二.数据获取三.数据展示 1.window.URL.createObjectURL() (1)URL (2)createObjectURL 2.封装blob ...
sql语句，执行，实现没有这条数据就新增，如有这条数据就修改
原 sql语句,执行,实现没有这条数据就新增,如有这条数据就修改 2019年09月18日 15:52:24 <span class="read-count">阅读数 5 ...
【MySQL随手记】一个踩坑记录：在安全更新模式下进行数据的修改与删除
目录前言 1 MySQL练习的数据准备 2 Error Code:1175与安全更新模式 2.1 Error Code:1175 2.2 安全更新模式 3 安全更新模式下的update和delet ...

vue-axios demo_user 展示数据删除修改新增

vue-axios demo_user 展示数据删除修改新增相关推荐

最新文章

热门文章

vue-axios demo_user 展示数据 删除 修改 新增

vue-axios demo_user 展示数据 删除 修改 新增相关推荐

最新文章

热门文章

vue-axios demo_user 展示数据删除修改新增

vue-axios demo_user 展示数据删除修改新增相关推荐