新手入门前端与后端交互案例(HTML+Java+Axios)

最新推荐文章于 2025-11-23 16:59:48 发布

原创

最新推荐文章于 2025-11-23 16:59:48 发布 · 1.3w 阅读

182 ·

CC 4.0 BY-SA版权

文章标签：

#java #HTML5 #CSS #axios #mybatisplus

本文详细介绍了如何使用Spring Boot结合MyBatis Plus搭建后端服务，实现与前端的交互。包括项目结构、依赖配置、YML文件设置、各层级代码编写（Mapper、Service、Controller）。前端通过Vue.js发送请求，获取并展示用户数据，支持用户信息的增删改查操作。

需求分析

前端网页向后端发起相应请求,后端响应前端的请求,做出相关操作.如前端发出获取数据库用户表的请求,后端则将用户表的内容返回给前端.简而言之,前端发出对数据库访问的请求,后端需响应结果.

项目结构

后端项目结构

实现步骤

导入相关依赖包

 <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.2</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>

    <properties>
        <java.version>1.8</java.version>
        <!--跳过测试类打包-->
        <skipTests>true</skipTests>
    </properties>
    <!--原则：按需导入-->
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <!--springboot启动项(器)，在包的内部springboot已经完成了项目的“整合”
                (配置)用户拿来就能用-->
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--数据库驱动-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!--springboot数据库连接-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>

        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
        <dependency>
            <groupId>org.projectlom