上一篇了解如何建立一個簡易的 CRUD API，再來可以將前後端結合，讓我們的 todo list 更完整

實作

增加 /tasks [GET] API

    def get(self):
        tasks = Task.select().where(Task.deleted_at == -1)
        task_list = [{
            'name': task.name,
            'isDone': task.finish_at != None
        } for task in tasks]

        return task_list

在前端增加 axios 套件幫助我們取得 API 結果

• package.json

{
	"dependencies": {
	    "axios": "^0.24.0"
	}
}

$ yarn install

新增 src/api/index.js 來設定 axios 連線資訊

• src/api/index.js

import Axios from 'axios';
import env from '@/config/env';

const axiosIns = Axios.create({
  baseURL: env.apiUrl,
});

export default axiosIns;

新增 env 資訊

• .env

VUE_APP_API_URL=http://localhost/api

• src/config/env.js

module.exports = {
	apiUrl: process.env.VUE_APP_API_URL,
};

改寫 Home.vue

<template>
  <div class="home">
    <el-form class="form">
      <div class="block" v-for="(idx, task) in tasks" :key="`task${idx}`">
        <AddingTask :taskContent="task.name" :isDone="task.isDone" />
      </div>
      <div class="block">
        <el-button type="success" @click="addingNewTask"> Adding new task </el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
// @ is an alias to /src
import taskAPI from '@/api/task';
import AddingTask from '@/components/AddingTask';

export default {
  name: 'Home',
  components: {
    AddingTask,
  },
  data() {
    return {
      taskNumber: 0,
      tasks: [],
    };
  },
  async created() {
    this.tasks = await this.getTasks();
  },
  methods: {
    addingNewTask() {
      this.taskNumber += 1;
    },
    async getTasks() {
      const res = await taskAPI.getTasks();
      const tasks = res.data.map((task) => ({
        taskName: task.name,
        isDone: task.isDone,
      }));
      console.log(tasks);
      return tasks;
    },
  },
};
</script>

<style scoped lang="scss">
.form {
  .block {
    margin: 10px;
    display: block;
  }
}
</style>