Vue的基本使用

一、axios封装

1.问题：

（1）每次请求都要写一下/ecard的路径（这里ecard是为了代理转发）

解决：在src下面建立一个util文件夹，建一个文件名为request.js，导入axios包，具体看代码

import axios from "axios";

// 创建axios请求对象
var http = axios.create({
    baseURL:"/ecard"
})
export default http

（2）服务器返回的状态码（200-成功，404，403，500.。。。）

解决：在服务器和客户端中间弄个拦截器，也是在request.js里面写

// 创建axios的响应拦截器
http.interceptors.response.use(res =>{
    if(res.data.code == 404){
        alert("请求找不到")
        return
    }
    if(res.data.code == 500){
        alert("服务器错误")
        return
    }
    return res.data//返回dto里面的内容
})

export default http

（3）在每个需要使用axios的地方时都需要import一下axios，这样子会很麻烦

解决：main.js是中心页，之前写的element的组件就是在main里面写的，所以axios也可以写在这里，而我们刚刚定义的request.js里面有axios，且需要返回的正确数据也在里面，所以我们可以直接导入刚刚写的request.js

//在main.js写
//这边$axios是我们自己定义的变量，为了跟axios好区分，所以加了$
import http from './util/request';
Vue.prototype.$axios = http;

 二、路由守卫

1.问题：

在没有登陆的情况下，也能访问其他不能访问的页面

正常流程：应该是登录后才能进入主界面

2.解决

每次进入一个路由的时候，我们都要判断他是否登录了，如果有就放行，如果没有就提醒用户登录

思考：怎么知道有没有登录呢？-------》目前使用本地储存

//登录成功则就把内容存进去本地里面
localStorage.setItem("userInfo",JSON.stringify(res.data))

 在路由类里面写

// 在你进入路由守卫之前拦截一下,全局的路由守卫
// to去哪  from从哪来  next要不要放行
router.beforeEach((to,from,next)=>{
    // 白名单,里面写路由，在这里面的路由都放行通过
    const whiteList = ['/login','/'];
    // 判断即将要进入的路由是否在白名单里面，在则放行，如果不在则提示请先登录
    // 找得到则就返回数组的下标，如果不在则返回-1
    if(whiteList.indexOf(to.path) != -1){
        next()
    }else{
        // 从localStorage里面取出userInfo,如果找得到则就放行，取不到就跳转登录界面
        var userInfo = localStorage.getItem('userInfo');
        if(userInfo != null){
            next();
        }else{
            alert("请先登录哦~")
        }
    }

})

export default router;

三、vuex组件

1.导入vuex---》npm i 依赖名称@版本号 -S

 2.使用

在src建一个store文件夹，里面建一个vuex的index.js，首先导入vuex，然后再让vue使用，所以也要导入Vue

// 写vuex
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

一些基本的使用：

// 通过vuex来开启仓库存一些数据
// 创建vuex状态管理器
const store = new Vuex.Store({
    state:{
        siteName:"传一一卡通"
    },
    getters:{
        getSiteName(state){
            return state.siteName
        },
    },
    // 同步改
    mutations:{
        // 两个参数，state你原来的数据，val是要修改的值
        changeSiteName(state,val){
            state.siteName = val;
        }
    },
    // 异步改
    actions:{
        // 可以做异步操作 ==》eg：axios
        setSiteName(store,val){
            setTimeout(function(){
                store.commit("changeSiteName",val)
            },2000)
        }
    }
})

export default store

调用：在LoginView.vue里使用

      <!-- <p>欢迎登录 -- {{this.$store.state.siteName}}</p> -->
      <p>欢迎登录 -- {{this.$store.getters.getSiteName}}</p>

 mounted(){
    // 当页面加载时就要进行修改
    //同步
    // this.$store.commit('changeSiteName',"e卡通")
    //异步
    this.$store.dispatch('setSiteName',"eeeeeee")
  },