Axios与Vue实践：从基础到RESTful风格请求-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_57820942/article/details/123538831

1.Axios练习

1.1 入门案例

1.2 箭头函数用法

语法: 将function 省略,利用=> 符号代替

在这里插入图片描述

1.3 Axios Get请求方式

1.3.1 字符串拼接

说明: 将用户的请求数据通过字符串拼接实现数据传递.
例如: “http://localhost:8090/getUserById?id=1”
注意事项:
如果出现下列的报错,则检查 1.检查后端是否有方法对应 2.重启后端服务器再次调试
在这里插入图片描述

1.3.1.1 编辑前端JS

在这里插入图片描述

1.3.1.2 编辑后端Controller

注意事项:
1.请求类型必须与Ajax的类型匹配.
2.参数动态接收
在这里插入图片描述

1.3.1.3 编辑后端Service

根据ID查询数据库

在这里插入图片描述

1.3.2 对象请求方式(重点)

1.3.2.1 需求

如果Ajax请求的参数有多个,如果采用字符串拼接的方式.导致效率太低.结构复杂.所以需要采用对象的方式实现数据的提交.

1.3.2.2 对象方式提交

需求: 根据name=“大乔” sex="女"的条件查询数据库.
在这里插入图片描述

1.3.2.3 请求路径

如果遇到中文,则浏览器转译处理.
在这里插入图片描述

1.3.2.4 编辑UserController

在这里插入图片描述

1.3.2.5 编辑UserService

在这里插入图片描述

1.3.3 RestFul结构

1.3.3.1 语法说明

说明: RestFul的风格主要的目的是简化Get请求的方式. 将原有的字符串的拼接.改为使用"/" 的方式进行参数传递.
例子:
1.get请求类型 http://localhost:8090/getUser?name=“大乔”&age=18
2.restFul请求类型 http://localhost:8090/user/大乔/18 请求类型: XXX

注意事项:
1.利用restFul可以简化用户get请求的类型.
2.编辑restFul请求时应该采用**无状态(请求中不能出现动词)**的请求名称
3.使用restFul时应该按照规范编辑请求的类型. GET(查) PUT(修改) POST(新增) DELETE(删除)

1.3.3.2 编辑页面JS

/**
           * 要求: 利用restFul风格查询name中包含"君"的数据
           * URL: http://localhost:8090/user/君 GET
           */
           axios.get("http://localhost:8090/user/君")
               .then(result => {
                   console.log(result.data)
               })

1.3.3.3 编辑UserController

在这里插入图片描述

1.3.3.4 编辑UserService

在这里插入图片描述

1.4 前后端调用流程

在这里插入图片描述

1.5 关于SpringMVC业务知识

1.5.1 @RequestMapping说明

说明: 该注解主要实现了用户的请求与后端Controller中的方法绑定.
支持的请求类型: 8种请求类型全部支持.
升级版本注解: 只对某些特定的请求类型有效果.
常见请求注解:
@GetMapping(“getUserById”) //只允许get请求类型访问
@PostMapping("") //只允许post请求类型访问
@PutMapping("")
@DeleteMapping("")

1.5.2 参数使用对象接收的原理

在这里插入图片描述

原理:
1.当用户调用该方法时.则该方法开始运行.则实例化一个空对象 User对象.
2.当用户传递数据时. ?name=xxxx&sex=xxx
3.调用对象的setName方法为对象的属性赋值. 同理 setSex方法为属性赋值. (SpringMVC实现)

1.5.3 RestFul风格参数接收说明

1). 简单参数接收
在这里插入图片描述
2).对象参数接收

1.6 Axios-delete请求

1.6.1 对象方式删除

1.6.1.1 编辑页面JS

1.6.1.2 编辑UserController

在这里插入图片描述

1.6.1.3 编辑UserService

在这里插入图片描述

1.6.2 restFul风格删除数据

1.6.2.1 编辑页面JS

在这里插入图片描述

1.6.2.2 编辑UserController

在这里插入图片描述
业务层Service方法,调用上一个案例即可.

2. VUE与Axios练习

2.1 需求

利用VUE与Axios实现用户列表的展现

在这里插入图片描述

2.2 实现思路

1.利用生命周期函数created 触发Axios函数调用
2.编辑axios函数,实现数据的动态的获取.
3.将axios远程获取的数据交给Vue对象的属性管理
4.利用vue中的循环遍历的写法实现表格数据展现

2.3 业务具体实现

2.3.1 编辑页面JS

<!DOCTYPE html>
<html>
       <meta charset="utf-8">
       <title>前后端交互</title>
   </head>
   <body>

       
       <div id="app">
           
           <table id="tab1" border="1px" width="80%" align="center">
               <tr align="center" height="60px">
                   <th colspan="5"><h1>用户列表</h1></th>
               </tr>
               <tr align="center" height="60px">
                   <th>编号</th>
                   <th>名称</th>
                   <th>年龄</th>
                   <th>性别</th>
                   <th>操作</th>
               </tr>

               
               <tr align="center" v-for="user in userList">
                   <td v-text="user.id"></td>
                   <td v-text="user.name"></td>
                   <td v-text="user.age"></td>
                   <td v-text="user.sex"></td>
                   <td>
                       <button>修改</button>
                       <button @click="deleteUserById(user.id)">删除</button>
                   </td>
               </tr>

           </table>
       </div>


       
       <script src="../js/vue.js"></script>
       <script src="../js/axios.js"></script>
       <script>

           const app = new Vue({
               el: "#app",
               data: {
                   userList: []
               },
               methods: {
                   //2.定义获取远程数据的ajax请求
                   getUserList(){
                       axios.get("http://localhost:8090/findAll")
                           .then(result => {
                               //服务器返回的是JSON串,经过JS程序解析变为JS对象
                               //3.实现数据赋值
                               this.userList = result.data
                           })
                   },
                   deleteUserById(id){
                       axios.delete("http://localhost:8090/user/"+id)
                           .then(result => {
                               console.log(result.data)
                               //刷新页面
                               this.getUserList()
                           })
                   }
               },
               created(){
                   //1.触发函数调用
                   this.getUserList()
               }
           })
       </script>
   </body>
</html>