在一个Nodejs项目中同时实现“后台管理系统”和“前台应用”
在一个Nodejs项目中同时实现“后台管理系统”和“前台应用”
微信一起点菜
一个月紧张而愉快的开发又过去了。在这个月,开发了一个微信一起点菜
项目,用来再次验证CabloyJS 全栈
框架定制开发的灵活性和扩展性。实践再次证明,使用 CabloyJS 全栈框架开发项目确实可以做到多快好省
。因为:
-
只需一个项目,既可同时实现“后台管理系统”和“前台应用
-
只需一个项目,既可同时跨端 pc 、mobile 。mobile 端是接近原生体验
下面就以微信一起点菜
为例:
-
前台点菜应用:https://test.cabloy.com/?appKey=diancai-h5%3AappDianCaiWechatH5&appIsolate=true
-
后台商家管理系统:https://test.cabloy.com/
-
以上两个链接可以分别用 pc 和 mobile 打开。
全新交互体验,全新架构设计,试过便知
截图
后台商家管理系统
PC 端
Mobile 端
前台点菜应用
PC 端
Mobile 端
不太理解所谓的只需一个项目就能实现 xxx ,可能是最近几年流行所谓的分离,其实七八年前单体架构流行时,很多复杂的应用,前后端也就一个包。。。。
这个 UI 感觉像是上个世纪的产物。。。
文艺复兴是吧
本想抄了,用其它语言练练手,发现没开源
感觉界面需要再设计下
转了十几秒转不开,果断关闭
地址打不开,页面好老,感觉是那种小型外包给小商店做的
没搞明白啥叫一个项目?一个工程?前后端分离的项目也可以放在一个工程下面,一起打包
iphone 初代 ui 的感觉,一晃眼已经超过 10 年
感觉是 JSP 和 sever 的那种模式?
3 分钟都没打开
CabloyJS 全栈框架是免费开源的(超过 12000 次 commits ),这个“微信一起点菜”是基于 CabloyJS 的应用,只需很少的费用即可获取源码,还有配套视频。参见:CabloyJS 全栈框架: https://github.com/zhennann/cabloy ,微信点菜源码: https://store.cabloy.com/zh-cn/articles/bz-diancai.html
就是一套代码,采用前后端分离设计,同时支持后台和前台应用的开发,同时适配 mobile 和 pc 。因为这是首创的全栈框架设计,所以一开始不是很好理解。其实,这才是最自然、最舒适的开发体验。
这是测试网站,资源有效,目前访问的人比较多,所以有点慢
第二张图有点设计感
文艺复兴!
Django:喵喵
界面设计的很有意思呀,还有应用的逻辑是怎么区分的呢
asp php jsp 时代,不一直都是这样的吗
可以说是螺旋式上升。CabloyJS 虽然代码在一个项目当中,但仍然是前后端分离架构,内置完善的模块化体系。整个项目分为若干个业务模块。所有前端和后端代码都是在业务模块内部进行开发。这样解耦效果更好,心智负担更低。此外,还内置基于 Redis 的分布式组件(缓存、定时任务、队列、系统启动项、广播,等等)、内置原创的 NodeJS 工作流引擎,内置基于 WebSocket 的消息推送系统,等等。
因此,基于 CabloyJS 全栈框架开发一个类似“微信一起点菜”的应用非常便捷,开发体验非常顺畅,质量也能得到保障。
在一个项目中,可以创建多个应用。不同的应用有单独的配置,包括页面整体布局、菜单布局、主页布局、个人信息页面布局,等等。因此,可以同时提供“后端用的商家管理端”和“前端用的点菜应用”。
从概念上来说,“模块、套件、应用”,是 CabloyJS 应对大型项目开发的三架马车。“模块、套件”是在物理层面上对代码进行组织。“应用”是在逻辑层面上对界面交互进行布局,面向不同终端用户提供不同的界面组合。相关文档,请参见: https://cabloy.com/zh-cn/articles/app-introduce.html
不是 JSP server 的模式,参见 #22
Django 只有应用的概念,而 CabloyJS 提供模块、套件和应用三架马车,代码组织和界面布局更加灵活,参见 #23
include 不就行了
Django 中的应用相当于 CabloyJS 中模块的概念。比如,有一个 ERP 系统,可以有多个套件:OA 、CRM 、HR 、电商等。每个套件有多个模块,然后每个套件可以提供多个应用。每个应用对应着不同的界面布局,供不同场景、不同用户使用。
新版已经采用 CDN 加速了。在 CabloyJS 中配置 CDN 非常便捷,请参见文档: https://cabloy.com/zh-cn/articles/qcloud-cos.html
在一个Node.js项目中同时实现“后台管理系统”和“前台应用”,可以采用以下结构:
-
项目结构:
my-project/ ├── backend/ # 后台管理系统 │ ├── server.js # 后台服务器 │ ├── routes/ # 后台路由 │ └── ... ├── frontend/ # 前台应用 │ ├── public/ # 静态文件 │ ├── src/ # 源代码 │ │ ├── index.js # 入口文件 │ │ └── ... │ ├── package.json # 前台依赖 │ └── ... ├── package.json # 项目依赖(主要安装nodemon, express等) └── .env # 环境变量文件
-
后端实现: 在
backend/server.js
中创建一个Express服务器,处理后台API请求。const express = require('express'); const app = express(); const PORT = process.env.PORT || 3000; app.use(express.json()); // 引入后台路由 app.use('/admin', require('./routes/admin')); app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); });
-
前端实现: 在
frontend
文件夹中创建一个React或其他前端框架项目,使用create-react-app
快速启动。npx create-react-app frontend cd frontend npm start # 启动开发服务器
-
运行项目:
- 后台管理系统:在
backend
文件夹中运行nodemon server.js
。 - 前台应用:在
frontend
文件夹中运行npm start
。
- 后台管理系统:在
这样,你就可以在一个Node.js项目中同时实现后台管理系统和前台应用了。