VUE登录（含验证码）、注册页面开发

一、登录Login.vue在views文件夹内新建Login.vue。新建完成后首先在template/template里添加div /div。因为Vue 2严格必须Vue 2 的模板要求必须只有一个根元素。如果你不包这个直接写两个并排的标签浏览器会直接报错 Component template should contain exactly one root element。所以那时必须用或其他标签包起来。新建页面后首先保证这个页面是可以被访问的so新建完页面后首先去router文件夹下的index.js文件里写一个新的路由:constroutes[{path:/login,name:Login,component:()import(../views/Login.vue)}]盒子(div)布局盒子flek布局搞定可以看到图片那侧角是直角原因是图片把圆角border-radius: 5px遮盖了解决方法为添加overflow: hidde表单贴边怎么办1.设置垂直居中flex布局在最外面的div盒子模型中添加display: flex;align-items: center即div styleflex: 1; display: flex;align-items: center。怎么让表单左右距离相等组件水平方向居中justify-content: center!验证码怎么弄有一个开源的库代码在二、验证ValidCode.vue这一节templatedivstyleheight:100vh;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;background-color:#41a1ffdivstyledisplay:flex;height:60vh;width:60%;background-color:white;border-radius:5px;overflow:hiddendivstyleflex:1imgsrc/assets/img/login.pngaltstylewidth:96%/divdivstyleflex:1;display:flex;align-items:center;justify-content:centerel-form:modeluserstylewidth:80%divstylefont-size:25px;font-weight:bold;text-align:center;margin-bottom:20px欢迎登录后台管理系统/divel-form-itempropusernameel-inputprefix-iconel-icon-usersizelargeplaceholder请输入账号v-modeluser.username/el-input/el-form-itemel-form-itemproppasswordel-inputprefix-iconel-icon-locksizelargeshow-passwordplaceholder请输入密码v-modeluser.password/el-input/el-form-itemel-form-itempropvalidCodedivstyledisplay:flexel-inputprefix-iconel-icon-sizelargestyleflex:1v-modeluser.code/el-inputdivstyleflex:1;justify-content:center;height:40px;width:40px;valid-codeupdate:valuegetCode/!--验证码--/div/div/el-form-itemel-form-itemel-buttontypeprimarystylewidth:100%sizelargeclicklogin登 录/el-button/el-form-itemdivstyledisplay:flexdivstyleflex:1还没有账号请spanstylecolor:blue;cursor:pointer注册/span/divdivstyleflex:1;text-align:right;cursor:pointer;color:blue忘记密码/div/div/el-form/div/div/div/templatescriptimportValidCodefrom/components/ValidCode;//验证码exportdefault{name:Login,components:{ValidCode//验证码},data(){return{code:,// 验证码组件传递过来的codeuser:{code:,// 表单里用户输入的code验证码username:,password:}}},created(){},methods:{getCode(code){console.log(code)this.codecode// login页面的code值validCode页面传过来的值 ,this表示return里的内容},login(){}}}/scriptstylescoped/style到以上代码这一步下一步写后端连接数据库二、验证ValidCode.vue在src文件夹下新建一个文件夹components再新建一个ValidCode.vue 文件文件内容为templatedivclassValidCode disabled-selectstylewidth:100%;height:100%clickrefreshCodespanv-for(item,index) in codeList:keyindex:stylegetStyle(item){{item.code}}/span!-- 注意in不能贴着括号--/div/templatescriptexportdefault{name:validCode,data(){return{length:4,codeList:[]}},mounted(){this.createCode()},methods:{refreshCode(){this.createCode()},createCode(){letlenthis.length,codeList[],charsABCDEFGHIJKLMNOPQRSTWXYZabcdefghijklmnopqrstwxyz0123456789,charslenchars.length//生成for(leti0;ilen;i){letrgb[Math.round(Math.random()*220),Math.round(Math.random()*240),Math.round((Math.random())*200)]codeList.push({code:chars.charAt(Math.floor(Math.random()*charslen)),color:rgb(${rgb}),padding:${[Math.floor(Math.random()*10)]}px,transform:rotate(${Math.floor(Math.random()*90)-Math.floor(Math.random()*90)}deg)})}//指向this.codeListcodeList//将当前数据派发出去this.$emit(update:calue,codeList.map(itemitem.code).join())},getStyle(data){returncolor:${data.color}; font-size:${data.fontSize}; padding:${data.padding}; transform:${data.transform}}}}/scriptstyle.ValiCode{display:flex;justify-content:center;align-items:center;cursor:pointer;}.Valicode span{display:inline-block;font-size:18px;}/style三、注册Register.vue