V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
oyp
V2EX  ›  程序员

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

  •  4
     
  •   oyp · 2022-06-27 09:47:52 +08:00 · 7674 次点击
    这是一个创建于 640 天前的主题,其中的信息可能已经有所发展或是发生改变。
    新人程序员一枚,写了一个音乐网站,后台有 1000 首无版权的 BGM ,网站提供音乐分类、在线播放、一键下载、登陆注册、收藏音乐、音乐搜索等功能。

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

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

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

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

    新人作品,勿喷。
    第 1 条附言  ·  2022-06-27 10:34:41 +08:00
    85 条回复    2022-06-29 14:14:54 +08:00
    lucasji
        1
    lucasji  
       2022-06-27 10:04:55 +08:00
    一个小小的提升体验的建议: 点击"登陆 /注册"的时候, 鼠标最好显示成可点击样式.
    oyp
        2
    oyp  
    OP
       2022-06-27 10:09:29 +08:00
    @lucasji #1 鼠标显示小手是吗?采纳了
    codefever
        3
    codefever  
       2022-06-27 10:09:35 +08:00
    界面很简洁,比较喜欢,有个检索功能就更好了
    oyp
        4
    oyp  
    OP
       2022-06-27 10:10:35 +08:00
    @codefever #3 有音乐搜索功能的
    Asimov01
        5
    Asimov01  
       2022-06-27 10:14:43 +08:00
    新手做成这样我感觉很好了,收藏了!
    cctrv
        6
    cctrv  
       2022-06-27 10:16:53 +08:00
    Mac Safari
    NotSupportedError: The operation is not supported.
    madlifer
        7
    madlifer  
       2022-06-27 10:22:56 +08:00
    第一下我的感觉是 缺少主题性。

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

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

    总体而言我觉的需要提高一下用户意识,把自己带入用户去看一下这个项目。作为学生练习我觉的没问题,但你应该想要做的是个 sideproject 而不单纯是个练习,不然前端也不会做的看上去还过得去。
    LavaC
        8
    LavaC  
       2022-06-27 10:24:08 +08:00
    音乐分类的 hover 效果可以换一种柔和过渡的,比如原来的标题位移变大,副标题离场,单纯的切换是挺硬的。
    hiw2016
        9
    hiw2016  
       2022-06-27 10:24:11 +08:00
    博主很棒!
    ThreeK
        10
    ThreeK  
       2022-06-27 10:24:31 +08:00
    git 这个就是多用了, 先能简单的 commit 、push 能在 github 页面看到就行。其他复杂的等需要用到了再去学习就好。将来工作也是 百分之 99 都是 commit 、push 。
    Cmdhelp
        11
    Cmdhelp  
       2022-06-27 10:28:20 +08:00
    友情提醒:涉及版权的 还是少碰,牢饭可不好吃
    oyp
        12
    oyp  
    OP
       2022-06-27 10:30:35 +08:00
    @madlifer #7 这个网站主要是分享音乐,搜索功能其实不是主要的,因为大部分歌都不认识,是外面爬的的,也搜索不到,不像那种全网搜,主页加个搜索框的话,用户搜什么都是空的,就不好,所以放到导航栏去了。主要是为了让用户发现好音乐,然后在线收听或者收藏,下次也能快速找到。
    airplayxcom
        13
    airplayxcom  
       2022-06-27 10:30:49 +08:00
    相当不错了楼主
    oyp
        14
    oyp  
    OP
       2022-06-27 10:30:56 +08:00
    @LavaC #8 可以一试
    oyp
        15
    oyp  
    OP
       2022-06-27 10:31:36 +08:00
    @Cmdhelp #11 当时做这个的目的就是这个,特意去外边找的无版权的,数量也才 1 千才首
    PqgpNgA0wk
        16
    PqgpNgA0wk  
       2022-06-27 10:41:16 +08:00   ❤️ 2
    保持本心就好,挺不错的了,不用在意那些连鼠标样式都觉得需要优化的点子
    Zzzz77
        17
    Zzzz77  
       2022-06-27 10:48:07 +08:00
    首页的热门列表,要么每个块高度对齐,要么做成瀑布流布局,现在这样太奇怪了😂
    oyp
        18
    oyp  
    OP
       2022-06-27 10:51:39 +08:00
    @Zzzz77 #17 Bootstrap 的栅栏确实就有这个毛病,想过怎么优化一下,比如设置固定高度。其实弹性盒子每一项高度本来是相同的,但是内容物高度却撑不满它的父容器
    oyp
        19
    oyp  
    OP
       2022-06-27 10:52:32 +08:00
    @Zzzz77 #17 不过起码上边线是对齐的😂😂😂
    ability
        20
    ability  
       2022-06-27 10:54:24 +08:00
    音量控制很难用
    madlifer
        21
    madlifer  
       2022-06-27 10:55:52 +08:00
    @oyp 让用户去发现好音乐、在线收听、或者收藏 这跟全网搜的有啥区别,都是一个场景
    oyp
        22
    oyp  
    OP
       2022-06-27 11:00:41 +08:00
    @madlifer #21 我觉得吧,全网搜,一般知道歌名或者歌手名,然后一搜一堆,而我这都是冷门的😂😂😂😂😂。相信大部分上全网搜的人,都是大概有了关键词才会去搜吧😂😂😂😂😂
    madlifer
        23
    madlifer  
       2022-06-27 11:15:05 +08:00   ❤️ 1
    @oyp 冷门没问题 汽水音乐你搜一下 跟你的想法是一样的 其实 就是从冷门音乐里面发现好音乐,你去看看他怎么做的。如果要是抱着这个目的的话,这个需求应该把握不住。

    我跟你废话的原因就是想让你有点站在用户角度去判断项目价值的这种思维。怎么说呢,就跟建房子一样,你是个建筑工程师,但工程师应该懂需求,既然你花心思 build 了一个项目,肯定要产生相应的价值。如果不懂需求,一栋楼都不设计厕所,你自己感觉很酷,但别人并不会买,那就很没意义,得不到回应也会很消耗热情。
    oyp
        24
    oyp  
    OP
       2022-06-27 11:15:13 +08:00
    @oyp #22 用户的需求应该不同,比如我想听某杰伦,可以去可以全网搜的网站找一找,那我的目的就是为了找到这首歌,或许是下载,或许是听。而我做的这个,用户来这里肯定不能是为了找某一首歌,而是随便看看,看下热门推荐的,或者看看分类,找首自己需要的 BGM ,然后下载拿走。
    oyp
        25
    oyp  
    OP
       2022-06-27 11:16:15 +08:00
    @madlifer #23 也有道理,没毛病
    Snoopy7x7
        26
    Snoopy7x7  
       2022-06-27 11:16:52 +08:00
    renhou
        27
    renhou  
       2022-06-27 11:21:36 +08:00
    感觉很不错,下面是建议
    1.在导航栏显著位置加上 github 项目地址和你的个人网站
    2.可以加一个 logo ,ico 似乎有读取失败的问题?
    3.在一些设备如 iphone 12pro 下载键会和播放器选项重叠
    oyp
        28
    oyp  
    OP
       2022-06-27 11:26:16 +08:00
    @renhou #27 第 1 点采纳一下,第 2 点,我应该就是没放 ico ,哈哈😂,第三点,开发时有研究过,所以是刻意让它有一些重叠,这样可以减少对列表的遮挡,也有感觉是按钮吸附在了播放器上,同时也刚好不会挡住播放器的
    oyp
        29
    oyp  
    OP
       2022-06-27 11:27:39 +08:00
    @madlifer #23 “既然你花心思 build 了一个项目,肯定要产生相应的价值”,非常同意
    kapr1k0rn
        30
    kapr1k0rn  
       2022-06-27 11:43:21 +08:00
    打开页面的第一感受是配色不适合音乐网站
    可能是个人喜好问题
    twing37
        31
    twing37  
       2022-06-27 12:08:11 +08:00
    挺好的。简直就是做文网文证审查时的标准模板审核站。简洁且有效功能。
    有相关热心的同学可以做一套相关的开源出来。
    Vegetable
        32
    Vegetable  
       2022-06-27 12:11:29 +08:00
    挺好的
    Macv1994
        33
    Macv1994  
       2022-06-27 12:30:13 +08:00
    @oyp #18 可以在子容器使用 class="h-100",所有子容器高度就全部一样了
    oyp
        34
    oyp  
    OP
       2022-06-27 12:41:03 +08:00
    @Macv1994 #33 真的可以,学到了,感谢🙏
    oyp
        35
    oyp  
    OP
       2022-06-27 12:50:11 +08:00
    @Macv1994 #33 已经用刚才这个方法修复好了,栅栏高度一致了,可以刷新网站看看 web.app.ouyangpeng.top/poncon-copyrighted-music/
    MarkP
        36
    MarkP  
       2022-06-27 12:53:26 +08:00
    没进去的时候我就在想是不是用的 APlayer ,果然哈哈
    Macv1994
        37
    Macv1994  
       2022-06-27 12:55:17 +08:00
    @oyp 哈哈哈,互相学习,你这网站速度还挺快的,服务器啥配置呀?
    oyp
        38
    oyp  
    OP
       2022-06-27 12:58:15 +08:00
    @Macv1994 #37 阿里云学生机,1 核 2G
    eudore
        39
    eudore  
       2022-06-27 14:31:30 +08:00
    缓存 样式 移动适配都不错 ,挑两个鸡蛋 没有 h2 传输和 br 压缩,lpy 不知道是啥,功能没看。
    eudore
        40
    eudore  
       2022-06-27 14:33:49 +08:00
    var 三大框架任选一个基本是标配了,随便学几个玩玩,开发的思维模式不同,jq 还是有点老。
    oyp
        41
    oyp  
    OP
       2022-06-27 14:34:40 +08:00
    @eudore #39 后面两个是什么,请教一下😂😂😂
    Xnor
        42
    Xnor  
       2022-06-27 14:58:30 +08:00
    @oyp 「 var 」应该分别代表「 Vue.js 」「 Angular 」「 React 」三大前端框架吧,如有错误望指正。
    zidian
        43
    zidian  
       2022-06-27 15:11:49 +08:00
    用户登录的用户名和密码那里,还是等宽比较好看。
    SuperXRay
        44
    SuperXRay  
       2022-06-27 15:16:47 +08:00   ❤️ 1
    #7 @madlifer 说的完全不对,这个无版权 BGM 已经是一个主题了。
    非要去和那些商业音乐软件作对比,跟不上同类产品,说都说不到点子上
    light000
        45
    light000  
       2022-06-27 15:18:15 +08:00
    没有下一页的情况下,就没必要显示“加载更多”的按钮了
    或者可以判断滚动距离,做一个自动加载下一页
    Nich0la5
        46
    Nich0la5  
       2022-06-27 15:21:53 +08:00
    样式上
    1 登录页,注册页,用户名,密码要对齐,一长一短很丑
    2 主页分类部分的切换要加过渡效果
    3 搜索框的阴影有点奇怪
    4 header 部分的动画效果不够突出

    PHP 咱不是特别熟,技术实现先不评价,不过就源码来看 login.php 页有个很大的 sql 注入风险
    freetes
        47
    freetes  
       2022-06-27 15:39:41 +08:00
    “登陆” 务必改成 “登录”,谢谢🙏
    oyp
        48
    oyp  
    OP
       2022-06-27 15:44:59 +08:00
    @Nich0la5 #46
    1. 请教一下怎么对齐比较好呢?登录页 2 个 input ,注册框 5 个 input ,我觉得很难
    2. 什么叫过渡效果呢?是淡入淡出吗?还是幻灯片那种换页效果
    3. Bootstrap 输入框自带阴影的,我只是改了下颜色,可能颜色对有些人来说是奇怪
    4. Header 部分有动画吗?指的是?
    oyp
        49
    oyp  
    OP
       2022-06-27 15:47:23 +08:00
    @freetes #47 我好像没有出现“登陆”吧,就一串注释中出现了一下,也看不到😂😂😂😂😂,确实没注意过
    gscsnm
        50
    gscsnm  
       2022-06-27 15:49:34 +08:00
    BUG:?
    登录后:
    1. 点击“关于”,点击“无忧音乐网”,无反应,感觉应该跳转到主页。
    2. 点击“关于”,点击“无忧音乐网”,在点击“主页”,无反应。
    oyp
        51
    oyp  
    OP
       2022-06-27 15:50:03 +08:00
    @Nich0la5 #46 “login.php 页有个很大的 sql 注入风险”????有点懵了。没注意诶,我只知道我用 addslashes()把表单数据都转义了,还有注入风险??求教一下
    oyp
        52
    oyp  
    OP
       2022-06-27 15:52:01 +08:00
    @gscsnm #50 对,确实是 Bug ,好像不点那个“无忧音乐网”,就不会,问题应该在那里😂😂
    Nich0la5
        53
    Nich0la5  
       2022-06-27 15:53:02 +08:00
    @oyp #48 你对比一下
    第二条指的是鼠标移上去的时候图标的变化,有些突然
    阴影的范围的感觉有点奇怪,中间截断的不太自然
    header 鼠标移入的颜色加深不是很明显,视觉锚点不够强
    oyp
        54
    oyp  
    OP
       2022-06-27 15:55:09 +08:00
    @Nich0la5 #53 是这个呀😂😂😂😂确实是哈,我也觉得是
    Nich0la5
        55
    Nich0la5  
       2022-06-27 15:57:56 +08:00
    @oyp #51 addslashes 也是有绕过风险的,咱没完整看源码,就是提一下
    oyp
        56
    oyp  
    OP
       2022-06-27 15:59:05 +08:00
    @gscsnm #50 好像是某个情况下,Logo 部分的 click 事件消失了,应该是被 jQuery 选择器波及到了吧😂😂😂
    lyc575757
        57
    lyc575757  
       2022-06-27 17:56:20 +08:00
    下一步推荐新建一个仓库 用 vite+vue3+ts 重写一个前端界面 UI 组件库方面可以选择 unocss Element-plus
    tmrQAQ
        58
    tmrQAQ  
       2022-06-27 18:07:35 +08:00
    下面播放的工具栏感觉图标感觉太小了,工具栏长度感觉可以短一些,现在看着有点长。
    xuelu520
        59
    xuelu520  
       2022-06-27 18:15:28 +08:00
    列表可以改为瀑布流
    分类占用太多多位置。
    卡片加个鼠标 hover 的阴影效果?
    cnrting
        60
    cnrting  
       2022-06-27 18:33:03 +08:00 via iPhone
    無憂音樂網。。
    skmO
        61
    skmO  
       2022-06-27 19:04:45 +08:00
    机翻感造成农场感,音乐分类大小不统一..
    skmO
        62
    skmO  
       2022-06-27 19:05:08 +08:00
    @skmO 大小写
    supermao
        63
    supermao  
       2022-06-27 20:30:22 +08:00
    现在学校还教 bootstrap 的吗
    Routeros
        64
    Routeros  
       2022-06-27 20:33:51 +08:00
    啥也别说了,收藏了
    xiansin
        65
    xiansin  
       2022-06-27 21:22:51 +08:00
    作为新手来说很不错了。
    既然都采用 SPA 模式来开发了,为什么不使用 Vue+后端
    我看你是用 PHP 来开发的(面向过程),你可以试一下框架( CI ,Laravel 之类的),但是第一个框架不建议用 laravel ,可以用 CI 之类的。
    给你推荐一个 MVC 框架:flightphp 。https://flightphp.com/
    oyp
        66
    oyp  
    OP
       2022-06-27 22:46:15 +08:00
    @supermao #63 我学校就教一下 HTML 和基础的 JS ,那些库一个都没讲,据说下学期讲 jQuery ,我 x ,垃圾学校
    oyp
        67
    oyp  
    OP
       2022-06-27 22:47:19 +08:00
    如果你们知道我学校开的课程有多垃圾,就知道我为什么还在用 jQuery ,并且继续追随 jQuery 了😥
    Macv1994
        68
    Macv1994  
       2022-06-28 00:09:22 +08:00
    @supermao bootstrap 都更新到 5 了,为什么不能教。。。。
    learnshare
        69
    learnshare  
       2022-06-28 00:27:38 +08:00
    放弃“学校教的”这种想法,自学是应该具备的核心能力之一
    不要骂学校,凭自己能力考进去的,肯定是最好的
    另外也不需要装作是新人,新人不上 v2 ,也不会写代码

    学学 React 吧,上手很快的,只是要完全丢掉 jQuery 操作 DOM 的想法
    oyp
        70
    oyp  
    OP
       2022-06-28 00:47:30 +08:00 via Android
    @learnshare 我确实是放弃了学校教的,全都靠自学,所以就上这来了,想要快速提升,就要多接受批评!

    在我看来,我这水平就是新人,没有装作新人,哈哈😄
    xiangchen2011
        71
    xiangchen2011  
       2022-06-28 07:17:04 +08:00
    写的挺好的,很棒
    Tinyang
        72
    Tinyang  
       2022-06-28 08:26:00 +08:00
    发现一个小问题,win11 系统下面,音乐播放栏有部分会被系统底部任务栏挡住。
    oyp
        73
    oyp  
    OP
       2022-06-28 08:36:53 +08:00
    @Tinyang #72 你这个是系统任务栏挡住网页了吗?我好像没遇到过,我怎么看着是浏览器的问题😂😂
    cxmokai
        74
    cxmokai  
       2022-06-28 08:41:49 +08:00
    你知道 Pied Piper 吗
    oyp
        75
    oyp  
    OP
       2022-06-28 08:45:51 +08:00
    @cxmokai #74 那是什么,歌名吗
    eudore
        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`里面就指定了客户端接受的压缩算法。
    jezal
        77
    jezal  
       2022-06-28 09:08:24 +08:00
    @oyp @cxmokai 那是一个伟大的公司 doge :-)
    molvqingtai
        78
    molvqingtai  
       2022-06-28 09:51:50 +08:00
    讲真,新手做成这样真的很不错了
    UIXX
        79
    UIXX  
       2022-06-28 09:52:37 +08:00   ❤️ 4
    直说了吧,LZ 的方向走错了。

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

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

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

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

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

    你现在最好的学习方式就是抄,大量地抄。从方案到具体技术,一步步来,让自己形成一种知觉,在实现框架中形成自己擅长的模式。
    oyp
        80
    oyp  
    OP
       2022-06-28 14:11:29 +08:00
    @UIXX #79 采纳了,谢谢
    duan602728596
        81
    duan602728596  
       2022-06-28 16:53:50 +08:00
    不知道为啥,你的这个网站被我的公司 block 了
    fqy12300
        82
    fqy12300  
       2022-06-28 18:46:12 +08:00
    新手能独立做出一个网站很不错了,问下楼主学前端多久了,BootStrap 和 JQuery 是自学的吗?
    GreatAuk
        83
    GreatAuk  
       2022-06-29 08:12:16 +08:00
    有版权问题吗
    cxmokai
        84
    cxmokai  
       2022-06-29 08:37:55 +08:00
    @oyp 美剧《硅谷》的男主,最开始也建了一个音乐网站,就是 Pied Piper
    pytth
        85
    pytth  
       2022-06-29 14:14:54 +08:00
    jQuery+PHP 大法,快速、高效!
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4924 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 09:52 · PVG 17:52 · LAX 02:52 · JFK 05:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.