一：登陆页面
效果图：
样式问题：
背景页面UI给的尺寸比较小的情况下，如何按比例不平埔背景呢？
.login {width: 100%;padding-bottom: 62.5%;height: 0;background: url('../../images/login.jpg') no-repeat center center fixed;background-size: cover;background-color: #0C1424;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;}
首先宽度是100%。高度是0，我们使用padding-bottom来固定宽高比
最最重要的是，不平埔还能展示全屏就是使用css3的background-size: cover属性了，注意做一下兼容。
我们使用element ui 的表单验证，可以控制输入的字符串格式，当我们做验证码的时候，希望只输入4个字符便不能输了，当输入大于四个字符时就截取掉后面的，并赋值给输入框。
vcode: [{required: true, validator: validateVcode, triger: 'blur'}]data () 中定义：var validateVcode = (rule, value, callback) => {// 将用户输入数字转成字符串，同时转换成大写value = value + ''if (value.length > 4) {value = value.substring(0, 4)this.$set(this.loginInfo, 'vcode', value)}}
随机生成验证码，在页面一加载完毕就执行该函数生成一个验证码。
mounted () {this.generatedCode()},在methods中：generatedCode () {const random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R','S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']let code = ''for (let i = 0; i < 4; i++) {let index = Math.floor(Math.random() * 36)code += random[index]}ode = code}
当用户点击生成码可以生成一个新的验证码，所以给该生成码标签绑定一个点击事件，在点击 后执行生成验证码函数。
// 点击生成验证码handleCode () {this.generatedCode()}
当我们输入验证码完成之后，需要验证输入的和我们生成的是否一致，所以需要一个判断输入验证码是否正确的函数。
// 判断验证码是否输入准确checkCode () {let vcode = this.loginInfo.vcodevcode = vcode.toUpperCase()let ccode = odeccode = ccode.toUpperCase()if (vcode !== ccode) {this.$message.error('Please enter the correct verification code!')this.$set(this.loginInfo, 'vcode', '')this.$set(this.loginInfo, 'password', '')} else {return 1}},
当点击登陆按钮的时候，开始验证，我们在登录按钮上绑定验证表单的事件<el-button @click="handleSubmit('loginFrom')">Login</el-button>
思路： 首先在验证表单之前先验证验证码是否正确，正确的话才开始验证表单，验证码不正确弹出验证码输入有误！
第二步：表单如果验证成功，那么就发送用户信息到后台登陆，如果验证不成功的话，弹出表单填写不正确
第三步：发送请求到后台，如果用户信息正确登陆成功，执行登陆成功的函数，将数据存储在本地
如果用户名或者密码不对，请求出错，则报用户名或者密码不对！
具体代码如下：
handleSubmit (formName) {let codestatus = this.checkCode()// 先验证输入的验证码是否相同，相同再做密码和输入框的正确与否if (codestatus) {this.$refs[formName].validate((valid) => {if (valid) {axios.get('/rest/login.json').then(this.loginInfoSucc)} else {this.$message.error('Please enter a valid username or password')return false}})} else {this.$message.error('Please enter the correct verification code!')this.$set(this.loginInfo, 'vcode', '')this.$set(this.loginInfo, 'password', '')}},loginInfoSucc (res) {res = res.dataif (res.payload && !res.status) {// 保存菜单的配置const allInfo = res.payloadthis.$store.dispatch('configurationInfo', allInfo)// 保存用户名的配置let userInfo = {}if (this.remember) {this.$set(userInfo, 'employeeid', this.loginInfo.employeeid)this.$set(userInfo, 'password', this.loginInfo.password)} else {this.$set(userInfo, 'employeeid', '')this.$set(userInfo, 'password', '')}this.$mit('saveUserInfo', userInfo)// 设置数据源的开关为SAPlet dataswitch = falsethis.$mit('switchData', dataswitch)this.$router.push('/home')} else {this.$message.error('Incorrect user name or password')}}
现在我们实现了点击登陆，用户体验度做的好一点，还希望完成敲回车直接登陆，
我们输入完验证码敲回车，也去执行登陆的触发时间就可以了。
在验证码的输入框中加上@keyup.enter,native ="handleSubmit('loginFrom')"即可
ok,暂时登陆页面的技术总结完毕，后续应该会添加localStroage的要点。
二： 注册页面
效果图：
注册页面的技术要点没多少，还是表单的问题
1.遇到比较麻烦的一点是，在from中select组件修改全局样式无效，因为select组件生成的下拉菜单不在父级div中，而是在与app同级的div中，解决这个问题是给select添加一个叫prop-class的属性，该属性是给下拉菜单定义一个类名，在该类下修改样式就可以了。
2. password 验证是使用自定义验证的。
var validatePassword = (rule, value, callback) => {if (value === '') {callback(new Error('please input password'))} else {if (this.registerInfo.cpassword !== '') {this.$refs.registerForm.validateField('cpassword')}callback()}}var validateCPassword = (rule, value, callback) => {if (value === '') {callback(new Error('input password again'))} else if (value.length >=this.registerInfo.password.length && value !== this.registerInfo.password) {callback(new Error('The two passwords do not match!'))} else {callback()}}
this.$refs.registerForm.validateField(‘cpassword’) 是当验证密码存在时，重新输入密码，我们要将根据第二次的输入密码作为判断，当输入不同时，就会触发两次密码不同的提示
另外验证密码，不要一开始刚输入就显示不一样，要在输入长度一样之后再判断，给用户比较好的体验。
