Vue小tips-d11

一、管理员管理

1.网络请求

• get

axios.get('请求地址')
axios.get('请求地址',{ params:{要提交的数据} })
axios({
    url:'请求地址',
    method:'请求方式',//默认是get
    params:{要提交的数据}
})

 

• post

axios.post('请求地址',{要提交的数据})
axios({
    url:'请求地址',
    method:'post',
    data:{要提交的数据}
})

 

2.数据分页

<el-pagination 
    background
    :total="total" :page-size="2" 
    layout="prev, pager, next"
    @current-change="pageChange"
></el-pagination>

　　backgorund 页码按钮背景颜色

　　total 总条目数据

　　layout 分页展示形式

　　current-change 分页页码当前点击事件

 

3.使用vuex仓库验证用户是否登录

(1)安装vuex和vuex-persistedstate插件

npm i vuex vuex-persistedstate

 

(2)创建仓库

　　在/src/下创建store目录，并在其中创建index.js

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
    plugins:[createPersistedState({
        storage:window.sessionStorage
    })],
    state:{
        userinfo:null
    }
})

 

(3)在src/main.js引入仓库

import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

 

(4)在路由的配置文件中添加全局路由守卫

　　/src/router/index.js

const router = new Router({
    routes:[...]
})
import store from '../store'//引入仓库
//加入全局路由守卫验证
router.beforeEach((to,from,next)=>{
    if(to.fullPath !=='/login'){
        var userinfo = store.state.userinfo;//从仓库中读取数据
        if(userinfo!==null){
            next()
        }else{
            next('/login')
        }
    }else{
        next();
    }
})
export default router;

 

 

二、axios拦截器

在接口项目的app.js中启用验证

shop-api/App.js

把第37-47行代码注释解开，启用接口验证

 

1.设置请求头信息

启用接口验证后，必须是登录的用户并设置了头信息，才能够通过接口去操作数据

在页面组件中发起网络请求时，添加headers配置选项

axios({
    url:'请求地址',
    method:'get'//如果是post method:'post',
    params:{要提交的数据}//get请求
    data:{要提交的数据}//post请求
    headers:{
        Authorization:用户登录成功后接口返回的令牌信息
    }
})

添加了headers选项后，接口验证成功后，才能够获取到相应的数据。

 

2.拦截器

(1)在src/assets创建js目录，并在js目录中创建一个http.js

 

(2)在http.js中编写代码

// axios拦截器
import Vue from 'vue'
import axios from 'axios'
import store from '../../store'
//创建axios实例
const http = axios.create();
//响应拦截器
http.interceptors.response.use(res=>{
    if(res.data.code!=200){
        // alert(res.data.msg);
        Vue.prototype.$message(res.data.msg)
    }
    return res;
})
//请求拦截器
http.interceptors.request.use(req=>{
    console.log('请求...')
    if(store.state.userinfo){
        req.headers.Authorization = store.state.userinfo.token;
    }
    return req;
})
export default http;

 

(3)在src/main.js中引入http.js

// import axios from 'axios'
import axios from './assets/js/http'

 

这样，在任意页面组件中只需要使用this.axios发起网络请求即可携带上令牌信息。