作者介绍:本人笔名姑苏老陈,从事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 (账号:admin/admin123)
技术文档地址: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)
如果您对文章中内容有疑问,欢迎在评论区进行留言,我会尽量抽时间给您回复。如果文章对您有帮助,欢迎点赞、收藏。您的点赞,是对我最大的支持和鼓励,谢谢 :-)