超详细的前后端实战项目（Spring系列加上Vue3）前端篇（一）

在现代Web开发中，前后端分离架构越来越受到欢迎。这种架构将前端和后端代码分离，使得开发和维护变得更加高效。本篇文章将详细讲解一个基于Spring Boot作为后端和Vue3作为前端的实战项目，帮助大家有所理解和掌握。

项目介绍

本项目是一个简单的任务管理系统，能够实现的基本功能包括：添加任务、查看任务列表、删除任务、更新任务。接下来，我们将按照步骤一步步实现这个项目的前端部分。

环境准备

1. 前端: Vue3
2. 后端: Spring Boot
3. 其他依赖: Axios（用于发送HTTP请求）

第一步：初始化Vue3项目

首先，我们需要在本地创建一个Vue3项目。可以使用Vue CLI来快速初始化项目。

npm install -g @vue/cli
vue create task-manager

在创建过程中，选择Vue 3版本和默认配置。

第二步：安装必要的依赖

进入项目目录，安装axios库。

cd task-manager
npm install axios

第三步：创建项目结构

在src目录下，创建以下文件夹和文件：

src/
  ├─ components/
  │    ├─ TaskList.vue
  │    ├─ TaskForm.vue
  ├─ views/
  │    ├─ Home.vue
  ├─ App.vue
  ├─ main.js

第四步：构建组件

1. TaskList.vue

这个组件用于展示任务列表。

<template>
  <div>
    <h2>任务列表</h2>
    <ul>
      <li v-for="task in tasks" :key="task.id">
        {{ task.name }}
        <button @click="deleteTask(task.id)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      tasks: []
    };
  },
  mounted() {
    this.fetchTasks();
  },
  methods: {
    async fetchTasks() {
      const response = await axios.get('http://localhost:8080/tasks');
      this.tasks = response.data;
    },
    async deleteTask(id) {
      await axios.delete(`http://localhost:8080/tasks/${id}`);
      this.fetchTasks(); // 重新获取任务列表
    }
  }
};
</script>

2. TaskForm.vue

这个组件用于添加任务。

<template>
  <div>
    <h2>添加新任务</h2>
    <input v-model="taskName" placeholder="任务名称" />
    <button @click="addTask">添加任务</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      taskName: ''
    };
  },
  methods: {
    async addTask() {
      await axios.post('http://localhost:8080/tasks', {
        name: this.taskName
      });
      this.taskName = ''; // 清空输入框
    }
  }
};
</script>

3. Home.vue

用来组合TaskList和TaskForm组件。

<template>
  <div>
    <TaskForm />
    <TaskList />
  </div>
</template>

<script>
import TaskForm from '../components/TaskForm.vue';
import TaskList from '../components/TaskList.vue';

export default {
  components: {
    TaskForm,
    TaskList
  }
};
</script>

第五步：配置路由

在src/router/index.js文件中配置路由。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

第六步：启动项目

在项目的根目录下使用以下命令启动Vue项目：

npm run serve

现在，你的前端项目构建完成，可以进行测试与修改。至此，前端的基本功能实现了，接下来需要与后端进行联调，确保任务的增删改查功能完整。

结语

通过本文的讲解，我们搭建了一个基本的任务管理系统的前端部分，利用了Vue3的响应式特性和组件化思想，使得代码结构清晰明了。接下来可以尝试根据需求丰富功能，并进行样式美化，或是学习Vuex进行状态管理。在后续的文章中，我们将探讨如何实现后端部分，完成整个任务管理系统的功能。