快速上手：前后端分离开发（Vue+Element+Spring Boot+MyBatis+MySQL）

🎉欢迎来到架构设计专栏~探索Java中的静态变量与实例变量

---

• ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹
• ✨博客主页：IT·陈寒的博客
• 🎈该系列文章专栏：架构设计
• 📜其他专栏：Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习
• 🍹文章作者技术和水平有限，如果文中出现错误，希望大家能指正🙏
• 📜 欢迎大家关注！ ❤️

前言

随着互联网技术的迅速发展，前后端分离已经成为现代Web开发的主流模式。这种模式不仅提高了开发效率，还使得前端和后端各自独立，便于维护和升级。本文将详细介绍如何使用Vue、Element、Spring Boot、MyBatis和MySQL实现一个简单的前后端分离项目。通过本文的学习，你将能在20分钟内掌握这种开发模式的基本实现方法。

项目简介

我们的项目是一个简单的任务管理系统，包含以下功能：

• 用户注册和登录
• 任务的增删改查

项目结构如下：

• 前端：Vue.js + Element UI
• 后端：Spring Boot + MyBatis
• 数据库：MySQL

环境准备

在开始之前，请确保你已经安装了以下工具：

• Node.js（建议使用LTS版本）
• Vue CLI
• Java JDK 8或以上
• Maven
• MySQL

第一步：初始化前端项目

首先，我们使用Vue CLI初始化一个Vue项目。

vue create task-manager

选择默认配置后，进入项目目录并安装Element UI。

cd task-manager
vue add element

然后，创建一个简单的登录页面和任务管理页面。

登录页面

在src/views目录下创建Login.vue文件：

<template>
  <div class="login">
    <el-form :model="form" @submit.native.prevent="handleLogin">
      <el-form-item label="用户名">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleLogin">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      }
    };
  },
  methods: {
    handleLogin() {
      // 调用后端API进行登录验证
    }
  }
};
</script>

任务管理页面

在src/views目录下创建TaskManager.vue文件：

<template>
  <div class="task-manager">
    <el-table :data="tasks">
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="任务名"></el-table-column>
      <el-table-column prop="status" label="状态"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="editTask(scope.row)">编辑</el-button>
          <el-button @click="deleteTask(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button @click="createTask">创建任务</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: []
    };
  },
  methods: {
    fetchTasks() {
      // 调用后端API获取任务列表
    },
    createTask() {
      // 创建任务逻辑
    },
    editTask(task) {
      // 编辑任务逻辑
    },
    deleteTask(id) {
      // 删除任务逻辑
    }
  },
  mounted() {
    this.fetchTasks();
  }
};
</script>

第二步：初始化后端项目

使用Spring Initializr生成一个Spring Boot项目，选择以下依赖：

• Spring Web
• MyBatis
• MySQL Driver

将生成的项目导入你的IDE，并进行以下配置。

数据库配置

在application.properties文件中添加MySQL配置：

spring.datasource.url=jdbc:mysql://localhost:3306/task_manager?useSSL=false&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=root
mybatis.mapper-locations=classpath:mappers/*.xml

数据库表结构

在MySQL中创建一个数据库，并初始化表结构：

CREATE DATABASE task_manager;

USE task_manager;

CREATE TABLE user (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(100) NOT NULL
);

CREATE TABLE task (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    status VARCHAR(20) NOT NULL,
    user_id INT,
    FOREIGN KEY (user_id) REFERENCES user(id)
);

实体类和Mapper

创建实体类User和Task：

public class User {
   
   
    private Integer id;
    private String username;
    private String password;

    // getters and setters
}

public class Task {
   
   
    private Integer id;
    private String name;
    private String status;
    private Integer userId;