07 Axios的使用
文章目录
·
1 Axios 知识补充
1.1 Axios-Post请求
1.1.1 编辑页面JS
<script src="../js/axios.js"></script>
<script>
/**
* 完成用户入库操作
* 用法: axios.post(url地址,对象名称)
* axios.put(url地址, 对象名称)
*
* axios.get(url地址,{params: 对象名称})
* axios.delete(url地址,{params: 对象名称})
*/
let url1 = "http://localhost:8090/axios/saveUser"
let user1 = {name: "tomcat",age: 18, sex: "女"}
axios.post(url1,user1)
.then(function(promise){
console.log(promise.data)
})
</script>
1.1.2 页面参数说明
说明: 用户在js中写的是JS对象,经过浏览器解析发起Ajax请求时,js对象被解析为JSON串.
交互的媒介: HTTP协议 协议中要求传递字符串
1.1.3 打印Sql语句
说明: 编辑YML文件
#配置端口号
server:
port: 8090
#管理数据源
spring:
datasource:
#高版本驱动使用
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
#设定用户名和密码
username: root
password: root
#SpringBoot整合Mybatis
mybatis:
#指定别名包
type-aliases-package: com.jt.pojo
#扫描指定路径下的映射文件
mapper-locations: classpath:/mybatis/mappers/*.xml
#开启驼峰映射
configuration:
map-underscore-to-camel-case: true
# 一二级缓存默认开始 所以可以简化
#打印mysql日志
logging:
level:
com.jt.mapper: debug
1.1.4 编辑AxiosController
@RestController
@CrossOrigin
@RequestMapping("/axios") //抽取前缀
public class AxiosController {
@Autowired
private AxiosService axiosService;
/**
* 实现用户入库操作
* url地址: http://localhost:8090/axios/saveUser
* 参数: JSON串 {"name":"tomcat","age":18,"sex":"女"}
* 返回值: 成功消息
* 难点: 前端传递的是JSON,后端不可以直接使用User对象接收.
* 解决方案:
* 1.对象可以转化为JSON串 @ResponseBody
* 2.JSON串转化为对象 @RequestBody
*/
@PostMapping("/saveUser")
public String saveUser(@RequestBody User user){
axiosService.saveUser(user);
return "用户新增成功!!";
}
}
1.1.5 编辑AxiosService
@Service
public class AxiosServiceImpl implements AxiosService{
@Autowired
private AxiosMapper axiosMapper;
@Override
public void saveUser(User user) {
axiosMapper.saveUser(user);
}
}
1.1.6 编辑AxiosMapper
public interface AxiosMapper {
@Insert("insert into demo_user(id,name,age,sex) value (null,#{name},#{age},#{sex})")
void saveUser(User user);
}
1.2 IDEA 自动注入Mapper异常说明
1.3 Ajax简化操作
1.3.1 简化Ajax前缀
// axios.defaults.baseURL = “http://localhost:8090” 用法
//定义axios请求的前缀
axios.defaults.baseURL = "http://localhost:8090"
//let url1 = "/axios/saveUser"
let user1 = {name: "tomcat",age: 18, sex: "女"}
axios.post("/axios/saveUser",user1)
.then(function(promise){
console.log(promise.data)
})
1.3.2 关于promise对象的说明
概念: promise 是ajax发起请求之后,服务器返回信息 封装到promise对象中.
引入promise对象,使得ajax调用 在交互中变得简化.
1.4 Ajax "回调地狱"问题
1.4.1 回调地狱说明
缺点: 嵌套层级太深,不便于维护.
分析: 将ajax的2层方法,想办法封装到一层中.
1.4.2 解决回调地狱-async-await
/**
* 1.定义一个方法
* 关键字:
* 1. async 标识函数
* 2. await
*/
async function saveUser(){
let user2 = {name: "axios",age: 18, sex: "男"}
let promise = await axios.post("/axios/saveUser",user2)
console.log(promise.data)
}
//2.调用方法
saveUser()
1.4.3 简化promise对象写法
/**
* 1.定义一个方法
* 关键字:
* 1. async 标识函数
* 2. await 标识ajax请求
*/
async function saveUser(){
let user2 = {name: "axios",age: 18, sex: "男"}
//let {conf: confv,data: datav,status: statusv} = await axios.post("/axios/saveUser",user2)
let {data: result} = await axios.post("/axios/saveUser",user2)
console.log(result)
}
2 用户CURD操作
2.1 实现用户列表展现
2.1.1 需求说明
要求用户访问页面的时候, 初始化的时候 就要求访问后台服务器.,发起Ajax请求. 实现用户列表页面的渲染.
解决方案: 使用mounted 函数
2.1.2 编辑页面JS
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<script>
//指定公共的前缀
axios.defaults.baseURL = "http://localhost:8090"
const app = new Vue({
el: "#app",
data: {
userList: []
},
methods: {
async findUserList(){
let {data: result} = await axios.get("/axios/findUserList")
//如果需要将ajax请求与vue JS进行关联,则必须实现数据传递
this.userList = result
}
},
mounted(){
//页面初始化完成之后调用
this.findUserList()
}
})
</script>
2.1.3 编辑AxiosController
/**
* 需求: 查询所有的用户信息
* URL: /axios/findUserList
* 返回值: List<User>
*/
@GetMapping("/findUserList")
public List<User> findUserList(){
return axiosService.findUserList();
}
2.1.4 编辑AxiosService
@Override
public List<User> findUserList() {
return axiosMapper.findUserList();
}
2.1.5 编辑AxiosMapper
@Select("select * from demo_user")
List<User> findUserList();
2.1.6 页面中回显数据
<!-- 遍历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>删除</button>
</td>
</tr>
2.1.7 页面效果展现
2.2 用户新增操作
2.2.1 双向数据绑定
规则: 看到文本框,首先想到使用双向数据绑定.
用户输入框 双向数据绑定:
- 页面名称
<div align="center">
<h3 align="center">用户新增</h3><br>
<p>
用户名称: <input type="text" name="name" v-model="addUser.name"/>
用户年龄: <input type="text" name="age" v-model="addUser.age" />
用户性别: <input type="text" name="sex" v-model="addUser.sex" />
<button @click="addUserBtn">新增</button>
</p>
</div>
- 编辑页面JS
data: {
userList: [],
//定义新增的user对象
addUser: {
id: null,
name: '',
age: '',
sex: ''
}
}
- 编辑提交函数
//实现用户数据的入库操作 this.addUser 传递封装的对象
async addUserBtn(){
let {data: result,status: status}
= await axios.post("/axios/saveUser",this.addUser)
if(status === 200){
alert(result)
//1.清空用户文本输入框
this.addUser = {}
//2.刷新用户列表
this.findUserList()
}else{
alert("用户新增失败!!!!")
}
}
2.3 用户修改操作
2.3.1 数据回显
-
在表格中按钮添加点击事件
-
定义点击事件函数
//用户修改事件
updateClick(user){
//将user对象传递给updateUser的属性
this.updateUser = user
}
- 定义页面数据双向数据绑定
<div align="center">
<h3 align="center">用户修改操作</h3><br>
<p>
用户ID号: <input type="text" name="id" v-model="updateUser.id" disabled/>
用户名称: <input type="text" name="name" v-model="updateUser.name"/>
用户年龄: <input type="text" name="age" v-model="updateUser.age"/>
用户性别: <input type="text" name="sex" v-model="updateUser.sex"/>
<button>修改</button>
</p>
</div>
2.3.2 实现用户修改操作
- 编辑修改按钮
- 编辑修改页面JS
//定义修改操作函数 数据封装之后提交
async updateUserBtn(){
let {data: result} = await axios.put("/axios/updateUser",this.updateUser)
alert(result)
this.updateUser = {}
this.findUserList()
}
2.3.3 编辑AxiosController
/**
* 用户修改操作
* URL: /axios/updateUser
* 参数: JSON串
* 返回值: String
*/
@PutMapping("/updateUser")
public String updateUser(@RequestBody User user){
axiosService.updateUser(user);
return "用户修改成功!!!";
}
2.3.4 编辑AxiosService
@Override
public void updateUser(User user) {
axiosMapper.updateUser(user);
}
2.3.5 编辑AxiosMapper
@Update("update demo_user set name=#{name},age=#{age},sex=#{sex} where id=#{id}")
void updateUser(User user);
2.4 用户删除操作
2.4.1 编辑修改按钮
<!-- 遍历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 @click="updateClick(user)">修改</button>
<button @click="deleteUser(user)">删除</button>
</td>
</tr>
2.4.2 实现用户删除操作
async deleteUser(user){
//根据主键删除
//await axios.delete("/axios/deleteUser",{params: {id: user.id}});
let {data: result} = await axios.delete("/axios/deleteUser?id="+user.id);
alert(result)
//重新查询列表数据
this.findUserList()
}
},
2.4.3 编辑AxiosService
@Override
public void deleteUserById(Integer id) {
axiosMapper.deleteUserById(id);
}
2.4.4 编辑AxiosController
@DeleteMapping("deleteUser") //delete / get
public String deleteUser(Integer id){
axiosService.deleteUserById(id);
return "用户删除成功!!!";
}
2.4.5 编辑AxiosMapper
@Delete("delete from demo_user where id = #{id}")
void deleteUserById(Integer id);
3 完整代码展示
3.1 前端完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>用户列表展现案例</title>
</head>
<body>
<div id="app">
<div align="center">
<h3 align="center">用户新增</h3><br>
<p>
用户名称: <input type="text" name="name" v-model="addUser.name"/>
用户年龄: <input type="text" name="age" v-model="addUser.age" />
用户性别: <input type="text" name="sex" v-model="addUser.sex" />
<button @click="addUserBtn">新增</button>
</p>
</div>
<hr />
<div align="center">
<h3 align="center">用户修改操作</h3><br>
<p>
用户ID号: <input type="text" name="id" v-model="updateUser.id" disabled/>
用户名称: <input type="text" name="name" v-model="updateUser.name"/>
用户年龄: <input type="text" name="age" v-model="updateUser.age"/>
用户性别: <input type="text" name="sex" v-model="updateUser.sex"/>
<button @click="updateUserBtn">修改</button>
</p>
</div>
<h1 align="center">用户列表展现案例</h1>
<table align="center" border="1px" width="80%">
<tr align="center">
<td>ID编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<!-- 遍历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 @click="updateClick(user)">修改</button>
<button @click="deleteUser(user)">删除</button>
</td>
</tr>
</table>
</div>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
<script>
//指定公共的前缀
axios.defaults.baseURL = "http://localhost:8090"
const app = new Vue({
el: "#app",
data: {
userList: [],
//定义新增的user对象
addUser: {
id: null,
name: '',
age: '',
sex: ''
},
updateUser: {
id: '',
name: '',
age: '',
sex: ''
}
},
methods: {
async findUserList(){
let {data: result} = await axios.get("/axios/findUserList")
//如果需要将ajax请求与vue JS进行关联,则必须实现数据传递
this.userList = result
},
//实现用户数据的入库操作 this.addUser 传递封装的对象
async addUserBtn(){
let {data: result,status: status}
= await axios.post("/axios/saveUser",this.addUser)
if(status === 200){
alert(result)
//1.清空用户文本输入框
this.addUser = {}
//2.刷新用户列表
this.findUserList()
}else{
alert("用户新增失败!!!!")
}
},
//用户修改事件
updateClick(user){
//将user对象传递给updateUser的属性
this.updateUser = user
},
//定义修改操作函数 数据封装之后提交
async updateUserBtn(){
let {data: result} = await axios.put("/axios/updateUser",this.updateUser)
alert(result)
this.updateUser = {}
this.findUserList()
},
//用户删除事件
async deleteUser(user){
//根据主键删除
//await axios.delete("/axios/deleteUser",{params: {id: user.id}});
let {data: result} = await axios.delete("/axios/deleteUser?id="+user.id);
alert(result)
//重新查询列表数据
this.findUserList()
}
},
mounted(){
//页面初始化完成之后调用
this.findUserList()
}
})
</script>
</body>
</html>
3.2 后端完整代码展示
3.2.1 AxiosController
package com.jt.controller;
import com.jt.pojo.User;
import com.jt.service.AxiosService;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@CrossOrigin
@RequestMapping("/axios") //抽取前缀
public class AxiosController {
@Autowired
private AxiosService axiosService;
/**
* 实现用户入库操作
* url地址: http://localhost:8090/axios/saveUser
* 参数: JSON串 {"name":"tomcat","age":18,"sex":"女"}
* 返回值: 成功消息
* 难点: 前端传递的是JSON,后端不可以直接使用User对象接收.
* 解决方案:
* 1.对象可以转化为JSON串 @ResponseBody
* 2.JSON串转化为对象 @RequestBody
*/
@PostMapping("/saveUser")
public String saveUser(@RequestBody User user){
axiosService.saveUser(user);
return "用户新增成功!!";
}
/**
* 需求: 查询所有的用户信息
* URL: /axios/findUserList
* 返回值: List<User>
*/
@GetMapping("/findUserList")
public List<User> findUserList(){
return axiosService.findUserList();
}
/*
*用户修改操作
* url：/axios/updateUser
* 参数：json串
* 返回值：String
*/
@PutMapping("/updateUser")
public String updateUser(@RequestBody User user){
axiosService.updateUser(user);
return "用户修改成功";
}
/*
*用户删除操作
* url：/axios/deleteUser
* 参数：
* 返回值：
*/
@DeleteMapping("deleteUser") //delete / get
public String deleteUser(Integer id){
axiosService.deleteUserById(id);
return "用户删除成功!!!";
}
}
3.2.2 AxiosMapper
package com.jt.mapper;
import com.jt.pojo.User;
import org.apache.ibatis.annotations.*;
import java.util.List;
@Mapper
public interface AxiosMapper {
@Insert("insert into demo_user(id,name,age,sex) value (null,#{name},#{age},#{sex})")
void saveUser(User user);
@Select("select * from demo_user")
List<User> findUserList();
@Update("update demo_user set name=#{name},age=#{age},sex=#{sex} where id = #{id}")
void updateUser(User user);
@Delete("delete from demo_user where id = #{id}")
void deleteUserById(Integer id);
}
3.2.3 AxiosService
package com.jt.service;
import com.jt.pojo.User;
import java.util.List;
public interface AxiosService {
//url地址：http://localhost:8090/axios/saveUser
void saveUser(User user);
//查找
List<User> findUserList();
//修改
void updateUser(User user);
//删除
void deleteUserById(Integer id);
}
package com.jt.service;
import com.jt.mapper.AxiosMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
class AxiosServiceImpl implements AxiosService{
@Autowired
private AxiosMapper axiosMapper;
@Override
public void saveUser(User user) {
axiosMapper.saveUser(user);
}
@Override
public List<User> findUserList() {
return axiosMapper.findUserList();
}
@Override
public void updateUser(User user) {
axiosMapper.updateUser(user);
}
@Override
public void deleteUserById(Integer id) {
axiosMapper.deleteUserById(id);
}
}
3.2.4 application
#配置端口号
server:
port: 8090
servlet:
context-path: /
#管理数据源
spring:
datasource:
#低版本驱动需要使用com.mysql.jdbc.Driver
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true
username: root
password: root
#springboot整合mybatis
mybatis:
#指定别名包
type-aliases-package: com.jt.pojo
#扫描指定路径下的映射文件
mapper-locations: classpath:/mybatis/mappers/*.xml
#开启驼峰映射
configuration:
map-underscore-to-camel-case: true
# 一二级缓存默认开始 所以可以简化
#打印mysql日志
logging:
level:
com.jt.mapper: debug
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)