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实现登录注册接口（一）》对你有帮助，请点赞、收藏，并留下你的观点哦！
