关于前端:UED-Landing-页-定时抓取掘金文章

咱们是袋鼠云数栈 UED 团队，致力于打造优良的一站式数据中台产品。咱们始终保持工匠精力，摸索前端路线，为社区积攒并流传教训价值。

本文作者：琉易 https://liuxianyu.cn

本次分享基于『袋鼠云数栈 UED 团队』新公布的 UED Landing 页 实际得来，UED Landing 页汇合了团队目前所有的根底建设以及精选文章，是团队展示风采的一个中央。
我的项目基于 next.js、ts、pnpm、koa2、MongoDB 等技术形式实现，代码仓库：https://github.com/DTStack/UED，欢送 star。

需要介绍

Landing 页有一个专栏页面，须要展现团队以往发在掘金社区的文章、对应的标签以及其余社区入口。

设计思路

基于上述的需要剖析后，进行以下设计：

1、通过 node-schedule 设置一个定时工作，每天去申请掘金的接口查问最新的文章数据，包含每篇文章的题目、公布人、浏览量、公布日期、标签等；

2、将上述办法拿到的数据处理后存入 MongoDB 数据库，只保留须要的字段；

3、提供一个 RESTful 格调的接口，分页返回文章列表和标签列表，供专栏页面查问应用；

4、页面申请接口，查问标签、文章数据，渲染页面。

实现步骤

以下实现步骤比拟具体，相似的需要也能够按以下步骤去实现。

Docker 装置 MongoDB

1、下载镜像

docker pull mongo

2、创立挂载文件夹

mkdir -p /opt/dtstack/docker/mongo
cd /opt/dtstack/docker/mongo

3、启动容器

docker run -v /opt/dtstack/docker/mongo:/data/db --name mongodb -p 27019:27017 -e MONGO_INITDB_ROOT_USERNAME=root -e MONGO_INITDB_ROOT_PASSWORD='Admin123!@#' -d mongo --auth

命令解释

• -v 挂载本地文件夹，存储数据
• -name 给容器指定名称
• -p 示意端口映射，-p 宿主机 port: 容器 port，这里不应用雷同端口是为了避免攻打
• -e 携带明码等参数
• -d 后盾运行容器
• –auth MongoDB 进行权限校验

4、进入容器

docker exec -it mongodb mongo admin

留神:
rpc error: code = 2 desc = oci runtime error: exec failed: container_linux.go:235: starting container process caused“exec:“mongo”: executable file not found in $PATH”.
如果呈现上述报错，是下载的 mongodb 镜像版本比拟高，mongodb 5.0 以上的版本须要应用 mongosh 命令来代替原来的 mongo 命令。
docker exec -it mongodb mongosh admin

5、验证用户名明码登录
返回 1 代表登录胜利。

db.auth('root', 'Admin123!@#')

6、应用数据库

use landingDB

7、创立数据库的管理员

db.createUser({user: "landing-user", pwd: "landing-admin.1234", roles: [{ role: "readWrite", db: "landingDB"}] })

MongoDB 不容许同一窗口有多个用户登录，退出再次进入终端：

db.auth('landing-user', 'landing-admin.1234')

8、创立表

db.createCollection('article')
db.createCollection('tag')

9、测试插入数据

db.article.insert({id: 1, title: '测试文章题目'})

10、通过 MongoDB Compass 连贯数据库

mongodb://landing-user:landing-admin.1234@127.0.0.1:27019/landingDB

编写 node 服务

1、借助 koa2 启动 node 服务

服务入口处新建定时工作，每天去掘金获取文章数据

// 引入模块
const Koa = require('koa')
const schedule = require('node-schedule')

// 实例化
const app = new Koa()

const main = async () => {await initDB()

    // 保留文章列表
    const articleList = await getJueJinArticleList()
    await insertArticles(articleList)

    // 保留标签列表
    const tagList = getTagList(articleList)
    await insertTags(tagList)
}

app.listen(envJson.appPort, () => {console.log(`app runs on port ${ envJson.appPort}`)
    schedule.scheduleJob(cron, main)
})

2、将查问的数据存入数据库，并解决历史数据

const {MongoClient} = require('mongodb')

const url = `mongodb://${username}:${password}@${host}:${port}/${dbName}`
const client = new MongoClient(url)

// 初始化数据库链接
const initDB = async () => {await client.connect()
    console.log('Connected successfully to mongodb')
}

// 新增查问到的文章列表
const insertArticles = async (articleList) => {const db = client.db(dbName)
    const collection = db.collection('article')

    const updateResult = await collection.updateMany({isDelete: 0}, {$set: { isDelete: 1, updateTime: getDateStr() } })
    console.log('updateArticles documents =>', updateResult)

    const insertResult = await collection.insertMany(articleList)
    console.log('insertArticles documents =>', insertResult)
}

3、提供接口，从数据库读取数据
接口文档

const Router = require('koa-router')
const router = new Router()

router.get('/api/getTagList', async (ctx) => {
    try {const db = client.db(dbName)
        const collection = db.collection('tag')
        
        const data = await collection.find({isDelete: 0}).toArray()
        ctx.body = {
            code: 200,
            data,
            message: '胜利',
        }
    } catch (error) {
        ctx.body = {
            code: 1,
            error
        }
    }
})

编写页面

1、页面申请接口，拿到文章数据进行渲染，在标签、分页等参数变动时从新申请接口

useEffect(() => {
    const params = {
        page,
        pageSize,
        tag_id,
        sort_type,
    }
    fetch(`/api/getArticleList?${new URLSearchParams(params).toString()}`)
        .then(res => res.json())
        .then(res => {const { articleList, total} = res.data
            setArticleList(articleList || [])
            setTotal(total || [])
        })
}, [tag_id, sort_type, page])

部署形式

一台 CentOS 服务器，装置 node 14+，pnpm，pm2，Docker（可选），MongoDB，nginx。

mkdir -p /opt/dtstack
git clone https://github.com/DTStack/UED.git
cd UED
pnpm i
pnpm deploy

因为后端服务的接口个别不对外裸露，此处通过 nginx 进行转发：

# ued landing 的 nginx 配置

# http
server {
  listen          80;
  server_name     ued.dtstack.cn;

  location / {proxy_pass http://localhost:3004/;}

  location /api {proxy_pass http://localhost:3002/api;}
}

实现成果

http://ued.dtstack.cn/article