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

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

2024-08-21 1062
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
RDS MySQL Serverless 基础系列，0.5-2RCU 50GB
推荐场景：
学生管理系统数据库设计 搭建个人博客
云数据库 RDS PostgreSQL，高可用系列 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版本
Spring boot vue
vue前端
Spring Boot前端
springboot前端
相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发，帮助IT从业者们通过“阿里云Web应用上云解决方案”，了解一个企业级Web应用上云的常见架构，了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。 &nbsp; 相关的阿里云产品：云数据库RDS MySQL 版 阿里云关系型数据库RDS（Relational Database Service）是一种稳定可靠、可弹性伸缩的在线数据库服务，提供容灾、备份、恢复、迁移等方面的全套解决方案，彻底解决数据库运维的烦恼。 了解产品详情:&nbsp;https://www.aliyun.com/product/rds/mysql&nbsp;
热爱技术的小郑
目录
相关文章
游客gxacrkxssutjq
|
16天前
|
XML Java Nacos
Spring Boot 整合Nacos 版本兼容适配 史上最详细文档
本文介绍SpringBoot整合Nacos的完整流程，涵盖Nacos下载安装、配置中心与服务发现集成、版本兼容性问题及实战配置。重点解决SpringBoot 3.3.0与Nacos版本适配难题，推荐使用Spring Cloud Alibaba方案，并提供项目开源地址供参考学习。
游客gxacrkxssutjq
352 3
友点佳浩
|
26天前
|
前端开发 安全 Java
基于springboot+vue开发的会议预约管理系统
一个完整的会议预约管理系统，包含前端用户界面、管理后台和后端API服务。 ### 后端 - **框架**: Spring Boot 2.7.18 - **数据库**: MySQL 5.6+ - **ORM**: MyBatis Plus 3.5.3.1 - **安全**: Spring Security + JWT - **Java版本**: Java 11 ### 前端 - **框架**: Vue 3.3.4 - **UI组件**: Element Plus 2.3.8 - **构建工具**: Vite 4.4.5 - **状态管理**: Pinia 2.1.6 - **HTTP客户端
友点佳浩
177 4
基于springboot+vue开发的会议预约管理系统
高端源码库
|
5月前
|
JavaScript 前端开发 Java
制造业ERP源码，工厂ERP管理系统，前端框架：Vue，后端框架：SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统，采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能，整合客户与供应商数据，支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能，助力企业实现高效自动化管理，并通过UniAPP实现移动端支持，满足多场景应用需求。
高端源码库
486 1
友点佳浩
|
2月前
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发，实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布；后台提供食堂、菜品与评价管理模块，支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等，适配响应式布局，提供完整源码与数据库脚本，可直接运行部署。
友点佳浩
113 0
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
高端源码库
|
4月前
|
监控 数据可视化 JavaScript
springboot + vue的MES系统生产计划管理源码
MES系统（制造执行系统）的生产计划管理功能是其核心模块之一，涵盖生产计划制定与优化、调度排程、进度监控反馈、资源管理调配及可视化报告五大方面。系统基于SpringBoot + Vue-Element-Plus-Admin技术栈开发，支持多端应用（App、小程序、H5、后台）。通过实时数据采集与分析，MES助力企业优化生产流程，适用于现代化智能制造场景。
高端源码库
173 1
dasein58
|
5月前
|
JavaScript 前端开发 编译器
Vue与TypeScript：如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎，而 TypeScript 作为一种静态类型语言，为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用，不仅可以提升代码的可维护性和可扩展性，还能减少运行时错误，提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript，并通过一些代码示例展示其强大功能。
dasein58
227 22
java小程序
|
JavaScript 算法 Java
springboot vue二手交易市场毕设源码(毕设)
springboot vue二手交易市场毕设源码
java小程序
439 0
springboot vue二手交易市场毕设源码(毕设)
计算机程序设计Y2013070224
|
3天前
|
搜索推荐 JavaScript Java
基于springboot的儿童家长教育能力提升学习系统
本系统聚焦儿童家长教育能力提升，针对家庭教育中理念混乱、时间不足、个性化服务缺失等问题，构建科学、系统、个性化的在线学习平台。融合Spring Boot、Vue等先进技术，整合优质教育资源，提供高效便捷的学习路径，助力家长掌握科学育儿方法，促进儿童全面健康发展，推动家庭和谐与社会进步。
计算机程序设计Y2013070224
38 5
计算机程序设计Y2013070224
|
3天前
|
JavaScript Java 关系型数据库
基于springboot的古树名木保护管理系统
本研究针对古树保护面临的严峻挑战，构建基于Java、Vue、MySQL与Spring Boot技术的信息化管理系统，实现古树资源的动态监测、数据管理与科学保护，推动生态、文化与经济可持续发展。
计算机程序设计Y2013070224
34 4

热门文章

最新文章

  • 1
    构建基于Java的AI智能体：使用LangChain4j与Spring AI实现RAG应用
  • 2
    Spring Security权限管理解析
  • 3
    从零学 Dropwizard：手把手搭轻量 Java 微服务，告别 Spring 臃肿
  • 4
    Spring Security通用权限管理模型解析
  • 5
    Spring Cloud 微服务治理技术详解与实践指南
  • 6
    零代码改造 + 全链路追踪！Spring AI 最新可观测性详细解读
  • 7
    【SpringBoot（二）】带你认识Yaml配置文件类型、SpringMVC的资源访问路径 和 静态资源配置的原理！
  • 8
    Spring框架优化：提高Java应用的性能与适应性
  • 9
    基于springboot的儿童家长教育能力提升学习系统
  • 10
    【SpringBoot（一）】Spring的认知、容器功能讲解与自动装配原理的入门，带你熟悉Springboot中基本的注解使用
  • 1
    基于Java 17 + Spring Boot 3.2 + Flink 1.18的智慧实验室管理系统核心代码
    268
  • 2
    Spring boot 使用mybatis generator 自动生成代码插件
    664
  • 3
    较为完整的SpringBoot项目结构
    2396
  • 4
    Java 21 与 Spring Boot 3.2 微服务开发从入门到精通实操指南
    448
  • 5
    📨 Spring Boot 3 整合 MQ 构建聊天消息存储系统
    420
  • 6
    SpringBoot之异步调用@Ansyc
    297
  • 7
    SpringBoot2.3.1集成Knife4j接口文档
    483
  • 8
    springboot+redis互联网医院智能导诊系统源码，基于医疗大模型、知识图谱、人机交互方式实现
    287
  • 9
    JPA简介：Spring Boot环境下的实践指南
    165
  • 10
    Spring Boot 可视化监控
    720

    • 相关课程

    更多
  • 移动Web前端开发
  • Ajax 前端开发入门与实战
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • 前端开发框架Bootstrap使用教程
  • Springboot项目云开发快速迁移

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的
    • 下一篇
    语音克隆 Index-TTS 详细介绍