毕设关键效果实现剖析(vue)

1.导航栏控制main区域显示不同的组件

技术点：二级路由

2.异步请求过程显示进度条

技术点：nprogress
1.安装依赖 cnpm install --save nprogress
2.在请求、响应拦截器中引入组件和样式

3.数据模块化管理

技术点：vuex
1.安装 cnpm install --save vuex@3
2.main.js中引入、注册store

3.为每个组件创建一个数据仓库

4.创建一个大仓库store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
//引入小仓库
import login from './login'

//对外暴露store类的一个实例
export default new Vuex.Store({
    modules: {
        login
    }
})

4.异步请求数据放入组件数据仓库

4.路由携带数据

技术点：编程式路由
params参数：

 this.$router.push({name:"search",params:{keyword:this.keyword}});

query参数：

 this.$router.push({name:"search",query:{keyword:this.keyword}});

注：name为路由名字

5.不允许未登录用户直接通过地址访问主页面

技术点：路由守卫

router.beforeEach((to, from, next) => {
  //to 将要访问的路径
  //from 代表从那个路径跳转而来
  //next是一个函数，表示放行
  //next()放行    next('/login') 强制跳转
  if (to.path === '/login') return next() //要访问的页面为登录页面，直接放行
  //获取token
  const tokenStr = window.sessionStorage.getItem("token")
  if (!tokenStr) return next('/login') //没有token强制跳转到登录页面
  next()  //有token放行
})

6.收集表单数据

技术点：双向绑定

7.axios二次封装

技术点：请求，响应拦截器
1.安装axios cnpm install --save axios
2.创建api/request.js

import axios from "axios";
const requests = axios.create({
    baseURL: "/api",
    timeout: 5000
});
//请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
    return config;
});
//响应拦截器
requests.interceptors.response.use((res) => {
    //成功的回调函数：服务器响应数据回来后，响应拦截器可以检测到，然后做一些事情
    return res.data;
}, (error) => {
    //失败回调函数
    return Promise.reject(new Error('faile'));
})
//对外暴露
export default requests;

8.API接口统一管理

技术点：二次封装的axios->request
创建api/index.js

//所有api接口统一管理
import requests from "./request";
// /api/product/getBaseCategoryList   get   无参数
//发请求:axios发请求返回结果为Promise对象
export const reqCategoryList = () => requests({ url: '/api/product/getBaseCategoryList', method: 'get' });

9.跨域问题

技术点：代理跨域
vue.config.js中添加proxy对象

  devServer: {
    proxy: {
      '/api': {
        target: 'http://39.98.123.211',//后端服务器IP地址
      }
    }
  }

10.组件通知Vuex发异步请求，获取数据，存储于仓库之中