仿“政采云前端小报”系统新鲜出炉了

1,941

一、前言

相信有小伙伴在掘金上看过政采云前端团队分享的文章:手把手教你打造属于自己团队的前端小报系统 (建议先阅读后,再看本文), 当时看完觉得也可以开发个,在公司团队中推广使用。说干就干,按照文章中的思路,架构设计,已经开发完成,并在团队中推广使用了。

现将项目进行开源给有需要的小伙伴,项目完整代码请戳 github.com/lego-weekly (对你有帮助的话,🙇‍♀️给个 star )

接下来,会介绍开发过程中使用到的技术、框架以及关键点,两篇文章一起“食用”,嗯,更香!

二、chrome 插件开发

要开发的 chrome 插件主要功能就是智能识别、一键投稿。我们先了解下一个 Chrome 插件中的模块

chrome.png

  • Manifest.json 配置文件,开发一个 Chrome 插件必不可少,其它的模块都是属于可选项
  • Popup
  • Content script 注入到 web 页面的脚本,可以是 JS 或者 CSS 文件
  • Background 后台页,运行在插件后台的页面,用户感觉不到它的存在,常用于监听浏览器事件
  • Options 选项页,给用户提供了配置插件的入口
  • DevTool 页,例如 vue 开发调试工具
  • Tab 页,使用扩展提供的页面将 Chrome 默认的一些特定页面替换掉

chrome 插件中的每个模块都是一个入口,所以chrome 插件可以看作是一个多页应用

Chrome 插件的开发,除了上面介绍的多个模块,还有模块之间如何通信,如何动态注入 JS,CSS; 权限、本地存储、国际化等内容,感兴趣的请戳官方文档 或 【干货】Chrome插件(扩展)开发全攻略-小茗同学

我使用的是 vue 来开发,并使用 github 上的 vue-chrome-extension-template 模版来初始化项目,主要开发的插件模块是 Popup Page 模块, 通过 webpack 打包后会生成 dist 文件夹,在 Chrome 浏览器的扩展管理页面,开启开发者模式,加载已解压的扩展程序就可调试了,具体实现请查看源代码

三、汇总与推送

为了对投稿的文章进行汇总,会以周为单位,将每周的投稿文章汇总成周报,通过邮箱推送到每位团队成员的邮箱中,同时需要一个周报展示系统。

3.1、定时邮箱推送

邮箱推送使用的是 nodemailer npm 包,按照文档进行设置即可,而定时推送是通过 linux 内置的 cron 进程实现的

在服务器上,执行 crontab -e 命令,在打开的文件中,增加下面的一条定时任务

0 15 * * 5 curl http://www.xxx.com/api/week/add -X POST 

结合 cron 定时任务书写,可以看出👆的定时任务是每周五下午3点,请求 www.xxx.com/api/week/ad… 接口

/api/week/add 接口会找出数据库中本周所有投稿文章,生成一条周报记录,再通过邮箱推送出去,邮件内容如下图

3.2 、小报展示系统

小报展示系统,使用的是 nuxt 开发,实现服务端渲染,比较简单,具体可查看源代码,并结合 nuxt 官方文档

四、最后

如果本文对你有帮助的话,给本文点个赞吧。项目运行有错误或报错,欢迎留言交流。 最后,再次感谢政采云团队的分享 🎉🎉🎉

参考文档

本文使用 mdnice 排版