vue+element-ui搭建迷你电商平台系列篇（五）

这是我参与11月更文挑战的第20天，活动详情查看：2021最后一次更文挑战

接上一篇juejin.cn/post/703155…

上一篇我们讲到登录界面的设计完成，在界面完成之后，我们要实现真实的登录效果，需要向服务端发送一个登录请求，并且需要判断登录是否成功，如果登录成功则跳转到主页面，登录失败我们也要做对应的提示处理；

因为后端接口文档里写了用户名和密码都不可为空，所以我这里直接加了表单验证，为空时进行提示;并且为按钮绑定一个点击事件@click="handleSubmit('formData')"点击时触发

<template>
  <div class="login-wrap">
    <el-form :model="formData" status-icon :rules="rules" ref="formData" label-width="100px"
      label-position="top"
      class="ruleForm">
      <h2>账号登录</h2>
      <el-form-item label="用户名" prop="username">
        <el-input v-model="formData.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="formData.password" autocomplete="off"></el-input>
      </el-form-item>
      <el-button class="login-button" type="primary" @click="handleSubmit('formData')">登录</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    const validateUserName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        callback();
      }
    };
    return {
      formData: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {validator: validateUserName, trigger: 'blur'}
        ],
        password: [
          {validator: validatePassword, trigger: 'blur'}
        ]
      }
    }
  },
  </script>

<style scoped>
.login-warp {
  height: 100%;
  background-color: #324152;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-warp .rule-form {
  width: 400px;
  background-color: #fff;
  border-radius: 5px;
  padding: 30px;
}
.login-warp .login-button {
  width: 100%;
}
</style>

发送登录请求

上面我们已经进行表单输入框的判空，这个判空的效果是当输入框失去焦点时，框里没有内容，就进行提示对应的文案，我们这里就是“请输入用户名”这个；

下面就是在handleSubmit()里去进行请求接口的操作

axios插件引入

npm i axios 安装插件

在/src下面新建一个文件夹plugins,然后在下面新建http.js

import axios from "axios";

const MyHttpServer = {}

MyHttpServer.install = function (Vue) {
  Vue.prototype.$http = axios
}

export default MyHttpServer

这一步是将axios封装一下，给一个install方法，这样我们可以在全局用Vue.use()来用，保持代码统一；如果不想封装的话也可以直接在main.js里直接Vue.prototype.$http = axios也可以的;

完成以上封装，然后我们在main.js文件中，导入import MyHttpServer from "./plugins/http" 和使用Vue.use(MyHttpServer)

接下来就可以使用axios了。