专栏首页nnngu基于 React + Webpack 的音乐相册项目(上)

基于 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 的音乐相册(下)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 基于 React + Webpack 的音乐相册项目(上)

    笔记仓库:https://github.com/nnngu/LearningNotes

    nnngu
  • 03 Spring的父子容器

    1、概念理解和知识铺垫 在Spring整体框架的核心概念中,容器是核心思想,就是用来管理Bean的整个生命周期的,而在一个项目中,容器不一定只有一个,Sprin...

    nnngu
  • 02 使用Mybatis的逆向工程自动生成代码

    1、逆向工程的作用 Mybatis 官方提供了逆向工程,可以针对数据库表自动生成Mybatis执行所需要的代码(包括mapper.xml、Mapper.java...

    nnngu
  • 基于 React + Webpack 的音乐相册项目(上)

    笔记仓库:https://github.com/nnngu/LearningNotes

    nnngu
  • 如何下载博客模板部署在自己的服务器上

    傍晚的时候,把自己的服务器跑通了之后,添加了一个静态的网页,离自己的目标又近了一点,想自己搭建一个独立博客,在上面写一些东西,需要前端展示界面和后台管理界面,为...

    王小婷
  • 一分钟理解 HTTPS 到底解决了什么问题1、引言2、HTTPS相关文章3、对HTTPS性能的理解4、传统HTTP的安全性问题5、HTTPS 背后的密码学附录:更多安全方面的文章

    本文原作者“虞大胆的叽叽喳喳”,原文链接:jianshu.com/p/8861da5734ba,感谢原作者。

    JackJiang
  • 一分钟理解 HTTPS 到底解决了什么问题

    但对于程序员,很有必要了解下 HTTP 到底有什么问题?以及HTTPS 是如何解决这些问题的?其背后的解决思路和方法是什么?

    JackJiang
  • 【HDU 5858】Hard problem(圆部分面积)

    交点是(\frac{\sqrt{7} L}{4\sqrt{2}},\frac{L}{4\sqrt{2}})。

    饶文津
  • 三角形面积坐标

    (一)三角形面积坐标的定义 三角形中任一点P与其三个角点相连形成三个子三角形,如图1所示 ? 需要注意的是,这里引用的面积坐标,只限于用在一个三角形单元之内,在...

    fem178
  • 一分钟理清Vue-cli 代码构建步骤。

    1、 $ npm install vue -cli -g $ vue init webpack project-name $ cd project-name...

    蓓蕾心晴

扫码关注云+社区

领取腾讯云代金券