$axios从后台获取数据

appvue主组件

<template>
  <div id="app">
    <div v-if="loginFlag">
      <p>姓名: <input type="text" v-model="username" /></p>
      <p>密码: <input type="password" v-model="password" /></p>
      <button @click="login">登录</button>
    </div>

    <div id="homePage" v-if="!loginFlag">
      <h1>用户名{{username1}}</h1>
      <button @click="loginOut">退出登录</button>
      <table border="1">
        <tr>
          <th>创建时间</th>
          <th>更新时间</th>
          <th>商品价格</th>
        </tr>
        <tr v-for="(item, i) in orderList" :key="i">
          <td>{{ item.create_time }}</td>
          <td>{{ item.update_time }}</td>
          <td>{{ item.order_price }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {},
  data() {
    return {
      username: "",
      password: "",
      loginFlag: true,
      pagenum: 1, // 当前是第一页
      pagesize: 5, // 一页显示几条
      orderList: [],
    };
  },
  computed: {
    username1() {
      return localStorage.username;
    },
  },
  methods: {
    login() {
      if (this.username.trim() == "" || this.password.trim() == "") {
        alert("用户名或密码不能为空");
        return;
      }
      // 使用post请求 全局配置 要是用get请求
      this.$axios
        .post("login", {
          username: this.username,
          password: this.password,
        })
        .then((res) => {
          console.log(res);
          // 判断登录是否成功，status为200表示登录成功
          if (res.meta && res.meta.status == "200") {
            alert(res.meta.msg);
            // 用户信息token存储在本地缓存
            localStorage.token = res.data.token;
            // 用户名存储在本地缓存
            localStorage.username = res.data.username;
            setTimeout(() => {
              // 关闭登录页
              this.loginFlag = false;
              this.getOrder();
            }, 800);
          }
        })
        .catch((error) => {
          console.log(error);
          alert("接口异常");
        });
    },
    getOrder() {
      // 使用全面配置的时候，如果是get请求，参数需要使用params传递
      this.$axios({
        method: "get",
        url: "orders",
        headers: {
          // 登录才能获取token令牌
          Authorization: localStorage.token,
        },
        params: {
          pagenum: this.pagenum,
          pagesize: this.pagesize,
        },
      }).then((res) => {
        console.log(res);
        if (res.meta && res.meta.status == "200") {
          alert(res.meta.msg);
          this.orderList = res.data.goods;
        }
      });
    },
    loginOut() {
      localStorage.removeItem("token");
      localStorage.removeItem("username");
      setTimeout(() => {
        this.loginFlag = true;
      }, 500);
    },
  },
};
</script>

main.js文件配置

import Vue from 'vue'
import App from './App.vue'
import axios from 'axios'
Vue.config.productionTip = false

var instance = axios.create({
    baseURL: 'http://timemeetyou.com:8889/api/private/v1/',
    timeout: 1000,
    //headers: { 'Authorization': 'token123' }
});

instance.interceptors.response.use(function(response) {
    // 对响应数据做点什么
    return response.data;
}, function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

Vue.prototype.$axios = instance;

new Vue({
    render: h => h(App),
}).$mount('#app')