这是一个创建于 881 天前的主题，其中的信息可能已经有所发展或是发生改变。
新人程序员一枚，写了一个音乐网站，后台有 1000 首无版权的 BGM ，网站提供音乐分类、在线播放、一键下载、登陆注册、收藏音乐、音乐搜索等功能。
网站地址：web.app.ouyangpeng.top/poncon-copyrighted-music/
用了 SPA 的模式开发，比较传统的 jQuery 和 Bootstrap 搭配。
虽然网站做出来了，但我知道，我目前的开发方式太过传统了，学校教的也就这些。希望各位有经验的大佬指点一下，这个网站在开发上有什么地方需要改进，或者改用什么开发模式会更好，比如用 Vue 或者 React 这样的。
然后，我在 Git 仓库的使用上也不太熟悉，大家可以教下我。
新人作品，勿喷。
网站地址：web.app.ouyangpeng.top/poncon-copyrighted-music/
用了 SPA 的模式开发，比较传统的 jQuery 和 Bootstrap 搭配。
虽然网站做出来了，但我知道，我目前的开发方式太过传统了，学校教的也就这些。希望各位有经验的大佬指点一下，这个网站在开发上有什么地方需要改进，或者改用什么开发模式会更好，比如用 Vue 或者 React 这样的。
然后，我在 Git 仓库的使用上也不太熟悉，大家可以教下我。
新人作品，勿喷。
第 1 条附言 · 2022-06-27 10:34:41 +08:00
 |
1
lucasji 2022-06-27 10:04:55 +08:00
一个小小的提升体验的建议: 点击"登陆 /注册"的时候, 鼠标最好显示成可点击样式.
|
 |
3
codefever 2022-06-27 10:09:35 +08:00
界面很简洁，比较喜欢，有个检索功能就更好了
|
 |
5
Asimov01 2022-06-27 10:14:43 +08:00
新手做成这样我感觉很好了，收藏了！
|
 |
6
cctrv 2022-06-27 10:16:53 +08:00
Mac Safari
NotSupportedError: The operation is not supported. |
 |
7
madlifer 2022-06-27 10:22:56 +08:00
第一下我的感觉是 缺少主题性。
就是这个网站到底是给人干什么用的。如果是在线听歌，那么没歌单，没搜索(隐藏太深)，没歌词显示，点进去分类之后也没有播放这个分类的全部，这样分类功能其实意思不大。 可以参照 https://music.qier222.com/ 总体而言我觉的需要提高一下用户意识，把自己带入用户去看一下这个项目。作为学生练习我觉的没问题，但你应该想要做的是个 sideproject 而不单纯是个练习，不然前端也不会做的看上去还过得去。 |
 |
8
LavaC 2022-06-27 10:24:08 +08:00
音乐分类的 hover 效果可以换一种柔和过渡的，比如原来的标题位移变大，副标题离场，单纯的切换是挺硬的。
|
 |
9
hiw2016 2022-06-27 10:24:11 +08:00
博主很棒！
|
 |
10
ThreeK 2022-06-27 10:24:31 +08:00
git 这个就是多用了， 先能简单的 commit 、push 能在 github 页面看到就行。其他复杂的等需要用到了再去学习就好。将来工作也是 百分之 99 都是 commit 、push 。
|
 |
11
Cmdhelp 2022-06-27 10:28:20 +08:00
友情提醒：涉及版权的 还是少碰，牢饭可不好吃
|
 |
12
oyp OP @madlifer #7 这个网站主要是分享音乐，搜索功能其实不是主要的，因为大部分歌都不认识，是外面爬的的，也搜索不到，不像那种全网搜，主页加个搜索框的话，用户搜什么都是空的，就不好，所以放到导航栏去了。主要是为了让用户发现好音乐，然后在线收听或者收藏，下次也能快速找到。
|
 |
13
airplayxcom 2022-06-27 10:30:49 +08:00
相当不错了楼主
|
 |
16
PqgpNgA0wk 2022-06-27 10:41:16 +08:00  2
保持本心就好，挺不错的了，不用在意那些连鼠标样式都觉得需要优化的点子
|
 |
17
Zzzz77 2022-06-27 10:48:07 +08:00
首页的热门列表，要么每个块高度对齐，要么做成瀑布流布局，现在这样太奇怪了😂
|
|
18
oyp OP @Zzzz77 #17 Bootstrap 的栅栏确实就有这个毛病，想过怎么优化一下，比如设置固定高度。其实弹性盒子每一项高度本来是相同的，但是内容物高度却撑不满它的父容器
|
 |
20
ability 2022-06-27 10:54:24 +08:00
音量控制很难用
|
|
22
oyp OP @madlifer #21 我觉得吧，全网搜，一般知道歌名或者歌手名，然后一搜一堆，而我这都是冷门的😂😂😂😂😂。相信大部分上全网搜的人，都是大概有了关键词才会去搜吧😂😂😂😂😂
|
|
23
madlifer 2022-06-27 11:15:05 +08:00 1
@oyp 冷门没问题 汽水音乐你搜一下 跟你的想法是一样的 其实 就是从冷门音乐里面发现好音乐，你去看看他怎么做的。如果要是抱着这个目的的话，这个需求应该把握不住。
我跟你废话的原因就是想让你有点站在用户角度去判断项目价值的这种思维。怎么说呢，就跟建房子一样，你是个建筑工程师，但工程师应该懂需求，既然你花心思 build 了一个项目，肯定要产生相应的价值。如果不懂需求，一栋楼都不设计厕所，你自己感觉很酷，但别人并不会买，那就很没意义，得不到回应也会很消耗热情。 |
|
24
oyp OP @oyp #22 用户的需求应该不同，比如我想听某杰伦，可以去可以全网搜的网站找一找，那我的目的就是为了找到这首歌，或许是下载，或许是听。而我做的这个，用户来这里肯定不能是为了找某一首歌，而是随便看看，看下热门推荐的，或者看看分类，找首自己需要的 BGM ，然后下载拿走。
|
 |
26
Snoopy7x7 2022-06-27 11:16:52 +08:00
建议搜索可以优化一下；可以放一个搜索在顶部导航栏上，像这个 https://www.uisdc.com/；看你搜索专门放了一页，这个页面交互上，可以把常用的关键词用标签的样式放在在搜索框下面，这样直接点更快哦~
|
 |
27
renhou 2022-06-27 11:21:36 +08:00
感觉很不错，下面是建议
1.在导航栏显著位置加上 github 项目地址和你的个人网站 2.可以加一个 logo ，ico 似乎有读取失败的问题？ 3.在一些设备如 iphone 12pro 下载键会和播放器选项重叠 |
|
28
oyp OP @renhou #27 第 1 点采纳一下，第 2 点，我应该就是没放 ico ，哈哈😂，第三点，开发时有研究过，所以是刻意让它有一些重叠，这样可以减少对列表的遮挡，也有感觉是按钮吸附在了播放器上，同时也刚好不会挡住播放器的
|
 |
30
kapr1k0rn 2022-06-27 11:43:21 +08:00
打开页面的第一感受是配色不适合音乐网站
可能是个人喜好问题 |
 |
31
twing37 2022-06-27 12:08:11 +08:00
挺好的。简直就是做文网文证审查时的标准模板审核站。简洁且有效功能。
有相关热心的同学可以做一套相关的开源出来。 |
 |
32
Vegetable 2022-06-27 12:11:29 +08:00
挺好的
|
|
35
oyp OP @Macv1994 #33 已经用刚才这个方法修复好了，栅栏高度一致了，可以刷新网站看看 web.app.ouyangpeng.top/poncon-copyrighted-music/
|
 |
36
MarkP 2022-06-27 12:53:26 +08:00
没进去的时候我就在想是不是用的 APlayer ，果然哈哈
|
 |
39
eudore 2022-06-27 14:31:30 +08:00
缓存 样式 移动适配都不错 ，挑两个鸡蛋 没有 h2 传输和 br 压缩，lpy 不知道是啥，功能没看。
|
|
40
eudore 2022-06-27 14:33:49 +08:00
var 三大框架任选一个基本是标配了，随便学几个玩玩，开发的思维模式不同，jq 还是有点老。
|
 |
43
zidian 2022-06-27 15:11:49 +08:00
用户登录的用户名和密码那里，还是等宽比较好看。
|
 |
44
SuperXRay 2022-06-27 15:16:47 +08:00 1
#7 @madlifer 说的完全不对，这个无版权 BGM 已经是一个主题了。
非要去和那些商业音乐软件作对比，跟不上同类产品，说都说不到点子上 |
 |
45
light000 2022-06-27 15:18:15 +08:00
没有下一页的情况下，就没必要显示“加载更多”的按钮了
或者可以判断滚动距离，做一个自动加载下一页 |
 |
46
Nich0la5 2022-06-27 15:21:53 +08:00
样式上
1 登录页，注册页，用户名，密码要对齐，一长一短很丑 2 主页分类部分的切换要加过渡效果 3 搜索框的阴影有点奇怪 4 header 部分的动画效果不够突出 PHP 咱不是特别熟，技术实现先不评价，不过就源码来看 login.php 页有个很大的 sql 注入风险 |
 |
47
freetes 2022-06-27 15:39:41 +08:00
“登陆” 务必改成 “登录”，谢谢🙏
|
|
48
oyp OP @Nich0la5 #46
1. 请教一下怎么对齐比较好呢？登录页 2 个 input ，注册框 5 个 input ，我觉得很难 2. 什么叫过渡效果呢？是淡入淡出吗？还是幻灯片那种换页效果 3. Bootstrap 输入框自带阴影的，我只是改了下颜色，可能颜色对有些人来说是奇怪 4. Header 部分有动画吗？指的是？ |
 |
50
gscsnm 2022-06-27 15:49:34 +08:00
BUG：？
登录后： 1. 点击“关于”，点击“无忧音乐网”，无反应，感觉应该跳转到主页。 2. 点击“关于”，点击“无忧音乐网”，在点击“主页”，无反应。 |
|
51
oyp OP @Nich0la5 #46 “login.php 页有个很大的 sql 注入风险”？？？？有点懵了。没注意诶，我只知道我用 addslashes()把表单数据都转义了，还有注入风险？？求教一下
|
|
53
Nich0la5 2022-06-27 15:53:02 +08:00
|
|
56
oyp OP @gscsnm #50 好像是某个情况下，Logo 部分的 click 事件消失了，应该是被 jQuery 选择器波及到了吧😂😂😂
|
 |
57
lyc575757 2022-06-27 17:56:20 +08:00
下一步推荐新建一个仓库 用 vite+vue3+ts 重写一个前端界面 UI 组件库方面可以选择 unocss Element-plus
|
 |
58
tmrQAQ 2022-06-27 18:07:35 +08:00
下面播放的工具栏感觉图标感觉太小了，工具栏长度感觉可以短一些，现在看着有点长。
|
 |
59
xuelu520 2022-06-27 18:15:28 +08:00
列表可以改为瀑布流
分类占用太多多位置。 卡片加个鼠标 hover 的阴影效果？ |
 |
60
cnrting 2022-06-27 18:33:03 +08:00 via iPhone
無憂音樂網。。
|
 |
61
skmO 2022-06-27 19:04:45 +08:00
机翻感造成农场感，音乐分类大小不统一..
|
 |
63
supermao 2022-06-27 20:30:22 +08:00
现在学校还教 bootstrap 的吗
|
 |
64
Routeros 2022-06-27 20:33:51 +08:00
啥也别说了，收藏了
|
 |
65
xiansin 2022-06-27 21:22:51 +08:00
作为新手来说很不错了。
既然都采用 SPA 模式来开发了，为什么不使用 Vue+后端 我看你是用 PHP 来开发的（面向过程），你可以试一下框架（ CI ，Laravel 之类的）,但是第一个框架不建议用 laravel ，可以用 CI 之类的。 给你推荐一个 MVC 框架：flightphp 。https://flightphp.com/ |
|
66
oyp OP @supermao #63 我学校就教一下 HTML 和基础的 JS ，那些库一个都没讲，据说下学期讲 jQuery ，我 x ，垃圾学校
|
|
67
oyp OP 如果你们知道我学校开的课程有多垃圾，就知道我为什么还在用 jQuery ，并且继续追随 jQuery 了😥
|
 |
69
learnshare 2022-06-28 00:27:38 +08:00
放弃“学校教的”这种想法，自学是应该具备的核心能力之一
不要骂学校，凭自己能力考进去的，肯定是最好的 另外也不需要装作是新人，新人不上 v2 ，也不会写代码 学学 React 吧，上手很快的，只是要完全丢掉 jQuery 操作 DOM 的想法 |
|
70
oyp OP |
 |
71
xiangchen2011 2022-06-28 07:17:04 +08:00
写的挺好的，很棒
|
 |
72
Tinyang 2022-06-28 08:26:00 +08:00
发现一个小问题，win11 系统下面，音乐播放栏有部分会被系统底部任务栏挡住。
|
 |
74
cxmokai 2022-06-28 08:41:49 +08:00
你知道 Pied Piper 吗
|
|
76
eudore 2022-06-28 08:54:38 +08:00
@oyp h2 是 http2 ，需要开启 https 和 http2 选项，可以优化多路传输和传输压缩。br 是 Brotli 压缩算法，一般用于压缩 api 请求，一般静态资源是 gzip 压缩的，阅览器请求 header`accept-encoding: gzip, deflate, br`里面就指定了客户端接受的压缩算法。
|
 |
78
molvqingtai 2022-06-28 09:51:50 +08:00
讲真，新手做成这样真的很不错了
|
 |
79
UIXX 2022-06-28 09:52:37 +08:00 4
直说了吧，LZ 的方向走错了。
无论是你以学习的目的写一个 Demo 还是真正做一个可运营的站点。都应该以“抄”开始，而不是按自己想的先随性地做一个然后拿出来给大家改。 一个好的画师在磨练出自己独有的画技之前，他必须要有足够的对美的鉴赏力。有了对美丑的感觉，才有对画法好坏的定义，才有一个明确的努力方向。 我以前也曾用 JQ 手撸论坛系统，然后根据用户的体验一点点改，事后发现这完全是愚蠢的，或者说是很低效的。 像登录模块这种有“定式”的部分，我本可以借鉴外界的最佳实践，但却浪费了大量时间在改样式、文本上； 像帖子界面那样本该简洁的布局，应该把思考重心放在内容呈现上，控件的摆放细节却让我耗尽心神； 像权限分配一般重中之重的功能，我对其中的内涵一无所知，设计的时候各种“想当然”； 这一切都是因为我根本不知道这种内容系统该怎么做： 我接触的论坛类型少； 我从未在设计的角度思考我用过的这些网站； 我不知道这类站点会有哪些“潜规则”； 我只知道扣 Margin 、padding 的数值！ 回到 LZ ，你的问题大体是类似的。 其实用过时的 JQ 做项目根本不是重点，重点是你现在连一些模块怎么做，一些最基本的“定式”“常识”都没有掌握。用几个 input ？用什么过渡效果？这些主观的东西不应该是 V2er 你一言我一语地教出来的。 你现在最好的学习方式就是抄，大量地抄。从方案到具体技术，一步步来，让自己形成一种知觉，在实现框架中形成自己擅长的模式。 |
 |
81
duan602728596 2022-06-28 16:53:50 +08:00
不知道为啥，你的这个网站被我的公司 block 了
|
 |
82
fqy12300 2022-06-28 18:46:12 +08:00
新手能独立做出一个网站很不错了，问下楼主学前端多久了，BootStrap 和 JQuery 是自学的吗？
|
 |
83
GreatAuk 2022-06-29 08:12:16 +08:00
有版权问题吗
|
 |
85
pytth 2022-06-29 14:14:54 +08:00
jQuery+PHP 大法，快速、高效！
|
Select Language