考级系统(1.1) (directives,filters,lib,router,vueX，Mock)

指令:

// 自定义指令

import Vue from 'vue'

Vue.directive('fiexd' , {
  inserted(el,bindings){
    //自定义指令
  },
  update(){},
  bind(){}
})

过滤器

// 全局注册过滤器
import Vue from 'vue'

Vue.filter('Upper',value=>{
  return
})

公共库 lib

//axios.js
// 封装ajax
import axios from 'axios';
import config from '@/lib/httpConfig'

//封装请求类
class HttpReq {
  constructor() {
    //公共配置
    this.config = config
  }
  //请求拦截和响应拦截绑定
  bindInstance(axios) {
    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
      // 在发送请求之前做些什么
      console.log("请求拦截");
      return config;
    }, function (error) {
      // 对请求错误做些什么
      return Promise.reject(error);
    });

    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
      // 2xx 范围内的状态码都会触发该函数。
      // 对响应数据做点什么
      console.log("响应拦截");
      return response;
    }, function (error) {
      // 超出 2xx 范围的状态码都会触发该函数。
      // 对响应错误做点什么
      return Promise.reject(error);
    });
  }
  request(options) {
    //创建axios实例
    const instance = axios.create();
    //绑定请求拦截和响应拦截
    this.bindInstance(instance)
    //发送网络请求
    return instance(Object.assign(this.config, options))
  }
}

export default HttpReq;
//为什么不要new

//httpConfig.js
//公共URl请求配置
export default {
  baseURL: '',
  responseType: 'json',
  timeout: 1000,
  headers: {}
}
//导入JQ库
import $ from 'jquery'
import Msg from '@/lib/msg'

export default function (Vue) {
  Vue.prototype.$jquery = $
  Vue.prototype.$msg = new Msg();
}

//toor.js  有关vueX
import store from '@/store'
// 在模块内部使用store状态管理器 , 直接导入store
//通过store.state.key\访问
//store和组件中的 this.$store == store
console.log( store.state.data );

配置vue的路由 :
router文件夹下两个文件 一个index.js写配置和挂载 , router.js写页面路由;

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'

Vue.use(VueRouter)

const router = new VueRouter({
  routes
})

// 设置全局前置路由(守卫/拦截)
// router.beforeEach(function (to, from, next) {

//   if (to.name != 'login') {
//     if (!sessionStorage.isLogin) {
//       alert('请登录后访问');
//       next('/login')
//     } else {
//       next()
//     }
//   } else {
//     next()
//   }
// })
export default router

现在来到了vueX:
store文件夹:下
配置文件夹 : index

import Vue from 'vue'
import Vuex from 'vuex'
import state from "@/store/state"
import mutations from "@/store/mutations"
import saveInLocation from "@/store/plugins/saveInLocation"

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  plugins: [
    saveInLocation
  ],
  modules: {
  }
})

//数据持久化  plugins文件夹 > saveInLocation.js
function saveInLocal(store) {
	//每次刷新时 , 读取sessionStorage.state替换当前state
	if (sessionStorage.state) {
		//替换store中的state为本地存储的state
		store.replaceState(JSON.parse(sessionStorage.state))
	}
	// console.log(store);
	// alert('lal')
	//监听 store.commit()动作 mutations
	store.subscribe(function (mutations, state) {
		// alert('提交修改了states' , mutations)
		//当修改提交发生时 , 将最新的state存入sessionStorage
		sessionStorage.state = JSON.stringify(state)
	})
}
export default saveInLocal

/*
	Vuex的插件都是一个一个的功能函数 , 默认在页面刷新时调用 , 同时将store对象为形参传入 , 用于扩展Vuex 的store对象的功能和方法
*/

//mutations.js
export default {
	//定义一些函数 , 用于修改state中的状态量
	set_isLogin(state, param) {
		state.isLogin = param
	},
	// 修改版本号
	set_user(state, param) {
		state.user = param
	}
}

//定义全局数据 state.js
export default {
  isLogin:'',
  user :''
}

Mock.js

//index.js
import login from "@/mock/login.js";

import first from "@/mock/first.js";

import lable from "@/mock/lable.js";

import stur from "@/mock/stu.js";

import grade from "@/mock/grade.js";

import approve from "@/mock/approve.js"

import kaodian from "@/mock/kaodian.js"

//登录的Mock数据  login.js

import Mock from "mockjs";

// 生成一个假数据
let data = Mock.mock({
  'userList|10': [{
    "user|+3": '@cname',
    "pass|+1": /\d{6}/,
    'code': Mock.mock('@zip(4)'),
    // "hurl": "../assets/img/first" + Mock.Random.natural(1, 4) + ".png",
  }]
})

let img = Mock.mock({
  'hurl': Mock.Random.image('115x35', '#4A7BF7', data.userList[0].code),
})

// console.log(data,"假数据");
// console.log(data.userList[0].code, "假数据");
// console.log(img , "假图片");

function verify(user, pass, code) {
  for (var i = 0; i < data.userList.length; i++) {
    if (user == data.userList[i].user && pass == data.userList[i].pass && code == data.userList[i].code)
      return data.userList[i]
  }
  return false
}

Mock.mock('/login', 'post', req => {
  console.log(req);
  const user = JSON.parse(req.body).user
  const pass = JSON.parse(req.body).pass
  const code = JSON.parse(req.body).code
  var res = verify(user, pass, code)
  if (res) {
    return {
      status: 200,
      msg: '成功',
      data: {
        token: 'fwfewwcw',
        userInfo: res
      }
    }
  } else {
    return {
      status: 202,
      msg: '失败',
      data: null
    }
  }
})


// 验证码图
Mock.mock('/codeImg', 'post', req => {
  return {
    status: 200,
    msg: '成功',
    data: {
      token: 'fwfewwcw',
      userInfo: img
    }
  }
})