用TypeScript教你从0搭建和部署自己的服务端数据卡片(以掘金作为示例)

Electrolux2023-10-16 16:22

代码链接：github.com/yilaikesi/d...

1.0 引言

你是不是曾经好奇github的朋友们他们花花绿绿的github主页是怎么做的，类似下图

这篇文章带你从工程化的角度实现这样一个数据卡片。在本篇文章中，你能够学到

  • ts的基本使用方法
  • 国际化多语言支持 | icon基础引入渲染 | svg渲染拼装
  • 爬取数据
  • 如何工程化组织你的层级结构并进行代码的组装
  • 服务器(docker)和vercel如何部署node服务

你可以通过。data-card-812nza0vi-yilaikesis-projects.vercel.app/ 访问数据卡片主页，通过

bash 复制代码 
https://data-card-812nza0vi-yilaikesis-projects.vercel.app/api/juejin?id=3004311888208296&lang=zh-CN&theme=black

将id替换也可以看到你的掘金数据卡片。但是注意的是vercel可能会总是 抽风，因此你需要用你懂的工具进行斡旋。

下面是渲染出来的一些卡片效果

好了，我们开始实践吧

1.1 从0搭建基本web结构

java 复制代码 
│  app.ts
│  package.json
│  README.md
├─common
│      cache.ts
│      theme.ts
│      utils.ts
└─public

我们首先把这些基础的文件填充一下

1.1.1 app.ts

  • 简单的api请求示例，没啥好说的

    ini 复制代码 
    const express = require('express');
const http = require('http');
const serveStatic = require('serve-static');
const app = express();
const { cacheTime } = require('./common/cache');
const path = require('path');;
app.use('/api/test', function(req, res) {
    res.send({
        code:200,
        message:cacheTime
    })
});
app.use(
  serveStatic(path.join(__dirname, 'public'), {
    maxAge: cacheTime * 1000,
  })
);
const server = http.createServer(app);
server.listen(3000);
module.exports = app;

1.1.2 common/cache.ts

  • lru

    arduino 复制代码 
    // https://github.com/isaacs/node-lru-cache
const LRU = require('lru-cache');
​
const cacheTime = process.env.CACHE_TIME || 100 * 60; // 100 min
const maxCacheItems = process.env.MAX_CACHE_ITEMS || 1024;
​
const options = {
  max: maxCacheItems,
  // how long to live in ms
  ttl: (cacheTime as number) * 1000,
  // return stale items before removing from cache?
  allowStale: true,
  updateAgeOnGet: false,
  updateAgeOnHas: false,
};
​
const cache = new LRU(options);
​
export {
  cache,
  cacheTime,
};
​

1.1.3 common/theme.ts

  • 自定义主题的地方

    typescript 复制代码 
    interface ThemeType{
  IconColor:string;
  TextColor:string;
  BackgroundColor:string
}
let themes:Record<string,ThemeType> = {
  'black': {
    IconColor: 'Lightblue',
    TextColor: 'rgba(250,250,250,1)',
    BackgroundColor:"rgba(0,0,0,0.85)"
  },
  'white': {
    IconColor: '#2f80ed',
    TextColor: '#434d58',
    BackgroundColor:"#fffefe"
  },
  "default":{
    IconColor: '#2f80ed',
    TextColor: '#434d58',
    BackgroundColor:"#fffefe"
  }
};
function getTheme(theme = 'light') {
  if (theme in themes) {
    return themes[theme] as ThemeType;
  } else {
    return themes['light'] as ThemeType;
  }
}
​
export {
  getTheme
}

1.1.3 common/utils.ts

  • 一些工具方法
javascript 复制代码 
const mobileConfig = {
  headers: {
    'User-Agent':
      'Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.104 Mobile Safari/537.36',
  },
};
const desktopConfig = {
  headers: {
    'User-Agent':
      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Safari/537.36',
  },
};
​
const isEndsWithASCII = (str) => {
  if (str.length === 0) return false;
  return str.charCodeAt(str.length - 1) <= 127;
};
​
const encodeHTML = (str) => {
  return str
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, ''');
};
​
export  {
  mobileConfig,
  desktopConfig,
  isEndsWithASCII,
  encodeHTML,
};
​

1.1.4 tsconfig.json

  • 一些数据结构我才加typescript了。其他的懒得加。所以把strict 关掉了
json 复制代码 
{
  "compilerOptions": {
    "target": "esnext", // 使用最新的 ECMAScript 版本
    "module": "commonjs",
    "lib": [
      "ES2022",
      "dom",
      "es6"
    ],
    "rootDir": "./", /* Specify the root folder within your source files. */
    "strict": false /* Enable all strict type-checking options. */,
    "noImplicitThis": false,
    "skipLibCheck": true /* Skip type checking all .d.ts files. */,
    "esModuleInterop": true, // important!
  },
  "outDir": "dist",
  "exclude": [
    "node_modules"
  ]
}

1.1.5 package.json

  • 可以看到npm run dev 启动，这里启动用到了concurrently ， nodemon 和 tsc 的 watch。主要是因为 nodemon 和 tsc 并不能够同时执行，所以需要 concurrently 作为媒介使得双方同时启动
  • 然后是 cheerio,axios都是 用来执行爬取 html 的工具
python 复制代码 
{
    "name": "data-card",
    "version": "0.1.0",
    "description": "",
    "main": "app.js",
    "scripts": {
        "start": "node ./app.js",
        "test": "node ./test.js",
        "dev": "concurrently "npm run dev:server" "npm run dev:compile"",
        "dev:compile": "tsc --project ./ --watch ",
        "dev:server": "nodemon ./app.js"
    },
    "repository": {
        "type": "git",
        "url": "git+https://github.com/songquanpeng/readme-stats.git"
    },
    "author": "",
    "license": "MIT",
    "bugs": {
        "url": "https://github.com/songquanpeng/readme-stats/issues"
    },
    "homepage": "https://github.com/songquanpeng/readme-stats#readme",
    "dependencies": {
        "axios": "^0.21.1",
        "cheerio": "^1.0.0-rc.5",
        "concurrently": "^8.2.1",
        "express": "^4.17.1",
        "form-data": "^4.0.0",
        "lru-cache": "^7.14.1",
        "serve-static": "^1.15.0",
        "typescript": "^5.2.2"
    },
    "devDependencies": {
        "nodemon": "^2.0.7",
        "prettier": "^2.2.1"
    },
    "prettier": {
        "singleQuote": true
    },
    "engines": {
        "node": "16.x"
    }
}
​

1.1.6 启动

这个时候我们可以 npm run dev 启动一下。然后你就可以试试访问你的

http://localhost:3000/api/test

如果这个时候界面中显示

css 复制代码 
{
  "code": 200,
  "message": "success"
}

那么你的基本结构就已经完成了

1.2 添加服务端爬取卡片(用掘金作为示例)

1.2.0 基础思路

爬取卡片我们分成几个层级来讲

  • model层：定义数据获取的地方
  • views层：怎么将数据渲染
  • common：主要是一些工具函数和一些静态资源：例如 icon，cache，theme

我们首先需要定义我们的传参是啥

css 复制代码 
interface param{
    id:string:number;
	lang:"zh-CN" | any;
	theme:"white" | "black"
}

定义以下的api传参:http://localhost:3000/api/juejin?id=3004311888208296&lang=zh-CN&theme=black。

下面是流程图

flowchart TD api[app.ts 传入 id lang theme] --> | 入口 | api_file(api文件夹/juejin.ts) api_file(api文件夹/juejin.ts) --> iscache{缓存} iscache --> | 有lru缓存 | iscacheyes[读取缓存] iscacheyes --> view iscache{缓存} --> | 无lru缓存,执行爬虫爬取文件 | iscacheno[model/juejin.ts] iscacheno --> crawldom(api接口后解析dom) iscacheno --> crawlapi(api接口) crawldom --> view[view/juejin.ts执行renderJuejinCard] crawlapi --> view[view/juejin.ts执行renderJuejinCard] view --> renderitemlang[判断语言] view --> renderitemstruct[组装数据array的Item] renderitemlang --> last[根据传入的数据common/render.ts 执行 Render] renderitemstruct --> last last --> renderType[renderType判断type是title,shape,textarea连接dom] last --> renderTheme[渲染主题色]

1.2.0 入口

根路径的 app.ts 写入,如下方法

ini 复制代码 
const express = require('express');
const http = require('http');
const serveStatic = require('serve-static');
const app = express();
const { cacheTime } = require('./common/cache');
const path = require('path');;

app.use('/api/test', function(req, res) {
    res.send({
        code:200,
        message:"succe3ss"
    })
});


const juejin = require('./api/juejin');
app.use('/api/juejin', juejin);
app.use(
  serveStatic(path.join(__dirname, 'public'), {
    maxAge: cacheTime * 1000,
  })
);
const server = http.createServer(app);

server.listen(3000);
module.exports = app;

1.2.1 controller层

我们在根路径新建一个api文件夹

写入juejin.ts

javascript 复制代码 
const {getJuejinInfo} = require('../model/Juejin');
const {renderJuejinCard} = require('../view/Juejin');
const { cacheTime, cache } = require('../common/cache');

/**
 * @des 中间处理层 | 解析用户数据
 */
export = async (req, res) => {
  const { id, theme, lang, raw } = req.query;
  let key = 'j' + id;
  let data = cache.get(key);
  // if (!data) {
  //   // 用来获取数据
  //   data = await getJuejinInfo(id);
  //   cache.set(key, data);
  // }
  data = {
    user_name: 'username',
    // 掘力值
    power: 0,
    // 关注人数
    follower_count:0,
    // 总浏览量
    got_view_count:0,
    // 总点赞量
    got_digg_count:0,
    description:"简介"
  };
  data.theme = theme;
  if (raw) {
    return res.json(data);
  }
  res.setHeader('Content-Type', 'image/svg+xml');
  res.setHeader('Cache-Control', `public, max-age=${cacheTime}`);
  return res.send(renderJuejinCard(data, lang));
};

我们可以看到这里面入口主要是定义了两个 主要的逻辑

  • model层函数getJuejinInfo：主要用来做数据的获取
  • view层函数renderJuejinCard：主要用来做数据(svg)的渲染

这两个东西在上文都有提到

1.2.2 model层

根目录下面新建model文件夹，新建juejin.ts

我们在model 获取数据的方法主要有两种

1.2.2.1 axios 获取 json

ini 复制代码 
这种方式是需要你提前通过抓包等方式获取 api 接口的地址。然后直接通过 axios 请求获取 请求体里面的json数据

let res = await axios.get(
    `https://api.juejin.cn/user_api/v1/user/get?user_id=${id}`
)

result = Object.assign({},result,res.data.data)

1.2.2.2 axiosi获取dom,用cheerio进行解析

第二种是cheerio，万一你不想通过抓包的方式获得api接口地址，你可以通过 axios 获取 整个 html 文件 然后用 cheerio 进行 html 的 解析，解析的规则跟css 的 规则一样

javascript 复制代码 
/**
     * @des 第二种:解析html数据示例
*/
let test =  await axios.get(
    `https://juejin.cn/user/${id}`, {
        "Header": {
        }
    }
)
let $ = cheerio.load(test.data);
    
$('.username .user-name').each((i, e) => {
	result.name = $(e).text();
});

就是根据id 获取 html dom 中的 .username 和 .user-name 里面的 text 文本

1.2.2.3 解决ts数据显示不全 common/type.ts

注意一下下方的ShowMe工具方法 如下

ini 复制代码 
//  解决单层ts显示不全
export type ShowMe<T> = {
    [K in keyof T]: T[K];
} & {};

参考连接可以看：stackoverflow.com/questions/5...

为了解决ts中数据类型 不显示全面的问题

1.2.2.4 示例代码

最后model/juejin.ts 中写入

typescript 复制代码 
const axios = require('axios');
const cheerio = require('cheerio');
const fs = require('fs');
const axiosConfig = require('../common/utils').mobileConfig;
import { ShowMe } from "../common/type.js"

// type xx & {}
type JueJinReceiveType =  {
  // [key : string ] : any;
  user_name: string,
  // 掘力值(yes)
  power: number,
  // 文章数(yes)
  post_article_count: number,
  // 总浏览量(yes)
  got_view_count: number,
  // 点赞(yes)
  got_digg_count: number,
  // 发布沸点
  post_shortmsg_count: number,
  // 默认添加theme
  theme?:any
} 



async function getJuejinInfo(id) {
  // 定义基本数据
  let result:JueJinReceiveType = {
    // 名字
    user_name: 'username',
    // 掘力值(yes)
    power: 0,
    // 文章数(yes)
    post_article_count:0,
    // 总浏览量(yes)
    got_view_count:0,
    // 点赞(yes)
    got_digg_count:0,
    // 发布沸点
    post_shortmsg_count:1
  };
  
  try {
    // 两种数据 获取示例
    /**
     * @des 第一种:api示例
     */
    let res = await axios.get(
      `https://api.juejin.cn/user_api/v1/user/get?user_id=${id}`
    )

    result = Object.assign({},result,res.data.data)

    // 方便调试
    fs.writeFile('./api_juejin.json', JSON.stringify(result), err => {
      if (err) {
        console.error(err);
      }
    });
   
  } catch (e) {
    console.error(e);
  }
  return result as JueJinReceiveType;
}
type JueJinReceiveTypeShow = ShowMe<JueJinReceiveType>
export {
  getJuejinInfo,
  JueJinReceiveTypeShow as JueJinReceiveType
};

1.2.3 view层

ok 假如说你的数据已经准备好了，我们就可以开始渲染层的编写。这里我们会分成两个文件，第一个文件我们会对在model层的文件进行处理，第二个文件我们会对model层预处理的数据进行统一的渲染。

我们要知道我们的数据卡片由哪几部分构成

由图中我们可以知道我们分三步进行渲染即可

1.2.3.1 数据格式

我们可以看到这样一个简单的卡片我们可以分成3个领域进行渲染，渲染之前我们需要对数据进行处理，我们可以很简单列出 我们需要 进行组装代码的 格式

typescript 复制代码 
interface RenderItemType {
  type: "title" | "textarea" | "shape",
  title: string,
  text: any,
  id?: string,
  translate_y?: string | number,
  icon?: IconKey
}

在这之中我们看到有三个type，而这三个type就对应着三个渲染区域。 在这之外我们还需要传入一个 theme来标识现在的 theme,下面是black 下面的示例

bash 复制代码 
/api/juejin?id=3004311888208296&lang=default&theme=black

我们总结一下目前需要传参的格式

  • theme
  • RenderItemType

1.2.2.2 数据处理

1.2.2.2.1 添加icon | common/icon.ts

icon的格式我们采用的是svg，这里我采用的都是16*16的尺寸。更多的 svg可以去类似 www.iconfont.cn/ 的网站导出就好了。注意导出的fill 去掉，并且格式选择 16 * 16 .将 复制的 svg 代码 向下方一样进行排列

ini 复制代码 
enum icon  {
    like=`<svg ></svg>`,
    another=`....你导入的svg`
}
type IconKey = keyof typeof icon ; 
function getIcon(name:IconKey){

    return icon[name]
}

export {
    getIcon,
    IconKey
}

上面的示例代码就是我们 在 common/icon.ts 中的 基本内存

1.2.2.2.2 添加多语言支持

根路径下面新建 locale文件夹 ，写入juejin.ts

javascript 复制代码 
type LocaleType = "zh-CN" | "default"
function LocaleJuejin(key:LocaleType){
    /**
     * @common 
     * @articles : 文章数量
     * @credits : 评论量
     * @followers : 粉丝数量
     * @likes : 获赞
     * @views : 阅读量/访问量
     * @description : 签名
     * @favorites : 收藏
     * @level : 等级
     * @score : 分数
     * @story : 动态
     * 
     * @juejin特有的 
     * @news : 发布沸点
     * @score : 掘友分
     * @story : 发布沸点
     */
    let locale = {
        "zh-CN":{
            favorites:"收藏量",
            articles:"文章数量",
            followers : "粉丝数量",
            likes:"获赞",
            views:"阅读量",
            description:"签名",
            credits:"评论量",
            level:"等级",
            score:"掘友分",
            story:"发布沸点"
        },
        "default":{
            favorites:"favorites",
            articles:"articles",
            followers : "followers",
            likes:"likes",
            views:"views",
            description:"description",
            credits:"credits",
            level:"level",
            score:"score",
            story:"story"
        }
    }
    return locale[key] ?? locale["default"]
}


export {
    LocaleJuejin,
    LocaleType
}

这里就是简单的导入导出而已，没有什么好说的。

1.2.2.2.3 异常值处理

这一块比较简单，就是数据过长的部分例如

xxxxxxxxxxxxxxxxxxxxxxxxx

变成

erlang 复制代码 
xx...

当然如果你还相对其他的数据进行处理也可以

ini 复制代码 
let lengthLimit = 14;
if (description.length > lengthLimit) {
    description = description.substr(0, lengthLimit);
    description += '...';
  }
1.2.2.2.4 组装

这部分其实就没什么难的，只有一点比较麻烦，title(locale国际化的数据) 和 text (model层的数据)作为key和 value 对应起来有点麻烦其他的还好

javascript 复制代码 
import { RenderCard  } from '../common/render';
import { LocaleJuejin,LocaleType  } from '../locale/juejin';
import { isEndsWithASCII, encodeHTML } from '../common/utils';
import {JueJinReceiveType} from "../model/Juejin.js"
function renderJuejinCard(data:JueJinReceiveType, lang:LocaleType) {
 
  let items = [];

  if (isEndsWithASCII(data.user_name)) {
    data.user_name += ' ';
  }
  let Locale = LocaleJuejin(lang)
  items = [
    {  title: `Electrolux ${Locale.MainTitle}`,  type: "title", color: "blue", icon: "fire" },
    {  title: Locale?.articles, text: data.post_article_count, type: "textarea", color: "", icon: "home"},
    { translate_y: 25, title: Locale.story, text: data.post_shortmsg_count, type: "textarea", color: "", icon: "follower"},
    { translate_y: 50, title: Locale?.views, text: data.got_view_count, type: "textarea", color: "", icon: "like"},
    { translate_y: 75, title: Locale?.likes, text: data.got_digg_count, type: "textarea", color: "", icon: "fire" },
    { translate_y: 100, title: Locale?.score, text: data.power, type: "textarea", color: "", icon: "fire" },
    {  text: 's', type: "shape", },
  ];
  return RenderCard(items, data.theme);
}

export { renderJuejinCard };

1.2.5 总结

这一套组合拳下来，你的基础服务端卡片就可以按照这样的方式运行了，

1.3 服务器部署

那么我们最后怎么把我们的卡片放到服务器运行呢？这里我们采用 shell 脚本 + docker 的方式直接部署

1.3.1 基本要求

bash 复制代码 
# 首先当然是看看咱们的docker 有没有安装，没有安装的就安装一个，网上的教程很多，这里不赘述
docker -v

1.3.2 构建dockerfile 文件

根目录中新建 Dockerfile文件，然后写入

bash 复制代码 
# 使用基于 Node.js 的官方镜像作为基础
FROM node:14

# 设置工作目录
WORKDIR /app/stats

# 将项目文件复制到工作目录
COPY . /app/stats

# 执行 npm install 安装项目依赖
RUN npm install

# 暴露容器的 3000 端口
EXPOSE 3000

# 运行 node app.js 命令启动应用
CMD ["node", "app.js"]

注释比较清晰，这里不做过多描述

1.3.3 写脚本前面的准备

1.3.3.1 在coding 的主机中

我们首先思考一下咱们的docker应该怎么推送到服务器呢？在这里我们采用最原始的方法，通过docker hub 推送上去，然后连接到我们的 服务器把 镜像拉下来。因此这里我们需要首先注册docker hub 账号

我们可以先构建一下 docker 产物

  • 注意一下，这里的 docker_hub_username 是 你的 docker 用户名 。我的用户名 是 electroluxcode
  • docker_image_name 是你本地仓库的名字
  • docker_image_version 是你的 tag
bash 复制代码 
docker build  --platform linux/amd64 -t electroluxcode/docker_image_name:docker_image_version  .

来进行docker的构建。构建完成后你可以运行

docker images

就应该能看到 docker的images ，会有下面一样的输出

bash 复制代码 
REPOSITORY                              TAG                    IMAGE ID       CREATED              SIZE
electroluxcode/docker_image_name   docker_image_version   1412b3607676   About a minute ago   1.08GB

我们试着把这个docker image跑起来 ，运行docker run

css 复制代码 
docker run -d --name firstcontainer -p 81:3000 docker_hub_username/docker_image_name:docker_image_version

如果发现 docker ps 没有输出 container,这个时候我们可以 运行下面指令查看在 docker 内部的 log

ini 复制代码 
docker logs -f -t --since="2019-08-09" firstcontainer

如果没有报错那么我们就可以接下来的步骤。我们现在在我们coding的主机上面已经打包成镜像了，那么

推上去的命令是

bash 复制代码 
docker push 你docker hub的用户名/docker_image_name:docker_image_version
bash 复制代码 
docker push electroluxcode/docker_image_name:docker_image_version

1.3.3.2 在服务器

  • 这里的 mycontainer 是 我们 想 运行的 容器 名字，可以支持 自定义
  • 81 是 真正向外面 暴露的端口 ，3000是容器内部的端口
bash 复制代码 
docker pull electroluxcode/docker_image_name:docker_image_version
docker run -d --name mycontainer -p 81:3000 electroluxcode/docker_image_name:docker_image_version

1.3.3.3 总结

好的，总结一下我们关于docker的基础命令

bash 复制代码 
# 打包
docker build  --platform linux/amd64  -t docker_hub_username/docker_image_name:docker_image_version  .
# 运行 
docker run -d --name firstcontainer -p 81:3000 docker_hub_username/docker_image_name:docker_image_version
# 如果有报错
docker logs -f -t --since="2019-08-09" firstcontainer
# 没有报错就可以推送 
docker push 你docker hub的用户名/docker_image_name:docker_image_version
# 服务器中
docker pull electroluxcode/docker_image_name:docker_image_version
docker run -d --name mycontainer -p 81:3000 electroluxcode/docker_image_name:docker_image_version

我们再加上一点linux脚本的基础知识，我们可以轻松组织一个脚本

bash 复制代码 
#!/bin/bash
​
# step1：初始化变量
start_time=$(date +%s) # 记录脚本开始时间
docker_image_version=${1:-1.1} # Docker镜像版本
docker_image_name=${2:-behind_image} # Docker 仓库 image 名字
docker_hub_username=${3:-electroluxcode} # Docker Hub 用户名
container_name=${4:-behind_container} # 容器名字
container_expose_port=${5:-3000} # 容器暴露的端口
​
server_username=${6:-ubuntu} # Linux服务器用户名
server_address=${7:-62.234.180.224} # Linux服务器地址
​
​
​
# step2：没登陆首先登录一下
# docker login -u 3451613934@qq.com -p 
# yarn build
​
# step3： 注意这个 image 应该要提前构建
# -t 指定构建镜像的名字和版本 
echo -e "\e[91m --本地build中--"
docker build  --platform linux/amd64 -t $docker_hub_username/$docker_image_name:$docker_image_version  . 
docker push $docker_hub_username/$docker_image_name:$docker_image_version
echo -e "\e[0m"
​
​
echo -e "\e[92m --服务器部署中--"
# step4:这一步可以 ssh-copy-id 去除登录
ssh $server_username@$server_address << EOF
sudo -s
docker ps
docker stop $container_name
docker rm $container_name
docker rmi $(docker images -q)
​
docker images
docker pull $docker_hub_username/$docker_image_name:$docker_image_version
if [ $? -ne 0 ]; then
  echo "Docker镜像拉取失败,脚本被终止."
  exit 1
fi
docker images
​
# docker run -d --name bimddp_container -p 81:80 electroluxcode/bimddp_image:1.1
docker run -d --name $container_name -p $container_expose_port:3000 $docker_hub_username/$docker_image_name:$docker_image_version
docker ps
docker images
exit
​
EOF
​
echo -e "\e[0m"
# docker images |  docker rmi  id id | docker rmi $(docker images -q)
# 计算整个脚本的用时
end_time=$(date +%s)
duration=$((end_time - start_time))
formatted_duration=$(date -u -d @"$duration" +"%H:%M:%S")
​
echo "✨🎉🎈恭喜您, 部署成功!"
echo "整个过程花费 $formatted_duration"

1.4 vercel 部署示例

vercel.com/new 注册一下，这个需要有的时候需要翻墙，各位看一下

bash 复制代码 
npm i vercel -g
vercel login # 登录一下账号
​

根目录下面新建 vercel.json ，写入如下代码。

css 复制代码 
{
  "version": 2,
  "name": "data-card",
  "builds": [
    {
      "src": "dist/app.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/app.js"
    }
  ]
}

简单解释一下

  • dist/app.js 是入口文件
  • routes 下面是将匹配的路径进行重写

然后 运行 npm install @vercel/node 安装一下依赖。最后执行

bash 复制代码 
# 在你的项目下面执行,如果没有报错。并且地址能够访问直接推送就好了
vercel dev  
# 推送
vercel

1.5 总结

其实有一些地方是没有完全考虑到的，比如 数据右边的圆柱状图形的s 是根据什么计算的。这一部分其实涉及到一个评价指标问题。按照数学建模的思想可以用TOPSIS 熵权法 AHP 什么做一下，但是由于我是懒狗，就懒得写这一部分了。

另外用掘金来搭建的这个卡片只是一个引子，举一反三的。github,gitee,b站之类的数据也可以通过这种方式进行构建。

最后谢谢大家观看

代码链接：github.com/yilaikesi/d...

相关推荐
神仙别闹13 分钟前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子1 小时前
【Vue 全家桶】7、Vue UI组件库（更新中）
前端·vue.js
DogEgg_0011 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端1 小时前
Content Security Policy (CSP)
前端·javascript·面试
木舟10091 小时前
ffmpeg重复回听音频流，时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07（后台与若依前端对接）
开发语言·前端·golang
我血条子呢2 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安2 小时前
前端第二次作业
前端·css·css3
啦啦右一2 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10【TC3xx芯片】TC3xx芯片电源管理系统PMS详解