本文旨在研究數字貨幣量化交易。無意中發現，其實一款簡易的行情軟件可能5真的只要5分鐘…就留下這篇教程，希望讓更多的人瞭解到相關的開發。拋磚引玉~
技術棧： html css js vue elementUI ccxt
流程
- 行情繫統無非就是一張動態數據的表格。
- 只要獲取到數據，然後按照一定的方式展示就行了。
展示
想直接查看效果 請點擊這裏.
<!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://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ccxt.browser.js"></script>
</head>
<body>
<div id="app">
<h1 style="text-align: center">5分鐘開發一個行情軟件</h1>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="info.id" width="50" sortable></el-table-column>
<el-table-column prop="symbol" label="交易對" sortable></el-table-column>
<el-table-column prop="info.high24hr" label="24小時最高價" sortable></el-table-column>
<el-table-column prop="info.low24hr" label="24小時最低價" sortable></el-table-column>
<el-table-column prop="info.last" label="最新價格" sortable></el-table-column>
<el-table-column prop="info.highestBid" label="當前最高價買價" sortable></el-table-column>
<el-table-column prop="info.lowestAsk" label="當前最低價賣價" sortable></el-table-column>
<el-table-column prop="info.percentChange" label="漲跌幅" sortable></el-table-column>
</el-table>
</div>
<script>
var app = new Vue({ // Vue實例 動態綁定數據
el: '#app',
data() {
return {
tableData: [],
timer: null
}
},
mounted() {
updateDataTimer.call(this);
},
destroyed() {
clearInterval(this.timer);
this.timer = null;
}
});
function updateDataTimer() { // 設計一個定時器，不停的去更新數據
this.timer = setInterval(() => {
getExchangeInfo.call(this);
}, 1000);
}
async function getExchangeInfo() { // 獲取交易所的數據
const exchange = new ccxt['poloniex']({
enableRateLimit: true // 打開交易限速
});
this.tableData = await exchange.fetch_markets({}); // 將值傳遞到Vue的實例中
}
</script>
</body>
</html>
也歡迎start我的github:
https://github.com/liuzemei