ruoyi(若依)框架使用说明(前后端分离)

@TOC

框架介绍

本身是一个优秀的简单的后台管理系统框架,前端(Vue,ElementUI),后端(Spring Boot、Spring Security、Redis & Jwt),本身可以直接拉下来直接使用.它的强大之处在于代码自动生成器的使用,可以根据数据库的表对应生成全套前后端代码,代码植入后可以直接使用,复杂业务只需在基础代码上进行修改增强即可.减少了重复代码的编写,提高了开发效率.

详情请访问:https://gitee.com/y_project/RuoYi-Vue

框架启动步骤

一.克隆源码到本地

git clone https://gitee.com/y_project/RuoYi-Vue.git

二.执行sql

执行RuoYi-Vue/sql文件夹下的sql,将数据导入到mysql数据库

三.后端系统运行

• 将项目导入idea,修改ruoyi-admin模块yml文件里面DataSource:mysql信息和redis信息
• mvn install
• 运行RuoYiApplication

四.前端系统运行

1. 进入RuoYi-Vue/ruoyi-iu文件夹
2. shift+鼠标右键打开powershell窗口(或者打开cmd窗口)
3. npm install (前提是电脑上安装了node.js)
4. npm run dev
5. 浏览器访问 http://localhost:80

代码生成示范

• 在数据中建立goods表

• 讲goods表导入

• 编辑导入表信息

• 代码生成及植入

  1. 执行sql
  2. cv大法,讲前后端代码复制进相应文件夹
  3. 前端 npm install 然后 npm run dev
  4. 后端重启

• 效果展示

前端访问后端接口IP地址设置

配置前端访问后端接口ip地址:编辑/ruoyi-ui/vue.config.js文件内的tartget属性

proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8089`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    }

备注

此框架自动代码生成可减少开发中重复代码的编写(单表增删改查),同时内部封装了一系列实用工具类可供参考和使用.实现了系统监控,封装了quartz定时任务和swagger接口文档管理框架.可以作为公司代码规范及模板.