在一个Nodejs项目中同时实现“后台管理系统”和“前台应用”

在一个Nodejs项目中同时实现“后台管理系统”和“前台应用”

微信一起点菜

一个月紧张而愉快的开发又过去了。在这个月,开发了一个微信一起点菜项目,用来再次验证CabloyJS 全栈框架定制开发的灵活性和扩展性。实践再次证明,使用 CabloyJS 全栈框架开发项目确实可以做到多快好省。因为:

  1. 只需一个项目,既可同时实现“后台管理系统”和“前台应用

  2. 只需一个项目,既可同时跨端 pc 、mobile 。mobile 端是接近原生体验

下面就以微信一起点菜为例:

  1. 前台点菜应用:https://test.cabloy.com/?appKey=diancai-h5%3AappDianCaiWechatH5&appIsolate=true

  2. 后台商家管理系统:https://test.cabloy.com/

  3. 以上两个链接可以分别用 pc 和 mobile 打开。全新交互体验,全新架构设计,试过便知

截图

后台商家管理系统

PC 端

dian-back-pc

Mobile 端

dian-back-mobile

前台点菜应用

PC 端

dian-front-pc

Mobile 端

dian-front-mobile-1

dian-front-mobile-2

dian-front-mobile-3


29 回复

不太理解所谓的只需一个项目就能实现 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项目中同时实现“后台管理系统”和“前台应用”,可以采用以下结构:

  1. 项目结构

    my-project/
    ├── backend/        # 后台管理系统
    │   ├── server.js   # 后台服务器
    │   ├── routes/     # 后台路由
    │   └── ...
    ├── frontend/       # 前台应用
    │   ├── public/     # 静态文件
    │   ├── src/        # 源代码
    │   │   ├── index.js # 入口文件
    │   │   └── ...
    │   ├── package.json # 前台依赖
    │   └── ...
    ├── package.json    # 项目依赖(主要安装nodemon, express等)
    └── .env            # 环境变量文件
    
  2. 后端实现: 在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}`);
    });
    
  3. 前端实现: 在frontend文件夹中创建一个React或其他前端框架项目,使用create-react-app快速启动。

    npx create-react-app frontend
    cd frontend
    npm start  # 启动开发服务器
    
  4. 运行项目

    • 后台管理系统:在backend文件夹中运行nodemon server.js
    • 前台应用:在frontend文件夹中运行npm start

这样,你就可以在一个Node.js项目中同时实现后台管理系统和前台应用了。

回到顶部