注册页面
<template><div class="main"><div class="title"><a href="/login">登录</a><span>·</span><a class="active" href="/register">注册</a></div><div class="sign-up-container"><el-form ref="userForm" :model="params"><el-form-item class="input-prepend restyle" prop="nickname" :rules="[{ required: true, message: '请输入你的昵称', trigger: 'blur' }]"><div><el-input type="text" placeholder="你的昵称" v-model="params.nickname"/><i class="iconfont icon-user"/></div></el-form-item><el-form-item class="input-prepend restyle no-radius" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]"><div><el-input type="text" placeholder="手机号" v-model="params.mobile"/><i class="iconfont icon-phone"/></div></el-form-item><el-form-item class="input-prepend restyle no-radius" prop="code" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]"><div style="width: 100%;display: block;float: left;position: relative"><el-input type="text" placeholder="验证码" v-model="params.code"/><i class="iconfont icon-phone"/></div><div class="btn" style="position:absolute;right: 0;top: 6px;width: 40%;"><a href="javascript:" type="button" @click="getCodeFun()" :value="codeTest" style="border: none;background-color: none">{{codeTest}}</a></div></el-form-item><el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"><div><el-input type="password" placeholder="设置密码" v-model="params.password"/><i class="iconfont icon-password"/></div></el-form-item><div class="btn"><input type="button" class="sign-up-button" value="注册" @click="submitRegister()"></div><p class="sign-up-msg">点击 “注册” 即表示您同意并愿意遵守简书<br><a target="_blank" href="/p/c44d171298ce">用户协议</a>和<a target="_blank" href="/p/2ov8x3">隐私政策</a> 。</p></el-form><!-- 更多注册方式 --><div class="more-sign"><h6>社交帐号直接注册</h6><ul><li><a id="weixin" class="weixin" target="_blank" href="http://huaan./api/ucenter/wx/login"><iclass="iconfont icon-weixin"/></a></li><li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li></ul></div></div></div></template><script>import '~/assets/css/sign.css'import '~/assets/css/iconfont.css'import registerApi from '@/api/register'export default {layout: 'sign',data() {return {params: {//封装注册输入数据mobile: '',code: '', //验证码nickname: '',password: ''},sending: true,//是否发送验证码second: 60, //倒计时间codeTest: '获取验证码'}},methods: {//注册提交的方法submitRegister() {registerApi.registerMember(this.params).then(response => {//提示注册成功this.$message({type: 'success',message: "注册成功"})//跳转登录页面this.$router.push({path:'/login'})})},//验证码倒计时timeDown() {let result = setInterval(() => {--this.second;this.codeTest = this.secondif (this.second < 1) {clearInterval(result);this.sending = true;//this.disabled = false;this.second = 60;this.codeTest = "获取验证码"}}, 1000);},//通过输入手机号发送验证码getCodeFun() {registerApi.sendCode(this.params.mobile).then(response => {this.sending = false//调用倒计时的方法this.timeDown()})},checkPhone (rule, value, callback) {//debuggerif (!(/^1[34578]\d{9}$/.test(value))) {return callback(new Error('手机号码格式不正确'))}return callback()}}}</script>
登录页面
<template><div class="main"><div class="title"><a class="active" href="/login">登录</a><span>·</span><a href="/register">注册</a></div><div class="sign-up-container"><el-form ref="userForm" :model="user"><el-form-item class="input-prepend restyle" prop="mobile" :rules="[{ required: true, message: '请输入手机号码', trigger: 'blur' },{validator: checkPhone, trigger: 'blur'}]"><div ><el-input type="text" placeholder="手机号" v-model="user.mobile"/><i class="iconfont icon-phone" /></div></el-form-item><el-form-item class="input-prepend" prop="password" :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"><div><el-input type="password" placeholder="密码" v-model="user.password"/><i class="iconfont icon-password"/></div></el-form-item><div class="btn"><input type="button" class="sign-in-button" value="登录" @click="submitLogin()"></div></el-form><!-- 更多登录方式 --><div class="more-sign"><h6>社交帐号登录</h6><ul><li><a id="weixin" class="weixin" target="_blank" href="http://qy./api/ucenter/weixinLogin/login"><i class="iconfont icon-weixin"/></a></li><li><a id="qq" class="qq" target="_blank" href="#"><i class="iconfont icon-qq"/></a></li></ul></div></div></div></template><script>import '~/assets/css/sign.css'import '~/assets/css/iconfont.css'import cookie from 'js-cookie'import loginApi from '@/api/login'export default {layout: 'sign',data () {return {//封装登录手机号和密码对象user:{mobile:'',password:''},//用户信息loginInfo:{}}},methods: {//登录的方法submitLogin() {//第一步 调用接口进行登录，返回token字符串loginApi.submitLoginUser(this.user) .then(response => {//第二步 获取token字符串放到cookie里面//第一个参数cookie名称，第二个参数值，第三个参数作用范围cookie.set('guli_token',response.data.data.token,{domain: 'localhost'})//第四步 调用接口 根据token获取用户信息，为了首页面显示loginApi.getLoginUserInfo().then(response => {this.loginInfo = response.data.data.userInfo//获取返回用户信息，放到cookie里面cookie.set('guli_ucenter',this.loginInfo,{domain: 'localhost'})//跳转页面window.location.href = "/";})})},checkPhone (rule, value, callback) {//debuggerif (!(/^1[34578]\d{9}$/.test(value))) {return callback(new Error('手机号码格式不正确'))}return callback()}}}</script><style>.el-form-item__error{z-index: 9999999;}</style>
效果
登录注册css样式下载地址
vue后端模板资料
欢迎关注公众号Java技术大联盟，会不定期分享BAT面试资料等福利。
如果觉得《vue后端模板 vue登录界面 注册界面(带短信验证码)模板》对你有帮助，请点赞、收藏，并留下你的观点哦！
