作者 | Jeskson
来源 | 达达前端小酒馆
<template>
<div id="app">
<input type="text" placeholder="name" v-model="user.name">
<input type="text" placeholder="age" v-model="user.age">
<button type="button" class="btn" @click="btn.clickcallback">
{{btn.text}}
</button>
<table class="table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item,index) in users" :kkey="index">
<td scope="row">{{item.id}}</td>
<td>{{item.name}}</td>
<td>
<a class="btn" href="#" role="button"
@click.prevent="edituser(index)">编辑</a>
<a class="btn" href="#" role="button" @click.prvent="deleteuser(index)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import "bootstrap/dist/css/boostrap.css";
export default {
name: 'app',
data(){
return {
users: [],
// 添加数据
user: {},
editindex: -1,
btn: {
text: '添加用户',
clickcallback: this.adduser
}
};
},
methods: {
adduser(){
const app = this;
axios.post('/api/users',this.user).then(res=>{
app.users.push(res.data.data);
app.user ={};
});
},
edituser(index){
this.editindex = index;
this.user = this.users(index);
this.btn={
text: '编辑用户',
clickcallback: this.doedituser
};
},
doedituser(){
axios.put('/api/users/'+this.users[this.editindex].id,this.user).then(res => {
app.editindex=-1;
app.user ={};
app.btn={
text: "添加用户",
clickcallback: app.adduser
};
});
},
// 删除用户
deleteuser(index) {
const app = this;
axios.delete('/api/users/'+this.users[index].id).then(function(res){
if(res.data.status){
app.users.splice(index,1);
}
};
}
},
// axios网络请求获取数据
created： function(){
const app = this;
axios.get('/api/users').then(res=>{
app.users=res.data.data;
})
}
}
</script>Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
可以提供以下服务:
1、从浏览器中创建XMLHttpRequests
2、从node.js创建http请求
3、支持PromiseAPI
4、拦截请求和响应
5、转换请求数据和响应数据
6、取消请求
7、自动转换JSON数据
8、客户端支持防御XSRF
Vue安装axios插件的命令是？
axios的安装:
安装命令; npm install axios
get: 一般多用于获取数据
post: 主要提交表单数据和上传文件
put对数据全部进行更新
该请求和post类似，只是请求方法不同
patch只对更改过的数据进行更新
该请求和post类似，只是请求方法不同
delete删除请求
参数可以放在url上，也可以和post一样放在请求体中
axios是对ajax请求的封装
原生ajax请求实现
//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get', 'http://。。。');
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
if (ajax.readyState == 4 && ajax.status == 200) {
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
console.log(ajax.responseText);//输入相应的内容
}
}//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//打开xhr
xhr.open('post', 'http://。。。');
//post请求一定要添加请求头才行不然会报错
//设置请求头，请求头的设置必须在xhr打开之后，并且在send之前
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//发送请求
xhr.send();
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};// 给axios设置baseURL
axios.defaults.baseURL = ' https:、api';
let url = /film/getList';
axios.get(url).then(res => {
console.log(res);
})// 设置请求头
axios.defaults.headers['sessionToken'] = 'asd234';同源策略：
跨域的产生来源于现代浏览器所通用的‘同源策略’，所谓同源策略，是指只有在地址的： - 协议名
- 域名
- 端口名
均一样的情况下，才允许访问相同的cookie、localStorage或是发送Ajax请求等等。若在不同源的情况下访问，就称为跨域。
如何解决axios跨域问题？
解决办法：
服务器（后台）设置允许跨域
浏览器设置跨域
通过代理允许跨域
header('Access-Control-Allow-Origin:*');
//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');
//允许访问的方式 拦截器分为 :
请求（request）拦截器和 响应（response）拦截器
通过axios.create创建一个axios实例
// 创建axios对象
let $axios = axios.create({
baseURL: 'http://。。。'
})请求（request）拦截器
// 发送前拦截 request-请求
$axios.interceptors.request.use(res=> {
// 添加请求头
res.headers.sessionToken = 'as423424..';
return res;
})响应（response）拦截器
// 数据返回后的拦截 response-响应
$axios.interceptors.response.use(function (res) {
if (res.data.code === '200') {
return res.data;
} else {
alert(res.data.msg);
}
}, function (error) {
alert('网络异常');
})记得分享哦！
?? 不要忘记留下你学习的脚印 [点赞 + 收藏 + 评论]
作者Info：
【作者】：Jeskson
【原创公众号】：达达前端小酒馆。
【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
【转载说明】：转载请说明出处，谢谢合作！~
大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！
若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。
请点赞！因为你们的赞同/鼓励是我写作的最大动力！
欢迎关注达达的CSDN！
这是一个有质量，有态度的博客