[置顶] Nodejs/koa2应用 - 构建一个很酷的web相册.

Koa-album

基于Nodejs和Koa2的一个web相册应用，代码逻辑不算太难，也算是koa的入门吧。没有使用到一些常用的中间件，比如koa-static和koa-router,都是自己做的轮子,原生做静态资源和路由处理，有空再认真看下它们的源代码。

前端方面还做了个类似fancybox的图片预览器gallery.js,和lazyload,样式配色什么的,都按照自己喜欢地来了。

Github地址

在线预览

如果无法预览可能是服务器到期了……可以开启本地服务。

本地预览

安装项目依赖

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

│ │
9d8f
├─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。