el vue 手机号_Vue+element-ui+axios实现登录注册接口(一)
1、首先保证你的后台、数据库都已经准备完毕
如果是vue前后端分离的项目,就可以让负责后台的小伙伴直接帮你部署好一个jar包,就像下面这张图这样,记住它的地址。
当然不要忘记数据库,向负责后台的小伙伴要来sql命令行,插入到自己的数据库软件里,我用的是Navicat Premium,不要忘记数据库的名字要一致。这里给大家看下我的登录页面的用户名和密码数据库。
后台运行起来了,也有了数据库,接下来就可以开始用postman测试,在这之前记得让后台伙伴发给你一个接口文档,类似于这样:
举个例子,比如以用户名14725836912测试能否返回登录成功,就根据接口文档输入下相关信息就可以,message为success就说明测试成功啦。
2、前端登录页面表单html
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" autocomplete="on" label-position="left">
<!-- 手机号 --><el-form-item prop="username"><span class="iconfont svg-container"></span><el-inputref="username"v-model="loginForm.username"placeholder="请输入手机号"name="username"type="text"tabindex="1"autocomplete="on"/></el-form-item>
<!-- 输入密码 --><el-form-item prop="password"><span class="iconfont svg-container"></span><el-input:key="passwordType"ref="password"v-model="loginForm.password":type="passwordType"placeholder="请输入密码"name="password"tabindex="2"autocomplete="on"@blur="capsTooltip = false"@keyup.enter.native="handleLogin"/><span class="el-icon-view show-pwd" @click="showPwd"></span></el-form-item><el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button><!-- 其他登录方式 --><div style="text-align:right; width:100%"><el-checkbox v-model="checked" style="float:left; text-align:left;">记住密码</el-checkbox><router-link to="/regist" style="color:#409EFF"> 注册新用户 </router-link></div></el-form>
这里主要是利用了v-model,绑定了用户名和密码,通过elementui的rule校验规则对用户名和密码的格式进行校验。
3、接着看下script
export default {data() {return {loginForm: {username: '14725836912',password: '123456789'},// 用户名和密码规则loginRules: {username: [{ required: true, trigger: 'change' },{min:11,max:11,message:'请输入11位手机号',trigger: 'blur'}],password: [{ required: true, trigger: 'change' },{min:6,max:10,message:'密码须为3-10个字符',trigger: 'blur'}]},passwordType: 'password',capsTooltip: false,loading: false,showDialog: false,redirect: undefined,otherQuery: {},checked: false}},mounted() {//如果输入框为空聚焦输入框if (this.loginForm.username === '') {this.$refs.username.focus()} else if (this.loginForm.password === '') {this.$refs.password.focus()};this.getCookie();},methods: {showPwd() {if (this.passwordType === 'password') {this.passwordType = ''} else {this.passwordType = 'password'}//点完显示密码后聚焦输入框this.$nextTick(() => {this.$refs.password.focus()})},//登录按钮handleLogin() {this.$axios({method: 'post',url: '/api/v1/login',headers: {'Content-Type': "application/json;charset=UTF-8"},data: {name: this.loginForm.username,password: this.loginForm.password}}).then(res=>{ //请求成功后执行函数if(res.data.message === 'SUCCESS'){this.$router.push('/') //登录验证成功路由实现跳转this.$notify({title: '提示',message: '用户登录成功',duration: 3000});}else{this.$notify({title: '提示',message: '用户登录失败',duration: 3000});}}).catch(err=>{ //请求错误后执行函数his.$notify({title: '提示',message: '用户访问错误',duration: 3000});console.log(err)})}}
}
</script>
这里我就主要讲方法啦,showPwd是那个显示密码的按钮,此处就不再赘述,主要要说的是登录按钮的功能。
4、登录按钮+axios获取后台数据
在使用axios记得先在main.js全局引用一下,同时在vue.config.js里配置一下后台地址,加入一个proxyTable就可以啦,比如我这个:
module.exports = {dev: {host: 'localhost', // can be overwritten by process.env.HOSTport: 8080, proxyTable: {'/api': {target:`http://localhost:8181`,changeOrigin: true,ws: true,// pathRewrite: {// '^/api': ''// }}}
changeOrigin: true和ws: true涉及跨域问题,此处不再赘述,由于我在main.js里设置了axios.defaults.baseURL='http://localhost:8181'
,所以pathRewrite就没有设置,小伙伴们也可以查阅下这个的用法,之后写后台地址的时候直接写8181后面的地址就可以了。
对于登录按钮handlelogin,我这里是以loginForm整体来提交给后台,所以要注意下data的格式,当然还有要注意下method和headers的内容。
你们可以看到我输入正确的用户名和密码点了登录之后呢message显示为success,这就表明确实有这么一个人,因此我们在写handlelogin这个方法的时候就可以以res.data.message === 'SUCCESS'
是否成立来判断可不可以登录成功。
下面这张图我们可以看到一个token值,这个token非常重要噢,我们下次再讲讲它怎么用。
5、结语
好了今天关于登录接口的分享就到这里,关于注册的代码我们下期再见。
el vue 手机号_Vue+element-ui+axios实现登录注册接口(一)相关推荐
- el vue 手机号_Vue实现数字输入框中分割手机号码实例教程
本文主要介绍了Vue实现数字输入框中分割手机号码的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 需求 在移动端弹出系统数字键盘,输入手机号码的时 ...
- el vue 手机号_Vue 正则表达式验证邮箱和手机号码
el-form绑定:rules="addFormRules": el-form-item绑定prop="name" 2.正则表达式验证邮箱和手机号码 expor ...
- 模糊搜索——Vue单页面-Element UI
模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...
- 基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册
基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册 前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs 官网下载地址:http ...
- npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...
- element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组
在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...
- vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应
本文章是我一个实习两个月的练习生,在项目中遇到的问题,在此记录,防治以后再踩坑!! Element ui 本身使用的Container 布局容器,组件采用 flex 布局.所以用了它的布局就可以做到宽 ...
- element走马灯自动_vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
- element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码
一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...
- Vue 篇 解决ELement UI 中表单验证(多层Object嵌套)
项目场景: 提示:主要是在 Vue 框架中: 用 Element UI 提供的规则进行表单验证 问题描述 因为我 data 里面嵌套了多层 Object, 所以 Element UI 提供的表单验证没 ...
最新文章
- wamp环境下安装imagick扩展
- 「分布式」艺术创作:20分钟+1080显卡,这个AI就能创造复杂作品 | 开源
- leetcode刷题 66 67
- 北风网09.接收普通消息2
- WPF 程序最大化,窗口,最小化
- 关于电脑自动获取和静态IP的问题
- 1185 城市名排序
- Leetcode算法题(C语言)17--验证回文字符串
- explain分析SQL查询
- 房子过户给子女哪种方式最合适?买卖?赠与?继承?不看就亏大了!
- 这些文章可以使知识融会贯通
- 福州大学 Problem 2169 shadow
- 国军标GJB150A霉菌试验详解
- 算法——Java实现栈
- 跳出坑爹的 Runtime Library 坑
- 小程序 40163_微信小程序请求openid错误码40163
- python统计元音字母_统计元音字母
- 定理在数学中的简写形式_初中数学定义、定理(大全)
- iOS m3u8本地缓存播放(控制下载并发、暂停恢复)
- 利用闲置笔记本电脑搭建linux服务器并布置自己的网站
热门文章
- 两台usrp实现收发_选购光纤收发器时应该注意哪些事项?
- python语言中print函数的作用_python3入门之print,import,input介绍
- mysql确定数据表中是否存在某字段_MySQL判断表是否存在某个列
- 华为ensp命令大全_计算机网络 实验六----eNSP基础解答
- SLAM--李群李代数左扰动模型
- 鸿蒙安卓生态已经非常完善,鸿蒙前进一小步,生态却完善一大步,解决了替换安卓的第一个问题...
- html和body高度不一致,即使html和body都是容器流体的高度不是100%
- 极客大学产品经理训练营 产品思维和产品意识(中) 第4课总结
- 算法:回溯七 Permutation Sequence数组全排列定位
- mock教程 java_自动生成 java 测试 mock 对象框架 DataFactory-01-入门使用教程