1、首先保证你的后台、数据库都已经准备完毕

如果是vue前后端分离的项目,就可以让负责后台的小伙伴直接帮你部署好一个jar包,就像下面这张图这样,记住它的地址。

记住地址后在自己的命令行窗口打开jar包所在目录,然后输入java -jar+jar包文件名,如下图,就可以把后台直接运行起来了,这样子前端就不用自己去idea下载jar包啦,省去一堆事,直接载一个postman测试一下地址就可以。

当然不要忘记数据库,向负责后台的小伙伴要来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实现登录注册接口(一)相关推荐

  1. el vue 手机号_Vue实现数字输入框中分割手机号码实例教程

    本文主要介绍了Vue实现数字输入框中分割手机号码的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧,希望能帮助到大家. 需求 在移动端弹出系统数字键盘,输入手机号码的时 ...

  2. el vue 手机号_Vue 正则表达式验证邮箱和手机号码

    el-form绑定:rules="addFormRules": el-form-item绑定prop="name" 2.正则表达式验证邮箱和手机号码 expor ...

  3. 模糊搜索——Vue单页面-Element UI

    模糊搜索--Vue单页面-Element UI <!DOCTYPE html> <html><head><meta charset="UTF-8&q ...

  4. 基于 Vue JS、Element UI、Nuxt JS的项目PC端前端手册

    基于 Vue JS.Element UI.Nuxt JS的项目PC端前端手册 前言:笔记写于2020年5月左右,刚开始做前端时整理的笔记 1.环境搭建 1.安装nodeJs ​ 官网下载地址:http ...

  5. npm创建Vue工程【element UI】

    npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...

  6. element vue 上传模板_Vue Element UI upload 组件上传文件之后 file list 依旧是空数组

    在 element ui 的 GitHub issue 中搜索了一下,发现 upload 组件确实不支持自动更新 file list,需要手动在上传成功和删除的回调中处理文件列表同步... 这个体验太 ...

  7. vue页面自适应屏幕宽高_Vue+Element UI 高度实时自适应

    本文章是我一个实习两个月的练习生,在项目中遇到的问题,在此记录,防治以后再踩坑!! Element ui 本身使用的Container 布局容器,组件采用 flex 布局.所以用了它的布局就可以做到宽 ...

  8. element走马灯自动_vue Element UI走马灯组件重写

    1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...

  9. element表格实现树形全选_vue+element UI实现树形表格带复选框的示例代码

    一:在component文件夹下新建如下treeTable文件夹,里面有2个文件: eval.js:将数据转换成树形数据 /** * @Author: jianglei * @Date: 2017-1 ...

  10. Vue 篇 解决ELement UI 中表单验证(多层Object嵌套)

    项目场景: 提示:主要是在 Vue 框架中: 用 Element UI 提供的规则进行表单验证 问题描述 因为我 data 里面嵌套了多层 Object, 所以 Element UI 提供的表单验证没 ...

最新文章

  1. wamp环境下安装imagick扩展
  2. 「分布式」艺术创作:20分钟+1080显卡,这个AI就能创造复杂作品 | 开源
  3. leetcode刷题 66 67
  4. 北风网09.接收普通消息2
  5. WPF 程序最大化,窗口,最小化
  6. 关于电脑自动获取和静态IP的问题
  7. 1185 城市名排序
  8. Leetcode算法题(C语言)17--验证回文字符串
  9. explain分析SQL查询
  10. 房子过户给子女哪种方式最合适?买卖?赠与?继承?不看就亏大了!
  11. 这些文章可以使知识融会贯通
  12. 福州大学 Problem 2169 shadow
  13. 国军标GJB150A霉菌试验详解
  14. 算法——Java实现栈
  15. 跳出坑爹的 Runtime Library 坑
  16. 小程序 40163_微信小程序请求openid错误码40163
  17. python统计元音字母_统计元音字母
  18. 定理在数学中的简写形式_初中数学定义、定理(大全)
  19. iOS m3u8本地缓存播放(控制下载并发、暂停恢复)
  20. 利用闲置笔记本电脑搭建linux服务器并布置自己的网站

热门文章

  1. 两台usrp实现收发_选购光纤收发器时应该注意哪些事项?
  2. python语言中print函数的作用_python3入门之print,import,input介绍
  3. mysql确定数据表中是否存在某字段_MySQL判断表是否存在某个列
  4. 华为ensp命令大全_计算机网络 实验六----eNSP基础解答
  5. SLAM--李群李代数左扰动模型
  6. 鸿蒙安卓生态已经非常完善,鸿蒙前进一小步,生态却完善一大步,解决了替换安卓的第一个问题...
  7. html和body高度不一致,即使html和body都是容器流体的高度不是100%
  8. 极客大学产品经理训练营 产品思维和产品意识(中) 第4课总结
  9. 算法:回溯七 Permutation Sequence数组全排列定位
  10. mock教程 java_自动生成 java 测试 mock 对象框架 DataFactory-01-入门使用教程