Vue 和 Flask 前后端分离教程（二）To-Do List

基于 Flask + Vue + Bootstrap5 的 To-Do List 教程

本教程将指导您如何使用 Flask, Vue 3 和 Bootstrap 5 创建一个前后端分离的 To-Do List 应用程序。我们将首先搭建 Flask 后端，然后创建 Vue 前端并将其与 Flask 后端连接。

目录

1. 环境准备
2. Flask 后端
3. Vue 前端
4. Bootstrap 5 集成
5. 运行项目

1. 环境准备

1.1 安装 Node.js

1. 访问 Node.js 官方网站（https://nodejs.org/）下载并安装适合您操作系统的 Node.js。
2. 验证安装是否成功，运行以下命令：

node -v
npm -v

1.2 安装 Flask

使用 pip 安装 Flask:

pip install Flask

1.3 安装 Vue CLI

使用 npm 安装 Vue CLI:

npm install -g @vue/cli

2. Flask 后端

2.1 创建项目目录

创建一个新的文件夹，用于存放项目文件：

mkdir todo-app
cd todo-app

2.2 创建 Flask 应用

• 创建一个名为 backend 的文件夹，并进入：

mkdir backend
cd backend

• 创建一个名为 app.py 的文件，并添加以下代码：

from flask import Flask, jsonify, request
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

tasks = []

@app.route('/tasks', methods=['GET'])
def get_tasks():
    return jsonify(tasks)

@app.route('/tasks', methods=['POST'])
def add_task():
    task = request.get_json()
    tasks.append(task)
    return jsonify(task), 201

@app.route('/tasks/<int:task_id>', methods=['DELETE'])
def delete_task(task_id):
    if 0 <= task_id < len(tasks):
        task = tasks.pop(task_id)
        return jsonify(task), 200
    else:
        return jsonify({'error': 'Not Found'}), 404

if __name__ == '__main__':
    app.run(debug=True)

• 在 backend 文件夹下创建一个名为 requirements.txt 的文件，并添加以下内容：

Flask
flask-cors

• 安装后端所需的依赖：

pip install -r requirements.txt

3. Vue 前端

3.1 创建 Vue 项目

• 返回到 todo-app 目录，并使用 Vue CLI 创建一个名为 frontend 的 Vue 项目：

cd ..
vue create frontend

• 选择 “Manually select features”，然后选择 “Router” 和 “CSS Pre-processors”。其余选项可以保持默认。

3.2 安装依赖

进入 frontend 目录，并安装以下依赖：

cd frontend
npm install axios bootstrap bootstrap-icons

3.3 配置 Vue 项目

• 在 src 文件夹下创建一个名为 services 的文件夹，并创建一个名为 TaskService.js 的文件，添加以下代码：

import axios from 'axios';

const API_URL = 'http://localhost:5000/tasks';

class TaskService {
  getTasks() {
    return axios.get(API_URL);
  }

  createTask(task) {
    return axios.post(API_URL, task);
  }

  deleteTask(id) {
    return axios.delete(`${API_URL}/${id}`);
  }
}

export default new TaskService();

• 在 src/components 文件夹下创建一个名为 TaskList.vue 的文件，添加以下代码：

<template>
    <div class="task-list">
      <div v-for="(task, index) in tasks" :key="index" class="task list-group-item d-flex align-items-center shadow-sm rounded mb-2">
        <input
          type="checkbox"
          class="form-check-input"
          :id="`task-${index}`"
          v-model="task.completed"
        />
        <label :for="`task-${index}`" class="form-check-label ms-2">{{ task.title }}</label>
        <button @click="deleteTask(index)" class="btn btn-outline-danger btn-sm ms-auto">删除</button>
      </div>
    </div>
  </template>
  
  
  
  <script>
  import TaskService from '@/services/TaskService';
  
  export default {
    name: 'TaskList',
    props: {
      tasks: Array
    },
    methods: {
      async deleteTask(index) {
        await TaskService.deleteTask(index);
        this.$emit('task-deleted', index);
      }
    }
  };
  </script>
  
  <style scoped>
.task {
  background-color: #f8f9fa;
  border: 1px solid rgba(0, 0, 0, 0.125);
  transition: all 0.2s ease-in-out;
}

.task:hover {
  background-color: #e9ecef;
  transform: scale(1.02);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
</style>

• 修改 src/App.vue 文件，添加以下代码：

<template>
  <div id="app">
    <header>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
          <span class="navbar-brand">To-Do List</span>
        </div>
      </nav>
    </header>

    <main class="container main-container">
      <div class="row">
        <div class="col-lg-8 mx-auto">
          <h2 class="mb-4 text-center text-primary">待办事项</h2>
          <div class="input-group mb-3 shadow-sm rounded">
            <input v-model="newTask" type="text" class="form-control rounded-start" placeholder="添加待办事项">
            <button @click="addTask" class="btn btn-warning" type="button">添加</button>
          </div>

          <TaskList :tasks="tasks" @task-deleted="deleteTask"></TaskList>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
import TaskList from '@/components/TaskList.vue';
import TaskService from '@/services/TaskService';

export default {
  name: 'App',
  components: {
    TaskList
  },
  data() {
    return {
      tasks: [],
      newTask: ''
    };
  },
  async created() {
    const response = await TaskService.getTasks();
    this.tasks = response.data;
  },
  methods: {
    async addTask() {
      if (this.newTask.trim()) {
        const task = {
          title: this.newTask,
          completed: false
        };
        const response = await TaskService.createTask(task);
        this.tasks.push(response.data);
        this.newTask = '';
      }
    },
    deleteTask(index) {
      this.tasks.splice(index, 1);
    }
  }
};
</script>

<style scoped>
.main-container {
  min-height: calc(100vh - 56px);
}

@media (min-width: 992px) {
  .main-container {
    display: flex;
    justify-content: center;
  }
}
</style>

4. Bootstrap 5 集成

• 在 src/main.js 文件中引入 Bootstrap 5 和 Bootstrap Icons：

import { createApp } from 'vue';
import App
from './App.vue';
import router from './router';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';

createApp(App).use(router).mount('#app');

文件中引入 Bootstrap 5 和 Bootstrap Icons：

import { createApp } from 'vue';
import App
from './App.vue';
import router from './router';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-icons/font/bootstrap-icons.css';

createApp(App).use(router).mount('#app');

最后效果如下，有点简陋：