程序员不花一分钱，挑战全网最酷粉丝奖牌
前言
小伙伴们大家好，我是朱安邦，一名从事前端开发的程序员，同时我也是阿西河前端教程 (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 | 灰色风格 | 59312814 | https://www.axihe.com/demo/fans/index.html?user_id=59312814 |
| 10W-100W | 白色风格 | 2 | https://www.axihe.com/demo/fans/index.html?user_id=2 |
| 100W-1000W | 金色风格 | 9458053 | https://www.axihe.com/demo/fans/index.html?user_id=9458053 |
| 1000W 以上 | 红色风格 | 546195 | https://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这个参数
演示效果见视频
如果你配一个科技感的配色，非常有极客范儿！
你甚至还可以给某个 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 站关注我，我会出很多前端相关的视频，或者经常看看我的阿西河前端教程，这个网站还行的！
但是，如果你不是程序员，那就算了，你一定不要关注我，因为我基本只聊程序员相关的话题，基本都是聊技术的。
