版权声明：转载请注明出处！ https://blog.csdn.net/qq_33616027/article/details/90715385

前面的话

自己瞎JR捣鼓VUE+ElementUI也有些时日了，趁空想系统地记录一下。练习技术，没有比实战更好的方法了。所以想通过做一个小系统，来熟悉一下。

准备工作

后台的系统是我老早之前就弄过的一个Spring+Mybatis+Maven的整合，这次练习算是弄成了前后端分离。所以后台的接口我就用现成的了。有时间的话会把对Spring+Mybatis+Maven的整合也写出来。
MySQL：8.0.15
Spring+Mybatis+Maven整合项目GitHub地址：https://github.com/PomVen/graduationProject.git
VUE的安装配置、新建VUE项目，这篇博文里不会讲，以后补充吧。
往下看的话，默认你已经可以运行出VUE的HelloWorld界面了。

登录模块

要求：

1. 使用VUE+ElementUI；
2. 对用户的输入进行验证；
3. 登录功能；
4. 登录后跳转到首页，显示欢迎语；欢迎语要获取登录名或昵称；
5. 注册新用户功能；
6. 注册页面不用target=_blank；
7. 注册时校验用户输入；
8. 注册时校验用户是否存在；
9. 用户的登出；
10. 登出后返回到登录页面，点击浏览器的返回上一页历史时，应该要求用户重新登录；
11. 暂时就想到这么多，写的过程中如果想起来别的再加。

前端代码

PS：虽然我这么说了，但其实这篇博文是没有后端代码的。后端代码都在我的GitHub项目中，地址上面已经给了。

安装ElementUI

在你的%vue项目路径%下，Shift+右键，打开cmd窗口；或者你直接打开cmd窗口，cd到你的项目目录下，执行以下命令：

npm install element-ui

就算上面的命令在你的电脑上没有安装成功，也不怕，运行一次VUE项目，报错信息会提示你你的ElementUI没有安装成功，并且还会贴心地告诉你适合你的环境的ElementUI的安装命令。然后，你就知道怎么安装ElementUI了。

引入ElementUI

既然已经安装好了，就要用它。要用它，首先就得引入它。在你的项目的src路径下新建一个plugins文件夹，以后可以用它来存放你引入的其他的VUE插件；然后在plugins文件夹下新建一个element.js文件，写入如下代码：

import Vue from 'vue'
import Element from 'element-ui'
import '../element-variables.scss'
Vue.use(Element)

然后在入口文件main.js中引用插件，其中引入路由的说明会在文末解释：

import Vue from 'vue'
import App from './App.vue'//这句引入了App.vue
import router from './router'//这句引入了路由设置，在文末会有一个简要的说明
import store from './store'//这个我还不知道是干啥的
import './plugins/element.js' //这句引入了ElementUI
Vue.config.productionTip = false//这句是防止在生产环境中产生过多的log输出
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')//这里是通过$mount方法将new Vue()中的内容挂载到了一个id=app的html文件中。等同于el:'#app'的作用。

这样，ElementUI的引入就完成了，你可以在任意一个.vue中使用ElementUI。

编辑登录页面

这个就没什么可说的了，我是在views文件夹下新建了一个login.vue来做为登录页面文件的。直接上代码：

<template>
<div class="login-box">
<!-- 通过:rules="loginFormRules"来绑定输入内容的校验规则 -->
<el-form :rules="loginFormRules" ref="loginForm" :model="loginForm" label-position="right" label-width="auto" show-message>
<span class="login-title">欢迎登录</span>
<div style="margin-top: 5px"></div>
<el-form-item label="用户名" prop="loginName">
<el-col :span="22">
<el-input type="text" v-model="loginForm.loginName"></el-input>
</el-col>
</el-form-item>
<el-form-item label="密码" prop="loginPassword">
<el-col :span="22">
<el-input type="password" v-model="loginForm.loginPassword"></el-input>
</el-col>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="loginSubmit('loginForm')">登录</el-button>
<el-button type="primary" @click="onRegit('loginForm')">注册</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: "login",
data() {
return {
loginForm: {
loginName: '',
loginPassword: ''
},
// 表单验证，需要在 el-form-item 元素中增加 prop 属性
loginFormRules: {
loginName: [
{required: true, message: '账号不可为空', trigger: 'blur'}
],
loginPassword: [
{required: true, message: '密码不可为空', trigger: 'blur'}
]
}
}
},
methods: {
loginSubmit(formName) {
// 为表单绑定验证功能
this.$refs[formName].validate((valid) => {
if (valid) {
// 使用 vue-router 路由到指定页面，该方式称之为编程式导航
console.log("to loginSuccess")
this.$router.replace("/loginSuccess");
} else {
return false;
}
});
}
}
}
</script>
<style scoped>
.login-box {
border: 1px solid #DCDFE6;
width: 350px;
margin: 180px auto;
padding: 35px 35px 15px 35px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
box-shadow: 0 0 25px palegreen;
}
.login-title {
text-align: center;
margin: 0 auto 40px auto;
color: #66CD00;
font-size: 30px;
font-weight: bold;
}
</style>

登录成功后的欢迎页面

然后再建一个loginSuccess.vue来做为登录成功后的欢迎页面,所以在这篇博文中，这个组件是没什么用的：

<template>
<h1>欢迎你</h1>
</template>
<script>
export default {
}
</script>
<style>
</style>

路由定义

在路由文件router.js中定义路径：

import Vue from 'vue'
import Router from 'vue-router'
import Login from './views/login'
import LoginSuccess from './views/loginSuccess'
Vue.use(Router)
export default new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/',//登录页面的路由要定义为/，这样在项目运行时就可以直接加载
name: 'login',
component: Login
},
{
path: '/loginSuccess',
name: 'loginSuccess',
component: LoginSuccess
}
]
})

App.vue的渲染

在默认的加载页面组件中，需要渲染刚刚写的login.vue，该组件通过

router-view

标签来接收路由请求的渲染：

<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

运行结果

到这里，代码部分就完成了，运行项目，就会出现登录页面；由于代码中还没有连接数据库，对登录的限制只是不为空一个。登录成功后，就会来到欢迎页面了：