若依框架使用教程

1、若依介绍

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

低代码诞生的目的是将可重复性的编程工作通过平台实现，将开发人员从没有技术含量的增删改查开发中解放出来，让其专注于更有价值的开发工作

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

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

常见产品有：

明道云、Noohle（怒吼）、简道云
若依/RuoYi、 jeecg-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会自动加载Maven依赖包，初次加载会比较慢（根据自身网络情况而定）

2.2.3MySQL配置

导入sql

1.创建数据库

create database ry_vue;

2.执行下图sql

3.导入数据库表

配置文件

在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: 数据库密码

2.2.4 Redis配置

启动redis

2.2.5 启动项目

访问http://localhost:8080

2.3前端运行

idea打开前端工程

# 安装依赖
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

源码结构

├── 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后端代码

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      // 其他模块