快捷搜索: 王者荣耀 脱发

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

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。

经验分享 程序员 微信小程序 职场和发展