简介
StartCMS是一个基于ThinkPHP6.0+、ElementUI、MicroApp的极速微利用开发框架
前端不限技术栈,反对Vue2、Vue3、Vite、React、Rangular...
后端不限度语言,反对PHP、Java、Node、Python、Go、C#...
一、本文接续上一篇文章,介绍如何应用startCMS进行利用开发
如果您对StartCMS有纳闷,倡议先浏览下方文章来理解更多。浏览本文前倡议先浏览上面两篇文章,否则可能会看不明确一些操作。
微前端框架StartCMS, 一个基于微前端架构的极速微利用开发框架,开源框架
微前端框架StartCMS,如何启动框架,startCMS启动教程
二、框架目录
如果您没有看过官网文档 STARTCMS,请看下方目录介绍,详情可进入官网文档查看。
www WEB部署目录├─app 利用目录│ ├─app1 利用1│ ├─app2 利用2│ ├─app3... ├─base 前端基座工程(可挪动到任意中央进行前后端拆散开发)├─config 系统配置目录├─core 系统核心目录├─data 数据存储目录├─extend 扩大类库目录├─runtime 利用的运行时目录(可写,可定制)├─vendor Composer类库目录├─web 前端基座目录(由基座工程目录编译生成)├─.env.default 环境示例文件├─.gitignore Git配置文件├─.htaccess Apache配置文件├─composer.json Composer配置文件├─deploy.sh 自动化部署脚本├─index.php 零碎入口文件├─start 命令行入口
二、如果基于PHP开发
因为startCMS框架自身基于PHP开发,如果您也刚好应用PHP开发,那您能够应用命令行生成一个app利用。生成命令为
php start make:app 利用名
执行前app目录中只有.gitignore文件,执行 php start make:app test 后,app目录会生成test利用。如下图所示。
如图所示,test利用中存在3个目录以及app.json,文件controller,model,service这里不做阐明,次要解说app.json,上面是app.json配置信息
{ "app": "", // 利用标识(默认缺省,装置时自动识别) "app_title": "", // 利用名称(默认缺省,装置时自动识别) "group": "站点配置", // 配置分组(可选) "title": "站点名称", // 配置名称 "type": "input", // 输出类型 "field": "title", // 字段名称(确保同一利用内惟一) "value": "StartCMS", // 字段值(可选) "options": [], // 配置选项(可选) "validate": [], // 验证规定(可选) "props": {}, // 配置属性(可选) "default": "", // 默认值(可选) "remark": "", // 备注(可选) "locking": 0, // 是否锁定(禁止编辑更新) "protected": 0 // 是否爱护(前端无奈获取)}
下图是test主动生成的配置信息
启动框架进入零碎,不晓得怎么启动的,倡议先看下方文章
微前端框架StartCMS,如何启动框架,startCMS启动教程
启动零碎后,点击关上右上角利用配置
如果app中没有利用,那么此时利用核心为空。
创立test利用后,表格中会呈现test利用的信息,app.json中能够批改test利用信息,具体请查看官网文档。
到这一步,后端工作根本筹备实现。点击启用装置利用。装置胜利后刷新页面
刷新后装置的利用就会呈现在左侧侧边栏了
因为短少前端工程,以后的test利用点击是没有内容的,以vue2示例,来介绍如何构建前端工程。关上终端,进入test利用,应用命令vue create vue2创立vue2模板
创立实现后批改vue.config.js,因为此时框架启动在8080端口,且test利用也在框架外部,并没有启动其余的服务器,所以配置代理以及批改动态资源门路如下,如果利用须要申请资源是其余服务器,更改代理即可。
module.exports = defineConfig({ publicPath: '/app/test/view/', transpileDependencies: true, devServer: { port: port, open: false, overlay: { warnings: false, errors: true }, proxy: { [process.env.VUE_APP_BASE_API]: { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '/' } } }, headers: { 'Access-Control-Allow-Origin': '*' } }})
批改实现后应用 npm run build 打包,这时会生成dist文件夹,将dist文件夹重命名为view,挪动至test目录下,或者手动创立view目录,将dist下所有文件复制或挪动到view中。
这时咱们的动态资源,也就是 index.html 曾经筹备实现了,但这个时候,点击test利用如下
谬误的起因是因为拜访 http://localhost:8080/web/test 时,服务器并没有做出回应,关上controller目录中的index.php,退出下方代码来渲染 index.html
刷新页面,就能够看到vue的模板页面了
实际上每一个利用的外围就是controller,model,service,view,app.json这些文件
view即打包后的目录也是前端代码,app.json是利用配置,controller,model,service形成服务器响应前端。这些加起来也就形成了一个独立的利用。
三、如果后端应用java,python或其余语言
- 如果后端曾经上线服务器,那么只须要在前端配置代理与动态资源门路,在后端那边渲染前端html页面即可,后端的代码也能够不放在框架外部。
- 如果是本地开发,并未上线,以java为例,无论您的后端代码是否在框架利用内,您只须要启动您的java后端,开启一个端口,而后将这个端口替换掉前端 vue.config.js 中的8080即可,前万不要遗记配置动态资源门路,千万不要遗记渲染 index.html,并且不须要加多余门路,渲染 /index 即可,框架基座会主动找到利用下的view目录。
四、总结
startCMS框架的核心思想就是微前端,微利用,开发者能在同一个我的项目中应用不同语言,后端能够同时用java,python,PHP写,前端也能同时用vue,react,angular写。
比方一个商城零碎,有商品模块,订单模块。那么咱们能够把这两个模块做成利用,如果商品模块应用vue更容易,而订单模块应用react更好,按以前失常框架是无奈实现的。而startCMS能够实现这一点,并且,如果其中一个模块须要降级某个依赖包,而降级后又会对另一个模块产生影响,这时应用startCMS齐全不必放心。
startCMS次要解决以下问题:
1、随着我的项目迭代前端工程越来越宏大,难以保护 => 我的项目利用化,只须要保护利用。
2、跨团队或跨部门合作开发我的项目导致效率低下且受根底框架技术限度 => 利用化之后,每个利用都能够应用不同语言,不同框架。
3、不同业务模块须要应用不一样的依赖,随着时间推移依赖抵触重大且不反对增量降级 => 利用之间互相独立,互不依赖,降级模块时不必放心影响其余性能。
4、市场现有多模块零碎,后端尽管做到了模块化并前后端拆散,但前端工程实质上仍然属于单体架构。