【开源推荐】一文多发平台系统 支持掘金、SegmentFault、CSDN、知乎、开源中国等

开发利器 2023年9月5日 868

你有没有碰到过写了一篇文章想发送到多个平台,给自己导流的情况,有没有碰到过写完一篇文章,然后需要手动到各个平台发布的情况,有没有累死人的感觉。
这个系统就是解决你将一篇文章发布到多个平台的问题,你只需要写好一篇文章,即可将文章同步到多个平台。

演示图

支持平台

掘金
SegmentFault
CSDN
简书
知乎
开源中国
今日头条
博客
微博
百度百家号
51CTO
开发者头条
微信公众号
支持安装方式
Docker
Npm
源码

所使用技术栈

React 框架,UI 是基于阿里出品的 Ant Design Pro 改造而成

基于 Node.js,使用 TS 编写

Web 框架则选用了 express

爬虫功能基于 puppeteer(Google 开发的自动化测试工具)实现

数据库选用了主流的 NoSQL 数据库 Mongodb 主要用于记录文章与 cookie 信息

项目目录结构

.
├── service.json //启动文件,包含路由注册,数据库连接
├── backend
├── config
├── extensions
│ └── src
│ └── popup
├── lib
├── models // 数据库模型
├── nginx // nginx配置
├── public
│ └── icons
├── routes //相当于MVC中的controller
├── spiders // 爬虫相关功能
│ └── import
└── src
├── assets
│ └── img
├── components
│ ├── Authorized
│ ├── CopyBlock
│ ├── GlobalHeader
│ ├── HeaderDropdown
│ ├── HeaderSearch
│ ├── NoticeIcon
│ ├── PageLoading
│ ├── SelectLang
│ └── SettingDrawer
├── data
├── e2e
│ └── __mocks__
├── layouts
├── locales
│ ├── en-US
│ ├── pt-BR
│ ├── zh-CN
│ └── zh-TW
├── models
├── pages
│ ├── ArticleEdit
│ ├── ArticleList
│ ├── Demo
│ ├── Environment
│ ├── Helper
│ ├── Paste
│ └── PlatformList
├── services
└── utils

docker安装方法

切换到项目根目录,直接执行 docker-compose up 命令,会根据 docker-compose.yaml 文件创建镜像和容器。

cd ArtiPub
docker-compose up

建议你在试用时可以用docker,本地开发时可以使用 npm install 方便调试。

源码安装

安装 npm 包

cd artipub/frontend
npm install

cd artipub/backend
npm install
启动前端

//frontend 目录下
npm run dev
启动后端

//backend 目录下
npm run dev

//运行prod 需先全局安装pm2
npm i pm2 -g
npm run prod

配置数据库

数据库的配置在 backend/src/config.ts 中,可以按情况配置。

配置后端 API 地址

如果您部署的服务不在本机,需要在 frontend/src/constants.ts 中将 apiEndpoint 改成对应的 IP 地址 + 端口。

实现原理

利用了爬虫技术将文章发布到各大平台。ArtiPub 的爬虫是用了 Google 开发的自动化测试工具 Puppeteer,这个工具不仅可以获取需要有 ajax 动态内容的数据,还可以来做一些模拟操作,类似于 Selenium,但更强大。如何进行登陆操作呢?其实 ArtiPub 是通过 Chrome 插件获取了用户登陆信息(Cookie),将 Cookie 注入到 Puppeteer 操作的 Chromium 浏览器中,然后浏览器就可以正常登陆网站进行发文操作了。Cookie 是保存在用户自己搭建的 MongoDB 数据库里,不对外暴露,因此很安全。

下图是 ArtiPub 的架构示意图:

架构原理简介如下:

后端(Backend)是整个架构的中枢,负责给前端交换数据、储存读取数据库、控制爬虫、收集 Cookie 等;
Chrome 插件(Chrome Extension)只负责从网站(Sites)获取 Cookie;
爬虫(Spiders)被后端控制,负责在网站上发布文章和抓取数据;
数据库(MongoDB)负责储存数据;
前端(Frontend)是一个 React 应用,是 Ant Design Pro 改造而来的。

特别说明

虽然这个项目的作者已经不更新了,有平台可能已经不能发帖,但是我依然想把这个项目分享给你,因为从中能学到作者做这个项目的思路,实现的方法,仔细研究你依然可以学到很多,你也可以依此为基础进行改造成自己的项目。

再次更新

最近在看这个项目了,由于这个项目比较老了,好多扩展装起来会报错,不过还是能装上的,后台安装的时候,还是用 npm install npm install –registry=https://registry.npm.taobao.org

前端使用 yarn install 安装,因为yarn可以自动匹配兼容的版本。

资源下载
PHP学习网
公众号回复“PHPER7050”获取下载!
请打开微信扫描右边的二维码回复关键字“PHPER7050”也可以微信直接搜索“PHP学习网”关注微信公众号获取。


关注微信公众号『PHP学习网

第一时间了解最新网络动态
关注博主不迷路~

PHP学习网:站内收集的部分资源来源于网络,若侵犯了您的合法权益,请联系我们删除!
分享到:
赞(0)

文章评论

您需要之后才可以评论
0点赞 0评论 收藏 QQ分享 微博分享

PHP学习网

PHP学习网