【项目技术介绍篇】若依开源项目RuoYi-Cloud前端技术介绍

作者介绍：本人笔名姑苏老陈，从事JAVA开发工作十多年了，带过大学刚毕业的实习生，也带过技术团队。最近有个朋友的表弟，马上要大学毕业了，想从事JAVA开发工作，但不知道从何处入手。于是，产生了写一个博客专栏想法，介绍当前互联网企业JAVA项目开发如何快速入门。

本文收录于《30天企业JAVA项目开发实战入门》专栏，该专栏内容以当前互联网软件企业中的项目实战为线索，介绍企业JAVA项目开发中涉及到的开发流程、技术、工具、规范要求等等。帮助想从事JAVA开发的大学生或新人，更快的、更好的入门JAVA后端开发工作。

一、前言

由于本专栏项目实战学习，是以若依开源项目RuoYi-Cloud为示例。所以，本文介绍一下若依开源项目RuoYi-Cloud前端技术；

• 若依项目RuoYi-Cloud简介

  若依项目RuoYi-Cloud 是一个 Java EE 企业级的开源免费的快速开发平台，是一个基于Spring Boot、Spring Cloud & Alibaba的微服务的权限管理系统。如果想快速的开发一个Java EE 企业级项目，可以在若依项目的基础上，开发定制自己的项目。尤其是如果要开发一个后台管理系统，由于若依开源项目中已经内置完整的权限管理模块，所以能够更加快速的完成项目的开发工作；

• 若依项目RuoYi-Cloud技术选型

  采用前后端分离的模式，微服务版本前端基于 Vue/Element UI ；
  后端采用Spring Boot、Spring Cloud & Alibaba微服务架构；
  注册中心、配置中心选型Nacos，权限认证使用Redis；
  流量控制框架选型Sentinel，分布式事务选型Seata；

• 若依项目官方网站和文档地址

  若依官网地址：https://www.ruoyi.vip/

  若依演示地址：https://vue.ruoyi.vip/login

  技术文档地址：https://doc.ruoyi.vip/ruoyi-cloud/

  代码下载地址：https://gitee.com/y_project/RuoYi-Cloud

二、技术介绍

2.1 工程结构介绍

如下是若依项目RuoYi-Cloud工程前端工程ruyi-ui的目录结构：

├── build                      // 构建相关  
├── bin                        // 执行脚本
├── public                     // 公共文件
│   ├── favicon.ico            // favicon图标
│   └── index.html             // html模板
├── 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

2.2 技术架构介绍

若依项目RuoYi-Cloud前端工程ruyi-ui使用的技术栈主要包括ES6、vue、vuex、vue-router、vue-cli、axios、element-ui；（PS：vue官网或社区地址：https://cn.vuejs.org/）

• ES6：Javascript的新版本，ECMAScript6的简称。利用ES6我们可以简化我们的JS代码，同时利用其提供的强大功能来快速实现JS逻辑。
• vue-cli：Vue的脚手架工具，用于自动生成Vue项目的目录及文件。
• vue-router： Vue提供的前端路由工具，利用其我们实现页面的路由控制，局部刷新及按需加载，构建单页应用，实现前后端分离。
• vuex：Vue提供的状态管理工具，用于统一管理我们项目中各种数据的交互和重用，存储我们需要用到数据对象。
• axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js中发送HTTP请求。它支持各种HTTP请求方法，如GET、POST、PUT、DELETE等，并且可以拦截请求和响应，设置请求超时等功能。它也可以与现代前端框架（如Vue.js、React、Angular等）进行集成。
• element-ui：基于MVVM框架Vue开源出来的一套前端ui组件。
• npm：node.js的包管理工具，用于统一管理我们前端项目中需要用到的包、插件、工具、命令等，便于开发和维护。

三、总结

以上，本文介绍了若依开源项目RuoYi-Cloud中前端项目的工程结构。另外，对技术框架做了简单的介绍。一般，在实际项目开发中，都会采用前后端分离模式，前端页面由前端开发工程师负责开发，后端接口由后端JAVA开发工程师负责开发。所以，前端技术，作为后端开发人员，适当的了解一下即可。(PS：推荐一个vue入门教程，https://www.runoob.com/vue2/vue-tutorial.html)

如果您对文章中内容有疑问，欢迎在评论区进行留言，我会尽量抽时间给您回复。如果文章对您有帮助，欢迎点赞、收藏。您的点赞，是对我最大的支持和鼓励，谢谢 :-）