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

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

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

本篇主要是讲一下登录接口的调用方法。

• 登录接口调用

  直接贴methods代码

    methods: {
      handleSubmit(ruleForm) {
        this.$refs[ruleForm].validate((valid) => {
          if (valid) {
            this.$http.post('http://127.0.0.1:8888/api/private/v1/login', this.formData).then(res => {
                //保存token
                const {data, meta} = res.data
              if (meta.status ===200) {
                localStorage.setItem('token', data.token)
                this.$router.push({name: 'HomePage'})
                this.$message.success(meta.message)
              } else {
                this.$message.error(meta.message)
              }
            })
          } else {
            console.log('输入不合法');
            return false;
          }
        });
      }
    }
  }
  

  我们在methods里完成了handleSubmit()这个方法；上面的登录按钮绑定了这个方法，也就是说当我们点击登录时候，就会走到这个方法里；

  在方法里我们先是判断了输入框内容，是否是空的，如果是空的我们不会去调用后端接口，只会打印一个log日志，如果输入框有内容，我们会调用/login这个接口，并且把formData也就是表单里的数据提交过去，然后使用res来接收后端的返回内容

  const {data, meta} = res.data这个是es6的新特性解构赋值;我贴一下res.data的内容:

  {
      "data": {
          "id": 500,
          "rid": 0,
          "username": "admin",
          "mobile": "123",
          "email": "123@qq.com",
          "token": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE1MTI1NDQyOTksImV4cCI6MTUxMjYzMDY5OX0.eGrsrvwHm-tPsO9r_pxHIQ5i5L1kX9RX444uwnRGaIM"
      },
      "meta": {
          "msg": "登录成功",
          "status": 200
      }
  }
  

  所以这个const {data, meta} = res.data其实就是把res.data里的data对象和meta对象分别赋值给data,meta；后面我们就可以直接使用if (meta.status ===200)来判断登录是否成功。登录成功我们把token存在本地，然后跳转到home页，同时给一个message的消息框把登录成功的msg返回到浏览器；

• 设置baseURL

  我们每次发送请求都必须要有完成的域名+接口路径，但实际上我们项目访问的域名其实一直是不变的，变的只是对应的接口路径，所以我们需要在axios里设置一个统一的baseURL；这样每次调用接口时就不需要写域名了

  在之前的http.js文件里添加一行代码axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1';

  此时的http.js文件内容

  import axios from "axios";
  ​
  const MyHttpServer = {}
  ​
  MyHttpServer.install = function (Vue) {
    axios.defaults.baseURL = 'http://120.26.8.13:8888/api/private/v1'
    Vue.prototype.$http = axios
  }
  ​
  export default MyHttpServer
  

  然后对应上面的登录接口我们要把域名去掉this.$http.post('http://127.0.0.1:8888/api/private/v1/login', this.formData)改成this.$http.post('/login', this.formData)

  下篇开始是讲主页组件的开发，敬请期待。