最近在学习 Angular 5，试着做了一个查看数字货币行情的 Web App

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2472 天前的主题，其中的信息可能已经有所发展或是发生改变。

基于学习一种前端框架的目的，选择 Angular 框架，开发了一个展示数字加密货币（ Cryptocurrency ）的 Web App，欢迎浏览 crypto.kris2d.info 进行查看（服务器就单核，512MB，最便宜的那种 VPS，希望不会崩）。

目前仅支持 10 种货币，挑选了市值最大的几个，可以获取并更新实时价格信息，数据来源 CryptoCompare。点击每一种货币可以进一步浏览最近 24h、7 天、1 个月以及 1 年的价格走势，后续会增加更多的币种和排序功能。

其它特性

应用了 Ant Design 简化了部分视觉代码，视觉风格上保持统一；
每 10 秒获取最新的价格数据，如果价格产生变化，根据涨跌情况渲染不同颜色的背景色作为提示（具体的效果个人感觉没有很流畅，后续进行完善）；
价格走势图使用 Chart.js 绘制，根据需求进行了许多自定义修改，例如增加了伴随鼠标移动的纵向线，增加了图标数据的可读性，手机端纵向线也会随着手指的触摸左右移动，美观上还有待改善；

crypto-01 crypto-02 crypto-03

To-do

增加更多数字货币，可能的话，按照最新的市值动态获取数据；
增加首页表格的排序功能；
favicon 在上线后没有正常显示，本地测试没有问题，需要再后续解决；
服务器 nginx 配置和性能优化（原打算将 nginx 配合另一个 http server 作为 reverse proxy 来使用，无奈总是遇到 403 forbidden error，后续再尝试优化）；

这次开发前前后后还是遇到了不少坑，不过进步慢慢来吧。遇到 bug 告诉我，我改......

第 1 条附言 · 2018-02-24 15:29:08 +08:00

小更新：

・项目已开源，附有 License，见： https://github.com/mrcotter/crypto-market
・显示 Top 20 数字货币，之后如果再增加考虑对表格分页；
・增加了按货币名称排序的功能，为此重新调整了部分数据结构，以适应排序事件触发的算法，稍后再增加一个按 Symbol 排序就好，其它列排序意义不大。

第 2 条附言 · 2018-03-07 20:35:23 +08:00

再次更新：

全站启用 HTTPS（支持 HTTP/2），使用 Let's Encrypt 的免费证书；
增加数字货币总量到 60，以后有需要再增加，常用的基本都有了；
增加了查找和排序功能，可以切换每页显示的货币数量，默认 20/page；
为了偷懒，集成了 Travis CI 进行自动化 build 和 deployment。

欢迎测试反馈，在开发中不仅遇到了坑，自己还挖了坑....最终只能几经周折地填上，明天开始再在我的博客上更新一些心得吧。

Nginx

angular

货币

后续

48 条回复 • 2018-02-24 15:28:10 +08:00

treycheng

2018-02-14 21:19:11 +08:00 via Android

数据从哪来呢

madNeal

2018-02-14 21:51:02 +08:00

考不考虑开源啊

oIMOo

2018-02-14 21:54:12 +08:00

@treycheng 仔细审题……

mrcotter2013

2018-02-14 21:58:19 +08:00

@treycheng #1 CryptoCompare 有提供 API

mrcotter2013

2018-02-14 21:58:56 +08:00

@madNeal #2 等我把英文 README 写好再开源，加上功能还想完善一下

Nick2VIPUser

2018-02-14 22:58:12 +08:00

大佬这个后台用的什么？

jigi330

2018-02-14 23:08:48 +08:00

很清爽，速度也不慢

mrcotter2013

2018-02-14 23:27:27 +08:00

@Nick2VIPUser #6 纯前端.....没有后端代码，如果你所说的后台指的是这个

YuuuZeee

2018-02-14 23:32:06 +08:00 via Android

好棒呀！希望能开源看下！

Nick2VIPUser

2018-02-14 23:43:51 +08:00

@mrcotter2013 明白，你这个是直接用 angular 处理 API 获得的数据然后在前端显示。我说的后台的意思是 java/node/python 之类的在服务器上搭建的后端服务。

CEBBCAT

2018-02-14 23:52:24 +08:00 via Android

@Nick2VIPUser 我猜有个 Nginx 就够了

owlsec

2018-02-15 00:13:21 +08:00

很好看了

Lxxyx

2018-02-15 00:27:20 +08:00

很好看

fazero

2018-02-15 00:30:50 +08:00 via iPhone

希望开源

mrcotter2013

2018-02-15 07:16:11 +08:00 via iPhone

@CEBBCAT 就是这样

Monstercat

2018-02-15 08:03:04 +08:00

老哥你页面上 Crypto 拼错了

Flobit

2018-02-15 08:11:31 +08:00 via Android

马克！

mrcotter2013

2018-02-15 08:25:58 +08:00 via iPhone

@Monstercat 还真是……重新 build 一次

victor

2018-02-15 08:47:26 +08:00

很好用，打算当做常用站点了，感谢

mrcotter2013

2018-02-15 08:49:18 +08:00

主题已经无法修改......这里的图片就这样吧，App 内的标题错误已经改过来了.....

dexter

2018-02-15 09:15:32 +08:00

马克,开源更好

buseni

2018-02-15 09:38:53 +08:00 via Android

很好，很好！

xcv58

2018-02-15 11:16:29 +08:00 via iPhone

👍

sobigfish

2018-02-15 11:55:40 +08:00

喜欢简洁的设计
（虽然我用不上）
有 2 个币之间汇率换算就更好了

saran

2018-02-15 12:01:08 +08:00

手机试了好几次，打开空白 /小米

mrcotter2013

2018-02-15 13:25:56 +08:00

@sobigfish #24 这个实现应该不难，不过需要重新做个页面....先记下这个功能

mrcotter2013

2018-02-15 13:30:54 +08:00

@saran #25 不会吧.... 不过我没有小米可以测试，什么浏览器？还有个可能是你的网络服务或者 App 本身把我用的服务器 IP 给毙了，反正我试过微信和 QQ 的内置浏览器都访问不了..... 除非我申请认证网站，然后就必须要填身份证、电话什么的了，打死我都不干

Alexander321

2018-02-15 13:39:52 +08:00 via iPhone

码住

saran

2018-02-15 13:43:38 +08:00 via Android

@mrcotter2013 加载有但是就是空白。
![Screenshot_2018-02-15-13-39-12-237_com.android.browser.png]( https://i.loli.net/2018/02/15/5a851dd872654.png)

tyfyc

2018-02-15 13:49:31 +08:00 via iPhone

比 Bitcointicker 的手机版好用多了，已 bookmarked

ericgui

2018-02-15 14:05:08 +08:00

你难道不 cache 一下？

hqdmy

2018-02-15 14:20:17 +08:00

不错哦,不开源么.

mrcotter2013

2018-02-15 14:22:44 +08:00

@saran #29 这个要真正找到问题可能需要将手机连接到电脑上调试..... 我能做的只是打开所有的 polyfills 设置以保证最大的浏览器兼容性，如果还是不行，暂时无解....

mrcotter2013

2018-02-15 14:24:51 +08:00

@ericgui #31 其实有想过，不过这样就算是增加一个后端服务了。CryptoCompare 的公共 API 有单位时间内的访问次数限制，以后会考虑做个 cache，前端只从 cache 里读取数据，后台定时更新数据

ericgui

2018-02-15 14:31:58 +08:00

@mrcotter2013 不用后端什么的，react 能读取 redis 的数据。放在 redis 里面

mrcotter2013

2018-02-15 14:37:39 +08:00

@ericgui #35 需要另外学 redis，还有怎么用 Angular 读数据，以前搞服务器只用过 memcahed

jrtzxh020

2018-02-15 15:31:13 +08:00 via iPhone

@Nick2VIPUser 人家拿的是别人网站的数据。所以没有你说的后台

jlkm2010

2018-02-15 16:25:12 +08:00

浏览器本地 cache 一下也能顶一顶

keysona

2018-02-15 18:45:02 +08:00

一年了...

上一年在学习 Angular2，转眼间，已经 5 了.....

mrcotter2013

2018-02-15 19:04:02 +08:00

@keysona #39 噗，其实版本号跳过了 3，是不是多少有点心理安慰

wspsxing

2018-02-15 23:20:07 +08:00

Ng 的体积确实感人啦，虽然用了组件库差距就不那么大了。。

ToT

2018-02-16 03:27:15 +08:00

不错哦楼主，有不少人在做这个呢。再加个指定价格区间提醒功能；再加个基本 Index 预测功能；再加个自动交易功能。。。。。

aristotll

2018-02-16 08:29:01 +08:00

@wspsxing #41 angular aot 的 compile 还是蛮厉害的

mrcotter2013

2018-02-23 16:58:46 +08:00

CEBBCAT

2018-02-24 14:06:41 +08:00

@mrcotter2013 #42 全站 https 吧

mrcotter2013

2018-02-24 14:48:58 +08:00

@CEBBCAT #45 会加入的，目前还有别的事情要做，往后放......网站信息没什么可以 hack 的，也没有交易功能

CEBBCAT

2018-02-24 15:00:03 +08:00

@mrcotter2013 #44 前两天上个豆瓣发现被不良员工跟 360 勾搭给劫持到广告页面就很气

对了,这种状态的更新还是用 APPEND 比较好喔!

mrcotter2013

2018-02-24 15:28:10 +08:00

哦哦，感谢提醒，才看到那个 Append，之前只知道 V2EX 发的帖没法修改......