在线生成 html 页面,细说在线版H5页面生成器

上次说得不够仔细，今天继续，不要停

Github: 传送门

演示地址：传送门

目录说明

阅读前准备

概要

后台代码简读

前端代码简读

待完善功能

总结

阅读前准备

了解node

了解express框架

了解mongodb以及node 连接框架 mongoose

了解nunjucks模板

概要

设计思路和主要实现步骤都写在这里：从零打造在线版H5页面生成器

设计思路和主要实现步骤都是正经而且值得借鉴的(有点不谦虚哈)，但是由于赶时间以及玩的心态作祟，具体的代码细节上就显得有点混乱尴尬了，主要体现在这几个方面：

项目结构随性

未使用打包工具对代码进行压缩合并以及其它预编译处理，违背现在前端工程化的潮流，webpack.config.js放那唬人，就当是方便场景代码生成后阅读吧

可读性低，难以维护的模板代码

只兼容高版本的浏览器，建议在chrome上运行。由于自己很傲娇的使用formData来封装了图片上传插件，所以可以肯定的是，ie10以下的浏览器是肯定无法上传图片的

很多功能都没有完善，因为懒

“自我批评这么诚恳，咋不见你改？”

拜托，我忙啊，给我点动力呗？我看有没有的

点赞！

点赞！

点赞！

保持楼上队形

打赏！

打赏！

打赏！

如若不然，就请给颗星吧

安装使用

安装mongodb

npm install

npm start

目录结构说明

|-- output --------静态资源目录(express static)

|--client --------前端界面对应静态资源

|--css --------前端css目录

|--images --------前端图片目录

|--js --------前端js目录

|--projects --------保存后h5场景代码输出目录

|--projectId --------根据项目id创建的目录

|--css --------输出代码的css样式

|--images --------输出代码的图片目录

|--js --------输出代码的js目录

|--view.html --------html

|--temp --------预览时候h5场景代码输出的临时目录

|--upload --------图片上传地址

|-- server --------服务器端代码

|--db --------数据库相关

|--dao --------数据库操作

|--models --------mongoose模型

|--config.js --------数据库链接配置文件

|--connect.js --------数据库连接

|--factory --------h5代码构建工厂

|--static --------h5场景代码静态资源(原装复