UED Landing 頁 - 定時抓取掘金文章-有解無憂

我們是袋鼠云數堆疊 UED 團隊，致力于打造優秀的一站式資料中臺產品，我們始終保持工匠精神，探索前端道路，為社區積累并傳播經驗價值，

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

本次分享基于『袋鼠云數堆疊UED團隊』新發布的 UED Landing 頁實踐得來，UED Landing 頁集合了團隊目前所有的基礎建設以及精選文章，是團隊展現風采的一個地方，
專案基于 next.js、ts、pnpm、koa2、MongoDB 等技術方式實作，代碼倉庫：https://github.com/DTStack/UED，歡迎 star，

file

需求介紹

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!@#')

file

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:[email protected]:27019/landingDB

file
file

撰寫 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)
}

file

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 = https://www.cnblogs.com/dtux/p/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

file

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/536141.html

標籤：Html/Css

上一篇：超級奇葩的SAP咨詢公司T公司

下一篇：UED Landing 頁 - 定時抓取掘金文章