Vue.js

Target

01.常用插件：vue-awesome-swiper轮播图插件、

---

---

---

2. ***路由插件Router：
   • _基础：$route 包含各种传参属性的路由信息对象，$router拥有大量Function的路由实例对象。路由守卫就是进入一个路由对象时检查一遍。
   • _场景：
     a. 动态路由的使用方式？
     b.路由守卫router.beforeEach以及元信息mate，解决路由限制？

---

---

---

3. ***axios数据交互插件：
   • _基础：baseURL 默认路径、withCredentials是否携带cookie、interceptors拦截器
   • _场景：
     a. axios文件配置？
     b.axios.interceptors拦截器处理通用错误处理？

---

---

---

Explain

2. 路由Router：其1，动态路由的使用方式？ 其2，路由守卫router.beforeEach以及元信息mate，解决路由限制？

/**
*    关于，其1，`动态路由`的使用方式？ 
*/
//  1. 首先，路由声明 '/login_edit/:id'
const routes = [
    {path: '/',name: 'Main',component: ()=>import('../views/Main.vue'),children:[
         {path: '/login_edit/:id',name: 'loginEdit',component: ()=>import('../views/adminLogin/loginCreate.vue')},
    ]}
]
// 2. 然后，在组件1中，点击按钮，路由跳转，传递params值，
<el-table-column label="操作" >
    <template slot-scope="scope">
        <el-button size="mini" @click="$router.push(`/login_edit/${scope.row._id}`)">编辑</el-button>
    </template>
</el-table-column>
// 3. 紧接着，在组件2，动态路由this.$route.params  
<script>
export default {
    name: 'loginCreate',
    data() {},
    mounted:function(){
        this.refetch();
    },
    methods:{
        async refetch(){
            let res = await this.$http.get(`/login/query/${this.$route.params.id,}`);
        }
    }
}
</script>

// 4. 最后，看看node接口
router.get('/query/:id',async (req,res)=>{
    let model = await LoginModel.findById(req.params.id);
    res.send({
        data:model,
        msg:'ID查询成功'
    });
});

/**
*    关于，`其2，`路由守卫router.beforeEach`以及`元信息mate`，解决路由限制？
*    解释：每次路由跳转时，检查即将跳转的路由对象是否存在to.meta.isAccess 和 localStorage.token
*/
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
    // meta元信息，$route的一个属性
    {path:'/login',name:'login',component:()=>import('../views/adminLogin/loginPage.vue'),meta:{isAccess:true}},
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
// 路由守卫
// router.beforeEach((即将跳转的路由对象,出发的路由对象, 跳转到那里去)
router.beforeEach((to, from, next) => {
    if(!to.meta.isAccess && !localStorage.token){
        next('/login');
    }
    next();
})

export default router

---

---

---

3. axios数据交互：其1，axios文件配置？其2，axios.interceptors拦截器处理通用错误处理？

/**
*    关于“axios文件配置？”
*/
// ——————————————首先，创建配置文件api/http.js ——————————————
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:3000/api';// 全局默认路径BaseURL
axios.defaults.withCredentials = true;// 携带cookie
export default axios;

// ——————————————然后，全局引入axios ——————————————
import axios from './api/http'
Vue.prototype.$http = axios;

// ——————————————最后，使用axios ——————————————
articleCreate() {
  this.$http.post('/article/add',this.form).then(res=>{
       console.log('123');
  })
}

/**
*  关于“`axios.interceptors拦截器`处理通用错误处理？”
*/
import axios from 'axios'
import Vue from 'vue'

axios.defaults.baseURL = 'http://localhost:3000/admin/api';

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    return response;
  }, function (error) {
    // 通用错误处理
    const err_message = error.response.data.message;
    if(err_message){
        Vue.prototype.$message({
            message:err_message
        })
    }
    return Promise.reject(error);
  });

export default axios;

// ——————————————首先，创建配置文件api/http.js ——————————————
import Vue from 'vue';
import axios from 'axios'
import {Loading } from 'element-ui';

// 预加载
let loading        
function startLoading() {    
    loading = Loading.service({
        lock: true,
        text: '加载中...',
        background: 'rgba(0, 0, 0, 0.7)'
    })
}
function endLoading() {   
    loading.close()
}
// 全局默认路径BaseURL、携带cookie
axios.defaults.baseURL = 'http://localhost:3000/api';
axios.defaults.withCredentials = true;
// 拦截器Interceptors
axios.interceptors.request.use(config => {
    startLoading()
    return config
}, error => {
    return Promise.reject(error)
})
axios.interceptors.response.use(response => {
    endLoading()
    return response
}, error => {
    endLoading()
    return Promise.reject(error)
})
export default axios;

// ——————————————然后，全局引入axios ——————————————
import axios from './api/http'
Vue.prototype.$http = axios;

// ——————————————最后，使用axios ——————————————
 articleCreate() {
        this.$http.post('/article/add',this.form).then(res=>{
           console.log('123');
        })
      }