AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

SpringBoot + Vue 前端后分离项目精进版本

2024-08-21 465
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
RDS MySQL Serverless 基础系列，0.5-2RCU 50GB
推荐场景：
学生管理系统数据库设计 搭建个人博客
云数据库 RDS MySQL，集群系列 2核4GB
推荐场景：
搭建个人博客
云数据库 RDS MySQL，高可用系列 2核4GB
简介： 这篇文章详细介绍了一个基于SpringBoot + Vue的前后端分离项目的搭建过程，包括前端Vue项目的初始化、依赖安装、页面创建和路由配置，以及后端SpringBoot项目的依赖添加、配置文件修改、代码实现和跨域问题的解决，最后展示了项目运行效果。

1、前端Vue的搭建

1.1 初始化vue项目（VueDemo）

1.1、创建一个名称为myapp的工程

vue init webpack VueDemo

填写项目的基本信息，安装的第三方依赖。可以选择、也可以不选择。我这里先安装vue-router、后续如有需要，可以在安装。

在这里插入图片描述
在这里插入图片描述

1.2 、进入工程目录

cd VueDemo

1.3 安装其它依赖

我这里安装了 axios 和** ElementUI**

安装axios的主要目的是 接口数据发送

npm install axios@1.5.0 --save

在这里插入图片描述

安装ElementUI 的主要 目的是使用组件库

npm i element-ui -S

在这里插入图片描述
需要在main.js 中设置，全局使用ElementUI ，这样就可以在其它页面使用了。

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

1.4、安装依赖、也就是node_modules

npm install

1.2 启动项目

npm run dev

启动成功，默认端口是8080。启动端口也可以改： /config/index.js 这个文件可以修改端口。

在这里插入图片描述
项目启动成功是这样。

在这里插入图片描述

1.3 项目结构

1.4 完善项目

1.1 创建页面

这里使用了ElementUI 、接口数据来自后台

<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="bookAuthor" label="作者" width="180">
      </el-table-column>
      <el-table-column prop="bookName" label="书籍名称" width="180">
      </el-table-column>
      <el-table-column prop="price" label="价格"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <el-table-column prop="impression" label="版本"> </el-table-column>
      <el-table-column prop="introduce" label="介绍"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "UserList",
  data() {
    return {
      tableData: [],
    };
  },
  created() {
    const _this = this;
    axios.get("http://localhost:8181/book/findAll").then(function (resp) {
      _this.tableData = resp.data;
    });
  },
};
</script>

<style scoped>
table,
td {
  border: 1px solid silver;
}
</style>

1.2 路由跳转设置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import BookList from '@/components/BookList'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/book',
      name: 'BookList',
      component: BookList
    }
  ]
})

1.3 main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2、后端SpringBoot的搭建

2.1 初始化SpringBoot 项目

依赖先不用选择，后续pom中添加，创建好的项目结构

2.2 添加pom依赖

这里主要添加了 操作数据库 的相关依赖、数据池。方便操作sql

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

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

        <dependency>
            <groupId>com.github.theborakompanioni</groupId>
            <artifactId>thymeleaf-extras-shiro</artifactId>
            <version>2.0.0</version>
        </dependency>

        <!--mybatis-->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.0</version>
        </dependency>

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

        <!--JDBC-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>

        <!--Mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>

        <!--数据池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.6</version>
        </dependency>

    </dependencies>

2.3 修改配置文件

如果你发现项目没有自动生成resource 这个目录，就自己手动创建一个。然后将其设置成Resoureces Root。然后创建mapper 目录、目的是进行mapper文件的映射。和mybatis相关

创建好后的配置文件目录如下:

2.4 项目结构

2.5 完善代码

实体类 Books

package com.example.test.pojo;

/**
 * @BelongsProject: SpringBootDemo
 * @BelongsPackage: com.example.test.pojo
 * @Author: zhengyuzhu
 * @CreateTime: 2023-12-26  12:57
 * @Description: TODO
 * @Version: 1.0
 */
public class Books {
    private String bookId;
    private String bookName;
    private String bookAuthor;
    private Double price;
    private String address;
    private String impression;
    private String introduce;

    public Books(String bookId, String bookName, String bookAuthor, Double price, String address, String impression, String introduce) {
        this.bookId = bookId;
        this.bookName = bookName;
        this.bookAuthor = bookAuthor;
        this.price = price;
        this.address = address;
        this.impression = impression;
        this.introduce = introduce;

    }

    public Double getPrice() {
        return price;
    }

    public void setPrice(Double price) {
        this.price = price;
    }

    public Books() { }

    public String getBookId() {
        return bookId;
    }

    public void setBookId(String bookId) {
        this.bookId = bookId;
    }

    public String getBookName() {
        return bookName;
    }

    public void setBookName(String bookName) {
        this.bookName = bookName;
    }

    public String getBookAuthor() {
        return bookAuthor;
    }

    public void setBookAuthor(String bookAuthor) {
        this.bookAuthor = bookAuthor;
    }

    public String getAddress() {
        return address;
    }

    public void setAddress(String address) {
        this.address = address;
    }

    public String getImpression() {
        return impression;
    }

    public void setImpression(String impression) {
        this.impression = impression;
    }

    public String getIntroduce() {
        return introduce;
    }

    public void setIntroduce(String introduce) {
        this.introduce = introduce;
    }
}

控制层 BooksController

package com.example.test.controller;

/**
 * @BelongsProject: SpringBootDemo
 * @BelongsPackage: com.example.test.controller
 * @Author: zhengyuzhu
 * @CreateTime: 2023-12-26  12:58
 * @Description: TODO
 * @Version: 1.0
 */
import com.example.test.pojo.Books;
import com.example.test.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/book")
public class BooksController {

    @Autowired
    BookService bookService;

    /**
     * @description: 查询所有的书籍信息
     * @author: zhengyuzhu
     * @date: 2023/12/26 12:59
     * @return: java.util.List<com.example.test.pojo.Books>
     **/
    @GetMapping("/findAll")
    public List<Books> findAll() {
        return bookService.queryBookList();
    }

}

服务层 BookService

服务层接口

package com.example.test.service;

/**
 * @author zyz
 * @version 1.0
 * @data 2023/12/26 12:59
 * @Description:
 */

import com.example.test.pojo.Books;

import java.util.List;

public interface BookService {

    /**
     * @description: 查询图书
     * @author: zhengyuzhu
     * @date: 2023/12/26 13:00
     * @return: java.util.List<com.example.test.pojo.Books>
     **/
    List<Books> queryBookList();

}

服务层实现类

package com.example.test.service.impl;

/**
 * @BelongsProject: SpringBootDemo
 * @BelongsPackage: com.example.test.service.impl
 * @Author: zhengyuzhu
 * @CreateTime: 2023-12-26  13:00
 * @Description: TODO
 * @Version: 1.0
 */
import com.example.test.mapper.BooksMapper;
import com.example.test.pojo.Books;
import com.example.test.service.BookService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
public class BookServiceImpl implements BookService {

    @Autowired
    BooksMapper booksMapper;

    @Override
    public List<Books> queryBookList() {
        return booksMapper.queryBookList() ;
    }
}

mapper 层接口

package com.example.test.mapper;

import com.example.test.pojo.Books;
import org.springframework.stereotype.Repository;

import java.util.List;

/**
 * @BelongsProject: SpringBootDemo
 * @BelongsPackage: com.example.test.mapper
 * @Author: zhengyuzhu
 * @CreateTime: 2023-12-26  13:01
 * @Description: TODO
 * @Version: 1.0
 */

@Repository
public interface BooksMapper {

    /**
     * @description: 查询图书
     * @author: zhengyuzhu
     * @date: 2023/12/26 13:02
     * @return: java.util.List<com.example.test.pojo.Books>
     **/
    List<Books> queryBookList();

}

mapper.xml 文件

<?xml version="1.0" encoding="UTF8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.test.mapper.BooksMapper">

    <!--查询所有书籍-->
    <select id="queryBookList" resultType="com.example.test.pojo.Books">
        select * from bookss
    </select>

</mapper>

启动类

添加扫描包

package com.example.test;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@MapperScan("com.example.test.mapper")
@SpringBootApplication
public class TestApplication {

    public static void main(String[] args) {
        SpringApplication.run(TestApplication.class, args);
    }

}

创建这个文件application.properties
配置文件，整合mybatis、有关mybatsi的相关介绍先不说了。

spring.aop.auto=true

#整合mybatis 实体类起别名 mapper文件映射
mybatis.type-aliases-package=com.zheng.pojo
mybatis.mapper-locations=classpath:mybatis/mapper/*.xml

数据库配置文件 application.yml

spring:
  datasource:
    username: root
    password: root
    url: jdbc:mysql://localhost:3306/ssmbuild?allowMultiQueries=true&characterEncoding=UTF-8&characterSetResults=UTF-8&zeroDateTimeBehavior=convertToNull&useSSL=false
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource

    #spring boot 默认是不注入这些属性的，需要自己绑定
    #druid 数据源专有配置
    initiaSize: 5
    minIdle: 5
    maxActive: 20
    maxWait: 60000
    timeBetweenEvictionRunsmMillis: 60000
    minEvictableIdleTimeMillis: 300000
    validationQuery: SELECT 1 FROM DUAL
    testWhileIdle: true
    testOnBorrow: false
    testOnReturn: false
    poolPreparedStatements: true

    filters: stat,wall,log4j
    maxPoolPrepareStatementPerConnectionSize: 20
    useGlobalDataSourceStat: true
    connectionProperties: druid.stat.mergeSql=true;druid.stat.slowSqlMillis=500

server:
  port: 8181

2.6 解决前后端跨域

package com.zheng.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CrosConfig implements WebMvcConfigurer {
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET","HEAD","POST","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

3、效果展示

3.1 前端项目启动

在这里插入图片描述

3.1 后台启动

在这里插入图片描述

3.3 页面效果

这里使用了ElementUI ，简单的将后台数据展示到前台页面

在这里插入图片描述

3.4 接口返回数据

在这里插入图片描述

在这里插入图片描述

文章标签：
云数据库 RDS MySQL 版
Java
JavaScript
前端开发
数据库
数据库连接
关键词：
前端项目
Spring boot vue
Spring Boot版本
vue前端
Spring Boot前端
相关实践学习
如何快速连接云数据库RDS MySQL
本场景介绍如何通过阿里云数据管理服务DMS快速连接云数据库RDS MySQL，然后进行数据表的CRUD操作。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心，利用清洁计算为万物互联的新世界提供源源不断的能源动力，目前开服的区域包括中国（华北、华东、华南、香港）、新加坡、美国（美东、美西）、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程，来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品：云服务器ECS 云服务器 ECS（Elastic Compute Service）是一种弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
热爱技术的小郑
目录
相关文章
java可可
|
26天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的留守儿童爱心网站设计与实现（计算机毕设项目实战+源码+文档）
博主是一位全网粉丝超过100万的CSDN特邀作者、博客专家，专注于Java、Python、PHP等技术领域。提供SpringBoot、Vue、HTML、Uniapp、PHP、Python、NodeJS、爬虫、数据可视化等技术服务，涵盖免费选题、功能设计、开题报告、论文辅导、答辩PPT等。系统采用SpringBoot后端框架和Vue前端框架，确保高效开发与良好用户体验。所有代码由博主亲自开发，并提供全程录音录屏讲解服务，保障学习效果。欢迎点赞、收藏、关注、评论，获取更多精品案例源码。
java可可
61 10
蓝易云
|
23天前
|
自然语言处理 IDE Java
SpringBoot start.aliyun.com创建项目，解决properties乱码的问题
通过确保文件和开发环境的编码一致，配置 Maven 编码，设置 Spring Boot 应用和嵌入式服务器的编码，可以有效解决 properties 文件的乱码问题。以上步骤可以帮助开发者确保在 Spring Boot 项目中正确处理和显示多语言字符，避免因编码问题导致的乱码现象。
蓝易云
36 5
java可可
|
26天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的家政服务管理平台设计与实现（计算机毕设项目实战+源码+文档）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
java可可
46 8
java可可
|
26天前
|
JavaScript 搜索推荐 Java
基于SpringBoot+Vue实现的家乡特色推荐系统设计与实现（源码+文档+部署）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
java可可
57 8
java可可
|
26天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue实现的高校食堂移动预约点餐系统设计与实现（源码+文档+部署）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
java可可
70 3
java可可
|
26天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的冬奥会科普平台设计与实现（系统源码+文档+数据库+部署）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
java可可
45 0
OnePiece
|
Java
记一次springboot版本升级问题
spring-boot-starter-parent 2.6.6
OnePiece
1226 0
记一次springboot版本升级问题
众所周知
|
4月前
|
JavaScript 安全 Java
如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架
本文介绍了如何使用 Spring Boot 和 Ant Design Pro Vue 实现动态路由和菜单功能，快速搭建前后端分离的应用框架。首先，确保开发环境已安装必要的工具，然后创建并配置 Spring Boot 项目，包括添加依赖和配置 Spring Security。接着，创建后端 API 和前端项目，配置动态路由和菜单。最后，运行项目并分享实践心得，包括版本兼容性、安全性、性能调优等方面。
众所周知
258 1
java可可
|
26天前
|
JavaScript NoSQL Java
基于SpringBoot+Vue实现的大学生就业服务平台设计与实现（系统源码+文档+数据库+部署等）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
java可可
67 6
java可可
|
26天前
|
JavaScript Java 测试技术
基于Java+SpringBoot+Vue实现的车辆充电桩系统设计与实现（系统源码+文档+部署讲解等）
面向大学生毕业选题、开题、任务书、程序设计开发、论文辅导提供一站式服务。主要服务：程序设计开发、代码修改、成品部署、支持定制、论文辅导，助力毕设！
java可可
57 6

热门文章

最新文章

  • 1
    2025春招，Spring 面试题汇总
  • 2
    Spring 集成 DeepSeek 的 3大方法（史上最全）
  • 3
    对Spring、SpringMVC、MyBatis框架的介绍与解释
  • 4
    Spring之定时任务基本使用篇
  • 5
    Spring IOC—基于注解配置和管理Bean 万字详解（通俗易懂）
  • 6
    Spring AOP—通知类型 和 切入点表达式 万字详解（通俗易懂）
  • 7
    Spring底层架构核心概念解析
  • 8
    Spring AOP—深入动态代理 万字详解（通俗易懂）
  • 9
    Spring 手动实现Spring底层机制
  • 10
    使用Java和Spring Data构建数据访问层
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码，提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用（flutter version manage）-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75

    • 相关课程

    更多
  • SpringBoot快速掌握 - 核心技术
  • SpringBoot快速掌握 - 高级应用
  • Java Web开发系列课程 - Spring框架入门
  • Spring Boot 2.5.x开发实战
  • Springboot项目云开发快速迁移
  • Spring Cloud微服务架构设计与开发实战

    • 相关电子书

    更多
  • 云栖社区特邀专家徐雷Java Spring Boot开发实战系列课程（第20讲）：经典面试题与阿里等名企内部招聘求职面试技巧
  • 微服务架构模式与原理Spring Cloud开发实战
  • 阿里特邀专家徐雷Java Spring Boot开发实战系列课程（第18讲）：制作Java Docker镜像与推送到DockerHub和阿里云Docker仓库

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 从零搭建Spring Boot的Hello World
  • 搭建Java Web开发环境
    • 下一篇
    阿里云oss简介和如何对接使用