阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      程序员不花一分钱,挑战全网最酷粉丝奖牌

      前言

      小伙伴们大家好,我是朱安邦,一名从事前端开发的程序员,同时我也是阿西河前端教程 (axihe.com) 的站长。

      自从上一期我做了 牛逼的程序员是怎么搜索资料的?以后,不仅得到了小伙伴们的广泛好评,还上了 B 站计算机频道编程频道的热门推荐;

      因为这个视频,我的粉丝已经突破了十万人了!!!

      感谢小伙伴们一直以来的支持,我会继续努力的,继续分享我的编程经验!如果你是从事前端开发工作的,欢迎关注我!

      当然了,你当前看到这个视频的时候,我的粉丝可能已经不是十万了;小伙伴们,你当前看到我有多少粉丝,你可以在弹幕上打出来,大家一起对比下!!!

      Tips拿出奖牌

      按照 B 站的传统,当 UP 主的粉丝突破十万以后,会给 UP 主邮寄一个十万粉的粉丝奖牌;

      我也收到了 B 站发来的小礼物!

      小伙伴,你是否有很多问号?为什么我的粉丝奖牌和别人的不一样?

      这是今年因为新型冠状肺炎的原因,所以我收到的这种,这是 B 站最新款的粉丝奖牌,你们正常看到的那种奖牌都是老款的!!!

      小伙伴们,我的这个粉丝奖牌,看起来怎么样??

      看看这色泽,看看这个细节,看看这调皮的弹幕!效果牛逼不牛逼??

      我这个粉丝奖牌,你们怎么看!请在弹幕上发一下你的看法!

      真实情况是这样的

      好吧,上面都是我一本正经的在胡说八道!!!

      真实情况是:这个奖牌是我自己做的,我的粉丝也没有十万,只有几千个;TIP:我太难了

      这个视频的前半部分是给外行看的,让还不会编程的小伙伴们看个热闹;后半部分是给程序员看的!

      除了当前这个视频以后,后续我还会出一系列的视频来做成整套的教程!

      用来演示一个互联网产品不断更新迭代的过程,由于不断的更新和迭代,所以在写代码的时候,需要一直有这个思维!

      非常推荐那些刚学前端没有多久的小伙伴来学习!

      代码我也会分享到 Github 上,Github 的仓库地址我也会发出来,欢迎大家收藏点赞啊!

      回到这一期的话题,我做的这个粉丝奖牌虽然没有花一分钱,但是,它可能真的是 B 站上最酷的粉丝奖牌了!!!TIP:从未见过如此厚颜无耻之人

      如果你在 B 站上发现有比我这个还酷的奖牌,请告诉我,我来修改它!直到它是最酷的奖牌为止!

      因为我的这个奖牌是一个网页,它属于是互联网+ 的奖牌,我输可以不断迭代和优化的!

      这年头,没有一点互联网+的思维,那怎么能行?过段时间我再给它搞到区块链上去,我再给他搞成区块链+

      如果还不够牛逼,那就上 AI 训练,给它附上 AI 人工智能,大数据,机器学习的光环!

      • 住口!
      • Tips:忽悠,接着忽悠!

      哈哈,不吹牛了;

      下面,我介绍下,我这个奖牌的特点,这是一个网页,所有人都可以通过网址直接访问,网址我会放在视频的下方,和发在评论区上。

      如果看到感觉不错的地方,可以弹幕发一波 666 啊!

      或者有改进的意见,可以也可以发出来,我都会看的!

      第一:可以自动获取 UP 主及粉丝信息

      演示效果见视频

      如果你是一位 B 站用户,那么直接传入user_id参数就可以了,会自动获取你的昵称和粉丝数,并展示对应粉丝奖牌的效果。

      UP 主粉丝数效果演示 ID演示地址
      0-10W灰色风格59312814https://www.axihe.com/demo/fans/index.html?user_id=59312814
      10W-100W白色风格2https://www.axihe.com/demo/fans/index.html?user_id=2
      100W-1000W金色风格9458053https://www.axihe.com/demo/fans/index.html?user_id=9458053
      1000W 以上红色风格546195https://www.axihe.com/demo/fans/index.html?user_id=546195

      user_id可以在 UP 主的主页看到 https://space.bilibili.com/59312814

      第二:粉丝数自动更新 (30 秒更新一次)

      演示效果见视频

      如果你一直停留在这里,粉丝数是会一直更新的,目前的更新频率是 30 秒更新一次!

      如果你把显示器垂直放着,然后配成你自己的用户 ID,显示器展示这个奖牌,粉丝数持续更新,体验还是非常好的!

      第二:自定义 UP 主昵称

      如果你感觉你的昵称不好看,或者你压根就不是一个 UP 主,那么你完全可以通过输入参数name来自定义你的显示昵称

      参数演示:https://www.axihe.com/demo/fans/index.html?name=anbang

      第三:自定义粉丝

      如果你感觉自定义昵称还不过瘾,那么你还可以尝试传入参数fans自定义粉丝数;

      把期望的粉丝数输入进入就可以了!

      注意:你自定义粉丝数以后,就直接显示你的粉丝数了,不会继续动态获取你传入的user_id的值了。

      第三:可以自定义粉丝奖牌的风格

      如果你是一名粉丝比较少的 UP 主,你不想传入假的粉丝数量;

      但是也想要 100W,1000W 的显示效果,或者自定义的效果,那么就可以传入color这个参数

      演示效果见视频

      颜色值颜色值演示 ID
      灰色效果8d9da7https://www.axihe.com/demo/fans/index.html?user_id=59312814&color=8d9da7
      白色风格ffffffhttps://www.axihe.com/demo/fans/index.html?user_id=59312814&color=ffffff
      金色风格ebce67https://www.axihe.com/demo/fans/index.html?user_id=59312814&color=ebce67
      红色风格ff5757https://www.axihe.com/demo/fans/index.html?user_id=59312814&color=ff5757
      绿色风格30ad23https://www.axihe.com/demo/fans/index.html?user_id=9458053&color=30ad23

      如果你配一个科技感的配色,非常有极客范儿!

      你甚至还可以给某个 UP 主配一个绿色,也挺有喜感的!

      当然了,这个时候,就别拿我的信息来搞了,我们要搞就搞我们关注的 UP 主!

      下面我要开始把我自己关注的 UP 主全部给它绿了!!

      如果你们也有关注这些 UP 主,可以发弹幕上和我一起喊’绿了,绿了!!! 谁谁谁绿了

      Tips开始你的表演

      演示效果见视频

      • 绿了,绿了!!! 老番茄 绿了
      • 绿了,绿了!!! 李永乐 绿了
      • 绿了,绿了!!! 徐大 sao 绿了
      • 绿了,绿了!!! 越哥说电影 绿了
      • 绿了,绿了!!! 陈翔六点半 绿了
      • 绿了,绿了!!! 杨中科 绿了
      • 绿了,绿了!!! 技术胖 绿了
      • 绿了,绿了!!! 全栈之巅 绿了
      • 绿了,绿了!!! 千锋教育 绿了
      • 绿了,绿了!!! 饥人谷前端 绿了
      • 绿了,绿了!!! 珠峰培训官方 绿了
      • 绿了,绿了!!! 渡一教育 绿了
      • 绿了,绿了!!! 极客时间 绿了
      • 绿了,绿了!!! 尚硅谷 绿了
      • 绿了,绿了!!! 黑马程序员 绿了

      道歉

      这些都是我关注的 UP 主,我说绿了可能会对他们的产品一些影响,如果有侵权,或者暂停展示,请联系我,我会相应的片段给打码和消除声音处理;也会公开道歉;

      我就不去这些 UP 主那里通知他们了,毕竟我把他们给绿了,如果再告诉他们,感觉有点不合适;

      何况我的粉丝数,你们也看到啦,也就是个 3000 粉丝的小 UP 主,不知道的还以为播关注的!

      既然绿了他们,我就免费给他们做个广告吧!我关注的这些都是感觉还可以的 B 站 UP 主,有些前端开发之外的 UP 主,有些做美食,电影之类的不错的 UP 主;

      其中大部分都是前端开发的 UP 主或者是培训机构,如果你们没有关注过,也可以去你们的频道里看看,发布的资源都还可以的。

      当然我关注他们主要的目的就是白嫖, 白嫖,他不香么?

      但是!我们也不能要求这些培训机构和我一样,所有东西都免费分享,不然他们也要倒闭了!

      虽然他们做的视频很好!但是,我做的视频更好!

      为了帮助大家,我还搞一个阿西河的网站 (axihe.com) 免费整理资源给大家!

      回到主题,这个弹幕的颜色可以随心所欲的更换,还是挺不错的!

      第四:自带弹幕滚动效果(也可禁止)

      演示效果见视频

      这个弹幕是可以动态显示的,目前的弹幕信息是我写死的;

      以后讲技术的时候,我会引导大家改为从 UP 主投稿视频里,挑选点击量最多的前三个视频;然后从三个热门视频的弹幕中随机抽几十条弹幕显示;

      并且这些弹幕,会根据字的多少来显示适合的大小,比如就两三个字的,就可以显示大一点,如果是八九个字的就小一些!

      这样会更好,更贴切 UP 的形象,也更真实!

      目前还只是写死的;

      还有就是这个滚动效果,可能很多人不喜欢,如果你感觉看着晕,看着烦!

      可以参数里传disabled来禁止滚动;参数disabled的值随便传什么都可以,只要不为空就行。

      看:传disabled以后,现在弹幕就没有滚动效果了,其实我不建议关,我觉得有滚动的弹幕会显得有灵气!

      演示效果见视频

      第五:适应电脑,手机,pad 多端显示

      为了更好的体验,我这个粉丝牌是兼容多平台的,无论你是手机,平板,还是电脑显示器,都是可以显示的;

      因为奖牌是高大于宽的,所以宽屏显示器的显示效果不怎么好,告知你们下!

      在竖屏显示器上的显示效果最好!

      你如果是多显示器,可以把你的一个显示器竖直放,显示这个奖牌,非常的酷!

      第六:所有人都可以用

      这个奖牌配置非常简单,容易上手,所有人都可以用!

      你在看别的 UP 主视频的时候,他们把奖牌玩的一屁股劲,UP 主玩嗨了,粉丝们只能看!

      粉丝不能玩,也不能一起嗨,这公平么?小伙伴们,你们认为公平吗??

      Tips:公平,公平,还是他妈公平!

      我这个网址会发出来,大家一起来玩,岂不是美滋滋啊!Tips:岂不美哉,Tips:妙啊

      老帖们,我这个粉丝奖牌,都放出来给你们白嫖了!!

      能不能发个UP主牛逼666来夸夸我啊!!!


      外行看热闹,内行看门道

      好了,演示效果说完啦,如果你是单纯看热闹的小伙伴,现在可以关视频走人了!

      后面我们要讲技术相关了,主要是讲做项目相关的,技术选择方案之类的;

      我会把这期视频做成一个系列的教程,现在只是第一集,后面会一步一步的告诉你,一个互联网产品的频繁推倒重写,和频繁更新的样子!

      我会从产品提案,到产品经理的设计,设计师出设计稿,前端工程师写页面和接口,后端工程师写接口,一直到最终的服务器部署和维护,都给大家展示一遍;

      TIP:你他娘的还是个人才啊!

      如果你想学程序员,这一期项目一定好好看,你能学到的不仅仅是编程方面的东西,更重要的是在公司中真实做项目过程中的技术实现方案的选择,以及业务的处理思路,还有向后兼容的技术思路!

      大家一定不要以为,你的技术好,你研究的技术多,你就是好的程序员;

      站在公司的角度来说,能够解决问题的程序员才是好的程序员!公司要赚钱,就必定要开发好的产品,好的产品就是需要不断迭代和更新优化的!

      这就会导致频繁的改东西,但是改需求是大家都讨厌的,所以我们在技术选择的时候,一定要注重可维护性!

      还有很多技术以外的很多东西,比如你的眼界,你的技术广度,你的见识和经验也都是同样重要的!

      实现步骤

      这一个粉丝牌的项目,主要分下面几个

      • 效果展示(这个就是第一集讲的内容)
      • 项目立案的考虑
        • 如果你是一名做产品经理的人,你要怎么保证你的产品能够预期上线!你需要准备几个版本,第一版也就是核心应该做什么,然后第二,第三该做什么!
        • 还有作为一名产品经理,你该怎么套路公司内的程序员,让公司内的小伙伴帮你快点把活给弄完!
      • 项目的技术讨论会议
        • 这一步很重要的,正常做一个项目,参与人群应该都要一起碰一个头,讨论下怎么做,顶一下第一期做什么内容,哪些东西放在后面做!
        • 这一步,最好有原型图来说,拿着原型图来讲,大家会更直观!
        • 产品经理一定要把自己的所有设想都说出来,不要只说当前做的内容;把所有的内容都说出来,会有利于技术人员的工作和最初设计!
        • 一定不要愚蠢的以为先说一个简单的,等做好了,再做一些你认为同样也是简单的需求!背后的技术可能不复杂的!这可能会导致技术人员抓狂的!
          • 当然如果你是一名经验丰富的技术人员转的产品经理,你自己会做技术评估,没有这个烦恼!
      • 设计师做 UI 设计稿
        • 这个时候前端做一些技术准备工作,比如搭建框架,封装一些需要用到的小组件
        • 后端这个时候,可以做一些搭建框架,建表等操作。
      • 前端写静态
      • 后端写接口和接口文档
      • 联调阶段
      • 部署和上线
      • 对外的宣发文档
      • 生产环境出问题怎么找责任人

      上面这些就是粉丝牌这一系列我想要分享的内容!

      这是我公司内项目的主要阶段,可能不同公司的不一样,有的公司大的,会比这复杂,项目小的,可能比这简单一些!但是大体都是类似的!

      本来我打算,把这一些都录制完成,然后分 P 上传到 B 站的;

      上一期的视频,讲"程序员怎么搜索资料的",那期视频做了 85 分钟,都快赶上电影了,很多电影,掐头去尾也就这个时间;

      很多小伙伴反应太长了,一次性看不完,后面如果是感觉时间比较长的,我都会分成几个视频传!

      但是这一期比较特殊,上面的这几部分,我想听取下大家的意见或者想听的重点!

      看这个视频的,基本都是前端开发的程序员,有些可能是刚接触的,有些是一直只做前端的,可能对项目整体的把握并不是什么好!

      假如是你,要在公司里参与一个项目;你最关心什么问题,随心所欲的提问,可以不限于技术问题啊!

      大家把做项目的疑问和问题,以及关心的知识点发出来下;

      我后面录制上面这每一步内容的时候,我会根据你们发出来的问题和疑问,重点的讲一讲!

      你提出问题的有效期是这个视频发出后的一周内,毕竟一周后我就要开始做真正的视频了!

      关于为什么选择粉丝牌这个项目

      这是一个练手的项目,起因是很多刚入行的前端开发小伙伴,有的可能是自学,有的是培训班出来;

      没有做过什么项目,或者跟着网上 / 培训班做一些比如 TODOlist,美团外卖,QQ 音乐,饿了么,王者荣耀官网等等的项目。

      我个人认为这类项目在学习的时候,是有必要的;

      但是写到简历上就有点过分了,就好比你没有真正维护过美团外卖这类的网站,你是不知道他们遇到了什么挑战,

      他们是为了避免或者优化什么问题才慢慢到现在这个样子和体验的;

      大家可能都不知道,我们也只是仿一个界面和功能罢了。

      而真正的项目不是这样的,是会频繁修改,优化和推倒以前的功能,这就要求我们做项目的时候,技术实现一定不能单纯的只完成功能,不能互相耦合的太厉害,我们需要给自己的代码留足充分的扩展空间;

      很多程序员不喜欢去外包公司,有些公司也不喜欢招聘外包公司的程序员,就是因为他们做的项目中,很多是没有长期迭代的,在某一个时间段完成了基本后面就很少去改动了,这样的场景下,代码的逻辑和设计是可能并不好(如果仅仅是自己思考,没有经过长期真实场景锤炼的代码,一般是都是伪代码)

      而粉丝牌这个项目,容易上手,起点低,会一直维护,麻雀虽小五脏俱全,用它来研究整个技术部的工作,还是很有代表意义的。

      我这里是用原生的 JavaScript 写的,我的代码风格在前端程序员里应该属于相对比较高的阶段,我写的代码,逻辑基本上还是非常清晰的;

      你完全可以按照我逻辑,用 vuejs,Reactjs,jquery,angular 等框架来写,这样就是你自己的项目了,我做的后端接口是开放的,所有人都可以用,这个奖牌的使用文档我也会放在评论区里,整个项目都是开源的,大家可以一起看看。

      给我自己打一个广告!如果你是前端程序员,可以在 B 站关注我,我会出很多前端相关的视频,或者经常看看我的阿西河前端教程,这个网站还行的!

      但是,如果你不是程序员,那就算了,你一定不要关注我,因为我基本只聊程序员相关的话题,基本都是聊技术的。

      目录
      目录