自動生成簡單的落地頁 auto-landing-page-client

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!