UED Landing 頁 - 定時抓取掘金文章

来源:https://www.cnblogs.com/dtux/archive/2022/11/18/16903255.html
-Advertisement-
Play Games

我們是袋鼠雲數棧 UED 團隊,致力於打造優秀的一站式數據中台產品。我們始終保持工匠精神,探索前端道路,為社區積累並傳播經驗價值。 本文作者:琉易 https://liuxianyu.cn 本次分享基於『袋鼠雲數棧UED團隊』新發佈的 UED Landing 頁 實踐得來,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='[email protected]#' -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', '[email protected]#')

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 = 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


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • aspnetcore上傳圖片也就是上傳文件有兩種方式,一種是通過form-data,一種是binary。 先介紹第一種form-data: 該方式需要顯示指定一個IFormFile類型,該組件會動態通過打開一個windows視窗選擇文件 及圖片。 postman演示如上,代碼如下: [HttpPos ...
  • FreeRtos操作系統 首先,應該介紹什麼是FreeRtos,他於單片機而言就是一個管理器,作為管理者管理嵌入式晶元中的任務,堆棧,中斷,隊列等等資源,對於操作系統而言,又分為實時操作系統和非實時操作系統,實時操作系統代表任務或者某個功能必須在指定的運行時間內完成,保證設備想要執行的功能能立即得到 ...
  • 摘要:先通過OPS確認節點狀態是否已經恢復,或登錄後臺執行cm_ctl query -Cv確認集群是否已經Normal。 本文分享自華為雲社區《【實例狀態】GaussDB CN服務異常》,作者:酷哥。 確認節點狀態 先通過OPS確認節點狀態是否已經恢復,或登錄後臺執行cm_ctl query -Cv ...
  • 一、前言 ChunJun(原FlinkX)是一個基於 Flink 提供易用、穩定、高效的批流統一的數據集成工具,既可以採集靜態的數據,比如 MySQL,HDFS 等,也可以採集實時變化的數據,比如 binlog,Kafka等。同時 ChunJun 也是一個支持原生 FlinkSql所有語法和特性的計 ...
  • 學會 MongoDB 的增刪改查只能算得上是“初窺門徑”,瞭解、熟練掌握索引才能算得上“融會貫通”。基本可以認為資料庫的索引知識是一個初級開發向中級開發轉變所必備的知識。 ...
  • 前言 frida-trace是一個用於動態跟蹤函數調用的工具。支持android和ios。安裝教程請參考官網。工欲善其事必先利其器。本文將以某App為示範,演示frida-trace的各種方法在iOS中的應用。 一、目標 讓看文章的你在使用frida-trace時更得心應手。 二、工具 mac系統 ...
  • Android開發之應用更新或軟體下載 本文章學習前提:okHttp3或以上,EventBus或其它事件匯流排工具,四大組件的Activity和Service,安卓通知基礎知識 新建項目文件 目錄結構如下: MainActivity.java 獲取許可權 本項目所需許可權 <!-- 網路許可權--> <us ...
  • 該系列已更新文章: 分享一個實用的 vite + vue3 組件庫腳手架工具,提升開發效率 開箱即用 yyg-cli 腳手架:快速創建 vue3 組件庫和vue3 全家桶項目 Vue3 企業級優雅實戰 - 組件庫框架 - 1 搭建 pnpm monorepo Vue3 企業級優雅實戰 - 組件庫框架 ...
一周排行
    -Advertisement-
    Play Games
  • 1.部署歷史 猿友們好,作為初來實習的我,已經遭受社會的“毒打”,所以請容許我在下麵環節適當吐槽,3Q! 傳統部署 ​ 回顧以往在伺服器部署webapi項目(非獨立發佈),dotnet環境、守護進程兩個逃都逃不掉,正常情況下還得來個nginx代理。不僅僅這仨,可能牽扯到yum或npm。node等都要 ...
  • 隨著技術的進步,跨平臺開發已經成為了標配,在此大背景下,ASP.NET Core也應運而生。本文主要基於ASP.NET Core+Element+Sql Server開發一個校園圖書管理系統為例,簡述基於MVC三層架構開發的常見知識點,前一篇文章,已經簡單介紹瞭如何搭建開發框架,和登錄功能實現,本篇... ...
  • 這道題只要會自定義cmp恰當地進行排序,其他部分沒有什麼大問題。 上代碼: 1 #include<bits/stdc++.h> 2 using namespace std; 3 int n,s,h1,h2,cnt; 4 struct apple{ 5 int height,ns;//height為蘋 ...
  • 這篇文章主要描述RPC的路由策略,包括為什麼需要請求隔離,為什麼不在註冊中心中實現請求隔離以及不同粒度的路由策略。 ...
  • 簡介: 中介者模式,屬於行為型的設計模式。用一個中介對象來封裝一系列的對象交互。中介者是各對象不需要顯式地相互引用,從而使其耦合鬆散,而且可以獨立地改變他們之間的交互。 適用場景: 如果平行對象間的依賴複雜,可以使用中介者解耦。 優點: 符合迪米特法則,減少成員間的依賴。 缺點: 不適用於系統出現對 ...
  • 【前置內容】Spring 學習筆記全系列傳送門: Spring學習筆記 - 第一章 - IoC(控制反轉)、IoC容器、Bean的實例化與生命周期、DI(依賴註入) Spring學習筆記 - 第二章 - 註解開發、配置管理第三方Bean、註解管理第三方Bean、Spring 整合 MyBatis 和 ...
  • 簡介: 享元模式,屬於結構型的設計模式。運用共用技術有效地支持大量細粒度的對象。 適用場景: 具有相同抽象但是細節不同的場景中。 優點: 把公共的部分分離為抽象,細節依賴於抽象,符合依賴倒轉原則。 缺點: 增加複雜性。 代碼: //用戶類 class User { private $name; fu ...
  • 這次設計一個通用的多位元組SPI介面模塊,特點如下: 可以設置為1-128位元組的SPI通信模塊 可以修改CPOL、CPHA來進行不同的通信模式 可以設置輸出的時鐘 狀態轉移圖和思路與多位元組串口發送模塊一樣,這裡就不給出了,具體可看該隨筆。 一、模塊代碼 1、需要的模塊 通用8位SPI介面模塊 `tim ...
  • AOP-03 7.AOP-切入表達式 7.1切入表達式的具體使用 1.切入表達式的作用: 通過表達式的方式定義一個或多個具體的連接點。 2.語法細節: (1)切入表達式的語法格式: execution([許可權修飾符] [返回值類型] [簡單類名/全類名] [方法名]([參數列表]) 若目標類、介面與 ...
  • 測試一、虛繼承與繼承的區別 1.1 單個繼承,不帶虛函數 1>class B size(8): 1> + 1> 0 | + (base class A) 1> 0 | | _ia //4B 1> | + 1> 4 | _ib //4B 有兩個int類型數據成員,占8B,基類邏輯存在前面 1.2、單個 ...