基于 React + Webpack 的音乐相册项目(上)
笔记仓库:https://github.com/nnngu/LearningNotes
上一篇文章用爬虫自动下载了一些图片,这一篇就用这些图片做一个音乐相册吧!
效果预览
点击图片,切换到背面:
演示地址
演示地址:https://nnngu.github.io/MusicPhoto/
环境搭建
1、安装 npm,安装成功后,在终端输入 npm -v
可以查看它的版本。
2、安装generator-react-webpack
,使用如下命令:
npm install -g generator-react-webpack
安装完成之后,输入npm list --depth=0 -global
可以查看版本。
3、创建项目,打开你用来存放代码的目录,然后输入:yo react-webpack MusicPhoto
4、创建完成,项目的目录如下图:
需要注意的几个地方:
- ① cfg 目录是配置文件所在的目录
- 重点关注 cfg 目录里面的 defaults.js 文件
- ② src 项目的源代码主要在这里面
- ③ package.json 用来管理和配置依赖模块
添加 autoprefixer-loader 模块
autoprefixer-loader 是用来处理 css 的模块,安装命令:
npm install autoprefixer-loader --save-dev
然后打开 cfg 目录中的 defaults.js 添加如下配置信息:
添加 json-loader 模块
json-loader 是用来处理 json 的模块,安装命令:
npm install json-loader --save-dev
然后打开 cfg 目录中的 defaults.js 添加如下配置信息:
添加图片
1、在 src 目录下添加 images 目录和一些图片,如下图:(图片尺寸全部是 260 * 260)
2、添加 imageDatas.json 如下图:
imageDatas.json 里面的代码请参照项目的源代码。
3、在src/components/Main.js
中引入imageDatas.json
代码如下:
// 获取图片的 json 数据
var imagesData = require('../data/imageDatas.json');
4、根据图片的文件名,生成图片URL。
src/components/Main.js
/**
* @imagesDataArray {Array}
* @return {Array}
*/
imagesData = (function getImageURL(imagesDataArray) {
for (var i = 0, j = imagesDataArray.length; i < j; i++) {
var singleImageData = imagesDataArray[i];
singleImageData.imageURL = require('../images/' + singleImageData.fileName);
imagesDataArray[i] = singleImageData;
}
return imagesDataArray;
})(imagesData);
配置字体
打开 cfg 目录中的 defaults.js 添加如下配置信息:
组件的绑定
src/index.html 中的关键代码:
src/index.js 中的关键代码:
代码逻辑
主要的代码逻辑在 Main.js
中,主要的布局样式在 App.scss
中。如下图:
具体代码请参照项目的源代码 https://github.com/nnngu/MusicPhoto
发布到Github Pages
1、修改cfg/defaults.js
中的publicPath
,改为publicPath: './assets/',
如下图:
2、打包,使用npm run dist
指令。打包完成可以看到如下目录:
3、把打包好的目录 push 到 GitHub 的 gh-pages 分支,使用如下命令:
git subtree push --prefix=dist origin gh-pages
4、在GitHub 对应的仓库里面开启 Github Pages 功能,并选择 gh-pages
分支即可。
???下一篇将会总结完成音乐播放器的过程。???
05 (项目) 基于 React + Webpack 的音乐相册(下)
- WordPress评论滑动/拉链解锁myQaptcha代码版及部署方法
- 修改WordPress分类目录和页面链接以斜杠/结尾,附nginx对应的301跳转设置方法
- 彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法
- 解决Crayon Syntax Highlighter代码高亮与fancybox图片暗箱冲突问题
- 移动搜索SEO:网站移动适配之Meta标注、移动跳转终结篇
- http加速器Varnish的vcl配置小记(lnmp环境)
- 关于网站图标favicon.ico那点事儿,你造吗?
- 跨平台 ListView 性能优化
- 打造“微信小程序”组件化开发框架
- 解决Linux下MySQL启动错误Starting MySQL.Manager of pid-file quit without updating file.[FAILED]
- 美团大众点评 Hybrid 化建设
- Linux系统date命令无法修改或同步时间的解决办法
- Redex 初探与 Interdex:Andorid 冷启动优化
- JS延时判断,改善中国博客联盟展示导航自动点击的灵敏度
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Typescript的tsconfig.json
- python和R语言计算蛋白质内部氨基酸相互作用
- 超文本传输协议 - 白话篇
- 为什么你的简历没人看?7份案例分析
- 浅析动态切换数据源的原理(接上篇)
- SpringBoot源码解析(十二)- Autowired是如何注入的
- 项目要实现多数据源动态切换,咋搞?
- 这一次,带你全面了解锁机制!
- GitHub标星1w+超牛的微服务项目,开发脚手架
- Redis中hash、set、zset的底层数据结构原理
- Redis中string、list的底层数据结构原理
- Redis中字符串的表示
- Redis分布式锁背后的原理
- 解析Transformer模型
- 这5个常问的Redis面试题你答得出来吗?(详细剖析)