vue+Mint-ui实现登录注册
创建一个组件:注册组件
(register/index.vue、script.js、style.scss,register/header)
注册路由
router/index.js
{
path: '/register',
components: {
header: RegisterHeader,
content: Register
}
}
构建前端注册流程
写页面,确定需要的数据 index.vue----使用的是mint-ui的组件
<mt-field :state="phoneNumState" type="number" v-model="phoneNum" placeholder="请输入您的手机号"></mt-field>
<mt-field placeholder="验证码" type="number" v-model="code" :state="codeState">
<span @click.stop = "sendCode">{{ codeStr }}</span>
</mt-field>
<mt-field :state="passwordState" type="password" v-model="password" placeholder="密码:不能少于6位"></mt-field>
<div class="registerBtn" @click = "register">注 册</div>
监听数据的变化,验证其有效性----使用watch进行正则验证
watch: {
phoneNum (newVal, oldVal) {
if (tools.isPoneAvailable(newVal)) {
this.phoneNumState = 'success'
} else {
this.phoneNumState = 'error'
}
if (newVal == '') { // 如果输入为空,取消状态显示
this.phoneNumState = ''
}
},
password (newVal, oldVal) {
if (newVal.length >= 6) {
this.passwordState = 'success'
} else {
this.passwordState = 'error'
}
if (newVal == '') { // 如果输入为空,取消状态显示
this.passwordState = ''
}
},
code (newVal, oldVal) {
if (newVal.length == 4 && newVal == this.admincode) {
this.codeState = 'success'
} else {
this.codeState = 'error'
}
if (newVal == '') { // 如果输入为空,取消状态显示
this.codeState = ''
}
}
}
发送验证码--先验证其是不是已经注册过,注册过直接登录即可,未注册继续执行(倒计时验证)
sendCode () {
axios.get(tools.baseUrl + '/api/getPhoneCode?phoneNum=' + this.phoneNum)
.then((res) => {
console.log(res.data)
if (res.data.state == 0) {
this.phoneNumState = 'warning'
Toast('该手机号已经注册,请直接登录')
} else {
this.admincode = res.data.code
if (this.flag) {
this.startTime(20)
}
}
})
.catch((err) => {
console.log(err)
})
}
// (倒计时验证)
startTime (time) {
var timer = setInterval(() => {
time--
if (time == 0) {
this.flag = true
this.codeStr = '发送验证码'
clearInterval(timer)
} else {
this.codeStr = time + 's后重新发送'
this.flag = false // 防止用户连续点击
}
}, 1000)
},
点击注册按钮,先验证其余表单是不是都通过,如果通过,进行注册,未通过,提示信息----注意密码的加密
register () {
if (this.phoneNumState != 'success') {
Toast('请确保手机号是正确的')
return
}
if (this.codeState != 'success') {
Toast('请确保验证码的正确性')
return
}
if (this.passwordState != 'success') {
Toast('请确保密码是有效的')
return
}
// 对密码进行加密
this.password = md5(this.password)
// 提交数据
axios.post(tools.baseUrl + '/api/registerUserAction', {phoneNum: this.phoneNum,password: this.password})
.then((res) => {
if (res.data == 1) {
Toast('注册成功')
this.phoneNum = ''
this.code = ''
this.password = ''
} else {
Toast('注册失败')
}
})
},
登录
先写表单,标明状态
验证输入的正确性-----watch+正则验证
点击登录,
(先以手机号查询数据库,判断该用户是不是已经注册过,然后检测手机号是不是和密码是匹配的)
数据库查询手机号和密码是否一致(有手机号,密码不对,没有手机号)
转载于:https://www.cnblogs.com/donve/p/11153702.html
vue+Mint-ui实现登录注册相关推荐
- 闲云旅游网03(基于vue+element ui)登录注册功能开发
登录功能 项目GitHub地址:https://github.com/q2419068625/xianyun 新建登录注册页的布局 新建了登录的表单 绑定了数据到data rules表单的验证 提交数 ...
- 上拉加载_如何用Vue + Mint UI实现上拉加载更多
引言: 上拉加载更多在移动端不论是在 app 里面还是在页面中都是必不可少的,以下是 mint-ui 中上拉加载更多的总结. 一.在项目中使用 mint-ui 需要先安装 查看官网 (1)安装:npm ...
- Vue + Element UI 实现 登陆注册基本demo实例
Vue + Element UI 实现权限管理系统 前端篇(二):Vue + Element 案例 导入项目 打开 Visual Studio Code,File --> add Folder ...
- node.js+vue.js+mysql实现登录注册的功能(前后端分离)
参考教程:github源码地址 Node.js+Mysql+Vue+ElementUI 实现登录注册注销功能 1 准备 1.1 MySQL数据库 参考教程:NodeJS连接MySql.易百教程.菜鸟教 ...
- vue+node+mysql实现登录注册功能
1.创建目录 2.安装需要用到的axios,mysql, express, body-parser npm install axios mysql express body-parser --save ...
- 登录页面html引入vue,用vue写简单的登录注册总结
步骤一 1.安装脚手架:npm install vue-cli -g 2.wepack生成html模版:vue init webpack ' 文件名' 3.安装axios.js-cookie.elem ...
- mint ui tab html,Vue Mint UI tabbar切换
1.引入mint-ui 1).使用 vue-cli npm install -g vue-cli vue init webpack projectname 2). 部分引入 在main.js中写入: ...
- Vue电商项目-登录注册仿掘金可爱萌猫
- antd vue关闭模态对话框_Vue.extend 登录注册模态框
模态框是我们 UI 控件中一个很重要的组件,使用场景有很多种,我们在 Vue 组件中创建模态框组件而用到的一个知识点是利用 Vue.extend 来创建.文档中的解释是 在最近在做一个常用的类似下面 ...
- vue 数据库 登录界面_Vue学习之路之登录注册
杭州数澜科技招聘Node.js工程师[可实习].UE/UI设计师[实习].前端React工程师[实习],联系方式可见评论区 Vue.js + Element UI + MongoDB P1 安装Vue ...
最新文章
- c++ int转unsigned int_mysql中int、bigint、smallint 和 tinyint的区别详细介绍
- 用户运营平台产品设计指南
- 右下角android sdk content loader 加载很慢的解决方法
- windows下安装Python-Whl文件
- mysql 循环创建列_mysql – 查询列中的循环值
- 数据结构-栈1-顺序存储
- 将python程序打包为exe及一些问题
- zabbix 的安装
- AIDA64 Business Edition 5.97.4600 多语言绿色版
- 差分编码解析以及FPGA实现
- 【云和恩墨大讲堂】视频课程震撼来袭-SQL优化精选案例
- Latex罗马数字(一)
- html人物属性代码,辐射4初始人物超强属性代码一览
- python程序红绿灯识别_使用python创建红绿灯
- 谷歌浏览器离线下载地址
- Ubuntu20.04修改root用户密码
- 关于星环TDH产品的Java通过Kerberos安全认证连接hyperbase
- Visual Studio的下载与安装
- oh-my-zsh国内镜像安装和更新方法
- jquery $(document).ready()与window.onload的区别
热门文章
- LeetCode精讲题 10正则表达式匹配(动态规划)
- Spring 创建对象的问题,不同构造方法创建对象,使用工厂类类获取对象、单例或多例、延迟创建问题
- Python命令行选项参数解析策略
- LinkedList插入元素一定比ArrayList快吗
- Android笔记:LitePal库的更新,DataSupport被弃用问题
- Kubernetes 会不会“杀死” DevOps?
- matlab用lism求零输入响应,信号与系统matlab课后作业_北京交通大学讲解.docx
- 浙大通讯与计算机网络离线作业,浙大2015年 通信与计算机网络离线作业
- 类的初始化列表_探索未知种族之osg类生物---渲染遍历之draw函数二
- pdf裁边app_PDF切边软件|PDF切边工具Briss下载 v1.0 中文免费版 - 比克尔下载