这是我参与「第四届青训营 」笔记创作活动的第4天

本文初步对大项目进行整理，大致整理出需要的功能，便于组内队员对分工，在实施过程中再去细化功能，最后完成low-code平台的搭建。

项目分为三大模块

内容管理系统

登陆页面

登陆页from表单校验 用户信息&登陆权限信息缓存

自定义页面管理列表：

table组件实现

自定义详情页面：

左侧组件列表

• 组件的拖拽事件
• store数据存储

中间内容区域（iframe实现）

• iframe实现通讯
• 左侧组件拖动到页面预览区域的算法实现
• 左侧组件离开预览区域的实现
• 完成添加组件的功能

右侧编辑区域

• 顶部标题编写
• 上传组件模块
• 页面内容编辑组件
• 时间控件
• 动态组件实现
• 组件编辑内容区域实现
• 样式完善

页面上架预览的功能实现

h5解析平台

将自定义页面渲染为H5页面，自定义详情页面的中间内容区域所展示的就是该部分

• 与自定义详情页面进行通信
• 获取页面详情api接口定义
• 活动页面预览二维码生成

Node Express服务端

用数据库来管理之前编辑好的页面。

• mysql数据表的设计、
• 实现业务接口功能：新增页面数据接口、编辑页面数据接口、活动页面删除接口

项目的启动

项目包含三个部分：

1. cms-manage管理配置页面系统
2. crs h5显示界面，嵌入cms-manage中显示，也可以完成预览
3. cms-node 服务端部分 项目需要分别启动这三个文件

cms-manage

1. 先配置好vue脚手架，安装vue-cli@4.5.10版本
2. 终端执行npm install
3. 终端执行npm start

crs

1. 保证已经全局安装vue-cli@4.5.10版本
2. 终端执行npm install
3. 终端执行npm start

cms-node

1. 安装mysql
2. 创建cms数据库，执行cms.sql脚本
3. 删除 package.json中"atlas": "0.0.1"
4. npm install
5. npm --registry maven.fuchuang-auto.com/repository/… install atlas
6. npm start