Koa-album

基於Nodejs和Koa2的一個web相簿應用，程式碼邏輯不算太難，也算是koa的入門吧。沒有使用到一些常用的中介軟體，比如koa-static和koa-router,都是自己做的輪子,原生做靜態資源和路由處理，有空再認真看下它們的原始碼。

前端方面還做了個類似fancybox的圖片預覽器gallery.js,和lazyload,樣式配色什麼的,都按照自己喜歡地來了。

線上預覽

如果無法預覽可能是伺服器到期了……可以開啟本地服務。

本地預覽

安裝專案依賴

npm install 

啟動本地服務 訪問localhost:8888 即可看到效果

node app.js

修改JS/CSS程式碼

gulp dev

壓縮JS/CSS程式碼

gulp build

截圖預覽

主要檔案和目錄介紹

├─views 模板檔案
├─static 靜態檔案 主要是頁面壓縮過後的 CSS/JS
├─src 前端指令碼目錄
│ ├─css
│ │ ├─_import gallery效果(類似fancybox實現)
│ │ │ └─gallery.sass
│ │ ├─style.sass 主要的樣式
│ │ ├─mobile.sass 響應式
│ │ ├─media.sass 媒體查詢
│ │ ├─flow.sass 流式圖片佈局（這個還沒用到）
│ │ └─base.sass 基礎樣式
│ └─js
│ │ ├─utils.js
│ │ ├─lazyload.js lazyload
│ │ ├─index.js 主指令碼
│ │ ├─gallery.js gallery指令碼
│ │ └─dom.js 一些dom的操作擴充套件
├─assets 相簿目錄
│ ├─albums
│ │ ├─AlenaAenami
│ │ └─Wallhalla
│ ├─sites.json 站點資訊
│ └─albums.json 相簿資訊
├─lib node端指令碼
│ ├─helpers ejs輔助函式
│ │ ├─partial.js
│ │ ├─js.js
│ │ ├─helper.js
│ │ └─css.js
│ ├─utils.js
│ ├─router.js 路由
│ ├─render.js ejs渲染函式
│ ├─mime.js
│ ├─handler.js 處理函式
│ ├─error.js
│ └─data.js 資料獲取工具
├─.babelrc
├─.gitignore
├─app.js 程式入口
├─README.md
├─package.json
├─package-lock.json
└─gulpfile.js

如有什麼疑問歡迎到github開issues。