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

2019年9月3日 280次阅读 来源: maroonstar

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

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

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

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

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

如何使用

  • 前端运行端口 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/getDefaultImgget–
上传图片/api/uploadFilespost上传使用DataForm
生成网页文件并打包成zip文件/api/buildFilespost返回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!

    原文作者：maroonstar
    原文地址: https://segmentfault.com/a/1190000020193606
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞