目录
1.什么是axios?
2.axios的特征
3.axios在使用的时候需要注意的细节
4.axios在vue中的实例运用(留言评论接口)
App.vue代码
mian.js代码
1.什么是axios?
axios 是一个基于promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装
2.axios的特征
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
3.axios在使用的时候需要注意的细节
引用 axios 时 Vue.prototype.axios = axios Vue.prototype.$axios = axios Vue.prototype.$http = axios 其实是都一个东西，只是vue的原型链上加个变量（且变量不同），值是axios对象 。
只是 一个是jquery封装过的异步调用方法 一个是vue推荐的第三方异步封装方法 他们都是调用的axios对象
只是调用的时候 axios.post({..}) this.$axios.post({...}) this.$http.post({....})
4.axios在vue中的实例运用(留言评论接口)
App.vue代码
<template>
<div>
<h1>学习axios</h1>
<div v-if="token">
{{userInfo.name}} 积分:{{userInfo.score}} 等级:{{userInfo.rank}}
<button @click="logout">退出</button>
</div>
<div class="login" v-else>
<h3>登录</h3>
用户名: <input type="text" v-model="user.name"> <br>
密码: <input type="password" v-model="user.password"> <br>
<button @click="login">登录</button>
</div>
<div>
<h3>添加留言</h3>
<textarea rows="" cols="" v-model="msg">
</textarea> <br>
<button @click="sendMsg">发表留言</button>
</div>
<div class="list" v-if="feedlist.length">
<div class="item" v-for="item in feedlist" :key="item.id">
<h5>{{item.name}}</h5>
<p>{{item.msg}}</p>
<p>{{item.date}}</p>
<hr>
</div>
</div>
<!-- pagnation.pageTotal 如果有分页信息就显示,没有就隐藏 -->
<div class="pagnation" v-if="pagnation.pageTotal">
<!-- 如果current小等于就disabled 按钮不可以用 -->
<button :disabled="current<=1" @click="current--;getFeed()">上一页</button>
<!-- 循环遍历总分页书 出现1,2,3,4 -->
<!-- 如果current等于item 就是当前页给一个active的class -->
<!-- 单击时候设置current,获取分页对应的评论列表信息 -->
<span :class="{'active':current==item}" v-for="item in pagnation.pageTotal" :key="item"
@click="current=item;getFeed()">{{item}}</span>
<!-- 如果current大于等于总分页数据 按钮不可以用 -->
<button :disabled="current>=pagnation.pageTotal" @click="current++;getFeed()">下一页</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
msg: '', //需要添加的评论
current: 1, //默认获取第一页评论
feedlist: [], //笑话列表
pagnation: {
}, //分页信息
user: {
name: '',
password: '',
},
// 从本地获取用户信息 parse 把json字符串转换为js对象
userInfo: JSON.parse(localStorage.getItem("userInfo") || "{}"), //用户信息,
// 从本地获取token,字符串不需要pase转
token: localStorage.getItem("token"), //token
}
},
// 组件创建完毕就加载
created() {
this.getFeed();
},
// 登录后显示用户信息
methods: {
sendMsg() {
// 基础方法
this.$axios({
url: "/api/feed",
method: "post",
data: {
msg: this.msg
}
})
.then(res => {
// alert(res.data.msg);
if (res.data.code == 0) {
// 让页面回归第一1
this.current = 1;
// 获取评论列表
this.getFeed();
// 清空评论框
this.msg = '';
}
})
},
// 登录成功后,获取评论信息
// 除了登录与注册,接口规定向服务器请求数据必须加上 请求头token
// token一串加密的字符,包含了用户信息等..(后端靠token识别用户是否登录)
getFeed() {
this.$axios.get(
"/api/feed?current=" + this.current, //请求url
// {
// headers:{
// "Authorization":'Bearer '+localStorage.getItem("token")
// }
// }
)
// 网络请求成功
.then(res => {
console.log("成功", res.data)
this.feedlist = res.data.data; //评论信息
// 更新分页信息
this.pagnation = res.data.pagnation; //分页信息
})
// 网络请求失败
.catch(err => {
console.log("失败", err);
alert(err.response.data.msg)
})
},
logout() {
// 清空用户信息与token
this.userInfo = {};
this.token = null;
// 移除本地存储
localStorage.removeItem("userInfo");
localStorage.removeItem("token");
},
login() {
// 实现登录
this.$axios.post(
"/api/login", //请求的地址
this.user, //请求的数据
)
.then(res => {
// 网络请求成功
if (res.data.code === 200) {
// res是响应的数据
// 01 本地存用户信息,与token
// stringify 把js对象转换为json字符串
localStorage.setItem("userInfo", JSON.stringify(res.data.user))
localStorage.setItem("token", res.data.token);
// 02 更新userInfo与token
this.userInfo = res.data.user;
this.token = res.data.token;
// 登录成功 获取评论
this.getFeed()
} else {
alert(res.data.msg);
}
})
.catch(err => {
// 网络请求失败
console.error(err)
})
}
}
}
</script>
<style>
.active {
color: #FF7700
}
.pagnation span {
padding: 15px;
cursor: pointer;
}
</style>
mian.js代码
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 导入axios 没有./ (axios网络请求工具:1不依赖dom,2.前后端都可以用,3. 丰富拦截,扩展功能,4可封装,复用性强)
import axios from 'axios';
// 挂载到vue的全局(原型上),在每个组件都可以使用 ,prototype是固定的,$axios是自定义的
Vue.prototype.$axios = axios;
// 指定默认的请求域名
axios.defaults.baseURL = "http://dida100.com:8888"
// 给每个请求拦截一下,添加请求Token信息
axios.interceptors.request.use(function(config){
config.headers.Authorization = 'Bearer '+localStorage.getItem("token");
return config;
})
// interceptors 拦截器
// request 请求
// config 配置
// headers头信息
// Authorization 权限
// defaults 默认
// baseURL 基础URL
new Vue({
render: h => h(App),
}).$mount('#app')