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"><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.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) {//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登录界面、注册界面(带短信验证码)模板相关推荐

java antd实现登录,基于 antd pro 的短信验证码登录
概要整体流程前端页面代码请求验证码和登录的 service (src/services/login.js) 处理登录的 model (src/models/login.js) 后端短信验证码 ...
手机注册（发送短信验证码）
手机注册(发送短信验证码) 去阿里开通短信服务,accesskey号然后创建签名复制粘贴代码就可使用,根据指导修改就ok 如有报错不能使用还请大家谅解.(没有经过作者同意,禁止修改代码,盗用(利 ...
注册之获取短信验证码
注册之获取短信验证码功能:短信发送,邮件发送所用技术:Redis,Mq,Java mail ,HttpClient,阿里大鱼一般在我们点击发送验证码的时候会有一下这三点 1:在HTML页面中我们 ...
魔方APP项目-06-用户注册，完成短信验证码的校验、基于Celery实现短信异步发送、用户登录，jwt登陆认证、服务端提供用户登录的API接口
一.用户注册- 1.完成短信验证码的校验 application.utils.language.message,代码: class ErrorMessage():ok = "ok" ...
java云片模板参数_Java使用云片API发送短信验证码的代码详解
这篇文章主要介绍了Java使用云片API发送短信验证码,主要用的是Java实现短信验证码.需要的朋友可以参考下下面开始介绍的是如何利用机器完成批量操作,将短信业务自动化. 获取APIKEY 云片网提 ...
java云片模板参数_Java使用云片API发送短信验证码
下面开始介绍的是如何利用机器完成批量操作,将短信业务自动化. 获取apikey 云片网提供了完整的sdk和api,可以帮助开发者快速完成业务开发. 在开始coding前,需要先获取apikey,如下所 ...
locvps的自动注册(图形和短信验证码的自动识别获取)
1.通过selenuim实现自动注册 2.图形验证码的识别(简单识别,效果差,可以多循环几次,或者通过二值化处理提高准确率) 3.短信验证码的获取(使用接码平台调用API) selenuim操作 dr ...
各大APP注册时发送短信验证码是怎么实现的？
回答这个问题可以从多个角度来回答,比如商务角度和技术角度,为了快速清晰的让广大的读者了解这个过程,本文我们从商务角度来深入分析. 实现原理现各大APP发送短信的服务一般是由第三方短信服务商提供的,他 ...
用VUE实现注册页（短信验证码登录）
2 一.实现效果图二.实现代码 1.实现头部 <template><div class= ...
阿里云短信验证码模板
注意: 使用前务必开通阿里云付费短信功能获取必要的key和签名模板!!!!!!工程依赖了2个jar包(存放在工程的libs目录下)1:aliyun-java-sdk-core.jar2:aliyun- ...

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

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

最新文章

热门文章