一、什么是axios
Axios 是一个基于 promise 的 HTTP 库
就是网页用来发送请求的一个库
二、使用场景
通常用于前后端网络请求的交互
三、引入方式
- 通过axios本地包导入
- 通过cdn的方式引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
四、接口文档
通过 http://47.94.57.236/?target_id=001
五、访问接口文档在js中简单使用
// 通过axios这个库 向 http://47.94.57.236:3000/select 发送 get 请求
// http://47.94.57.236 ip地址
// select 接口
axios({
method: 'get',
url: 'http://47.94.57.236:3000/select',
}).then((res) => {
console.log(res)
})
六、请求参数
| 参数 | 作用 |
|---|---|
| method | 请求方式 默认为GET |
| url | 请求地址 |
| data |
data 是作为请求主体被发送的数据 只适用于这些请求方法 PUT, POST, 和 PATCH
|
| params | 是即将与请求一起发送的 URL 参数 使用 get 请求 |
| then | 回调函数 用于获取服务器返回的数据 |
七、get请求和post的请求的区别
传参方式的不同
- get 通过url地址栏传参
- post是通过请求头传参
安全性
- post因为是在请求头中传参 传递的参数相对于get更加安全
八、vue框架 根据接口文档 对数据进行增删改查
如何实现交互
1. 查
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 在生命周期中 创建页面调用了查询方法拿到了数据 通过v-for渲染出来 -->
<div v-for="item in value" :key="item.id" style="display: flex;">
<div>{{item.id}}</div>
<div>{{item.username}}</div>
<div>{{item.age}}</div>
</div>
</div>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
new Vue({
el: '#app',
data: {
value:'' //获取到的数据
},
methods: {
chaxun() {
// 向 http://47.94.57.236:3000/select 发送 get 请求
// 查询用户数据
axios({
method: 'get',
url: 'http://47.94.57.236:3000/select',
}).then((res) => {
this.value = res.data.data
})
}
},
created(){ //vue生命周期函数created 页面创建后发生什么
// 在页面创建后调用 通过this 找到 查询这个方法并调用
this.chaxun()
}
})
</script>
</body>
</html>
2. 增
- 构建页面
<div>
<h1>添加</h1>
用户名：<input type="text" v-model="username">
年龄：<input type="text" v-model="age">
<button @click="tianjia">点击添加用户</button> // 绑定事件tianjia
</div>
- 定义数据源
username:'', // 用户名称
age:''//用户性别
- 定义 事件
// 添加
tianjia() {
// 向 http://47.94.57.236:3000/insert 发送 get 请求
// 添加一条用户数据
axios({
method: 'get',
url: 'http://47.94.57.236:3000/insert',
params: {
username: this.username, // this.username 就是你输入的用户名
age: this.age // this.username 就是你输入的年龄
}
}).then((res) => {
// 发起请求后 在调用一次查询请求
this.chaxun()
})
}
3. 改
- 构建用户界面
<div>
<h1>修改</h1>
用户id:<input type="text" v-model="id">
修改用户名字<input type="text" v-model="xg_username">
<button @click="xiugai">点击添加用户</button> // 绑定事件xiugai
</div>
- 定义数据源
id: '', // 用户id
xg_username: ''//修改用户名字
- 定义事件
// 修改用户名称
xiugai() {
// 向 http://47.94.57.236:3000/update 发送 post 请求
// 根据修改用户名称
axios({
method: 'post',
url: 'http://47.94.57.236:3000/update',
data: { // 因为是post 所以需要用data传参
id: this.id,
username: this.xg_username
}
}).then((res) => {
// 发起请求后 在调用一次查询请求
this.chaxun()
})
}
- 整个代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 在生命周期中 创建页面调用了查询方法拿到了数据 通过v-for渲染出来 -->
<div v-for="item in value" :key="item.id" style="display: flex;">
<div>{{item.id}}</div>
<div>{{item.username}}</div>
<div>{{item.age}}</div>
</div>
<div>
<h1>添加</h1>
用户名：<input type="text" v-model="username">
年龄：<input type="text" v-model="age">
<button @click="tianjia">点击添加用户</button>
</div>
<div>
<h1>修改</h1>
用户id:<input type="text" v-model="id">
修改用户名字<input type="text" v-model="xg_username">
<button @click="xiugai">点击添加用户</button>
</div>
</div>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
new Vue({
el: '#app',
data: {
value: '', //获取到的数据
username: '', // 用户名称
age: '',//用户性别
id: '', // 用户id
xg_username: ''//修改用户名字
},
methods: {
// 查询
chaxun() {
// 向 http://47.94.57.236:3000/select 发送 get 请求
// 查询用户数据
axios({
method: 'get',
url: 'http://47.94.57.236:3000/select',
}).then((res) => {
this.value = res.data.data
})
},
// 添加
tianjia() {
// 向 http://47.94.57.236:3000/insert 发送 get 请求
// 添加一条用户数据
axios({
method: 'get',
url: 'http://47.94.57.236:3000/insert',
params: {
username: this.username, // this.username 就是你输入的用户名
age: this.age // this.username 就是你输入的年龄
}
}).then((res) => {
// 发起请求后 在调用一次查询请求
this.chaxun()
})
},
// 修改用户名称
xiugai() {
// 向 http://47.94.57.236:3000/update 发送 post 请求
// 根据修改用户名称
axios({
method: 'post',
url: 'http://47.94.57.236:3000/update',
data: { // 因为是post 所以需要用data传参
id: this.id,
username: this.xg_username
}
}).then((res) => {
// 发起请求后 在调用一次查询请求
this.chaxun()
})
}
},
created() { //vue生命周期函数created 页面创建后发生什么
// 在页面创建后调用 通过this 找到 查询这个方法并调用
this.chaxun()
}
})
</script>
</body>
</html>
4. 删
// 向 http://47.94.57.236:3000/delete 发送 get 请求
// 通过传用户id 删除对应用户数据
axios({
method: 'get',
url: ' http://47.94.57.236:3000/delete',
params:{
id:'5978'
}
}).then((res) => {
console.log(res)
})
