vue后端模板、vue登录界面、注册界面(带短信验证码)模板

注册页面

<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="http://www.jianshu.com/p/c44d171298ce">用户协议</a>
和
<a target="_blank" href="http://www.jianshu.com/p/2ov8x3">隐私政策</a> 。
</p>
</el-form>
<!-- 更多注册方式 -->
<div class="more-sign">
<h6>社交帐号直接注册</h6>
<ul>
<li><a id="weixin" class="weixin" target="_blank" href="http://huaan.free.idcfengye.com/api/ucenter/wx/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 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.second
if (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) {
//debugger
if (!(/^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.free.idcfengye.com/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) {
//debugger
if (!(/^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面试资料等福利。

---