本文详细介绍了Vue前后端调用的流程，包括Ajax异步原理和Axios请求案例。涵盖了GET、POST、DELETE、PUT等多种请求方式，结合具体案例展示了参数传递、页面效果展现等关键步骤，旨在帮助开发者深入理解Vue与后端的交互实现。
目录
1.前后端调用流程
1.1（附）Ajax异步原理
Ajax特点:
局部刷新,异步访问
请求同步说明:
用户向服务器发起请求,如果服务器正忙,这时程序处于等待的状态.这时页面处于加载 ,同时用户不能操作.
为了让用户的体验更好,则一般采用异步.
异步调用的原理:
步骤:
1. 用户发起Ajax请求, Ajax内部机制,将请求交给Ajax引擎处理.
2. Ajax引擎接收到用户的请求之后,重写发起一个新的请求.访问后端服务器.
3. 当服务器端接收到了 Ajax请求之后,完成业务处理.之后将数据响应给Ajax引擎.
4. Ajax引擎通过事先约定好的 回调函数, 将服务器数据 交还给用户.
5.用户在请求的过程中,可以完成自己的任务.
注: 多个Ajax的请求 不关注顺序.
1.2 Ajax简单案例
1.2.1 编辑页面html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Axios案例</title>
</head>
<body>
<h1>Ajax请求练习</h1>
<!-- 使用步骤:
1.导入JS函数类库
2.发起Ajax请求,之后业务处理.
-->
<script src="../js/axios.js"></script>
<script>
/* axios请求方式
1.请求类型
1. get 执行查询业务
2. post 执行form表单提交(登录/新增)
3. put 执行修改操作
4. delete 执行删除业务时.
2. axios语法
axios.get("url地址信息","参数信息")
.then(function(args){
})
3. 关于args参数说明
axios为了统筹请求状态.将所有的数据封装为
promise对象
*/
/*
案例1: 利用axios获取后台用户列表信息
url: http://localhost:8090/findAll
*/
axios.get("http://localhost:8090/findAll")
.then(function(promise){
console.log(promise)
console.log(promise.data)
})
</script>
</body>
</html>
1.2.2 开启跨域
1.2.3 编辑UserController
1.2.4 编辑UserServiceImpl
2. Axios 请求案例
2.1 GET-带参数(方式1)
2.1.1 编辑页面html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>前后端调用</title>
</head>
<body>
<h1>前后端调用</h1>
<script src="../js/axios.js"></script>
<script>
/* 需求1: 查询id=1的用户
GET方式1: 动态拼接参数的写法
url: http://localhost:8090/axios/getUserById?id=1
*/
let url1 = "http://localhost:8090/axios/getUserById?id=1"
axios.get(url1).then(promise => {
console.log(promise.data)
})
</script>
</body>
</html>
2.1.2 编辑AxiosController
@RestController
@CrossOrigin
@RequestMapping("/axios")
public class AxiosController {
@Autowired
private UserService userService;
/**
* URL: http://localhost:8090/axios/getUserById?id=1
* 参数: id=1
* 返回值: User对象
*/
@GetMapping("/getUserById")
public User getUserById(Integer id){
return userService.findUserById(id);
}
}
2.1.3 编辑AxiosServiceImpl
@Override
public List<User> findAll() {
return userMapper.selectList(null);
}2.2 GET-带参数(restFul格式)
2.2.1 编辑页面HTML
/*
GET方式2: 利用restFul查询数据
需求: 查询sex=女 age>18
原因: restFul结构越来越受欢迎,则拼接restFul结构 变得繁琐.
模板字符串:
语法: 一对反引号 ``
取值: ${key} 形式取值
优势: 保留代码的格式
*/
let sex2 = "女"
let age2 = 18
//let url2 = "http://localhost:8090/axios/user/"+sex2+"/"+age2
let url2 = `http://localhost:8090/axios/user/${sex2}/${age2}`
axios.get(url2).then(promise => {
console.log(promise.data)
})
2.2.2 编辑AxiosController
最低0.47元/天 解锁文章
1649
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
