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

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

2024-08-21 296
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
云数据库 RDS MySQL，集群系列 2核4GB
推荐场景：
搭建个人博客
RDS MySQL Serverless 基础系列，0.5-2RCU 50GB
推荐场景：
学生管理系统数据库设计 搭建个人博客
RDS MySQL Serverless 高可用系列，价值2615元额度，1个月
简介： 这篇文章详细介绍了一个基于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前端
springboot前端
vue前端
相关实践学习
如何在云端创建MySQL数据库
开始实验后，系统会自动创建一台自建MySQL的 源数据库 ECS 实例和一台 目标数据库 RDS。
全面了解阿里云能为你做什么
阿里云在全球各地部署高效节能的绿色数据中心，利用清洁计算为万物互联的新世界提供源源不断的能源动力，目前开服的区域包括中国（华北、华东、华南、香港）、新加坡、美国（美东、美西）、欧洲、中东、澳大利亚、日本。目前阿里云的产品涵盖弹性计算、数据库、存储与CDN、分析与搜索、云通信、网络、管理与监控、应用服务、互联网中间件、移动服务、视频服务等。通过本课程，来了解阿里云能够为你的业务带来哪些帮助 &nbsp; &nbsp; 相关的阿里云产品：云服务器ECS 云服务器 ECS（Elastic Compute Service）是一种弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。产品详情: https://www.aliyun.com/product/ecs
热爱技术的小郑
目录
相关文章
dufadayang
|
1月前
|
前端开发
如何解决前端工程化中出现的版本冲突问题？
如何解决前端工程化中出现的版本冲突问题？
dufadayang
48 4
疯狂的猿
|
8天前
|
存储 JavaScript 前端开发
基于 SpringBoot 和 Vue 开发校园点餐订餐外卖跑腿Java源码
一个非常实用的校园外卖系统，基于 SpringBoot 和 Vue 的开发。这一系统源于黑马的外卖案例项目 经过站长的进一步改进和优化，提供了更丰富的功能和更高的可用性。 这个项目的架构设计非常有趣。虽然它采用了SpringBoot和Vue的组合，但并不是一个完全分离的项目。 前端视图通过JS的方式引入了Vue和Element UI，既能利用Vue的快速开发优势，
疯狂的猿
55 13
favori
|
26天前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目，实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库，旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入，帮助开发者轻松实现3D场景与React项目的无缝融合。
favori
99 8
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目，实现数字孪生
2G冲浪词条
|
26天前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题，javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题，并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先，在Spring Boot应用中添加一个实现了`Filter`接口的类，设置响应头允许所有来源的跨域请求。接着，通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL，验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
2G冲浪词条
35 3
springboot解决js前端跨域问题，javascript跨域问题解决
高端源码库
|
16天前
|
JavaScript 安全 Java
java版药品不良反应智能监测系统源码，采用SpringBoot、Vue、MySQL技术开发
基于B/S架构，采用Java、SpringBoot、Vue、MySQL等技术自主研发的ADR智能监测系统，适用于三甲医院，支持二次开发。该系统能自动监测全院患者药物不良反应，通过移动端和PC端实时反馈，提升用药安全。系统涵盖规则管理、监测报告、系统管理三大模块，确保精准、高效地处理ADR事件。
高端源码库
30 1
刘大猫.
|
1月前
|
Java 应用服务中间件
SpringBoot获取项目文件的绝对路径和相对路径
SpringBoot获取项目文件的绝对路径和相对路径
刘大猫.
93 1
SpringBoot获取项目文件的绝对路径和相对路径
dufadayang
|
1月前
|
前端开发 测试技术
前端工程化的分支策略要如何与项目的具体情况相结合？
前端工程化的分支策略要紧密结合项目的实际情况，以实现高效的开发、稳定的版本控制和顺利的发布流程。
dufadayang
27 1
刘大猫.
|
1月前
|
分布式计算 关系型数据库 MySQL
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型
SpringBoot项目中mysql字段映射使用JSONObject和JSONArray类型 图像处理 光通信 分布式计算 算法语言 信息技术 计算机应用
刘大猫.
55 8
蓝易云
|
1月前
|
存储 运维 安全
Spring运维之boot项目多环境(yaml 多文件 proerties)及分组管理与开发控制
通过以上措施，可以保证Spring Boot项目的配置管理在专业水准上，并且易于维护和管理，符合搜索引擎收录标准。
蓝易云
42 2
土木林森
|
1月前
|
前端开发 Unix 测试技术
揭秘！前端大牛们如何高效管理项目，确保按时交付高质量作品！
【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题，帮助你学习前端大牛们的项目管理技巧，确保按时交付高质量的作品。
土木林森
37 2

热门文章

最新文章

  • 1
    Spring-boot+Dubbo应用启停源码分析
  • 2
    SpringMvc+Spring+MyBatis 基于注解整合
  • 3
    Dubbo之——改造Dubbo，使其能够兼容Spring 4注解配置
  • 4
    Spring(二)之入门示例
  • 5
    spring入门
  • 6
    Spring Cloud 统一配置
  • 7
    spring 拦截器
  • 8
    Reactive Spring实战——响应式MySql交互
  • 9
    [Spring]支持注解的Spring调度器
  • 10
    Spring Aware容器感知技术
  • 1
    springboot 启动原理、启动过程、启动机制的介绍
    499
  • 2
    springboot实现文件防盗链设计
    126
  • 3
    Spring Boot中一般如何使用线程池？
    753
  • 4
    Spring Boot 源码面试知识点
    101
  • 5
    【MongoDB 专栏】MongoDB 与 Spring Boot 的集成实践
    253
  • 6
    深入探索Spring Boot Web应用源码及实战应用
    105
  • 7
    ruoyi-nbcio从spring2.7.18升级springboot到3.1.7，java从java8升级到17（二）
    350
  • 8
    springboot数据库回滚失败原因
    62
  • 9
    springboot全局自定义异常
    44
  • 10
    springBoot+rabbit消息获取和消息确认
    126

    • 相关课程

    更多
  • 网站性能前端监控课程
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • 前端开发基础6：Node.js和LESS预编译工具
  • 前端开发基础2：VS Code和Edge的联动开发
  • 前端开发基础1：前端开发环境的安装和配置
  • 从零搭建Spring Boot的Hello World
    • 下一篇
    DataWorks