vue3-element-admin 前后端本地启动联调

news2025/3/13 15:22:27

一、后端环境准备

1.1、下载地址

gitee 下载地址

1.2、环境要求

  • JDK 17

1.3、项目启动

  1. 克隆项目

    git clone https://gitee.com/youlaiorg/youlai-boot.git
    
  2. 数据库初始化

    执行 youlai_boot.sql 脚本完成数据库创建、表结构和基础数据的初始化。

  3. 修改配置

    application-dev.yml 修改MySQL、Redis连接为本地配置;

  4. 启动项目

    执行 YoulaiBootApplication.java 的 main 方法完成后端项目启动;

    访问接口文档地址 http://localhost:8989/doc.html 验证项目启动是否成功。

能看到如下界面,说明后端启动成功:

二、前端环境准备

2.1、下载地址

gitee 下载地址

2.2、环境要求

  • 开发工具:VSCode
  • 运行环境:Node ≥ 18(其中 20.6.0 版本不可用)

2.3、项目启动

摘自官网

# 克隆代码
git clone https://gitee.com/youlaiorg/vue3-element-admin.git

# 切换目录
cd vue3-element-admin

# 安装 pnpm
npm install pnpm -g

# 设置镜像源(可忽略)
pnpm config set registry https://registry.npmmirror.com

# 安装依赖
pnpm install

# 修改前端项目 .env.development 文件
VITE_APP_API_URL=http://127.0.0.1:8989      # 本地 开启

# 启动运行
pnpm run dev

 点击验证码,能进入后端 com.youlai.boot.shared.auth.controller.AuthController#getCaptcha 断点中,就证明前后端启动成功,可以愉快地玩耍拉~~

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

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

相关文章

《MySQL数据库从零搭建到高效管理|库的基本操作》

目录 一、数据库的操作 1.1 展示数据库 1.2 创建数据库 1.3 使用数据库 1.4 查看当前数据库 1.5 删除数据库 1.6 小结 二、常用数据类型 2.1 数值类型 2.2 字符串类型 2.3 日期类型 一、数据库的操作 打开MySQL命令行客户端,安装完MySQL后会有两个客户端…

mac使用Homebrew安装miniconda(mac搭建python环境),并在IDEA中集成miniconda环境

一、安装Homebrew mac安装brew 二、使用Homebrew安装miniconda brew search condabrew install miniconda安装完成后的截图: # 查看是否安装成功 brew list环境变量(无需手动配置) 先执行命令看能不能正常返回,如果不能正常…

Linux基础开发工具—vim

目录 1、vim的概念 2、vim的常见模式 2.1 演示切换vim模式 3、vim命令模式常用操作 3.1 移动光标 3.2 删除文字 3.3 复制 3.4 替换 4、vim底行模式常用命令 4.1 查找字符 5、vim的配置文件 1、vim的概念 Vim全称是Vi IMproved,即说明它是Vi编辑器的增强…

【C++】数据结构 队列的实现

本篇博客给大家带来的是用C语言来实现数据结构的队列的实现! 🐟🐟文章专栏:数据结构 🚀🚀若有问题评论区下讨论,我会及时回答 ❤❤欢迎大家点赞、收藏、分享! 今日思想:你…

macOS 终端优化

macOS 安装、优化、还原、升级 Oh My Zsh 完全指南 🚀 Oh My Zsh 是 macOS 终端增强的利器,它能提供强大的自动补全、主题定制和插件支持,让你的终端更高效、更炫酷。本文将全面介绍 如何安装、优化、还原、重新安装和升级 Oh My Zsh&#x…

大语言模型-1.2-大模型技术基础

简介 本博客内容是《大语言模型》一书的读书笔记,该书是中国人民大学高瓴人工智能学院赵鑫教授团队出品,覆盖大语言模型训练与使用的全流程,从预训练到微调与对齐,从使用技术到评测应用,帮助学员全面掌握大语言模型的…

Flutter 按钮组件 TextButton 详解

目录 1. 引言 2. TextButton 的基本用法 3. 主要属性 4. 自定义按钮样式 4.1 修改文本颜色 4.2 添加背景色 4.3 修改按钮形状和边距 4.4 样式定制 5. 高级应用技巧 5.1 图标文本组合 5.2 主题统一配置 5.3 动态交互 6. 性能优化与注意事项 6.1 点击区域优化 6.…

Qt 数据库操作(Sqlite)

数据库简介 关于数据库的基础知识这里就不做介绍了,相关博客可以查看: SQL基础知识 数据库学霸笔记 上面博客都写的比较详细,本文主要介绍如何使用Qt进行数据库相关操作,数据库分为关系型数据库和非关系型数据,关系…

vue 自行封装组件,类似于el-tree组件结构

背景: 接口返回是平面数组,需要经过分类处理,转成多维数组,以满足封装组件的数据结构。 有用到插件lodash。 import { groupBy, flattenDeep } from "lodash"; 效果展示: 处理数据: 对于接口返回…

信奥赛CSP-J复赛集训(模拟算法专题)(10):P2356 弹珠游戏

信奥赛CSP-J复赛集训(模拟算法专题)(10):P2356 弹珠游戏 题目背景 题目描述 MedalPluS 和他的小伙伴 NOIRP 发掘了一个骨灰级别的游戏——超级弹珠。 游戏的内容是:在一个 n n n \times n nn 的矩阵里,有若干个敌人,你的弹珠可以摧毁敌人,但只能攻击你所在的行、…

Windows 图形显示驱动开发-WDDM 3.2- WDDM 功能的内核模式测试

概述 在某些情况下,引入了基于 WDDM 或 MCDM 的新计算设备,并且这些设备的驱动程序不支持 D3D 运行时。 为了帮助验证此类驱动程序,将功能添加到 Dxgkrnl ,以便仅使用内核模式 thunk 进行验证;也就是说,无需涉及 D3D …

SpringBoot 入门--工程创建

IDEA创建SpringBoot项目 SpringBoot 3.1.5 需要java17 ① 创建Maven工程 ② 导入spring-boot-stater-web起步依赖 ③ 编写Controller ④ 提供启动类 1.打开IDEA,新建项目 2.点击下一步,并勾选web开发相关依赖 3.勾选完点击Create,然后配置…

Rust 之一 基本环境搭建、各组件工具的文档、源码、配置

概述 Rust 是一种强调性能、类型安全和并发性的通用编程语言。它强制执行内存安全,使用其特有的所有权机制,而无需传统的垃圾收集器。Rust 不强制执行编程范式,但受到函数式编程思想的影响。 最初是由 Mozilla 员工 Graydon Hoare 在 2006 年…

《基于机器学习的DDoS攻击检测与防御系统设计与实现》开题报告

目录 一、课题的研究目的和意义 1.1课题背景 1.2课题目的 (1)提高DDoS攻击检测的准确性 (2)加强DDoS攻击的防御能力 (3)提升网络安全防护的技术水平 1.3课题意义 (1)理论意义…

【2025】基于springboot+vue的汽车销售试驾平台(源码、万字文档、图文修改、调试答疑)

基于 Spring Boot Vue 的汽车销售试驾平台通过整合前后端技术,实现了汽车销售和试驾预约的信息化和智能化。系统为管理员和用户提供了丰富的功能,提升了客户体验和销售效率,增强了数据分析能力,为汽车销售行业的发展提供了新的途…

C语言每日一练——day_5

引言 针对初学者,每日练习几个题,快速上手C语言。第五天。(连续更新中) 采用在线OJ的形式 什么是在线OJ? 在线判题系统(英语:Online Judge,缩写OJ)是一种在编程竞赛中用…

【社区投稿】深入再谈智能指针、AsRef引用与Borrow借用

深入再谈智能指针、AsRef引用与Borrow借用 这是一个具有深度的技术主题。每次重温其理论知识&#xff0c;都会有新的领悟。大约 2 年前&#xff0c;我曾就这一技术方向撰写过另一篇短文《从类型转换视角&#xff0c;浅谈Deref<Target T>, AsRef<T>, Borrow<T&g…

串口通信函数汇总-ing

谢谢各位佬的阅读&#xff0c;本文是我自己的理解&#xff0c;如果您发现错误&#xff0c;麻烦请您指出&#xff0c;谢谢 首先谈谈我自己对于串口的理解&#xff0c;随便拿一个嵌入式的板子&#xff0c;它上面有两个引脚&#xff0c;一个是rx&#xff0c;一个是tx&#xff0c;r…

JVM垃圾回收面试题及原理

1. 对象什么时候可以被垃圾器回收 如果一个或多个对象没有任何的引用指向它了&#xff0c;那么这个对象现在就是垃圾&#xff0c;如果定位了垃圾&#xff0c;则有可能会被垃圾回收器回收 如果要定位什么是垃圾&#xff0c;有两种方式来确定 引用计数法可达性分析算法 1.1 …

Flutter 小技巧之通过 MediaQuery 优化 App 性能

许久没更新小技巧系列&#xff0c;温故知新&#xff0c;在两年半前的《 MediaQuery 和 build 优化你不知道的秘密》 我们聊过了在 Flutter 内 MediaQuery 对应 rebuild 机制&#xff0c;由于 MediaQuery 在 MaterialApp 内&#xff0c;并且还是一个 InheritedWidget &#xff0…