简书不允许放GitHub链接，代码地址见原文。
1 创建项目
打开cmd，输入ui命令：
vue ui
若没有反应，可能是版本太低，需要卸载后重装：
npm uninstall vue-cli -g #卸载
npm install @vue/cli -g #安装
执行ui命令成功后，会出现提示：
🚀 Starting GUI...
🌠 Ready on http://localhost:8000
并会自动打开页面：
创建名为SpringAndVue-vue的项目，预设选择“手动”；功能开启 Babel、Router、Vuex、Linter/Formatter；配置选择“ESLint with error prevention only”；版本建议使用 “vue2.0”。创建新项目。
通过cd进入目录，启动项目：
npm run serve
2 安装插件
2.1 element-ui
打开cmd，输入ui命令：
vue ui
在插件项搜索，并点击安装。
vue2.0 选择安装 “vue-cli-plugin-element”；vue3.0 选择安装 “vue-cli-plugin-element-plus”。
2.2 axios
Terminal安装axios，每个新项目都需要安装：
# vue-cli2.0命令
npm install axios
# vue-cli3.0命令
npm add axios
2.3 mockjs
Terminal安装mockjs
npm install mockjs
3 添加功能
3.1 login
创建 login.vue页面：
<template>
<div class="loginbBody">
<div class="loginDiv">
<div class="login-content">
<h1 class="login-title">用户登录</h1>
<el-form :model="loginForm" label-width="100px"
:rules="rules" ref="loginForm">
<el-form-item label="名字" prop="name">
<el-input style="width: 200px" type="text" v-model="loginForm.name"
autocomplete="off" size="small"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input style="width: 200px" type="password" v-model="loginForm.password"
show-password autocomplete="off" size="small"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="confirm">确 定</el-button>
</el-form-item>
</el-form>
</div>
</div>
</div>
</template>
<script>
export default {
name: "login",
data(){
return{
loginForm:{
name:'',
password:''
},
// 输入信息长度验证
rules:{
name: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 2, max: 5, message: '用户名长度在 2 到 5 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输密码', trigger: 'blur' },
{ min: 2, max: 5, message: '密码长度在 2 到 5 个字符', trigger: 'blur' }
]
}
}
},
methods:{
// 登录后跳转到主页
confirm(){
this.$refs.loginForm.validate((valid) => {
if (valid) { //valid成功为true，失败为false
//去后台验证用户名密码，并返回token
this.$axios.post('/login',this.loginForm).then(res=>{
console.log(res.data)
if(res.data.state==1){
//存储token到本地
this.$store.commit("SET_TOKEN",res.data.vData.token);
//跳转到主页
this.$router.replace('/home');
}else{
alert('用户名或密码错误！');
return false;
}
});
} else {
console.log('校验失败');
return false;
}
});
}
}
}
</script>
<style scoped >
.loginbBody {
width: 100%;
height: 100%;
background-color: #B3C0D1;
}
.loginDiv {
position: absolute;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -250px;
width: 450px;
height: 330px;
background: #fff;
border-radius: 5%;
}
.login-title {
margin: 20px 0;
text-align: center;
}
.login-content {
width: 400px;
height: 250px;
position: absolute;
top: 25px;
left: 25px;
}
</style>
3.2 配置路由
在router.js中配置一级路由：
{
path: '/login',
name: '登录',
component: () => import(/* webpackChunkName: "user" */ '../views/login.vue')
}
3.3 mockjs 模拟后台
在没有后端代码的情况下，可以使用 mockjs 模拟后台数据。
我们使用 mockjs 模拟后台登录验证，并返回token。
我们设置登录的用户名和密码都是admin。
在 src 下新建 mock 文件夹，在 mock 文件夹中新建 mock.js ，内容如下：
//引入 npm 安装的 mockjs
const Mock = require('mockjs')
// 获取 mock.Random 对象
const Random = Mock.Random;
// 登录，此地址与login登录地址对应
Mock.mock('/login','post', (param)=>{
let state=0;
let body = JSON.parse(param.body);
console.log(body)
let data;
//模拟用户名和密码都是 admin
if(body.name=='admin'&&body.password=='admin'){
state=1;
data = Mock.mock({
"token": "@guid()",//模拟token
"name": "@cname",//随机生成中文名字
});
}
return{
"state":state,
"vData":data
}
});
//退出
Mock.mock('/logout','post', ()=>{
return {state:1}
});
3.4 storejs
在 src/store/index.js 中添加 Vuex.Store 的属性：
export default new Vuex.Store({
state: {
token: '',
username: '代码的路'
},
getters: {
},
mutations: {
SET_TOKEN(state, token){
state.token = token ;
localStorage.setItem("token",token);
},
resetState(state){
state.token = '';
localStorage.clear();
}
},
actions: {
},
modules: {
}
})
4 功能实现
在浏览器输入地址：http://localhost:8080/#/login
可以出现登录界面：
输入用户名和密码 admin，即可进入主页：
点击头像出现退出按钮，可以回到登录界面：
学习更多编程知识，请关注我的公众号：
