基于JavaScript的Web端股票价格查看器——大道

🐶 基于JavaScript的Web端股票价格查看器——大道

一、项目背景

当下互联网发展迅速，互联网已经不断向传统金融领域渗透。在互联网上有大量金融领域的数据，如何利用好这些数据，对于投资者来说是十分重要的一件事情。股票价格实时变化，而大道至简(先人说的都对)，我们能不能实现一种最简单的股票价格查看器，通过在网页上访问，以满足用户的股票价格查看需求。

二、国内外研究现状

笔者通过访谈、调查，了解国内外主要有以下几款Web端股票价格查看网站，功能，额…，都比我们强大一点点，不过，大道至简，功能多不一定好。我相信我们的产品能够有很多用户使用。

1、东方财富网https://www.eastmoney.com/

2、同花顺财经http://www.10jqka.com.cn/

3、FINVIZ.com - Stock Screener

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"
    });    
  
};
1
2
3
4
5
6
7
8
9
10
11

先测试路由是不是写对了，经测试没有问题。不给你们看了。

然后我们需要调用一个股票接口，接口返回数据示例如下：

{
    "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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

接口很强大吧，我们需要下载一个node-fetch包来调用该接口，获取接口内的数据。

const fetchRes = await fetch(`https://*******/v1/stock/${stock}/quote`)
1

直接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);
    });
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

然后我们取fetch到的json文件中的两个字段symbol ,latestPrice。

const {symbol ,latestPrice} = await fetchRes.json()
1

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
1

得到：

{"GOOG":{"price":"113.04","like":2},"AAPL":{"price":"149.64","like":3},"MSFT":{"price":"257.84","like":1}}
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
      });
    });
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

我们新建一个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}]}
1

五、结语

万物之始，大道至简，衍化至繁。

致虚极，守静笃，万物并作，吾以观复。夫物芸芸，各复归其根，归根曰静，静曰复命。