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

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

2024-08-21 1728
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这篇文章详细介绍了一个基于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
|
3月前
|
XML Java Nacos
Spring Boot 整合Nacos 版本兼容适配 史上最详细文档
本文介绍SpringBoot整合Nacos的完整流程，涵盖Nacos下载安装、配置中心与服务发现集成、版本兼容性问题及实战配置。重点解决SpringBoot 3.3.0与Nacos版本适配难题，推荐使用Spring Cloud Alibaba方案，并提供项目开源地址供参考学习。
游客gxacrkxssutjq
1402 3
友点佳浩
|
3月前
|
前端开发 安全 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客户端
友点佳浩
409 4
基于springboot+vue开发的会议预约管理系统
高端源码库
|
7月前
|
JavaScript 前端开发 Java
制造业ERP源码，工厂ERP管理系统，前端框架：Vue，后端框架：SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统，采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能，整合客户与供应商数据，支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能，助力企业实现高效自动化管理，并通过UniAPP实现移动端支持，满足多场景应用需求。
高端源码库
680 1
net936
|
8月前
|
前端开发 Java 关系型数据库
基于Java+Springboot+Vue开发的鲜花商城管理系统源码+运行
基于Java+Springboot+Vue开发的鲜花商城管理系统（前后端分离），这是一项为大学生课程设计作业而开发的项目。该系统旨在帮助大学生学习并掌握Java编程技能，同时锻炼他们的项目设计与开发能力。通过学习基于Java的鲜花商城管理系统项目，大学生可以在实践中学习和提升自己的能力，为以后的职业发展打下坚实基础。技术学习共同进步
net936
530 7
友点佳浩
|
4月前
|
前端开发 JavaScript Java
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
本系统基于SpringBoot与Vue3开发，实现校园食堂评价功能。前台支持用户注册登录、食堂浏览、菜品查看及评价发布；后台提供食堂、菜品与评价管理模块，支持权限控制与数据维护。技术栈涵盖SpringBoot、MyBatisPlus、Vue3、ElementUI等，适配响应式布局，提供完整源码与数据库脚本，可直接运行部署。
友点佳浩
263 6
基于springboot+vue开发的校园食堂评价系统【源码+sql+可运行】【50809】
dasein58
|
7月前
|
JavaScript 前端开发 编译器
Vue与TypeScript：如何实现更强大的前端开发
Vue.js 以其简洁的语法和灵活的架构在前端开发中广受欢迎，而 TypeScript 作为一种静态类型语言，为 JavaScript 提供了强大的类型系统和编译时检查。将 Vue.js 与 TypeScript 结合使用，不仅可以提升代码的可维护性和可扩展性，还能减少运行时错误，提高开发效率。本文将介绍如何在 Vue.js 项目中使用 TypeScript，并通过一些代码示例展示其强大功能。
dasein58
309 22
高端源码库
|
7月前
|
供应链 JavaScript BI
ERP系统源码，基于SpringBoot+Vue+ElementUI+UniAPP开发
这是一款专为小微企业打造的 SaaS ERP 管理系统，基于 SpringBoot+Vue+ElementUI+UniAPP 技术栈开发，帮助企业轻松上云。系统覆盖进销存、采购、销售、生产、财务、品质、OA 办公及 CRM 等核心功能，业务流程清晰且操作简便。支持二次开发与商用，提供自定义界面、审批流配置及灵活报表设计，助力企业高效管理与数字化转型。
高端源码库
641 2
ERP系统源码，基于SpringBoot+Vue+ElementUI+UniAPP开发
想飞的雪糕
|
存储 人工智能 前端开发
前端大模型应用笔记（三）：Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用，通过使用Transformer模型，实现了更智能的搜索功能，如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue，使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程，并展示了实际效果和待改进点。
想飞的雪糕
1056 14
你都不懂
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
你都不懂
348 0

热门文章

最新文章

  • 1
    前端如何存储数据：Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    SpringBoot+Docker+Git+Jenkins实现简易的持续集成和持续部署
  • 3
    spring boot启用tomcat ssl
  • 4
    OpenOffice4: 软件包安装, Docker安装,集成SpringBoot应用
  • 5
    关于mybatis-plus在springBoot的父子工程中引入失败问题
  • 6
    基于springboot的资产管理系统
  • 7
    Springboot整合Netty，自定义协议实现
  • 8
    springboot集成webstock实战:服务端数据推送数据到客户端实现实时刷新
  • 9
    基于若依springboot架构实现数据多维统计
  • 10
    Spring Boot 基础教程：创建 SpringBoot 项目的 3 种方式
  • 1
    基于SpringBoot+Vue+uniapp的仓库管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
    205
  • 2
    基于SpringBoot+Vue+uniapp的医药信息管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
    184
  • 3
    基于SpringBoot+Vue+uniapp的网上茶叶销售平台的详细设计和实现(源码+lw+部署文档+讲解等)
    166
  • 4
    基于SpringBoot+Vue+uniapp的淘乐乐员工购物商城的详细设计和实现(源码+lw+部署文档+讲解等)
    155
  • 5
    基于SpringBoot+Vue+uniapp的家具销售库存管理信息系统的详细设计和实现(源码+lw+部署文档+讲解等)
    145
  • 6
    基于SpringBoot+Vue+uniapp的房屋租赁平台的详细设计和实现(源码+lw+部署文档+讲解等)
    109
  • 7
    基于SpringBoot+Vue+uniapp的二手车交易平台的详细设计和实现(源码+lw+部署文档+讲解等)
    258
  • 8
    基于SpringBoot+Vue+uniapp的高校勤工助学系统的详细设计和实现(源码+lw+部署文档+讲解等)
    205
  • 9
    基于SpringBoot+Vue+uniapp的服装店销售管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
    328
  • 10
    基于SpringBoot+Vue+uniapp的餐厅点餐系统的详细设计和实现(源码+lw+部署文档+讲解等)
    205

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 阿里文娱大前端技术实践
  • 前端代码是怎样智能生成的
    • 下一篇
    「直播预告」Streaming Lakehouse Meetup EP.2｜Paimon × StarRocks 共话实时湖仓