自动生成简单的落地页 auto-landing-page-client

公司每一版的app下载页结构变化都不大（可以说结构基本没有变化），所以突发奇想利用 ejs 和 nodejs 写了个小工具来自动生成。虽然目前看起来没有提升太多的效率，不过权当练手，说不定以后完善了，大家用起来都比较顺手呢（希望比较渺茫，捂脸...）

自动生成简单的落地页的小工具 auto-langding-page-client

auto-langding-page 是之前我写的一个小工具，专门用来自动构建简单的落地页（如app下载页，目前只适配移动端）。这是基于此的图形用户界面，使用更直观。

如何使用

• 前端运行端口 http://localhost:8001
• 后端运行端口 http://localhost:8000

1. 使用 concurrently 可以同时运行前端和后端的服务
   直接 npm run dev 即可同时启动前后端两个服务
2. 分别运行前端、后端

npm run dev:client
npm run dev:server

前端搭建思路 client

1. 使用vue搭建
2. 整体布局采用 display:table 来做水平和垂直的居中定位
3. 上传图片使用 <input type="file">
4. input 的 multiple 属性允许多选文件
5. 使用post方法和server端通信，并提交 DataForm 对象作为上传图片的载体

后端搭建思路 server

1. 使用koa2框架搭建
2. 接受前端上传的图片
3. 利用 auto-page-langding 生成网页文件，并打包打包成zip文件
4. 返回给客户端下载地址
5. 做了一点安全性处理，避免不同用户看到彼此上传的文件，对每个访问后端的用户提供一个随机字符串作为 cookie
6. 后端利用session (koa-session) 存储对应cookie的userId，并以此作为每个用户独有的文件下载路径

API

描述	接口	方法	备注
获取默认图片	/api/getDefaultImg	get	-
上传图片	/api/uploadFiles	post	上传使用DataForm
生成网页文件并打包成zip文件	/api/buildFiles	post	返回zip文件下载地址

目录结构

|-- app.js
|-- bin
|   |-- www
|-- conf
|   |-- constance.js
|-- controller
|   |-- buildFiles.js
|   |-- defaultFiles.js
|   |-- inputFiles.js
|-- lib
|   |-- auto-landing-page
|-- middleware
|   |-- checkUserId.js
|-- model
|   |-- resModel.js
|-- public
|   |-- defaultFiles
|   |   |-- bg.png
|   |   |-- btn.png
|   |-- download
|-- routes
|   |-- index.js
|-- userFiles
    |-- input
    |-- out

如果有跨域问题有如下解决办法

• NGINX 设置反向代理
• http-server -P http://localhost:8000
• 服务端设置 header('Access-Control-Allow-Origin: *')
• webpack-dev-server.proxy 设置 http://localhost:8000

最后舔着脸求个 star 如果能提出宝贵意见更欢迎。

auto-langding-page-client: https://github.com/maroonstar...
auto-langding-page: https://github.com/maroonstar...

thx!