Home

Filmy

感谢
iwillwen/filmy

Filmy 相册是 《实战 ES2015》 一书第4章的实践案例，非常感谢原作者 小问。

在这一章中，我们会以一个名为 Filmy 的个人摄影网站为开发项目，从整体功能设计、功能模块分隔等角度详细说明其开发过程。——《实战 ES2015》 P129

Table of contents

• Introduction
• Tech Stack
• Getting start
• Release
• Development
• Feature
• FAQ
• License

Introduction

Filmy 相册距上回更新有三年之久，遵循原作者深入现代 JavaScript 应用开发的原则，迁移并完成了2017 年版本。 但前端领域技术更新迭代之快，落后的构建工具也因技术的进步被淘汰，2017年的版本已经运行不起来了。

得益于近年来前端突飞猛进工程化项目思想，新版 Filmy 基于 Vue.js 开发的标准工具 Vue CLI创建，结合官方文档合理地运用 Vuex 等核心插件。

希望它能成为前端初学者有帮助的学习项目，也欢迎有想法的您贡献代码。

Tech Stack

• Vue 2
• Vue-Router
• Vuex

Feature

新版本同时也修复了遗留的问题：

• 可配置的七牛云对象存储空间域名，避免出现域名不匹配导致上传失败问题；
• 请求携带随机 URL 参数，避免获取到旧版的存储资源；

Getting start

复制项目到本地

git clone https://github.com/409915016/filmy.git

添加 .env 环境配置文件

VUE_APP_QINIU_ACCESS_KEY=****
VUE_APP_QINIU_SECRET_KEY=****
VUE_APP_QINIU_UPLOAD_URL=upload-z2.qiniup.com
VUE_APP_QINIU_BUCKET_NAME=pikapika
VUE_APP_QINIU_BUCKET_DOMAIN_NAME=img.pikapika.ink
VUE_APP_ADMIN_PASSWORD=admin

下面表格描述了配置文件中每个变量的作用和含义：

变量	作用和含义
VUE_APP_QINIU_ACCESS_KEY	七牛云 AccessKey
VUE_APP_QINIU_SECRET_KEY	七牛云 SecretKey
VUE_APP_QINIU_UPLOAD_URL	七牛云存储区域（bucket）
VUE_APP_QINIU_BUCKET_NAME	七牛云对象存储空间名称
VUE_APP_QINIU_BUCKET_DOMAIN_NAME	七牛云对象存储空间域名
VUE_APP_ADMIN_PASSWORD	Filmy 相册管理后台密码

Release

开发或构建 Filmy 相册，至少需要 Node.js 12.x 运行环境，建议使用 Yarn 工具管理依赖

构建发布版本

yarn build 

Development

安装依赖

# install dependencies
yarn

启动开发环境

# serve with hot reload at localhost:8080
yarn serve

FAQ

修改了分类或相册数据，然而在其他设备并没有生效？

本项目使用了 MinDB 作为本地化储存。 若是修改了相册封面或其他设置，在七牛储存空间中的 *.json 确实是记录了最后一次修改的数据。

本机修改过后的设置储存在本地即时生效，而七牛云储使用了 CDN 分发，其中又浏览器获取的 *.json 是经过缓存的。 而反而获取的是旧的经过缓存的 Local Storage 数据覆盖到本地。解决方案:

• 程序设计错误

  本案例设计的缘由是针对框架和语法学习，相册封面修改也仅仅在本机后立即生效，通过分类 URL 分享到其他设备中查看最新的图片。

  清除 Local Storage 数据或许是最优解。由于本地存在了 Local Storage 数据，并不会去重新下载服务器上新的数据了，而是直接使用旧的数据。

License