若依框架使用教程

1、若依介绍

1.1什么是低代码开发平台?

低代码诞生的目的是将可<font style="color:rgb(51, 51, 51);background-color:rgb(248, 248, 248);">重复性的编程</font>工作通过<font style="color:rgb(51, 51, 51);background-color:rgb(248, 248, 248);">平台实现</font>,将开发人员从没有技术含量的<font style="color:rgb(51, 51, 51);background-color:rgb(248, 248, 248);">增删改查</font>开发中解放出来,让其专注于更有价值的开发工作

例如:数据库设计、流程设计、API核心开发、业务逻辑开发等工作。

所以,低代码开发平台可以提高开发效率

常见产品有:

  • 明道云Noohle(怒吼)简道云
  • 若依/RuoYijeecg-boot人人开源 / renren-fast

1.2 若依是什么?

RuoYi-Vue 是一个轻量级快速开发平台,毫无保留给个人及企业免费使用。

基于经典技术组合(Spring Boot、Spring Security、MyBatis、Jwt、Vue、Element)

内置模块如:部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。

若依官网:http://ruoyi.vip(opens new window)

演示地址:http://vue.ruoyi.vip(opens new window)

代码下载:https://gitee.com/y_project/RuoYi-Vue

总结:

1)若依提供了企业级后台管理系统基础通用的功能,免去开发者去搭建和配置繁琐项目环境

2)提供了代码生成技术:通过数据库表就可以自动生成(java后端代码,前端vue页面)

1.3 在哪里用

1)针对于企业项目,很多公司都在基于若依平台进行二次开发,市场占有率高

2)计算机相关专业学生福利,基于若依平台快速搭建的各种管理系统,高效完成毕设

1.4 今日目标

使用若依框架开发一套外卖管理系统

2.平台搭建

2.1系统环境要求

  • JDK >= 1.8
  • MySQL >= 5.7
  • Maven >= 3.0
  • Node >= 12
  • Redis >= 3

2.2 后端运行

2.2.1下载git源码

通过idea下载git源码,gitee地址:https://gitee.com/y_project/RuoYi-Vue.git

2.2.2 初始化工程

idea会自动加载<font style="color:rgb(51, 51, 51);background-color:rgb(248, 248, 248);">Maven</font>依赖包,初次加载会比较慢(根据自身网络情况而定)

2.2.3MySQL配置

导入sql

1.创建数据库

sql 复制代码
create database ry_vue;

2.执行下图sql

3.导入数据库表

配置文件

<font style="color:rgb(51, 51, 51);background-color:rgb(248, 248, 248);">ruoyi-admin</font>模块下,修改数据库连接,编辑<font style="color:rgb(51, 51, 51);background-color:rgb(248, 248, 248);">resources</font>目录下的<font style="color:rgb(51, 51, 51);background-color:rgb(248, 248, 248);">application-druid.yml</font>

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

2.2.4 Redis配置

启动redis

2.2.5 启动项目

访问http://localhost:8080

2.3前端运行

idea打开前端工程

bash 复制代码
# 安装依赖
npm install

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

# 启动服务
npm run dev

访问http://localhost:80

3.源码分析

3.1 前端代码

前端技术栈 ES6、vue、vuex、vue-router、vue-cli、axios、element-ui

源码结构

bash 复制代码
├── build                      // 构建相关  
├── bin                        // 执行脚本
├── public                     // 公共文件
│   ├── favicon.ico            // favicon图标
│   └── index.html             // html模板
│   └── robots.txt             // 反爬虫
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件
│   ├── directive              // 全局指令
│   ├── layout                 // 布局
│   ├── plugins                // 通用方法
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── utils                  // 全局公用方法
│   ├── views                  // view
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   ├── permission.js          // 权限管理
│   └── settings.js            // 系统配置
├── .editorconfig              // 编码格式
├── .env.development           // 开发环境配置
├── .env.production            // 生产环境配置
├── .env.staging               // 测试环境配置
├── .eslintignore              // 忽略语法检查
├── .eslintrc.js               // eslint 配置项
├── .gitignore                 // git 忽略项
├── babel.config.js            // babel.config.js
├── package.json               // package.json
└── vue.config.js              // vue.config.js

前端跨域

3.2后端代码

markdown 复制代码
om.ruoyi     
├── common            // 工具类
│       └── annotation                    // 自定义注解
│       └── config                        // 全局配置
│       └── constant                      // 通用常量
│       └── core                          // 核心控制
│       └── enums                         // 通用枚举
│       └── exception                     // 通用异常
│       └── filter                        // 过滤器处理
│       └── utils                         // 通用类处理
├── framework         // 框架核心
│       └── aspectj                       // 注解实现
│       └── config                        // 系统配置
│       └── datasource                    // 数据权限
│       └── interceptor                   // 拦截器
│       └── manager                       // 异步处理
│       └── security                      // 权限控制
│       └── web                           // 前端控制
├── ruoyi-generator   // 代码生成(可移除)
├── ruoyi-quartz      // 定时任务(可移除)
├── ruoyi-system      // 系统代码
├── ruoyi-admin       // 后台服务
├── ruoyi-xxxxxx      // 其他模块

登录案例讲解

4.二次开发

4.1菜单导航

具体内容如下:

4.2代码生成

步骤说明

1、准备二次开发的业务表结构和数据

2、登录系统(系统工具 -> 代码生成 -> 导入对应表)

3、代码生成列表中找到需要表(可预览、编辑、同步、删除生成配置)

4、点击生成代码会得到一个<font style="color:rgb(51, 51, 51);background-color:rgb(248, 248, 248);">ruoyi.zip</font>执行<font style="color:rgb(51, 51, 51);background-color:rgb(248, 248, 248);">sql</font>文件,按照包内目录结构复制到自己的项目中即可

代码生成支持编辑、预览、同步

  • 预览:对生成的代码提前预览,防止出现一些不符合预期的情况。
  • 同步:对原表的字段进行同步,包括新增、删除、修改的字段处理。
  • 修改:对生成的代码基本信息、字段信息、生成信息做一系列的调整。
  • 另外多模块所有代码生成的相关业务逻辑代码在<font style="color:rgb(119, 119, 119);background-color:rgb(248, 248, 248);">ruoyi-generator</font>模块,不需要可以自行删除模块。

4.2.1 业务表导入数据库

外卖核心业务.sql

4.2.2导入对应表

登录系统(系统工具 -> 代码生成 -> 导入对应表

4.2.3编辑业务表

代码生成列表中找到需要表(可预览、编辑、同步、删除生成配置)

category

dish

4.2.4 字典数据

4.3代码导入

SQL导入

前端代码导入

后端代码导入

相关推荐
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
迷糊的『迷』1 小时前
vue-axios+springboot实现文件流下载
vue.js·spring boot
web135085886351 小时前
uniapp小程序使用webview 嵌套 vue 项目
vue.js·小程序·uni-app
陈大爷(有低保)1 小时前
uniapp小案例---趣味打字坤
前端·javascript·vue.js
cronaldo912 小时前
研发效能DevOps: Vite 使用 Element Plus
vue.js·vue·devops
百罹鸟2 小时前
【vue高频面试题—场景篇】:实现一个实时更新的倒计时组件,如何确保倒计时在页面切换时能够正常暂停和恢复?
vue.js·后端·面试
hanbarger3 小时前
mybatis框架——缓存,分页
java·spring·mybatis
breaksoftware3 小时前
低代码开源项目Joget的研究——基本概念和应用
低代码
编程百晓君4 小时前
一文解释清楚OpenHarmony面向全场景的分布式操作系统
vue.js
暴富的Tdy4 小时前
【CryptoJS库AES加密】
前端·javascript·vue.js