Hope&Love的开发记录

[QiYongchuan]

为什么要做一个这样的网站呢？

• 最直接的原因是【这是结课作业】，必须做一个东西，除非从网上直接下一个？但似乎又失去了什么。

• 为什么会是这样的网站？这是一个什么网站？

如你所见，这本质上其实就是“堆叠”了很多的图片。为什么要做呢？ 因为图片很漂亮，在我上网过程中，又喜欢看到好看的图片就喜欢随手保存下来，久而久之手里就像松鼠一样囤积下来了大量的图片。

更深层次的原因在于：**好的图片，会唤起心中对美好，对希望的向往。**在我无数次沮丧的时候，恰好是某张图片又重新唤起了我的内心某种声音，于是我想做一个网站，记录下这些瞬间。 如果某天心情沮丧，不妨回来看看。如果某张图片你也恰好喜欢，那就再好不过了。

既然有了大方向，即做一个关于图片展示的网站，接下来就是怎么做了，主要是两个问题：怎样才能好看？ 以及怎么才能好玩？

开发中遇到的难题

1.框架选Bootstrap 还是 Tailwind？

框架是一开始就考虑要用的，原因有很多，轮播图、响应式的页面，以及模态窗等等，这些都要自己用原生js来写的话真的很头疼。
一开始尝试Tailwind，在完成了第一版的图片排版后，在轮播图以及导航栏板块死活调不好了。（比起Bootstrasp有直接的案例可以拿来用，Tailwind这一点不太友好。）后来甚至尝试了，同时使用Bootstrasp和Tailwind。事实证明这可不是一个好的尝试，在一些地方，两个样式开始打架。

结果可想而知，搞崩了，我和代码都是。

后来重新选择了Bootstrasp,但并没有用最新的5.0版本，而是用了相对熟悉了3.0版本。

主要用到的地方有几处：

• 轮播图
• 图片主体的栅格布局（本质是封装的浮动布局，支持响应式：即这里col-md-4 col-sm-6 中屏幕及以上分3列，小屏幕2列）
• 模态窗的弹窗

因为Bootstrap的js是基于jQuery实现的，一开始只本地引入了js文件，并没有引入jQuery，轮播图一直无法实现。
【因为考虑到展示时机房可能网络不好或者没有网，把所有的框架均采用本地导入的方式了】

2.图片展示的方式

这里遇到了三个问题：（1）怎样把图片排列才好看 （2）这么多图片怎么分类 （3）同一类图片之间怎么排列才好看

第一个问题主要难点在于技术层次，在参考了一些图片网站后，我心里有了样式。采取“3列，等宽，长度错落”的排列方式。即将所有的图片分成三列，然后宽度设置成100%，高度就自动就达到这个效果了。

第二个问题，图片怎么分类？ 这个挺头疼的了，技术上的问题还好解决，但是内容上的，无奈，只能一遍一遍看图片主题，最后还得是GPT

第三个问题，同一类之间怎么排更好看呢？ 大概就是一靠感觉，第二是尽量不违和，相同色系在一块，尽量不突兀。

3.怎样才能更丰富一点呢？

“本质上，就是一些图片的堆叠。”

这是我在做这个项目，从开始到接近结束最怀疑自己的地方所在。会不会太简单了？

于是想到了几个点，让这个项目变得更有趣，更丰富一点。

3.1 增加背景音乐

好看的景色，配上好听的音乐应该好一点。一开始只想加一首背景音乐，设置成自动播放模式，但现在很多浏览器已经禁止自动播放，于是自然需要增加控制模块。既然需要用到控制模块了，为什么不增加交互，让用户进行控制呢。 最直接的控制是鼠标点击事件，于是第一个控制模块用来控制背景音乐。

又想到，既然用鼠标控制了，键盘似乎更方便，于是又增加了按键控制背景音乐的播放。

一个背景音乐不过瘾，于是又给每一个主题增加了背景音乐，同时又增加了对应的按键。

3.2增加一些按键交互

除了上面讲的按键播放对应的背景音乐，在我做导航-锚地链接的时候，突然想到，既然能够点击进行导航，为什么不设置按键事件进行导航呢？ 于是又增加了，在播放相应背景音乐的时候，自动跳转到相应的部分。

主要是window.location.hash = 'find';设置对应的锚点就可以了。

3.3 增加一点点交互和备份

因为不清楚机房网络，能不能连上网，能不能连上github，无奈只能设置两套方案，一是直接加载本地图片，二是增加一个提示窗后在加载网页，如果没网就不用加载了。

3.4 彩蛋与bug

比如点击某些图片改变背景颜色，（最初的功能是想放对应的歌的），以及某些bug，如果改不了，那就说成：“这原本就是这样设计的功能，不是bug。 It's not a bug,It's just a feature."

毕竟，自己是自己的开发经理，功能都是自己提的。就像网站结尾那句话， Life is so f***ing hard, so don't be too hard on yourself. 所以，我就对自己好一点，改不出的bug就是feature，做不出的功能就是”正在建设中“。

[QiYongchuan]

开发记录

[QiYongchuan]

当给同一个类多处使用都增加同一事件时，怎么搞？

事情是这样的，我写了一个类，同时增加一个点击事件，当点击时，背景颜色发生变化。 但是现在的问题是我应用了很多的地方，只有第一个地方起效果了。 问题出在了哪里呢，获取出错了。

const pink = document.querySelector('.pink')

 pink.addEventListener('click',function(){
  console.log("点击了pink");
  document.body.style.backgroundColor = 'pink'
}) ```

document.querySelector() 方法返回页面中匹配指定选择器的第一个元素。

此时需要获取多个，

const pink = document.querySelectorAll('.pink')

console.log('pink',pink);

for (let i = 0; i < pink.length; i++) {
pink[i].addEventListener('click', function() {
console.log("点击了 pink");
document.body.style.backgroundColor = 'pink';
});
}

document.querySelectorAll() 方法返回的是一个 NodeList（节点列表）对象，而不是单个元素。因此，在执行 addEventListener() 方法之前，需要使用循环遍历获取的所有元素，并为每个元素添加事件处理程序。

[QiYongchuan]

设置用户操作指引怎么做？

首先想到的方式是alert + confirm 进行判断，毕竟很熟了

  if(confirm("你是QYC吗")){
    alert('欢迎回来！')    
  } else{
    alert('那你还是按一按回车键吧，就是Enter')
  }
// 前提是按回车进入

document.addEventListener('keydown',function(event){
  if (event.key =='Enter'){
      if (confirm('你想看一看指引吗')) {
        window.location.href='https://github.com/QiYongchuan/Hope_Love/issues/2'
      }
      else{
        alert('summer white mute pink black flowers quest dark')
      }
  }
})

但是更好的方式，应该是设置模态窗口，根据localStorage 来判断是不是第一次登录。

[QiYongchuan]

第三版升级完成

主要是解决了上述两个bug，实现了多个类之间都可以同时监听的功能；以及指引页的设置，通过增加了一个模态窗口。

[QiYongchuan]

目前出现的bug

1.多首歌同时播放，暂未实现切换 =》（有思路解决，将所有音频放到一个数组里）
2.有苹果系统说模态窗口没办法关闭，以及在手机上没办法关闭模态窗口。（目前还没有进行进一步的研究）

[QiYongchuan]

下一步的优化方向

1.做一下移动端的按键处理
2.可能要部署一下gitee？ 毕竟github有时候太难裸连了，太多数朋友用起来还是不方便的。

朋友提到的好玩的想法：

1.增加匿名评论功能，可以在某个图片下面进行评论，形成类似树洞的功能。 =》需要我研究一下，能不能做一个不用登录的系统。
2.形成闯关的机制，增加彩蛋线索，在一些图片设置彩蛋，只有收集够足够的线索，到最后填上，进入下一个页面，（这里可以设置成不同的答案对应不同的页面）