安装
>: cnpm install vue-cookies
main.js配置
// 第一种方式 import cookies from ‘vue-cookies‘ // 导入插件 Vue.use(cookies); // 加载插件 new Vue({ // ... cookies, // 配置使用插件原型 $cookies }).$mount(‘#app‘); // 第二种方式 import cookies from ‘vue-cookies‘ // 导入插件 Vue.prototype.$cookies = cookies; // 直接配置插件原型 $cookies
使用
// 增(改): key,value,exp(过期时间) // 1 = ‘1s‘ | ‘1m‘ | ‘1h‘ | ‘1d‘ this.$cookies.set(‘token‘, token, ‘1y‘); // 查:key this.token = this.$cookies.get(‘token‘); // 删:key this.$cookies.remove(‘token‘);
// 1) 什么是token:安全认证的字符串 // 2) 谁产生的:后台产生 // 3) 谁来存储:后台存储(session表、文件、内存缓存),前台存储(cookie) // 4) 如何使用:服务器先生成反馈给前台(登陆认证过程),前台提交给后台完成认证(需要登录后的请求) // 5) 前后台分离项目:后台生成token,返回给前台 => 前台自己存储,发送携带token请求 => 后台完成token校验 => 后台得到登陆用户
安装
>: cnpm install axios
main.js配置
import axios from ‘axios‘ // 导入插件 Vue.prototype.$axios = axios; // 直接配置插件原型 $axios
使用
this.axios({ url: ‘请求接口‘, method: ‘get|post请求‘, data: {post等提交的数据}, params: {get提交的数据} }).then(请求成功的回调函数).catch(请求失败的回调函数)
案例
// get请求 this.$axios({ url: ‘http://127.0.0.1:8000/test/ajax/‘, method: ‘get‘, params: { username: this.username } }).then(function (response) { console.log(response) }).catch(function (error) { console.log(error) }); // post请求 this.$axios({ url: ‘http://127.0.0.1:8000/test/ajax/‘, method: ‘post‘, data: { username: this.username } }).then(function (response) { console.log(response) }).catch(function (error) { console.log(error) });
补充: response 是后端响应回来的数据