新项目,后端数据还没准备好,没办法直接从后端获取接口数据,于是我利用Mock简单实现一下这个功能,以作为测试用。
首先,利用 cnpm install mockjs --save-dev 指令安装完mock后,在项目里创建文件夹mock,再创建index.js和userList.js(前者为mock服务文件,后者为模拟数据文件)
index.js中复制如下代码:
// 首先引入Mock
const Mock = require('mockjs');
// 设置拦截ajax请求的相应时间
Mock.setup({
timeout: '200-600'
});
let configArray = [];
// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
if (key === './index.js') return;
configArray = configArray.concat(files(key).default);
});
// 注册所有的mock服务
configArray.forEach((item) => {
for (let [path, target] of Object.entries(item)) {
let protocol = path.split('|');
Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
}
})
另外,需要在main.js中插入一段代码:require('../mock')
之后在userList中写入数据,首先写入get请求获取的数据:
import Mock from 'mockjs'; //导入mockjs
const userList = {
//定义用户数据
data: {
total: 6,
//前两个用户数据分别固定设为管理员和普通用户,为后续权限设置做准备,其他用户随机生成
userinfo: [
{
username: 'admin',
password: '123456',
roles: 'admin',
name: '张三',
age: 23,
job: '前端工程师',
token: '000111222333444555666',
id: '100'
},
{
username: 'editor',
password: '123456',
roles: 'editor',
name: '测试1',
'age|20-30': 23,
job: '前端工程师',
token: '145145145123123123111',
id: '101'
},
{
username: '@word(3, 5)',
password: '123456',
roles: 'editor',
name: '@cname',
'age|20-30': 23,
'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师'],
token: '@guid()',
id: '102'
},
{
username: 'uf100991',
password: '1qaz!QAZ2wsx@WSX',
roles: 'admin',
name: '张三',
age: 23,
job: '前端工程师',
token: '000111222333444555666',
id: '103'
}
],
meta: {
status: 200,
message: 'success'
}
}
};
Mock.mock('/user', 'post', (req) => {
//路径与请求方式
console.log(req, 'req');
console.log(JSON.parse(req.body), '==================22222=========');
const user = JSON.parse(req.body); //将传递进来的数据保存
console.log(user.data.username,"user.data.username")
const username = user.data.username
const password = user.data.password
for (let i = 0; i < userList.data.userinfo.length; i++) {
//判断userList中是否存在该用户并且用户密码是否正确
if (username === userList.data.userinfo[i].username && password === userList.data.userinfo[i].password) {
return {
meta: {
msg: 'success',
status: 200
},
user: {
username: userList.data.userinfo[i].username,
roles: userList.data.userinfo[i].roles
}
};
}
}
return {
meta: {
msg: 'error',
status: 201
}
};
});
//定义请求方法与路径
export default {
'get|/user': userList
};
在登录页某一按钮上定义methods以测试是否成功获取数据 ,这里搭配的vuex 此为登录页面
<template>
<div class="login-wrap">
<div class="ms-login">
<div class="ms-title">后台管理系统</div>
<el-form
:model="ruleForm"
status-icon
:rules="rules"
ref="ruleForm"
label-width="0px"
class="ms-content"
>
<el-form-item prop="username">
<el-input v-model="ruleForm.username" placeholder="username">
<el-button slot="prepend" icon="el-icon-lx-people"></el-button>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
placeholder="password"
v-model="ruleForm.password"
autocomplete="off"
@keyup.enter.native="submitForm('ruleForm')"
>
<el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
</el-input>
</el-form-item>
<div class="login-btn">
<el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
</div>
<p class="login-tips">Tips : 用户名和密码随便填。</p>
</el-form>
</div>
</div>
</template>
<script>
import Axios from 'axios';
export default {
name: "Login",
data() {
var validateUser = (rule, value, callback) => {
let reg = /^[A-Za-z0-9]+$/;
//value就是输入的值
if (value === "") {
callback(new Error("请输入用户名"));
} else {
if (reg.test(value)) {
callback(); //必须要callback 否则提交不了
} else {
callback(new Error("用户名是由数字和字母组成"));
}
}
};
var validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
} else {
callback();
}
};
return {
ruleForm: {
username: "",
password: "",
},
rules: {
username: [{ validator: validateUser, trigger: "blur" }],
password: [{ validator: validatePass, trigger: "blur" }],
},
};
},
methods: {
login() {},
// 提交表单
submitForm(formName) {
JSON.stringify();
this.$refs[formName].validate((valid) => {
if (valid) {
// let a = this.ruleForm;
// console.log(a,"aaaaaaaaaaaaaaaa")
// Axios.post('/user',{
// data:this.ruleForm
// }).then((res) => {
// console.log(res,"res111111111111111111");
// let code = res.data.meta.status;
// if (code == "200") {
// this.$router.push("/home");
// }
// });
this.$store.dispatch("login", this.ruleForm);
} else {
console.log("error submit!!");
return false;
}
});
},
// 重置表单
resetForm(loginForm) {
this.$refs[loginForm].resetFields();
},
// 获取验证码方法
// getVerifyCodeImg() {
// /*获取验证码*/
// this.$axios.UploadFormFile.then((res) => {
// // 获取验证码key
// this.loginForm.codeToken = res.data.data.code;
// // 获取验证码图片
// this.codeImg = res.data.data.codeImg;
// });
// },
},
// created() {
// // 页面渲染完成后执行获取验证码方法
// this.getVerifyCodeImg();
// },
};
</script>
<style scoped>
.login-wrap {
position: relative;
width: 100%;
height: 100%;
background: url(../../assets/img/5d97a7ba_E905711_68c773e3.jpg) no-repeat;
background-size: 100% 100%;
}
.ms-title {
width: 100%;
line-height: 50px;
text-align: center;
font-size: 20px;
color: rgb(8, 8, 8);
border-bottom: 1px solid #ddd;
}
.ms-login {
position: absolute;
left: 50%;
top: 50%;
width: 350px;
margin: -190px 0 0 -175px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.7);
overflow: hidden;
}
.ms-content {
padding: 30px 30px;
}
.login-btn {
text-align: center;
}
.login-btn button {
width: 100%;
height: 36px;
margin-bottom: 10px;
}
.login-tips {
font-size: 12px;
line-height: 30px;
color: rgba(255, 255, 255, 0.247);
}
</style>
登录按钮的methods暂时写为:
submitForm(formName) {
JSON.stringify();
this.$refs[formName].validate((valid) => {
if (valid) {
// let a = this.ruleForm;
// console.log(a,"aaaaaaaaaaaaaaaa")
// Axios.post('/user',{
// data:this.ruleForm
// }).then((res) => {
// console.log(res,"res111111111111111111");
// let code = res.data.meta.status;
// if (code == "200") {
// this.$router.push("/home");
// }
// });
this.$store.dispatch("login", this.ruleForm); //引用vuex里面的方法
} else {
console.log("error submit!!");
return false;
}
});
},
vuex里定义的方法 ,在actions里面
//执行上下文 this.$store.dispatch('login_action')
login(context, user) {
// let user = {username:"zhangsan001",password:"admin123"}
// console.log(user,"userInfo")
console.log(user, '===================user');
Axios.post('/user', {
data: user
}).then((res) => {
console.log(res, '==============res');
if (res.data.meta.status == 200) {
// context.commit('SET_TOKEN', res.data.data.access_token);
// console.log(context.commit("SET_TOKEN", res.data.data.access_token),"===================token==========")
// context.commit("SET_NAME", res.data.data.loginname)
// context.commit('SET_token_type', res.data.data.token_type);
// setCookie('SET_token_type', res.data.data.token_type);
// setCookie('SET_TOKEN', res.data.data.access_token);
// localStorage.setItem('ms_username', res.data.data.token_type);
Message({
message: '登录成功',
type: 'success',
duration: 2500
});
setTimeout(() => {
// this.$router.push('/');
router.push('/').catch(() => {});
});
} else {
Message({
message: '用户名或密码错误',
type: 'error',
duration: 2500
});
}
});
// login(user).then((res) => {
// console.log(res, '==============res');
// if (res.status == 200) {
// context.commit('SET_TOKEN', res.data.data.access_token);
// // console.log(context.commit("SET_TOKEN", res.data.data.access_token),"===================token==========")
// // context.commit("SET_NAME", res.data.data.loginname)
// context.commit('SET_token_type', res.data.data.token_type);
// setCookie('SET_token_type', res.data.data.token_type);
// setCookie('SET_TOKEN', res.data.data.access_token);
// localStorage.setItem('ms_username', res.data.data.token_type);
// Message({
// message: '登录成功',
// type: 'success',
// duration: 2500
// });
// setTimeout(() => {
// // this.$router.push('/');
// router.push('/').catch(() => {});
// });
// } else {
// Message({
// message: '用户名或密码错误',
// type: 'error',
// duration: 2500
// });
// }
// });
},
扫描二维码关注公众号,回复:
15943483 查看本文章