若伊(前后端分离)学习笔记

news2024/9/28 23:11:58

基础应用篇

1. 若伊搭建

若伊版本

若依官方针对不同开发需求提供了多个版本的框架，每个版本都有其独特的特点和适用场景：

~~前后端混合版本~~ ：RuoYi结合了SpringBoot和Bootstrap的前端开发框架，适合快速构建传统的Web应用程序，其中前端和后端代码在同一项目中协同工作。
前后端分离版本：RuoYi-Vue利用SpringBoot作为后端开发框架，与Vue.js结合，实现了前后端分离的开发模式。这种架构有助于提高开发效率，前后端可以独立开发和部署，更适合现代化的Web应用开发。
微服务版本：RuoYi-Cloud基于Spring Cloud & Alibaba微服务架构，为构建大型分布式系统提供了完整的解决方案。它支持服务发现、配置管理、负载均衡等微服务特性，适合需要高可扩展性和高可用性的企业级应用。
移动端版本：RuoYi-App采用Uniapp进行开发，结合了Vue.js的优势，可以实现跨平台的移动端应用开发。一次编写，多端运行的能力使得它成为开发iOS和Android应用的理想选择。
RuoYi-other（Vue3+ElementPlus+Vite）没有后端模块，可以适配前后端分离和微服务，默认前后端分离版使用的vue2

RuoYi-Vue(前后端分离，前端使用vue3版)

RuoYi-Vue版本，采用了前后端分离的单体架构设计:

软件环境：JDK、MySQL 、Redis 、Maven、Node
技术选型：Spring Boot、Spring Security、MyBatis、Jwt、Vue3、Element-Plus
官方地址：https://gitee.com/y_project/RuoYi-Vue
扩展地址：https://gitee.com/ys-gitee/RuoYi-Vue3

运行后端项目

Git下载

通过idea克隆若依源码，仓库地址:https://gitee.com/y_project/RuoYi-Vue.git

使用idea打开项目后，等待环境检查（主要是Maven下载项目依赖）

MySQL相关

导入sql

创建数据库create schema ry-vue;
执行下图的sql脚本文件，完成导入

配置信息

在ruoyi-admin模块下，编辑resources目录下的application-druid.yml，修改数据库连接

# 数据源配置
spring:
   datasource:
       type: com.alibaba.druid.pool.DruidDataSource
       driverClassName: com.mysql.cj.jdbc.Driver
       druid:
           # 主库数据源
           master:
               url: 数据库地址
               username: 数据库账号
               password: 数据库密码

在这里插入图片描述

Redis相关

启动Redis
配置信息

在ruoyi-admin模块下，resources目录下的application.yml，可以设置redis密码等相关信息

项目运行

在ruoyi-admin模块下，运行com.ruoyi.RuoYiApplication.java，出现如下图表示启动成功

访问http://localhost:8080

运行前端项目

Git下载

# 克隆vue3项目
git clone https://gitee.com/ys-gitee/RuoYi-Vue3.git

# 通过vscode打开项目
code ./RuoYi-Vue3

项目运行

# 安装依赖
npm install

# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 启动服务
npm run dev

在这里插入图片描述