Day17 - 上架後台的商品列表页，今天只铺了 template

<template>
  <table class="table">
    <thead>
      <tr>
        <th scope="col">排序</th>
        <th scope="col">类别</th>
        <th scope="col">商品名称</th>
        <th scope="col">原价</th>
        <th scope="col">售价</th>
        <th scope="col">公开上架</th>
        <th scope="col">编辑</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(product, i) in productsList" :key="product.id">
        <th scope="row">{{ i }}</th>
        <td>{{ product.category }}</td>
        <td>{{ product.origin_price }}</td>
        <td>{{ product.title }}</td>
        <td>{{ product.price }}</td>
        <td>{{ product.enabled }}</td>
        <td>
          <button type="button" class="btn btn-primary me-2">编辑</button>
          <button type="button" class="btn btn-outline-danger">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import axios from "axios";
export default {
  name: "productsManageTable",
  data() {
    return {
      token: "",
      uuid: "---",
      productsList: [],
    };
  },
  methods: {
    // 从资料库取得产品列表
    getProductList() {
      const api = `---`;
      // 先从浏览器 cookie 取得 token
      this.token = document.cookie.replace(
        /(?:(?:^|.*;\s*)loginToken\s*=\s*([^;]*).*$)|^.*$/,
        "$1"
      );

      // https://github.com/axios/axios#global-axios-defaults
      // 并且 header 按照後端 api 文件的规格要求填上 Bearer token 字样
      axios.defaults.headers.common.Authorization = `Bearer ${this.token}`;
      axios
        .get(api)
        .then((res) => {
          console.log(res);
          this.productsList = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  
  // 当元件被建立好，就先取得产品列表
  created() {
    this.getProductList();
  },
};
</script>

上述内容有出入的话，希望大大们能在提点提点 (っಠ‿ಠ)っ