Skip to main content

技术介绍

H5DS编辑器用到的主要技术有react，mobx，vite，node，eggjs,redis,mysql等打造的一款可视化的H5制作工具。项目对技术人员有一定的技术要求，请务必在掌握以上技术之后再阅读该技术文档，文档中并未列出每个方法和类的细节，如果有遇到相关的技术障碍，请联系我们的在线技术人员进行咨询。该文档主要用于帮助开发者进行二次开发入门使用，所以仅适合技术人员阅读。

前端相关技术​

React: v17.0.2  
Mobx: v5.15.4  
vite: v2.9.9  
node: v14.19.3 +  
yarn: v1.22.17 +

React: https://react.docschina.org/

Mobx: https://cn.mobx.js.org/

Vite: https://vitejs.cn/guide/

前端项目整体目录结构说明​

h5ds-web
    |-packages              子项目源码目录
        |- h5-admin         后台管理系统源码  
        |- h5-assets        项目中引用的公共资源  
        |- h5-editor        编辑器源码  
        |- h5-mobile        手机端源码  
        |- h5-plugins       编辑器插件源码  
        |- h5-preview       H5预览源码  
        |- h5-ui            UI组件  
        |- h5-web           前台系统源码  
        -.gitignore git     忽略提交配置文件  
        -packages.json      node 包配置文件  
        -yarn.lock          包锁定文件
    |-www                   打包后的文件目录
        ......              具体目录结构参考下方说明

后端相关技术​

node: v14.19.3+  
eggjs: v2.35.0 框架项目，基于阿里开源nodejs框架Eggjs 
mysql: v5.7+  （数据字段需要支持json类型；数据库、表、字段 字符集最好都设置为：utf8mb4 和 utf8mb4_bin）  
redis: v5.0+    
yarn: v1.22.17+

node: https://nodejs.org/docs/latest-v14.x/api/

eggjs: https://www.eggjs.org/zh-CN/

服务端项目整体目录结构说明​

h5ds-server
    |- app              项目源码目录，参考eggjs官网文档
        |- common       项目公共代码模块(常量定义、第三方lib、Helper帮助类、validate等）
        |- controller   controller
            |- admin    后台管理相关接口
            |- api      用户侧业务相关
            |- open     无需登录相关接口
            |- third    saas接入相关
            |- web      模板controller
            - base.js   基础controller
        |- extend       egg应用扩展能力
        |- middleware   接口中间件相关
        |- model        数据表模型
        |- public       对外资源文件目录
        |- queue        队列文件
        |- router       接口路由配置文件
        |- service      service
        |- view         模板视图
        - router.js     路由配置
    |- config           项目配置文件目录，区分环境  
        - config.default.js     项目默认基础配置文件
        - config.local.js       开发环境（yarn dev 启动）使用的配置文件  
        - config.prod.js        正式环境（yarn start 启动）使用的配置文件   
        - config.nacos.js       nacos作为配置管理时，使用该配置  
    |- database         项目数据库项目文件目录
        |- migrations   migrate数据迁移文件目录
        |- seeders      初始化数据目录
        |- sqls         sql数据文件目录
    |- logs             项目运行日志输入目录 
    -.env.example       项目配置文件样板，正式部署时，复制并重名为.env  
    -.gitlab-ci.yml     基于gitlab的cicd配置文件  
    -.gitignore         git忽略提交配置文件  
    -agent.js           agent文件，参考eggjs官网文档
    -app.js             项目入口文件，参考eggjs官网文档  
    -Dockerfile         项目容器化配置文件  
    -init_lock          项目是否执行初始化锁定文件，没有该文件时，系统启动时会自动执行相关初始化，初始化完成后会自动生成该文件，该文件路径可在.env中指定  
    -nacos.json         项目使用nacos管理配置信息时有效，将在启动时通过该配置加载nacos中的配置到系统env环境变量中  
    -packages.json      node 包配置文件  
    -yarn.lock          包锁定文件
    -README.md          项目开发使用说明文档

服务端开发使用说明​

关于server开发使用相关说明，请阅读h5ds-server/README.md文件