项目模块业务

mockjs模块

使用mockjs模拟数据

在项目中没有数据的时候可以使用mockjs来模拟虚拟数据
1.进入mockjs官网，查看mockjs使用手册，大概了解mockjs的使用方法，以及使用的大致流程是怎样的，
2.npm安装mockjs

npm install mockjs

3.使用mockjs模拟数据
查看官方文档中的示例来了解基本使用

import Mock from 'mockjs'
var {
	pp
} = Mock.mock({
	'pp|88':[{
		'id|+1':1,
		'ming|1':['Internet Explorer 4.0','Internet Explorer 5.5','Camino 1.0','Firefox 3.0','AOL browser (AOL desktop)'],
		'date':'@now',
		'xing|1':['A','B','C','X','Y','Z']
	}]
})

Mock.mock(/\/api\/get\/biao/, 'get', (options) => {
	return {
		code: 0,
		msg: "请求成功",
		data: {
			biao:pp
		}
	}
})

第一步：创建一个mockjs的文件，在js文件中导入mock.js。
第二步：使用Mock.mock()来定义模拟接口的接口地址，接口的请求方式，以及还可以定义接口的参数信息。
第三步：在定义好的接口中return接口数据，可以在接口中定义几个属性，如：code ，msg，等来查看是否请求成功
第四步：定义模拟数据，使用var声明变量，利用Mock.mock()方法来进行数据的模拟生成，例如：“id|+1”:1,生成的id属性值从1开始逐渐加1, “data":“@row”,生成当前的时间，更多的例子可查阅官网文档，从而生成你要使用的接口数据
第五步：把定义好的模拟数据赋值给接口数据中的data
第六步：在需要数据的地方访问接口数据

import axios from 'axios'
	import '@/mock/list.js'
	export default{
		methods:{
			Get(){
				axios.get('/api/get/biao',{
					params:{
						pageindex:2,
						pagesize:10
					}
				}).then(res=>{
					console.log(res.data);
				})
			}
		},
		created(){
			this.Get()
		}
	}

使用mockjs进行增删改查以及分页

import Mock from 'mockjs'
var {
	pp
} = Mock.mock({
	'pp|88':[{
		'id|+1':1,
		'ming|1':['Internet Explorer 4.0','Internet Explorer 5.5','Camino 1.0','Firefox 3.0','AOL browser (AOL desktop)'],
		'date':'@now',
		'xing|1':['A','B','C','X','Y','Z']
	}]
})
const Getquery = (url,name)=>{
	const index = url.indexOf('?')
	if(index !== -1){
		const queryArr = url.substr(index+1).split('&')
		for(var i = 0;i < queryArr.length;i++){
			const itemArr = queryArr[i].split('=')
			if(itemArr[0] === name){
				return itemArr[1]
			}
		}
	}
	return null
}
Mock.mock(/\/api\/get\/biao/, 'get', (options) => {
	const pageindex = Getquery(options.url,'pageindex')
	const pagesize = Getquery(options.url,'pagesize')
	const start = (pageindex - 1)*pagesize
	const end = pagesize*pageindex
	const Page = Math.ceil(pp.length/pagesize)
	const list = pageindex>Page?[]:pp.slice(start,end)
	return {
		code: 0,
		msg: "请求成功",
		data: {
			biao:list
		}
	}
})

1.实现分页功能需要传递参数，如：pageindex，页码，pagesize，页大小
2.在定义接口地址的时候需使用正则的形式定义/\ /api\ /get\ /biao/ 需通过\进行转义，第三个参数为接口地址的参数，通过参数的不同来请求不同的数据
3.定义一个方法把接收到的url路径改变成需要的数据
4.在访问数据的界面可以调用一个方法来改变传递参数的值

登录注册模块

import {
	Login
} from '@/api/user.js';
// 导入路由
import $router from '@/router/index.js'
// 导入vue
import Vue from 'vue';
// 导入提示插件
import Notify from '@/plugin/Notify/index.js'
// 使用插件
Vue.use(Notify);
export default {
	state: {
		// 用户信息
		userInfo: {
			name: "",
			score: 0
		},
		// token标识
		token: ''
	},
	mutations: {
		// 负责修改用户信息
		SET_USERINFO(state, data) {
			// 更新state的userInfo信息，
			state.userInfo = data;
			// 本地存储用户信息
			localStorage.setItem("user", JSON.stringify(data))
		},
		// 修改token
		SET_TOKEN(state, data) {
			state.token = data;
			// token本来就是字符串，就不需要JSON.stringify
			localStorage.setItem("token", data);
		}
	},
	actions: {
		// 负责退出
		logout(context) {
			context.commit("SET_USERINFO", {});
			context.commit("SET_TOKEN", "");

		},
		// 负责登录（登录是异步的需要放在actions中）
		login(context, data) {
			Login(data)
				.then(res => {
					// 200代表成功其他代表失败
					if (res.data.code === 200) {
						Notify.success(res.data.msg || "登录成功");
						// 登录成弹出设置用户信息与设置token
						context.commit("SET_USERINFO", res.data.user);
						context.commit("SET_TOKEN", res.data.token);
						// 跳转到redirect对应页面
						// 获取当前留言信息
						var $route = $router.history.current
						// 获取查询参数
						var redirect = $route.query.redirect || "/admin";
						// 实现跳转
						$router.replace(redirect);
					} else {
						Notify.danger(res.data.msg || "登录失败");
						// 登录不成功清空用户信息
						context.commit("SET_USERINFO", {});
						context.commit("SET_TOKEN", "");

					}
				})
				// 失败显网络失败
				.catch(err => {
					console.log(err);
					// alert("网络失败")
					Notify.danger( "登录失败");
				})
		}
	}
}

登录是把登陆的信息存放到vuex中的state中在登陆的界面中通过vuex的全局挂载的属性把登录的信息框中的输入信息存放到state中
在使用定义的方法SET_USERINFO(state, data) 来更新登录的用户信息并存储到本地
定义一个可访问到登录接口的方法Login，登录成功后利用$router.replace(redirect);来进行跳转
注册是把你填写好的用户信息上传到数据库中