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

最新推荐文章于 2024-08-15 14:57:43 发布
最新推荐文章于 2024-08-15 14:57:43 发布
阅读量5.4k 收藏 71
点赞数 69
分类专栏： # SpringBoot框架学习 Web前端框架 微服务架构设计 文章标签： vue.js spring boot mybatis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43546721/article/details/140267108
版权

文章目录


在这里插入图片描述

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

前言

随着互联网技术的迅速发展，前后端分离已经成为现代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;

    // getters and setters
}

创建Mapper接口和对应的XML映射文件：

public interface UserMapper {
    User findByUsername(String username);
    void insert(User user);
}

public interface TaskMapper {
    List<Task> findByUserId(Integer userId);
    void insert(Task task);
    void update(Task task);
    void delete(Integer id);
}

在resources/mappers目录下创建UserMapper.xml和TaskMapper.xml：

<!-- UserMapper.xml -->
<mapper namespace="com.example.demo.mapper.UserMapper">
    <select id="findByUsername" resultType="com.example.demo.entity.User">
        SELECT * FROM user WHERE username = #{username}
    </select>
    <insert id="insert">
        INSERT INTO user (username, password) VALUES (#{username}, #{password})
    </insert>
</mapper>

<!-- TaskMapper.xml -->
<mapper namespace="com.example.demo.mapper.TaskMapper">
    <select id="findByUserId" resultType="com.example.demo.entity.Task">
        SELECT * FROM task WHERE user_id = #{userId}
    </select>
    <insert id="insert">
        INSERT INTO task (name, status, user_id) VALUES (#{name}, #{status}, #{userId})
    </insert>
    <update id="update">
        UPDATE task SET name = #{name}, status = #{status} WHERE id = #{id}
    </update>
    <delete id="delete">
        DELETE FROM task WHERE id = #{id}
    </delete>
</mapper>
服务层和控制器

创建服务层和控制器，实现用户注册、登录和任务管理功能。

@Service
public class UserService {
    @Autowired
    private UserMapper userMapper;

    public User findByUsername(String username) {
        return userMapper.findByUsername(username);
    }

    public void register(User user) {
        userMapper.insert(user);
    }
}

@Service
public class TaskService {
    @Autowired
    private TaskMapper taskMapper;

    public List<Task> findByUserId(Integer userId) {
        return taskMapper.findByUserId(userId);
    }

    public void createTask(Task task) {
        taskMapper.insert(task);
    }

    public void updateTask(Task task) {
        taskMapper.update(task);
    }

    public void deleteTask(Integer id) {
        taskMapper.delete(id);
    }
}

@RestController
@RequestMapping("/api")
public class UserController {
    @Autowired
    private UserService userService;

    @PostMapping("/login")
    public ResponseEntity<?> login(@RequestBody User user) {
        User foundUser = userService.findByUsername(user.getUsername());
        if (foundUser != null && foundUser.getPassword().equals(user.getPassword())) {
            return ResponseEntity.ok(foundUser);
        }
        return ResponseEntity.status(HttpStatus.UNAUTHORIZED).body("Invalid credentials");
    }

    @PostMapping("/register")
    public ResponseEntity<?> register(@RequestBody User user) {
        userService.register(user);
        return ResponseEntity.ok("User registered successfully");
    }
}

@RestController
@RequestMapping("/api/tasks")
public class TaskController {
    @Autowired
    private TaskService taskService;

    @GetMapping("/{userId}")
    public ResponseEntity<?> getTasks(@PathVariable Integer userId) {
        return ResponseEntity.ok(taskService.findByUserId(userId));
    }

    @PostMapping
    public ResponseEntity<?> createTask(@RequestBody Task task) {
        taskService.createTask(task);
        return ResponseEntity.ok("Task created successfully");
    }

    @PutMapping
    public ResponseEntity<?> updateTask(@RequestBody Task task) {
        taskService.updateTask(task);
        return ResponseEntity.ok("Task updated successfully");
    }

    @DeleteMapping("/{id}")
    public ResponseEntity<?> deleteTask(@PathVariable Integer id) {
        taskService.deleteTask(id);
        return ResponseEntity.ok("Task deleted successfully");
    }
}

第三步：连接前后端

在前端项目中，配置Axios以便与后端API通信。在src/main.js中添加如下代码：

import axios from 'axios';

axios.defaults.baseURL = 'http://localhost:8080/api';
Vue.prototype.$http = axios;

然后，在登录页面和任务管理页面中调用后端API：

methods: {
    handleLogin()

 {
        this.$http.post('/login', this.form).then(response => {
            // 保存用户信息并跳转到任务管理页面
        }).catch(error => {
            console.error(error);
            alert('登录失败');
        });
    }
}

methods: {
    fetchTasks() {
        this.$http.get(`/tasks/${this.userId}`).then(response => {
            this.tasks = response.data;
        }).catch(error => {
            console.error(error);
            alert('获取任务列表失败');
        });
    },
    createTask() {
        this.$http.post('/tasks', { name: '新任务', status: '未完成', userId: this.userId }).then(response => {
            this.fetchTasks();
        }).catch(error => {
            console.error(error);
            alert('创建任务失败');
        });
    },
    editTask(task) {
        // 编辑任务逻辑
    },
    deleteTask(id) {
        this.$http.delete(`/tasks/${id}`).then(response => {
            this.fetchTasks();
        }).catch(error => {
            console.error(error);
            alert('删除任务失败');
        });
    }
}

总结

通过本文的介绍，我们快速搭建了一个基于Vue、Element、Spring Boot、MyBatis和MySQL的前后端分离项目。我们实现了用户注册、登录和任务管理的基本功能，展示了如何使用这些技术进行高效的Web开发。希望本文能对你有所帮助，欢迎在实际项目中灵活运用这些技术。

🧸结尾 ❤️ 感谢您的支持和鼓励！ 😊🙏
📜您可能感兴趣的内容：

在这里插入图片描述

IT·陈寒
关注
专栏目录
前后端分离管理系统前端框架
07-12
前后端分离管理系统前端框架....
springboot+shrio+mybatis plus+redis 前后端分离
最新发布
10-29
springboot+shrio+mybatis plus+redis前后端分离项目
创建一个简单的spring boot+vue前后端分离项目
Sunny的博客
08-15 2315
创建一个简单的spring boot+vue前后端分离项目
SpringBoot+MyBatisPlus+Vue+ElementUI实现前后端分离的物业管理系统
程序员小王的博客
06-15 6932
我想设计一套当前潮流的前后端分离项目，前台主要使用ｖue作为开发语言，饿了么公司的ElementUI框架作为前端框架，后台使用MySQL作为数据库管理系统，SpringBoot＋MyBatisPlus作为后端框架，设计开发了小区物业管理系统......
Nodejs的使用
z2331198564653的博客
08-01 1307
比如：下面这个页面，可以把所有的代码都写在一个页面中，但是这样显得代码比较混乱，难易维。组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构。前端有自己独立的工程。单页面应用程序，之所以开发效率高，性能好，用户体验好。组件的数据是独立的，无法直接访问其他组件的数据。帮你创建前端项目工程。整个应用最上层的组件，包裹所有普通小组件。在使用的组件内先导入再注册，最后使用。想使用其他组件的数据，就需要组件通信。就是路径和组件建立关联关系的过程。前端也需要一个管理组件的软件。组件分类：普通组件、根组件。
酒店管理平台（element+vuejs+springboot+mybatis）
03-27
酒店管理平台（element+vuejs+springboot+mybatis项目），code目录中是前后端代码，另外一个是部署文件，包含脚本，登录时用户名和密码随意
java开发入门及项目实战_全栈项目开发实战 ：Spring Boot + MyBatis + Vue + Element
weixin_39925098的博客
11-26 363
2013 年的时候，我们班同学们一行 8 个人，拉着行李箱，从学校来到北京，开始了漫长的北漂生活。我们学的是计算机技术与应用专业，找工作的方向就是 DBA、前端开发工程师、Java 开发工程师之类的。最开始的两年，工资不是很高，大家就住在回龙观整租的一套三居室里。慢慢的，收入也高了点，大多数人也有了对象，就各自分开租房了。原本以为，随着各自工作的发展，我们之间的联系会变少，没想到，近几年...
前后端分离
纸鸢栀年°的博客
08-31 1459
1，前后端分离 1.1 什么是前后端分离 ​ 前端： 即客户端，负责渲染用户显示界面【如web的js动态渲染页面, 安卓， IOS，pc客户端等】 ​ 后端：即服务器端，负责接收http请求，处理数据 ​ API：Application Programming Interface 是一些预先定义的函数，或指软件系统不同组成部分衔接的约定 ​ 前后端分离 完整请求过程 ​ 1，前端通过h...
前后端分离怎么实现？
Gzlcxxjs的博客
08-26 4844
前后端分离，相信这是很多人都听到的一个词，那么，前后端分离怎么实现？大家理解的前后端分离指的又是什么？
如何实现前后端分离？
Gzlcxxjs的博客
06-30 3907
如何实现前后端分离。针对这个问题，今天就一起来畅聊一番。
MeetingRoom:基于Vue + Spring Boot开发的会议室管理系统
03-11
Vue.js以其组件化开发、虚拟DOM以及易于学习的API赢得了开发者们的青睐，而Spring Boot则以其快速启动、一键配置和自动配置的功能简化了Java应用程序的部署流程。两者结合，为会议管理系统提供了高性能和可扩展性。 ...
springboot + vue + element ui + mysql 的一个商品后端管理系统
06-10
这是一个基于SpringBoot、Vue.js、Element UI和MySQL数据库构建的商品后台管理系统项目，主要涵盖了后端开发和前端开发两大部分。让我们深入探讨一下这个系统中涉及的技术栈和关键知识点。 首先，SpringBoot是Java...
Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之一vue和spring boot整合
Just Do It!
12-21 4312
1 为什么是vue+spring boot技术选型核心框架：Spring Boot 1.5安全框架：Apache Shiro 1.3视图框架：Spring MVC 4.3持久层框架：MyBatis 3.3定时器：Quartz 2.3数据库连接池：Druid 1.0日志管理：SLF4J 1.7、Log4j页面交互：Vue2.x为什么是MVVM那么在我继续之前，我也想和大家回顾一下Web开发的发展简史...
高校就业管理系统：Springboot+Vue+Mybatis+MySQL实现
它结合了Spring Boot作为后端框架、MyBatis作为持久层框架、MySQL作为数据库管理系统以及Element-Vue作为前端框架，形成了一个功能完备、界面友好的高校就业管理平台。该系统利用Vue.js的灵活性和响应式设计，提升了...
基于Spring Boot + Vue 前后端分离个人博客网站设计
Lv Zejiang
06-17 9495
个人博客网站摘要一、绪论1.1 课题背景、目的、意义1.2 国内外研究现状1.3 技术介绍1.3.1 Spring Boot1.3.2 MyBatisPlus1.3.3 Shiro1.3.4 Redis1.3.5 Jwt1.3.6 Vue1.3.7 Element-ui1.3.8 Axios1.3.9 前后端分离二、可行性分析2.1 技术可行性分析2.2 时间和资源可行性三、需求分析3.1 用户分析3.2 功能需求分析3.3 流程分析四、结构设计4.1 实体e-r图4.2 数据库设计五、详细设计六、系统测试
基于SpringBoot+Vue+ElementUI+Mybatis前后端分离管理系统超详细教程（一）
weixin_46662581的博客
03-04 3199
​
SpringBoot + MyBaits+ Vue + ElementUi简单的数据流传递(从0开始搭建)
muziiiii的博客
05-04 1985
SpringBoot + MyBaits+ Vue + ElementUi简单的数据流传递(从0开始搭建)
Vue+elementUI+springboot+mybatis demo教程（一）
Troub_cy的博客
08-21 292
最近在学习Vue.js ，做了一个简单的demo,实现增删改查功能，简单的图片上传，树形菜单使用，大概效果如下 写这篇博客主要是为了记录demo 实现过程，以及用到的知识，大概会分几个部分来写，包括环境准备，前台项目搭建，后台项目搭建，以及一些工具的使用等，今天就写到这里，接下来的内容，我会尽快更新 前台demo：https://github.com/lna001/VueDemo-elementUI 后台demo：https://github.com/lna001/VueDemo ...
评论 28
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT·陈寒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值