新人写的网站，望大佬提供意见

[oyp]

新人程序员一枚，写了一个音乐网站，后台有 1000 首无版权的 BGM ，网站提供音乐分类、在线播放、一键下载、登陆注册、收藏音乐、音乐搜索等功能。

网站地址：web.app.ouyangpeng.top/poncon-copyrighted-music/

用了 SPA 的模式开发，比较传统的 jQuery 和 Bootstrap 搭配。

虽然网站做出来了，但我知道，我目前的开发方式太过传统了，学校教的也就这些。希望各位有经验的大佬指点一下，这个网站在开发上有什么地方需要改进，或者改用什么开发模式会更好，比如用 Vue 或者 React 这样的。

然后，我在 Git 仓库的使用上也不太熟悉，大家可以教下我。

新人作品，勿喷。

这是仓库，github.com/oyps/poncon-copyrighted-music

[lucasji]

一个小小的提升体验的建议: 点击"登陆 /注册"的时候, 鼠标最好显示成可点击样式.

[oyp]

@lucasji #1 鼠标显示小手是吗？采纳了

[codefever]

界面很简洁，比较喜欢，有个检索功能就更好了

[oyp]

@codefever #3 有音乐搜索功能的

[Asimov01]

新手做成这样我感觉很好了，收藏了！

[cctrv]

Mac Safari
NotSupportedError: The operation is not supported.

[madlifer]

第一下我的感觉是 缺少主题性。

就是这个网站到底是给人干什么用的。如果是在线听歌，那么没歌单，没搜索(隐藏太深)，没歌词显示，点进去分类之后也没有播放这个分类的全部，这样分类功能其实意思不大。

可以参照 https://music.qier222.com/

总体而言我觉的需要提高一下用户意识，把自己带入用户去看一下这个项目。作为学生练习我觉的没问题，但你应该想要做的是个 sideproject 而不单纯是个练习，不然前端也不会做的看上去还过得去。

[LavaC]

音乐分类的 hover 效果可以换一种柔和过渡的，比如原来的标题位移变大，副标题离场，单纯的切换是挺硬的。

[hiw2016]

博主很棒！

[ThreeK]

git 这个就是多用了， 先能简单的 commit 、push 能在 github 页面看到就行。其他复杂的等需要用到了再去学习就好。将来工作也是 百分之 99 都是 commit 、push 。

[Cmdhelp]

友情提醒：涉及版权的 还是少碰，牢饭可不好吃

[oyp]

@madlifer #7 这个网站主要是分享音乐，搜索功能其实不是主要的，因为大部分歌都不认识，是外面爬的的，也搜索不到，不像那种全网搜，主页加个搜索框的话，用户搜什么都是空的，就不好，所以放到导航栏去了。主要是为了让用户发现好音乐，然后在线收听或者收藏，下次也能快速找到。

[airplayxcom]

相当不错了楼主

[oyp]

@LavaC #8 可以一试

[oyp]

@Cmdhelp #11 当时做这个的目的就是这个，特意去外边找的无版权的，数量也才 1 千才首

[PqgpNgA0wk]

保持本心就好，挺不错的了，不用在意那些连鼠标样式都觉得需要优化的点子

[Zzzz77]

首页的热门列表，要么每个块高度对齐，要么做成瀑布流布局，现在这样太奇怪了😂

[oyp]

@Zzzz77 #17 Bootstrap 的栅栏确实就有这个毛病，想过怎么优化一下，比如设置固定高度。其实弹性盒子每一项高度本来是相同的，但是内容物高度却撑不满它的父容器

[oyp]

@Zzzz77 #17 不过起码上边线是对齐的😂😂😂

[ability]

音量控制很难用

[madlifer]

@oyp 让用户去发现好音乐、在线收听、或者收藏 这跟全网搜的有啥区别，都是一个场景

[oyp]

@madlifer #21 我觉得吧，全网搜，一般知道歌名或者歌手名，然后一搜一堆，而我这都是冷门的😂😂😂😂😂。相信大部分上全网搜的人，都是大概有了关键词才会去搜吧😂😂😂😂😂

[madlifer]

@oyp 冷门没问题 汽水音乐你搜一下 跟你的想法是一样的 其实 就是从冷门音乐里面发现好音乐，你去看看他怎么做的。如果要是抱着这个目的的话，这个需求应该把握不住。

我跟你废话的原因就是想让你有点站在用户角度去判断项目价值的这种思维。怎么说呢，就跟建房子一样，你是个建筑工程师，但工程师应该懂需求，既然你花心思 build 了一个项目，肯定要产生相应的价值。如果不懂需求，一栋楼都不设计厕所，你自己感觉很酷，但别人并不会买，那就很没意义，得不到回应也会很消耗热情。

[oyp]

@oyp #22 用户的需求应该不同，比如我想听某杰伦，可以去可以全网搜的网站找一找，那我的目的就是为了找到这首歌，或许是下载，或许是听。而我做的这个，用户来这里肯定不能是为了找某一首歌，而是随便看看，看下热门推荐的，或者看看分类，找首自己需要的 BGM ，然后下载拿走。

[oyp]

@madlifer #23 也有道理，没毛病

[Snoopy7x7]

建议搜索可以优化一下；可以放一个搜索在顶部导航栏上，像这个 https://www.uisdc.com/；看你搜索专门放了一页，这个页面交互上，可以把常用的关键词用标签的样式放在在搜索框下面，这样直接点更快哦~

[renhou]

感觉很不错，下面是建议
1.在导航栏显著位置加上 github 项目地址和你的个人网站
2.可以加一个 logo ，ico 似乎有读取失败的问题？
3.在一些设备如 iphone 12pro 下载键会和播放器选项重叠

[oyp]

@renhou #27 第 1 点采纳一下，第 2 点，我应该就是没放 ico ，哈哈😂，第三点，开发时有研究过，所以是刻意让它有一些重叠，这样可以减少对列表的遮挡，也有感觉是按钮吸附在了播放器上，同时也刚好不会挡住播放器的

[oyp]

@madlifer #23 “既然你花心思 build 了一个项目，肯定要产生相应的价值”，非常同意

[kapr1k0rn]

打开页面的第一感受是配色不适合音乐网站
可能是个人喜好问题

[twing37]

挺好的。简直就是做文网文证审查时的标准模板审核站。简洁且有效功能。
有相关热心的同学可以做一套相关的开源出来。

[Vegetable]

挺好的

[Macv1994]

@oyp #18 可以在子容器使用 class="h-100"，所有子容器高度就全部一样了

[oyp]

@Macv1994 #33 真的可以，学到了，感谢🙏

[oyp]

@Macv1994 #33 已经用刚才这个方法修复好了，栅栏高度一致了，可以刷新网站看看 web.app.ouyangpeng.top/poncon-copyrighted-music/

[MarkP]

没进去的时候我就在想是不是用的 APlayer ，果然哈哈

[Macv1994]

@oyp 哈哈哈，互相学习，你这网站速度还挺快的，服务器啥配置呀？

[oyp]

@Macv1994 #37 阿里云学生机，1 核 2G

[eudore]

缓存 样式 移动适配都不错 ，挑两个鸡蛋 没有 h2 传输和 br 压缩，lpy 不知道是啥，功能没看。

[eudore]

var 三大框架任选一个基本是标配了，随便学几个玩玩，开发的思维模式不同，jq 还是有点老。

[oyp]

@eudore #39 后面两个是什么，请教一下😂😂😂

[Xnor]

@oyp 「 var 」应该分别代表「 Vue.js 」「 Angular 」「 React 」三大前端框架吧，如有错误望指正。

[zidian]

用户登录的用户名和密码那里，还是等宽比较好看。

[SuperXRay]

#7 @madlifer 说的完全不对，这个无版权 BGM 已经是一个主题了。
非要去和那些商业音乐软件作对比，跟不上同类产品，说都说不到点子上

[light000]

没有下一页的情况下，就没必要显示“加载更多”的按钮了
或者可以判断滚动距离，做一个自动加载下一页

[Nich0la5]

样式上
1 登录页，注册页，用户名，密码要对齐，一长一短很丑
2 主页分类部分的切换要加过渡效果
3 搜索框的阴影有点奇怪
4 header 部分的动画效果不够突出

PHP 咱不是特别熟，技术实现先不评价，不过就源码来看 login.php 页有个很大的 sql 注入风险

[freetes]

“登陆” 务必改成 “登录”，谢谢🙏

[oyp]

@Nich0la5 #46
1. 请教一下怎么对齐比较好呢？登录页 2 个 input ，注册框 5 个 input ，我觉得很难
2. 什么叫过渡效果呢？是淡入淡出吗？还是幻灯片那种换页效果
3. Bootstrap 输入框自带阴影的，我只是改了下颜色，可能颜色对有些人来说是奇怪
4. Header 部分有动画吗？指的是？

[oyp]

@freetes #47 我好像没有出现“登陆”吧，就一串注释中出现了一下，也看不到😂😂😂😂😂，确实没注意过

[gscsnm]

BUG：？
登录后：
1. 点击“关于”，点击“无忧音乐网”，无反应，感觉应该跳转到主页。
2. 点击“关于”，点击“无忧音乐网”，在点击“主页”，无反应。

[oyp]

@Nich0la5 #46 “login.php 页有个很大的 sql 注入风险”？？？？有点懵了。没注意诶，我只知道我用 addslashes()把表单数据都转义了，还有注入风险？？求教一下

[oyp]

@gscsnm #50 对，确实是 Bug ，好像不点那个“无忧音乐网”，就不会，问题应该在那里😂😂

[Nich0la5]

@oyp #48 你对比一下
第二条指的是鼠标移上去的时候图标的变化，有些突然
阴影的范围的感觉有点奇怪，中间截断的不太自然
header 鼠标移入的颜色加深不是很明显，视觉锚点不够强

[oyp]

@Nich0la5 #53 是这个呀😂😂😂😂确实是哈，我也觉得是

[Nich0la5]

@oyp #51 addslashes 也是有绕过风险的，咱没完整看源码，就是提一下

[oyp]

@gscsnm #50 好像是某个情况下，Logo 部分的 click 事件消失了，应该是被 jQuery 选择器波及到了吧😂😂😂

[lyc575757]

下一步推荐新建一个仓库 用 vite+vue3+ts 重写一个前端界面 UI 组件库方面可以选择 unocss Element-plus

[tmrQAQ]

下面播放的工具栏感觉图标感觉太小了，工具栏长度感觉可以短一些，现在看着有点长。

[xuelu520]

列表可以改为瀑布流
分类占用太多多位置。
卡片加个鼠标 hover 的阴影效果？

[cnrting]

無憂音樂網。。

[skmO]

机翻感造成农场感，音乐分类大小不统一..

[skmO]

@skmO 大小写

[supermao]

现在学校还教 bootstrap 的吗

[Routeros]

啥也别说了，收藏了

[xiansin]

作为新手来说很不错了。
既然都采用 SPA 模式来开发了，为什么不使用 Vue+后端
我看你是用 PHP 来开发的（面向过程），你可以试一下框架（ CI ，Laravel 之类的）,但是第一个框架不建议用 laravel ，可以用 CI 之类的。
给你推荐一个 MVC 框架：flightphp 。https://flightphp.com/

[oyp]

@supermao #63 我学校就教一下 HTML 和基础的 JS ，那些库一个都没讲，据说下学期讲 jQuery ，我 x ，垃圾学校

[oyp]

如果你们知道我学校开的课程有多垃圾，就知道我为什么还在用 jQuery ，并且继续追随 jQuery 了😥

[Macv1994]

@supermao bootstrap 都更新到 5 了，为什么不能教。。。。

[learnshare]

放弃“学校教的”这种想法，自学是应该具备的核心能力之一
不要骂学校，凭自己能力考进去的，肯定是最好的
另外也不需要装作是新人，新人不上 v2 ，也不会写代码

学学 React 吧，上手很快的，只是要完全丢掉 jQuery 操作 DOM 的想法

[oyp]

@learnshare 我确实是放弃了学校教的，全都靠自学，所以就上这来了，想要快速提升，就要多接受批评！

在我看来，我这水平就是新人，没有装作新人，哈哈😄

[xiangchen2011]

写的挺好的，很棒

[Tinyang]

发现一个小问题，win11 系统下面，音乐播放栏有部分会被系统底部任务栏挡住。

[oyp]

@Tinyang #72 你这个是系统任务栏挡住网页了吗？我好像没遇到过，我怎么看着是浏览器的问题😂😂

[cxmokai]

你知道 Pied Piper 吗

[oyp]

@cxmokai #74 那是什么，歌名吗

[eudore]

@oyp h2 是 http2 ，需要开启 https 和 http2 选项，可以优化多路传输和传输压缩。br 是 Brotli 压缩算法，一般用于压缩 api 请求，一般静态资源是 gzip 压缩的，阅览器请求 header`accept-encoding: gzip, deflate, br`里面就指定了客户端接受的压缩算法。

[jezal]

@oyp @cxmokai 那是一个伟大的公司 doge :-)

[molvqingtai]

讲真，新手做成这样真的很不错了

[UIXX]

直说了吧，LZ 的方向走错了。

无论是你以学习的目的写一个 Demo 还是真正做一个可运营的站点。都应该以“抄”开始，而不是按自己想的先随性地做一个然后拿出来给大家改。

一个好的画师在磨练出自己独有的画技之前，他必须要有足够的对美的鉴赏力。有了对美丑的感觉，才有对画法好坏的定义，才有一个明确的努力方向。

我以前也曾用 JQ 手撸论坛系统，然后根据用户的体验一点点改，事后发现这完全是愚蠢的，或者说是很低效的。
像登录模块这种有“定式”的部分，我本可以借鉴外界的最佳实践，但却浪费了大量时间在改样式、文本上；
像帖子界面那样本该简洁的布局，应该把思考重心放在内容呈现上，控件的摆放细节却让我耗尽心神；
像权限分配一般重中之重的功能，我对其中的内涵一无所知，设计的时候各种“想当然”；

这一切都是因为我根本不知道这种内容系统该怎么做：
我接触的论坛类型少；
我从未在设计的角度思考我用过的这些网站；
我不知道这类站点会有哪些“潜规则”；
我只知道扣 Margin 、padding 的数值！

回到 LZ ，你的问题大体是类似的。
其实用过时的 JQ 做项目根本不是重点，重点是你现在连一些模块怎么做，一些最基本的“定式”“常识”都没有掌握。用几个 input ？用什么过渡效果？这些主观的东西不应该是 V2er 你一言我一语地教出来的。

你现在最好的学习方式就是抄，大量地抄。从方案到具体技术，一步步来，让自己形成一种知觉，在实现框架中形成自己擅长的模式。

[oyp]

@UIXX #79 采纳了，谢谢

[duan602728596]

不知道为啥，你的这个网站被我的公司 block 了

[fqy12300]

新手能独立做出一个网站很不错了，问下楼主学前端多久了，BootStrap 和 JQuery 是自学的吗？

[GreatAuk]

有版权问题吗

[cxmokai]

@oyp 美剧《硅谷》的男主，最开始也建了一个音乐网站，就是 Pied Piper

[pytth]

jQuery+PHP 大法，快速、高效！