Vue+element-ui+axios实现登录注册接口(一)

Vue+element-ui+axios实现登录注册接口

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">
          &#xe632;
        </span>
        <el-input
          ref="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">
            &#xe663;
          </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.HOST
    port: 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、结语

好了今天关于登录接口的分享就到这里，关于注册的代码我们下期再见。

本篇文章如有错的地方，欢迎在评论指正。喜欢在微信看技术文章，可以微信搜索「胡录乱影」，回复【Python】【前端基础】【vue开发】即可获得视频资源，回复【答辩PPT】【演讲PPT】即可获得超级实用PPT模板，还有更多资料，建议后台留言或者直接私信我。

另，如果觉得这本篇文章写得不错，有点东西的话，各位人才记得来个三连【点赞+关注+分享】。