搭建 VUE + SpringBoot 前后端分离项目

最新推荐文章于 2025-01-15 19:38:53 发布

Yan Yang

最新推荐文章于 2025-01-15 19:38:53 发布

阅读量2.4k

点赞数

分类专栏： SpringBoot VUE 文章标签： java vue ajax spring boot maven

本文链接：https://blog.youkuaiyun.com/zzvar/article/details/118399092

版权

本文详细介绍了如何使用Vue.js和Spring Boot搭建一个前后端分离的项目，包括Vue项目的结构、Spring Boot项目的结构、Maven依赖、配置文件、前端Vue界面的index.html和input.html页面，以及后端的EmployeeController、EmployeeMapper、IEmployeeService和EmployeeServiceImpl的实现。同时，文章还提到了Config配置，涉及跨域请求、拦截器和分页设置，最后是App启动类的说明。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现前后端分离

- VUE + SpringBoot 实现前后端分离

VUE + SpringBoot 实现前后端分离

1. VUE 项目结构

项目搭建：VUE 项目搭建
在这里插入图片描述

2. SpringBoot 项目结构

在这里插入图片描述

2. pom.xml (Maven项目依赖)

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    
	<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.4.3</version>
    </parent>
    
    <groupId>com.yy.mybatis-plus</groupId>
    <artifactId>mybatis-plus-demo</artifactId>
    <version>1.0.1</version>
    <packaging>jar</packaging>
    <properties>
        <java.version>11</java.version>
    </properties>

    <!-- Web 环境 -->
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <!-- SpringBoot 测试 jar -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>

        <!-- SpringBoot热部署插件 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>

        <!-- MySQL驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

        <!-- druid -->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid-spring-boot-starter</artifactId>
            <version>1.2.5</version>
        </dependency>

        <!-- mybatis-plus 集成到SpringBoot中的依赖-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.0</version>
        </dependency>

        <!-- 支持使用 Spring AOP 和 AspectJ 进行切面编程。 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-aop</artifactId>
        </dependency>

        <!-- SpringBoot集成FreeMarker的依赖 -->
        <dependency>

最低0.47元/天解锁文章