SpringBoot+Vue实现前后端分离基本的环境搭建

目录

一、Vue项目的搭建

(1)基于vite创建vue项目

(2)引入elementplus

(3)启动后端服务,并测试

二、SpringBoot项目的搭建

(1)通过idea创建SpringBoot项目

(2)pom中需要的依赖

 (3)application.yml配置文件的编写

(4)编写mapper文件

(5)编写控制器

(6)因出现跨域请求,故进行配置请求编写


一、Vue项目的搭建

(1)基于vite创建vue项目

npm create vue@latest

(2)引入elementplus

这里我是按需引入的,具体的步骤官网上有介绍

(3)启动后端服务,并测试

启动后端服务,在前端通过axios与后端进行交互,查看测试结果

<script setup>
import axios from 'axios'
import { onMounted,ref } from 'vue';const dataList=ref([])
onMounted(()=>{axios.get('http://localhost:8080/users/findAll').then(function (response) {console.log(response);dataList.value=response.data}).catch(function (error) {console.log(error);});})
console.log('list')console.log(dataList.value)
</script>

二、SpringBoot项目的搭建

(1)通过idea创建SpringBoot项目

具体的创建步骤我就不说了,大致说一下项目的大致架构

(2)pom中需要的依赖

 <dependencies><!-- spring web --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- MyBatisPlus --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.0</version></dependency><!-- mysql驱动 --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><!-- lombok --><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><!-- spring test --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency></dependencies>

 (3)application.yml配置文件的编写

spring:datasource:url: jdbc:mysql://localhost:3306/sql_test?serverTimezone=UTCusername: 数据库账户名password: 数据库密码driver-class-name: com.mysql.cj.jdbc.Drivermybatis-plus:
#mybatis-plus的映射位置mapper-locations: com/gq/mybatis/mapper/*Mapper.xml
#实体类的位置type-aliases-package: com.gq.mybatis.pojoserver:port: 8080

(4)编写mapper文件

UserMapper接口

public interface UsersMapper extends BaseMapper<users> {List<users> findAll();
}

UserMapper映射文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.gq.mybatis.mapper.UsersMapper"><select id="findAll" resultType="com.gq.mybatis.pojo.users">select * from users</select>
</mapper>

(5)编写控制器

@RestController
@RequestMapping("/users")
public class UsersController {@Autowiredprivate UsersMapper usersMapper;//查找所有@GetMapping("/findAll")public List<users> findAll(){return usersMapper.findAll();}
}

(6)因出现跨域请求,故进行配置请求编写

package com.gq.mybatis.configure;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 CORSConfig implements WebMvcConfigurer {public void addCorsMappings(CorsRegistry registry) {// 设置允许跨域的路径registry.addMapping("/**")// 设置允许跨域请求的域名.allowedOriginPatterns("*")// 是否允许cookie.allowCredentials(true)// 设置允许的请求方式.allowedMethods("GET", "POST", "DELETE", "PUT")// 设置允许的header属性.allowedHeaders("*")// 跨域允许时间.maxAge(3600);}
}

大致步骤就是如此,大家可以自己测试一下,我测试通过,没问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/24909.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

有效的括号(oj题)

一、题目链接 https://leetcode.cn/problems/valid-parentheses/submissions/538110206 二、题目思路 利用栈的性质&#xff0c;后进先出 1.依次读取字符串&#xff0c;判断是否为左括号&#xff0c;如果是&#xff0c;就将其入栈。 2.如果读取的不是左括号&#xff0c;就说…

【网络教程】Iptables官方教程-学习笔记7-简单理解IPTABLES规则的作用流程

前面学习了IPTABLES的所有功能介绍后&#xff0c;一个Linux设备里的IPTABLES规则集是如何运行的&#xff0c;这里简单做个介绍。 在Linux设备里输入"iptables -nvl",得到该设备的所有防火墙规则&#xff0c;得到的结果中可以看到这个设备防火墙里所有的链以及链里的…

Git从入门到放弃

由于我的Git学的不太好&#xff0c;所以为了能够将以后我的学习笔记能够整理的更好&#xff0c;我先要系统的学习一下git&#xff0c;文章由此产生。 文章笔记源自尚硅谷Git入门到精通全套教程视频内容 1 进入官网 学习新技术的第一步需要熟悉官网&#xff0c;Git也不例外。ht…

【区分vue2和vue3下的element UI ¶Upload 上传组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 中&#xff0c;我们通常使用 Element UI 的 el-upload 组件来实现文件上传功能。然而&#xff0c;在 Vue 3 中&#xff0c;由于 Element UI 没有官方支持 Vue 3 的版本&#xff0c;我们通常会使用 Element Plus&#xff08;Element UI 的 Vue 3 版本&#xff09;的 el…

海豚调度器调用api接口启动工作流(亲试可用)

一、前言 在大数据时代,工作流调度器成为了数据管道和ETL任务中不可或缺的工具。DolphinScheduler作为一款强大的工作流调度器,支持多种任务类型和工作流的可视化管理。除了通过Web界面操作外,DolphinScheduler也提供了API接口,使得第三方系统集成和自动化脚本调用成为可能…

理论学习-自动控制

自动控制 前馈控制简介表现形式前馈 - 反馈 结合使用 前馈控制 简介 前馈控制 什么&#xff1f;作用 &#xff1f;条件&#xff1f; 没有表达形式&#xff08;具体的&#xff09;&#xff0c;控制方法。提高响应速度&#xff0c;减小误差&#xff0c;增加带宽而不改变稳定性…

Langchain的向量存储 - Document与简单字符串列表的区别

文章目录 前言一、 使用简单字符串列表1. 示例2. 优点3. 缺点 二、 使用 Document 类1. 示例2. 优点3. 缺点 三、 综合比较四、 示例对比1&#xff1a;简单字符串列表2&#xff1a;使用 Document 类 总结 前言 在 LangChain 中&#xff0c;使用简单字符串列表&#xff08;如 t…

【Python报错】已解决AttributeError: ‘Series’ object has no attribute ‘columns’

成功解决“AttributeError: ‘Series’ object has no attribute ‘columns’”错误的全面指南 一、引言 在Python的数据处理和分析中&#xff0c;Pandas库是一个不可或缺的工具。然而&#xff0c;在使用Pandas时&#xff0c;可能会遇到各种错误&#xff0c;其中之一就是“Att…

【C++】、【Redis】、【人工智能】与【大数据】的深度整合

C++、Redis、人工智能和大数据的深度整合涉及多个方面,包括数据存储、处理、优化以及在不同技术栈之间的交互。以下是对这四个领域深度整合的详细分析: 一、C++与Redis的整合 数据存储与访问: Redis作为一个高性能的Key-Value数据库,非常适合作为C++应用的缓存层。通过hir…

k8s 对外发布(ingress)

在k8s中&#xff0c;service的作用体现在两个方面&#xff0c;对集群内部&#xff0c;它不断跟踪pod的变化&#xff0c;更新endpoint中对应pod的对象&#xff0c;提供了ip不断变化的pod的服务发现机制&#xff1b; 对集群外部&#xff0c;他类似负载均衡器&#xff0c;可以在集…

HTML静态网页成品作业(HTML+CSS)—— 24节气立夏介绍网页(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…

使用Python创建Word文档

使用Python创建Word文档 安装python-docx库创建Word文档代码效果 在这篇文章中&#xff0c;我们将介绍如何使用 Python创建一个Word文档。首先&#xff0c;我们需要安装python-docx库&#xff0c;然后通过一段简单的代码示例展示如何创建和编辑Word文档。 安装python-docx库 …

【pytest】为什么不能使用__init__

示例代码分析 以下是一个简单的示例&#xff0c;演示了在 pytest 中使用 __init__ 方法导致的问题&#xff1a; class TestClass:def __init__(self):self.x 10def test_add(self):self.x 5assert self.x 15def test_main():pytest.main()在这个示例中&#xff0c;TestCla…

RPA影刀 | 变量的使用

1.什么是变量 2.变量的作用 作用1&#xff1a;方便后续流程调用 这里在后续流程“点击元素”中&#xff0c;就可以选中这个变量 作用2&#xff1a;区分相同属性的变量 如果要打开两个网页&#xff0c;总不能都叫web_page吧。 所以这里一个叫百度web_page&#xff0c;一个叫…

flask项目结构与蓝图【心得】

flask 项目没有标准的项目结构&#xff0c;合理组织&#xff0c;确保能跑&#xff0c;可配置&#xff0c;可拓展、模型可被发现就行。 一般可以分为两种 按模型&#xff08;业务&#xff09;划分 按功能划分&#xff0c;就是api、models、config、db、service等 按模型&…

C++期末复习总结(2)

目录 1.运算符重载 2.四种运算符重载 &#xff08;1&#xff09;关系运算符的重载 &#xff08;2&#xff09; 左移运算符的重载 &#xff08;3&#xff09;下标运算符的重载 &#xff08;4&#xff09;赋值运算符的重载 3.继承的方式 4.继承的对象模型 5.基类的构造 6…

易飞销货单出货时审核库存检查

公司接到一客户因品种多而数量少&#xff0c;单一出货计划行比较多&#xff0c;而只上了生产ERP易飞&#xff0c;审核时经常会出现倒催货&#xff0c;提前做销售单&#xff0c;行数有时超30行以上&#xff0c;审核跳窗报错时也不方便查找&#xff0c;特写一外挂程序&#xff0c…

How to: Build a Custom End-User Skin Selector

This section explains how to populate a ComboBoxEdit control with DevExpress skin items. 本节介绍如何使用DevExpress皮肤项填充ComboBoxEdit控件。 To populate a combo box editor, iterate through the SkinManager.Skins collection, which returns all currently a…

字母异位词分组(charyw)

字母异位词分组 题目描述 给定一个字符串数组&#xff0c;将字母异位词组合在一起。字母异位词指字母相同&#xff0c;但排列不同的字符串。 输入格式 第一行正整数n&#xff0c;表示有n个字符串(1<n<1000) 第二行n个字符串&#xff0c;空格隔开 输出格式 多组字母…

Linux基础指令网络管理002

Linux网络管理涉及配置、监控和维护网络接口、路由、防火墙规则、网络服务等&#xff0c;本章主要讲述如何查看网络接口以及管理网络连接。 操作系统&#xff1a; CentOS Stream 9 操作步骤&#xff1a; 查看网络接口及ip信息 指令ipconfig ,如果不能使用该命令先下载 yum …