Vue+SpingBoot+MyBaits框架

fei_sun2026-03-15 9:23

Vue 拥有类似 HTML 的模板语法，语法简洁直观，开发者容易理解和上手

SpringBoot 是一款轻量级的快速开发框架，通过 "自动装配" 机制简化了绝大部分 Spring 框架的手动配置，仅需按需配置少量核心项（如端口号、数据库账号密码等）即可快速搭建项目；它内置了 Tomcat 等 Servlet 容器，无需将项目手动部署到外部服务器，可直接以 Jar 包形式独立启动运行；

MyBatis 可通过简洁的 XML 文件或注解配置，将 SQL 语句与 Java 对象（POJO）的映射关系绑定；在数据库操作时，只需调用对应的 Mapper 接口方法，即可自动关联 Java 对象与数据库操作，同时将数据库查询结果自动封装为 Java 对象（后端接收的前端数据需先转换为 Java 对象，再由 MyBatis 处理），大幅消除了繁琐的 JDBC 模板代码。

SMM是指Sping、SpingMVC、Mybaits，优势如下：

1.Sping的核心是IOC和AOP（IOC使得代码复用，可维护性提高；AOP提供切面编程，增加生成力）

  • IOC（Inversion of Control，控制反转）

以前，自己new对象，自己管对象的创建、依赖、销毁

现在，把对象交给Sping容器管，需要用的时候直接拿来就行

  • DI = Dependency Injection，依赖注入

Spring 自动把需要的对象塞给你，不用你自己去创建

  • AOP（Aspect Oriented Programming，面向切面编程）

在不修改原有业务代码的前提下，统一加功能

比如：日志、事务、权限校验、性能统计

  • IOC：管对象，让代码松耦合、好维护；AOP：管横切逻辑，加功能不改业务代码

2.Spring MVC 是 Spring Framework 核心生态的重要组成部分，它严格遵循 MVC 设计模式，分离了前端控制器（DispatcherServlet）、控制器（Controller）、模型（Model）、视图（View）等核心角色，这种清晰的职责分离让每个组件都可以独立定制和扩展，大幅提升了 Web 开发的灵活性

3.MyBatis 消除了几乎所有繁琐的 JDBC 模板代码，包括手动设置 SQL 参数、手动封装数据库结果集等操作；MyBatis 支持通过简洁的 XML 文件或注解来配置 SQL 语句及映射规则，能够将 Java 接口与普通 Java 对象（POJO，Plain Old Java Objects）高效映射为数据库中的记录

待补充

Vue + SpringBoot + MyBatis 是目前国内最主流的前后端分离开发技术栈

技术 定位 核心作用
Vue 前端（浏览器端） 展示页面、接收用户操作、向后端发送请求
SpringBoot 后端（服务器端） 接收前端请求、处理业务逻辑、调用 MyBatis
MyBatis 后端数据层 执行 SQL、完成数据库与 Java 对象的映射

以 "用户信息管理" 为例（查询 / 新增用户）

步骤 1：后端（SpringBoot + MyBatis）搭建

1.1 创建 SpringBoot 项目（推荐使用 IDEA）

选择依赖：Spring Web + MyBatis Framework + MySQL Driver

项目结构（核心目录）：

复制代码 
src/main/java/com/example/demo/
├── DemoApplication.java       // 启动类
├── controller/                // 前端请求入口
│   └── UserController.java
├── entity/                    // 实体类（对应数据库表）
│   └── User.java
├── mapper/                    // MyBatis映射接口
│   └── UserMapper.java
└── service/                   // 业务逻辑（可选，简化示例可省略）
    └── UserService.java
src/main/resources/
├── application.yml            // 配置文件
└── mybatis/mapper/            // MyBatis的XML映射文件
    └── UserMapper.xml

1.2 核心代码编写

（1）配置文件（application.yml）

复制代码 
spring:
  # 数据库配置
  datasource:
    url: jdbc:mysql://localhost:3306/test_db?useUnicode=true&characterEncoding=utf8&serverTimezone=Asia/Shanghai
    username: root  # 你的MySQL用户名
    password: 123456  # 你的MySQL密码
    driver-class-name: com.mysql.cj.jdbc.Driver

# MyBatis配置
mybatis:
  mapper-locations: classpath:mybatis/mapper/*.xml  # 指定XML文件位置
  type-aliases-package: com.example.demo.entity     # 实体类别名包
  configuration:
    map-underscore-to-camel-case: true  # 开启驼峰命名转换

（2）实体类（User.java）

java 复制代码 
package com.example.demo.entity;

public class User {
    private Integer id;
    private String userName;
    private Integer age;

    // 必须有无参构造（MyBatis封装需要）
    public User() {}

    // 全参构造、getter/setter、toString 省略（IDEA可自动生成）
    public Integer getId() { return id; }
    public void setId(Integer id) { this.id = id; }
    public String getUserName() { return userName; }
    public void setUserName(String userName) { this.userName = userName; }
    public Integer getAge() { return age; }
    public void setAge(Integer age) { this.age = age; }
}

（3）Mapper 接口（UserMapper.java）

java 复制代码 
package com.example.demo.mapper;

import com.example.demo.entity.User;
import org.apache.ibatis.annotations.Mapper;
import java.util.List;

// 标记为MyBatis映射接口，SpringBoot会自动扫描
@Mapper
public interface UserMapper {
    // 查询所有用户
    List<User> selectAllUsers();

    // 新增用户
    int insertUser(User user);
}

（4）Mapper XML 文件（UserMapper.xml）

XML 复制代码 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.example.demo.mapper.UserMapper">
    <resultMap id="UserResultMap" type="User">
        <id column="id" property="id"/>
        <result column="user_name" property="userName"/>
        <result column="age" property="age"/>
    </resultMap>

    <select id="selectAllUsers" resultMap="UserResultMap">
        SELECT id, user_name, age FROM user
    </select>

    <insert id="insertUser">
        INSERT INTO user (user_name, age) VALUES (#{userName}, #{age})
    </insert>
</mapper>

（5）Controller（前端请求入口）

java 复制代码 
package com.example.demo.controller;

import com.example.demo.entity.User;
import com.example.demo.mapper.UserMapper;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;

// 解决跨域（前端Vue和后端端口不同，必须加）
@CrossOrigin
@RestController
@RequestMapping("/user")
public class UserController {
    // 注入Mapper
    @Resource
    private UserMapper userMapper;

    // 查询所有用户：GET请求
    @GetMapping("/list")
    public List<User> getUserList() {
        return userMapper.selectAllUsers();
    }

    // 新增用户：POST请求，接收前端传的User对象
    @PostMapping("/add")
    public String addUser(@RequestBody User user) {
        int result = userMapper.insertUser(user);
        return result > 0 ? "新增成功" : "新增失败";
    }
}

1.3 数据库准备

在 MySQL 中创建 test_db 数据库和 user 表：

sql 复制代码 
CREATE DATABASE IF NOT EXISTS test_db DEFAULT CHARACTER SET utf8mb4;
USE test_db;

CREATE TABLE IF NOT EXISTS user (
    id INT PRIMARY KEY AUTO_INCREMENT,
    user_name VARCHAR(50) NOT NULL,
    age INT
);

步骤 2：前端（Vue）搭建

2.1 创建 Vue 项目（需先安装 Node.js）

java 复制代码 
# 安装Vue脚手架（首次需要）
npm install -g @vue/cli

# 创建项目（选择Vue2或Vue3，示例用Vue3）
vue create vue-demo

# 进入项目目录
cd vue-demo

# 安装axios（用于发送HTTP请求）
npm install axios

2.2 核心代码编写

（1）配置 axios（src/utils/request.js）

新建工具类，统一管理请求：

javascript 复制代码 
import axios from 'axios'

// 创建axios实例，指定后端基础地址
const request = axios.create({
  baseURL: 'http://localhost:8080',  // SpringBoot默认端口8080
  timeout: 5000  // 请求超时时间
})

export default request

（2）用户页面（src/views/User.vue）

javascript 复制代码 
<template>
  <div class="user-container">
    <h2>用户管理</h2>

    <!-- 新增用户表单 -->
    <div class="add-form">
      <input v-model="newUser.userName" placeholder="请输入用户名"/>
      <input v-model="newUser.age" type="number" placeholder="请输入年龄"/>
      <button @click="addUser">新增用户</button>
    </div>

    <!-- 用户列表 -->
    <table border="1" cellpadding="8" cellspacing="0">
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>年龄</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in userList" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.userName }}</td>
          <td>{{ user.age }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import request from '../utils/request'

export default {
  name: 'User',
  data() {
    return {
      userList: [],  // 存储用户列表
      newUser: {     // 新增用户的表单数据
        userName: '',
        age: ''
      }
    }
  },
  // 页面加载时查询用户列表
  mounted() {
    this.getUserList()
  },
  methods: {
    // 查询所有用户
    async getUserList() {
      try {
        // 向后端发送GET请求：http://localhost:8080/user/list
        const res = await request.get('/user/list')
        this.userList = res.data
      } catch (error) {
        alert('查询失败：' + error.message)
      }
    },
    // 新增用户
    async addUser() {
      if (!this.newUser.userName || !this.newUser.age) {
        alert('请填写完整信息')
        return
      }
      try {
        // 向后端发送POST请求，携带用户数据
        await request.post('/user/add', this.newUser)
        alert('新增成功')
        // 重置表单 + 重新查询列表
        this.newUser = { userName: '', age: '' }
        this.getUserList()
      } catch (error) {
        alert('新增失败：' + error.message)
      }
    }
  }
}
</script>

<style scoped>
.user-container {
  width: 800px;
  margin: 50px auto;
}
.add-form {
  margin-bottom: 20px;
}
.add-form input {
  margin-right: 10px;
  padding: 5px;
}
</style>

（3）配置路由（src/router/index.js）

javascript 复制代码 
import { createRouter, createWebHistory } from 'vue-router'
import User from '../views/User.vue'

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

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

export default router

步骤 3：运行项目

  • 启动后端 ：运行 SpringBoot 的 DemoApplication.java（默认端口 8080）；
  • 启动前端 ：在 Vue 项目目录执行 npm run serve（默认端口 8081）；
  • 访问页面 ：打开浏览器输入 http://localhost:8081，即可看到用户管理页面，支持新增和查询用户

Vue + SpringBoot + MyBatis 的核心是前后端分离：Vue 负责前端交互，SpringBoot 处理业务并作为中间层，MyBatis 完成数据库操作；

三者通过HTTP 请求 + JSON 数据交互：前端发请求→后端接收并调用 MyBatis 操作数据库→后端返回 JSON→前端渲染；

关键配置：后端跨域、MyBatis 映射规则、前端 axios 基础地址。

示例是最基础的骨架，你可以在此基础上扩展（如分页、删除、修改、参数校验、权限控制等）

相关推荐
爱吃鱼的锅包肉1 小时前
利用css+js实现一个图片随鼠标滑动裁剪的功能
前端·javascript·css·计算机外设
儒雅的烤地瓜2 小时前
小程序 | Vue小程序开发框架：MPvue与UniApp深度解析
前端·vue.js·uni-app·nodejs·cli·mpvue
小鸡脚来咯2 小时前
正则表达式考点
java·开发语言·前端
ujainu2 小时前
Electron 主进程与渲染进程通信详解：HarmonyOS PC基于 `ipcRenderer.send` 与 `ipcMain.on` 的双向数据传输
javascript·electron·harmonyos
Cg136269159742 小时前
JS-对象-
开发语言·javascript·ecmascript
IT_陈寒2 小时前
SpringBoot开发效率提升50%的5个隐藏技巧，官方文档都没告诉你！
前端·人工智能·后端
鹏北海2 小时前
TypeScript 装饰器完全指南
前端·typescript
zhaoyin19942 小时前
Vue面试题笔记
javascript·vue.js·笔记
533_2 小时前
[element-ui] el-tree 获取指定节点的父节点
前端·vue.js·elementui
热门推荐
01GitHub 镜像站点02OpenClaw 使用和管理 MCP 完全指南03Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南04本地部署 OpenClaw + DeepSeek-R1 完全指南05OpenClaw macOS 完整安装与本地模型配置教程（实战版）06OpenClaw 飞书机器人不回复消息？3 小时踩坑总结07得物前端部门，没了08UV安装并设置国内源09“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）10Openclow安装保姆级教程