基于JavaScript的Web端股票价格查看器——大道
基于JavaScript的Web端股票价格查看器——大道
🐶 基于JavaScript的Web端股票价格查看器——大道
一、项目背景
当下互联网发展迅速，互联网已经不断向传统金融领域渗透。在互联网上有大量金融领域的数据，如何利用好这些数据，对于投资者来说是十分重要的一件事情。股票价格实时变化，而大道至简(先人说的都对)，我们能不能实现一种最简单的股票价格查看器，通过在网页上访问，以满足用户的股票价格查看需求。
二、国内外研究现状
笔者通过访谈、调查，了解国内外主要有以下几款Web端股票价格查看网站，功能，额…，都比我们强大一点点，不过，大道至简，功能多不一定好。我相信我们的产品能够有很多用户使用。
1、东方财富网https://www.eastmoney.com/
2、同花顺财经http://www.10jqka.com.cn/
4、Stock Market - Business News, Market Data, Stock Analysis - TheStreet
经过体验，我发现国内还没有一款功能单一、又有名的股票价格查看网站，所以我坚信我的这个股票价格查看网站大道一定能收获很多用户，在国内打败其他竞争对手，成为No.1。
三、需求分析
3.1 股票价格查看需求分析
一个朴实无华的股票价格查看和点赞功能。
大道这款产品就是至简，因为古语有云大道至简，我不是没能力，不是没技术，不是懒，不是因为什么原因，就是因为这款产品的名字叫大道，为什么叫大道，因为市面上没有一款专注于某一功能的商业产品，我们就要做第一个吃螃蟹的人。
四、系统详细设计与实现
接下来是流水账…我觉得这不是重点了。重要是你得理解什么是《大道》。
搭建express环境这里就不详述了，我们先来介绍第一个api的具体写法。
module.exports = function (app) {
app.route('/api/stock-prices')
.get(async function (req, res){
const{ stock , like } = req.query;
console.log(req.query);
res.json({
"success": "true"
});
};先测试路由是不是写对了，经测试没有问题。不给你们看了。
然后我们需要调用一个股票接口，接口返回数据示例如下：
{
"avgTotalVolume":31209460,
"calculationPrice":"close",
"change":-2.857,
"changePercent":-0.02534,
"close":null,
"closeSource":"official",
"closeTime":null,
"companyName":"Alphabet Inc - Class C",
"currency":"USD",
"delayedPrice":null,
"delayedPriceTime":null,
"extendedChange":null,
"extendedChangePercent":null,
"extendedPrice":null,
"extendedPriceTime":null,
"high":null,
"highSource":null,
"highTime":null,
"iexAskPrice":0,
"iexAskSize":0,
"iexBidPrice":0,
"iexBidSize":0,
"iexClose":109.96,
"iexCloseTime":1658174399531,
"iexLastUpdated":0,
"iexMarketPercent":null,
"iexOpen":null,
"iexOpenTime":null,
"iexRealtimePrice":0,
"iexRealtimeSize":0,
"iexVolume":0,
"lastTradeTime":1658174399901,
"latestPrice":109.91,
"latestSource":"Close",
"latestTime":"July 18, 2022",
"latestUpdate":1658174401108,
"latestVolume":null,
"low":null,
"lowSource":null,
"lowTime":null,
"marketCap":74208045489,
"oddLotDelayedPrice":null,
"oddLotDelayedPriceTime":null,
"open":null,
"openTime":null,
"openSource":"official",
"peRatio":null,
"previousClose":112.767,
"previousVolume":34330759.99999999,
"primaryExchange":"NASDAQ",
"symbol":"GOOG",
"volume":null,
"week52High":152.1,
"week52Low":102.21,
"ytdChange":-0.2656608471137929,
"isUSMarketOpen":false
}接口很强大吧，我们需要下载一个node-fetch包来调用该接口，获取接口内的数据。
const fetchRes = await fetch(`https://*******/v1/stock/${stock}/quote`)直接fetch即可。
'use strict';
var fetch = require("node-fetch");
const stocksDB = {};
async function getStock(stock) {
const fetchRes = await fetch(`https://*******/v1/stock/${stock}/quote`)
const {symbol ,latestPrice} = await fetchRes.json()
// return fetchResData;
return {
symbol,
price: `${latestPrice}`
}
}
async function addToStockDB(stock,like) {
const returnedStock = await getStock(stock);
const {symbol,price} = returnedStock
if(stocksDB.hasOwnProperty(symbol)){
stocksDB[symbol] = {
price,
like: like ? stocksDB[symbol].like + 1 : stocksDB[symbol].like
}
}else{
stocksDB[symbol] = {
price,
like: like ? 1 : 0
}
}
}
module.exports = function (app) {
app.route('/api/stock-prices')
.get(async function (req, res){
const{ stock , like } = req.query;
if(stock){
if(typeof stock === 'string'){
await addToStockDB(stock,like)
}else{
for(let i=0;i<stock.length;i++){
await addToStockDB(stock[i],like)
}
}
}
// const googStock = await getStock('GOOG');
res.json(stocksDB);
});
};然后我们取fetch到的json文件中的两个字段symbol ,latestPrice。
const {symbol ,latestPrice} = await fetchRes.json()addToStockDB(stock,like)将price、like、symbol放入stocksDB对象。
下面再接受参数，将参数传到addToStockDB。
请求以下url。
https://boilerplate-project-stockchecker.reganyue.repl.co/api/stock-prices/?stock=aapl&stock=goog&stock=msft&like=true得到：
{"GOOG":{"price":"113.04","like":2},"AAPL":{"price":"149.64","like":3},"MSFT":{"price":"257.84","like":1}}好了，基本的功能实现了。
接下来看下面这段代码
module.exports = function (app) {
app.route('/api/stock-prices')
.get(async function (req, res){
const{ stock , like } = req.query;
const stockKeys = [];
if(stock){
if(typeof stock === 'string'){
await addToStockDB(stock,like)
stockKeys.push(stock.toUpperCase())
}else{
for(let i=0;i<stock.length;i++){
await addToStockDB(stock[i],like)
stockKeys.push(stock[i].toUpperCase())
}
}
}
const result = Object.keys(stocksDB)
.filter(key => stockKeys.includes(key))
.map(key => ({
stock:key,
...stocksDB[key]
}));
res.json({
stockData : result
});
});
};我们新建一个stockKeys数组，将stocksDB对象里面所有key，然后用filter来过滤stockKeys，只保留stocksDB的keys中在stockKeys中存在的key，然后再用map，求stocksDB对象中所有key的值。
请求url：https://boilerplate-project-stockchecker.reganyue.repl.co/api/stock-prices/?stock=aapl&stock=goog&stock=msft&like=true
得到：
{"stockData":[{"stock":"AAPL","price":"151","like":1},{"stock":"GOOG","price":"114.62","like":1},{"stock":"MSFT","price":"259.53","like":1}]}五、结语
万物之始，大道至简，衍化至繁。
致虚极，守静笃，万物并作，吾以观复。夫物芸芸，各复归其根，归根曰静，静曰复命。
腾讯云开发者
