100行代码 5分钟开发一个数字货币行情软件（升级版）

鉴于之前 ccxt 的接口貌似被墙了。

国内访问不了。

所以我又重新用了非小号的数据重新弄了一下，现在国内的也能访问了。

非小号的 api 禁止了浏览器跨域请求。所以中间我又用我的服务器做了一层 nginx 反向代理转发接口的数据。

技术栈： html css js vue elementUI axios

流程：

行情系统无非就是一张动态数据的表格。
只要获取到数据，然后按照一定的方式展示就行了。

软件截图：

展示：

想直接查看效果请点击这里

也欢迎 start

加了一些字体和颜色，所以比上一版的要稍微好看一点…

<!DOCTYPE html><!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>5分钟开发一个行情软件</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><style>html {font-family: Roboto-medium, Roboto, PingFangSC-Medium, Microsoft YaHei;}.blue {color: #008555;}.red {color: #d60f2a;}</style>
</head><body>
<div id="app" v-loading="loading"><h1 style="text-align: center">5分钟开发一个行情软件</h1><el-table :data="tableData" style="width: 100%"><el-table-column prop="rank" width="60" label="#" sortable></el-table-column><el-table-column prop="symbol" label="币种" align="center" sortable></el-table-column><el-table-column prop="market_cap_usd" label="流通市值($)" align="right" sortable><template slot-scope="scope">{{scope.row.market_cap_usd | handleBigNumber}}</template></el-table-column><el-table-column prop="price_usd" label="全球指数($)" align="center" sortable><template slot-scope="scope"><span :class="scope.row.percent_change_1h > 0 ? 'blue' : 'red'">{{scope.row.price_usd}}</span></template></el-table-column><el-table-column prop="volume_24h_usd" label="24H额($)" align="right" sortable><template slot-scope="scope">{{scope.row.volume_24h_usd | handleBigNumber}}</template></el-table-column><el-table-column prop="market_cap_usd" label="流通数量" align="right" sortable><template slot-scope="scope">{{scope.row.market_cap_usd | handleBigNumber}}</template></el-table-column><el-table-column prop="percent_change_24h" label="24H涨幅" align="center" sortable><template slot-scope="scope"><span :class="scope.row.percent_change_24h > 0 ? 'blue' : 'red'">{{scope.row.percent_change_24h + '%'}}</span></template></el-table-column></el-table>
</div>
<script>var app = new Vue({ // Vue实例 动态绑定数据el: '#app',data() {return {tableData: [],timer: null,loading: false}},mounted() {updateDataTimer.call(this);},filters: {handleBigNumber(usd) {if (usd > 1e12) return (usd / 1e12).toFixed(2) + '万亿'if (usd > 1e8) return (usd / 1e8).toFixed(2) + '亿'if (usd > 1e4) return (usd / 1e4).toFixed(2) + '万'return usd}},destroyed() {clearInterval(this.timer);this.timer = null;}});function updateDataTimer() {  // 设计一个定时器，不停的去更新数据getExchangeInfo.call(this);}async function getExchangeInfo() { // 获取交易所的数据if (this.tableData.length === 0) this.loading = truetry {const { data } = await axios.get(`https://ticker.liuzemei.com/`)this.tableData = dataif (this.loading) this.loading = false} catch (e) {this.$message.error('加载失败...正在重试...')return getExchangeInfo.call(this)}this.timer = setTimeout(getExchangeInfo.bind(this), 60 * 1000)}
</script>
</body>
</html>

100行代码 5分钟开发一个数字货币行情软件（升级版）相关推荐

60行代码 5分钟开发一个数字货币行情软件
本文旨在研究数字货币量化交易.无意中发现,其实一款简易的行情软件可能5真的只要5分钟-就留下这篇教程,希望让更多的人了解到相关的开发.抛砖引玉~ 技术栈: html css js vue elemen ...
用python画苹果的logo_简单几步，100行代码用Python画一个蝙蝠侠的logo
转自:菜鸟学Python 简单几步,100行代码用Python画一个蝙蝠侠的logo-1.jpg (35.33 KB, 下载次数: 0) 2020-7-30 12:04 上传蝙蝠侠作为DC漫画的核心 ...
python画画100行代码_简单几步，100行代码用Python画一个蝙蝠侠的logo
原标题:简单几步,100行代码用Python画一个蝙蝠侠的logo 转自:菜鸟学Python 蝙蝠侠作为DC漫画的核心人物之一,一直都受到广大粉丝的喜爱,而笔者作为DC的铁杆粉丝,自然也是老爷(粉丝对 ...
abaqus画一个球 python_简单几步，100行代码用Python画一个蝙蝠侠的logo
蝙蝠侠作为DC漫画的核心人物之一,一直都受到广大粉丝的喜爱,而笔者作为DC的铁杆粉丝,自然也是老爷(粉丝对蝙蝠侠的昵称)的支持者.今天,笔者就用Python来画一个蝙蝠侠的logo,大概就是下图这个样 ...
python有趣的简单代码_简单几步，100行代码用Python画一个蝙蝠侠的logo
转自:菜鸟学Python 蝙蝠侠作为DC漫画的核心人物之一,一直都受到广大粉丝的喜爱,而笔者作为DC的铁杆粉丝,自然也是老爷(粉丝对蝙蝠侠的昵称)的支持者.今天,笔者就用Python来画一个蝙蝠侠的l ...
PONG - 100行代码写一个弹球游戏
大家好,欢迎来到 Crossin的编程教室 ! 今天跟大家讲一讲:如何做游戏游戏的主题是弹球游戏<PONG>,它是史上第一款街机游戏.因此选它作为我这个游戏开发系列的第一期主题. 游戏引 ...
SAP系统和微信集成的系列教程之八：100行代码在微信公众号里集成地图搜索功能
本系列的英文版Jerry写作于2017年,这个教程总共包含十篇文章,发表在SAP社区上. 系列目录 (1) 微信开发环境的搭建 (2) 如何通过微信公众号消费API (3) 微信用户关注公众号之后,自 ...
Android鬼点子 100行代码，搞定柱状图!
最近,项目中遇到一个地方,要用到柱状图.所以这篇文章主要讲怎么搞一个柱子. 100行代码,搞定柱状图! 我的印象中柱子是这样的. 恩,简单,一个View直接放到xml,搞定! 但,设计师给的柱子是这样 ...
100行代码让您学会JavaScript原生的Proxy设计模式
面向对象设计里的设计模式之Proxy(代理)模式,相信很多朋友已经很熟悉了. 其实和Java一样,JavaScript从语言层面来讲,也提供了对代理这个设计模式的原生支持.我们用一个不到100行代码的 ...

100行代码 5分钟开发一个数字货币行情软件（升级版）

软件截图：

100行代码 5分钟开发一个数字货币行情软件（升级版）相关推荐

最新文章

热门文章