本站消息

站长简介/公众号


站长简介:逗比程序员,理工宅男,前每日优鲜python全栈开发工程师,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-05(12)

2021-06(108)

2021-07(4)

2021-08(49)

2021-09(67)

2021-08-27

发布于2021-08-30 23:13     阅读(1034)     评论(0)     点赞(13)     收藏(4)


1.前后端调用

1.1请求类型说明

分组:

         get/delete  用法一致

         post/put      用法一致

1.2 delete请求

前段页面编辑

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>前后端调用delete</title>
  6. </head>
  7. <body>
  8. <script src="../js/axios.js"></script>
  9. <script>
  10. // delete 测试1:需求:删除ID=232的数据
  11. let id=
  12. let url ="http://localhost:8090/axios/deleteById?id=${233}"
  13. axios.delete(url).then(promise => {
  14. console.log(promise.data)
  15. })
  16. </script>
  17. </body>
  18. </html>

后端controller层

  1. @DeleteMapping("deleteById")
  2. public String delete(Integer id){
  3. userService.deleteById(id);
  4. return "删除成功";
  5. }

业务层Service

  1. @Override
  2. public void deleteById(Integer id) {
  3. userMapper.deleteById(id);
  4. }

执行结果

1.3 post请求

1.3.1 新增用户请求

url:请求地址:http://localhost:8090/axios/saveUser

请求参数的结构:是一个JSON串

 难点:

1.user对象可以转换成json串  @RestController中的@ResponseBody带的方法

2.json转换为user对象 @Requestbody  自能加在对象前

controller层代码

  1. @PostMapping("saveUser")
  2. public String saveUser(@RequestBody User user){
  3. userService.saveUser(user);
  4. return "添加成功";
  5. }

 service业务层代码:

  1. @Override
  2. public void saveUser(User user) {
  3. userMapper.insert(user);
  4. }

前段页面编辑:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>post请求</title>
  6. </head>
  7. <body>
  8. <h1>前后端调用 -POST请求测试</h1>
  9. <script src="../js/axios.js"></script>
  10. <script>
  11. /*
  12. 需求:实现用户新增操作
  13. 语法:axious.post(url,新增参数)
  14. 规则:如果post/put 传递对象则直接赋值
  15. */
  16. let user={
  17. name:'小燕子',
  18. age:18,
  19. sex:'女'
  20. }
  21. let url="http://localhost:8090/axios/saveUser"
  22. axios.post(url,user)//{param : user}只适用于get与delete
  23. .then(promise =>{
  24. console.log(promise.data)
  25. })
  26. </script>
  27. </body>
  28. </html>

post请求结构:

1.4 put请求

2 vue-Axios案例

2.1需求说明

1.当展现页面时,用户发起请求 http://localhost:8090/vue/findAll,获取所有的user数据

2.通过Vue.js要求在页面上展现数据,以表格的形式展现

3.为每行数据添加 修改/删除的按钮

4.在一个新的div中  编辑3个文本框 name/age/sex通过提交按钮实现新增

5.如果用户点击修改按钮,则在全新的div中,回显数据。

6.用户修改完数据后,通过提交按钮 实现数据的修改。

 7.当用户点击删除按钮时,要求实现数据的删除的操作。

2.2 知识点梳理

1.vue页面初始化时,如何发起ajax请求

  1. methods:{
  2. getUserList(){
  3. alert("查询数据!")
  4. }
  5. },created(){ //利用声明周期函数触发ajax
  6. alert("声明周期函数")
  7. this.getUserList()
  8. }

2. vue定义axios请求的前缀

axios.defaults.baseURL ="http://localhost:8090/vue"

3.axios与vue数据结合

说明:当通过axios获取服务器数据之后,应该将该数据传给vue.data的属性

4.用户输入双向绑定

说明:在vue.js中一般情况下,如果遇到了用户输入的情况下需要设置双向数据绑定

3.案例(总结)

1.查询demo_user表中所有的表记录   get(url)

前段代码步骤

a.导入jar包 vue.js    ajax.js

b.在<script></scrpit>标签中加入    axios.defaults.baseURL="http://localhost:8090/vue" 可以简化url的写法,不用每个操作都添加这部分地址

c.使用循环进行遍历,将结果赋予表格中  v-for(user in userList)    v-text("user.属性")

2.增加记录  post(url,user)

3.删除记录 delete(url+user.id)  通过id删除

4.修改记录 put(url+新user) 

前段代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. </head>
  7. <body>
  8. <div id="app">
  9. <!-- 新增 -->
  10. <div align="center">
  11. <h3>用户新增</h3>
  12. 姓名:<input type="text" v-model="addUser.name"/>
  13. 年龄:<input type="text" v-model="addUser.age"/>
  14. 性别:<input type="text" v-model="addUser.sex"/>
  15. <button @click="addUserBtn()">添加</button>
  16. </div>
  17. <!-- 修改 -->
  18. <div align="center" >
  19. <h3>用户修改</h3>
  20. 编号: <input type="text" v-model="newUser.id" />
  21. 姓名:<input type="text" v-model="newUser.name"/>
  22. 年龄:<input type="text" v-model="newUser.age"/>
  23. 性别:<input type="text" v-model="newUser.sex"/>
  24. <button @click="update2()">修改</button>
  25. </div>
  26. <div>
  27. <table border="1px" width="80%" align="center" style="margin-top: 20px;">
  28. <tr align="center">
  29. <th colspan="5"><h3>用户列表</h3></th>
  30. </tr>
  31. <tr align="center">
  32. <th>编号</th>
  33. <th>姓名</th>
  34. <th>年龄</th>
  35. <th>性别</th>
  36. <th>操作</th>
  37. </tr>
  38. <tr align="center" v-for="user in userList">
  39. <th v-text="user.id"></th>
  40. <th v-text="user.name"></th>
  41. <th v-text="user.age"></th>
  42. <th v-text="user.sex"></th>
  43. <th>
  44. <button @click="update1(user)">修改</button>
  45. <button @click="deleteUser(user)">删除</button>
  46. </th>
  47. </tr>
  48. </table>
  49. </div>
  50. </div>
  51. <script src="../js/axios.js"></script>
  52. <script src="../js/vue.js"></script>
  53. <script>
  54. axios.defaults.baseURL="http://localhost:8090/vue"
  55. new Vue({
  56. el:"#app",
  57. data:{
  58. userList:[],
  59. addUser:{
  60. name:'',
  61. age:'',
  62. sex:''
  63. },
  64. newUser:{
  65. id:'',
  66. name:'',
  67. age:'',
  68. sex:''
  69. }
  70. },
  71. methods:{
  72. getUserList(){
  73. alert("用户表如下:")
  74. axios.get("findAll").then(promise =>{
  75. this.userList= promise.data
  76. })
  77. },addUserBtn(){
  78. axios.post("saveUser",this.addUser).then(promise =>{
  79. let c = promise.data
  80. alert(c)
  81. this.getUserList()
  82. this.addUser={}
  83. })
  84. },deleteUser(user){
  85. axios.delete("deleteUserById?id="+user.id).then(promise =>{
  86. let a = promise.data
  87. alert(a)
  88. this.getUserList()
  89. })
  90. },update1(user){
  91. this.newUser=user
  92. },update2(){
  93. axios.put("updateById",this.newUser).then(promise =>{
  94. let c = promise.data
  95. alert(c)
  96. this.getUserList()
  97. this.newUser={}
  98. })
  99. }
  100. },
  101. created() {
  102. this.getUserList()
  103. }
  104. })
  105. </script>
  106. </body>
  107. </html>

后端代码:

controller层

  1. package com.jt.controller;
  2. import com.jt.Service.UserService;
  3. import com.jt.pojo.User;
  4. import org.springframework.beans.factory.annotation.Autowired;
  5. import org.springframework.web.bind.annotation.*;
  6. import java.util.List;
  7. @RestController
  8. @CrossOrigin
  9. @RequestMapping("vue")
  10. public class ProController {
  11. @Autowired
  12. private UserService userService;
  13. @GetMapping("findAll")
  14. public List<User> findAll(){
  15. return userService.findAll();
  16. }
  17. @PostMapping("saveUser")
  18. public String addUser(@RequestBody User user){
  19. userService.addUser(user);
  20. return "添加成功";
  21. }
  22. @DeleteMapping("deleteUserById")
  23. public String deleteUserById(Integer id){
  24. userService.deleteById(id);
  25. return "删除成功";
  26. }
  27. @PutMapping("updateById")
  28. public String updateById(@RequestBody User user){
  29. userService.updateById(user);
  30. return "修改成功!!";
  31. }
  32. }

service层

  1. @Override
  2. public List<User> findAll() {
  3. return userMapper.selectList(null);
  4. }
  5. @Override
  6. public void addUser(User user) {
  7. userMapper.insert(user);
  8. }
  9. @Override
  10. public void deleteById(Integer id) {
  11. userMapper.deleteById(id);
  12. }
  13. @Override
  14. public void updateById(User user) {
  15. userMapper.updateById(user);
  16. }

运行结果:

 新增:

删除:

修改:

disabled="false" 该属性可以设置输入框的内容不被改变

delete() 与get用法相似

put与post用法相似

原文链接:https://blog.csdn.net/yzy980611/article/details/119945801




所属网站分类: 技术文章 > 博客

作者:麻辣小龙虾

链接:http://www.qianduanheidong.com/blog/article/184801/b59638380eab88edb183/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

13 0
收藏该文
已收藏

评论内容:(最多支持255个字符)