写点什么

手把手教你打造属于自己团队的前端小报系统

  • 2021 年 4 月 07 日
  • 本文字数:3189 字

    阅读完需:约 10 分钟

手把手教你打造属于自己团队的前端小报系统

前言


经常关注我们政采云前端团队的同学, 对下面这张图应该不陌生~



每周五下午我们会定时推送一期前端小报,里面汇集了一些精选的前端文章~


下面这张图就是 政采云前端小报 的官方站点的截图,这个站点里面有我们历史每期的汇总~



至今前端小报已经 93 期,汇聚了 1000+ 文章,覆盖了 50+ 大小分类,可谓是一个非常好的知识库了~


前端小报的由来


持续学习是每个工程师必备的素养,一个成长性的团队也同样需要这样一个持续学习的氛围。那么如何通过技术的手段来帮助团队培养持续学习的氛围呢?


政采云前端小报因此应运而生,它主要包含投稿、汇总沉淀、定时投递三大核心模块,这样的一个系统可以让大家轻松的将自己喜欢的文章分享到团队内部,并且将文章进行分类沉淀,营造团队的知识库,方便大家查阅,同时小报系统也会在每周五进行定时推送,方便大家了解最新的技术动向,前端小报系统是一个帮助我们营造团队内部分享和学习氛围的得力帮手~


那么这样的一个小报系统是如何实现的呢?


如何设计一个小报系统


投稿


相信大家看到好的文章的时候,总会有忍不住想分享给别人的冲动,一个简单易用的投递功能可以很方便的满足大家的分享欲望,将好的文章输入到团队,帮助其他同学~


一个简单容易的投稿功能,我们需要解决两件事情:


1、如何能在看到好文章时,满足分享的冲动

2、如何对投稿的文章进行归类收集,方便沉淀与查找


如果是一个单独的录入系统,手动录入,这种方式操作繁琐,很容易打消大家的热情,平时在浏览器看文章的时候,我们经常将好的文章加入书签收藏,一键操作,方便快捷。那么如何能像浏览器书签收藏文章一样方便的去投稿呢?


很容易想到通过浏览器的扩展能力去做这个事情,Chrome 插件就提供了这样的能力


什么是 Chrome 插件


官方解释 :谷歌插件是一种小型的用于定制浏览器体验的程序。它可以使用户根据个人需要或偏好来定制  Chrome 的功能和行为,它们基于 Web 技术(HTML,JavaScript 和 CSS)构建。


说人话:开发一个 Web 项目,能够嵌入到 Chrome 浏览器中,同时能够通过一些特定的 Api 获取到一些能力,从而订制自己的插件功能


如何开发一个一键投稿的 Chrome 插件


首先创建一个项目,开发一个投稿功能页面 。


此项目和普通 Vue 项目唯一的区别是根目录多了一个 manifest.json 文件。



创建 manifest.json:Chrome 通过识别项目根目录是否有 manifest.json 文件来识别是否为 Chrome  插件。


{     // 核心代码   "name": "Zoo!", // 扩展名   "browser_action": {      "default_popup": "./popup.html"  // 点击浏览器右上方插件小图标弹出的内容 html   },   "content_scripts": [  // 能够在  Web 页面内运行的 javascript 脚本     {       "matches": [        // 满足什么协议下进行调用         "http://*/*",          "https://*/*"       ],       "js": [         "./contentScripts/zdata.js" // 插入到网页的 JS 文件路径       ],         "run_at": "document_start" // 在document 加载时执行     }   ] } 
复制代码


这样插件被打开时会默认加载 popup.html 页面的内容,效果如图:



  • 如何获取文章标题、简介、URL


插件本身其实不能获取到当前页面的标题,但 Chrome 插件提供一种能够在当前页面动态插入固定 JS 脚本的能力,我们可以根据这种机制向当前页面插入一段 JS 脚本去获取页面的标题、简介和 URL,然后再通过消息机制将获取到的内容返回到插件中。


let host = this;// 获取当前窗口 id chrome.tabs.query({  active: true,  currentWindow: true}, function (tabs) {  let tabId = tabs.length ? tabs[0].id : null;  // 向当前页面注入 JavaScript 脚本   chrome.tabs.executeScript(tabId || null, {    file: './contentScripts/recommend.js'  }, function () {    // 向目标网页进行通信,向 recommend.js 发送一个消息     chrome.tabs.sendMessage(tabId, {      message: 'GET_TOPIC_INFO',    }, function (response) {      // 获取到返回的文章 title 、url、description       host.article.title = response.title;      host.article.link = response.link;      host.article.description = response.description;    });  });});   
复制代码


recommend.js  监听消息 ,通过 addListener 我们可以监听来自  sendMessage  发出的消息,在 sendMessage 中定义 message 常量让我们可以在接收消息时对消息进行区分。


let doc = document;chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {  if (request.message === 'GET_TOPIC_INFO') {    // 获取 title     let title = document.getElementsByTagName('title')[0].textContent;    let descriptionEl = doc.querySelectorAll('meta[name=description]')[0];    // 获取 描述     let description = descriptionEl ? descriptionEl.getAttribute('content') : title;    // 发送数据     sendResponse({      title: title.trim(),      link: location.href,      description: description.trim()    });  } else if (request.message === 'SIGN_RELOAD') {    console.log('request, sender', request, sender);  }}); 
复制代码


点击投稿时,需要将数据发送到服务端做存储


// 投稿按钮点击事件 handleRecommendArticle: function () {  let request;  request = ajax({    method: 'post',    url: 'https://XXX/api/post', // 后端接口     data: {      'title': this.article.title,      'desc': this.article.description,      'category': this.article.category[1] || '默认分类',      'link': this.article.link,      'referrer': this.article.reporter    }  });
复制代码


效果图:



上面就是一个很轻量的 Chrome 插件的实现了,基于这样的一个 Chrome 插件,当我们看到喜欢的文章时,就可以一键分享给团队的小伙伴了~


当文章多了之后,如果没有有效的管理,文章会堆积杂乱,反而让大家失去了去学习的欲望,那么我们如何对投稿的文章进行归类收集,方便同学们有查找自己需要的知识体系呢?


标签设计


  • 标签分类

在标签分类上当时花了一些时间去设计,难点主要是什么样的分类维度能够让投稿人快速找到对应的分类,让查看人能够快速根据分类找到自己想要的文章, 以及如何能够快速找到往期文章等 。


这就要求我们的分类需通俗易懂,且能够涵盖业务大部分文章的类型,最后我们是从基础、语言、架构、选型、工具、总结等多维度进行分类。



为了能够快速进行文章查找,这里将分类查看功能也集成在 Chrome 插件中



安装插件


插件制作完成之后,其他同学就可以将你的插件安装包安装到浏览器中。因为墙的原因,这里没有选择将插件上传到 Chrome 应用商店,我们是直接安装到本地, 下图为打包后的项目目录结构:



安装步骤:浏览器选择设置 —> 扩展程序 —> 加载已解压的扩展程序 —> 选择文件目录即可。同时,开发者模式记得打开。



汇总沉淀


很普通一个前端项目,这里不再过多陈述,主要是能够看到每一期文章和按照分类进行快速查找,并统一收录文章入口。其中,前端页面采用 SSR 服务端渲染实现。




整体设计


总结


前端小报系统虽然是个小系统 ,但是不论从功能设计,还是系统设计方面都奔着一个目标,努力推动团队的学习氛围,让团队同学持续的成长。希望通过本文分享能够给大家一些启发,如何从一个目标出发去拆解落地,去思考如何让工具的去更好的服务于人。



头图:Unsplash

作者:猴子

原文:https://mp.weixin.qq.com/s/YE_XEP38C3DeSEx-hHYQkA

原文:手把手教你打造属于自己团队的前端小报系统

来源:政采云前端团队 - 微信公众号 [ID:Zoo-Team]

转载:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2021 年 4 月 07 日 20:062734

评论 1 条评论

发布
用户头像
感谢分享,推荐一个好用的接口管理工具apipost,支持mac,windows,linux,多个平台。特别方便
2021 年 08 月 26 日 15:19
回复
没有更多了
发现更多内容

入职那天“直接起飞”!双非渣本后端,两个月逆袭字节?

Java 编程 程序员 面试 计算机

从平台到生态,钉钉、飞书和企业微信的巨头之争

ToB行业头条

钉钉 企业微信 飞书

企业架构概述

涛哥

从源码角度搞懂 Ribbon 的负载策略

普普通通程序员

高防服务器在使用过程中可以做到高效、稳定的防止钓鱼攻击

九河云安全

七牛云霍锴:实时音视频 SDK 设计实践

七牛云

七牛云存储 音视频 ECUG

做了5年后端研发,靠着这份面试题跟答案,我从12K变成了30K

程序员改bug

Java 编程 架构

2021 年最新版,阿里巴巴 / 今日头条 / 京东 Java 面经大合集(含答案)

Java 编程 面试 IT 计算机

阿里 Java 面试爆出内幕?十万字内部面试题总结(2021合格版)全网开源!

Java 编程 程序员 架构 IT

我终于在六月份实现了跳槽九连杀:字节跳动 Java 研发岗

Java 编程 面试 IT 计算机

三年豹变!拥抱Z时代,UDE迈向消费电子国际大展

科技热闻

如果用柔性屏做雨伞,那雨伞就不仅仅是雨伞了

船医特拉法尔加

开发者工具

IOS技术分享| 互动连麦场景实现

anyRTC开发者

ios 音视频 移动开发 视频直播 直播连麦

总结分析组件化漏洞产生的原理

网络安全学海

黑客 网络安全 信息安全 渗透测试 漏洞分析

我是一个下「笨功夫」的人

非著名程序员

个人成长 认知提升 个人提升 8月日更

针对不同场景的Python合并多个Excel方法

Python研究者

Python Excel 8月日更

支付通道接口异常统计上报

try catch

Java 失败上报

站在巅峰的阿里面试参考指南!居然能让我成功拿下 12 家大厂 offer?

Java 程序员 架构 面试 IT

在小厂工作三年的程序员喊话大厂:Java 中高级岗面试为何越来越难?

Java 程序员 架构 面试 IT

synchronized优化手段:锁膨胀、锁消除、锁粗化和自适应自旋锁...

互联网架构师小马

为了彻底搞懂 hashCode,我钻了一下 JDK 的源码

沉默王二

Java

前端性能优化|什么是防抖和节流?

青云技术社区

JavaScript 前端 防抖节流 函数防抖

浪潮云洲智造直播间,继续开讲!

浪潮云

云计算

同事吃透了这份“阿里 Java 面试核心知识手册”6月份居然斩获 11 张大厂 Offer!

Java 编程 架构 面试 IT

涨薪 150%,从小厂逆袭,坐上美团 L8 技术专家(面经 + 心得)

Java 编程 程序员 架构 IT

2021 年云安全:基本工具和最佳实践业务指南

九河云安全

Java菜鸟神操:凭借“Java核心技能精讲”,竟收割了21个Offer

程序员改bug

Java 编程 程序员 架构

从源码角度分析 Mybatis 的 SqlSession 以及 二级缓存的创建过程

普普通通程序员

关于多线程中抛异常的这个面试题我再说最后一次!

互联网架构师小马

神啦!最全“Java面试宝典+Java核心知识集”,一箭双雕杠秋招

Java 程序员 架构 面试 IT

保险=诈骗?区块链赋予保险的“四个机会”

旺链科技

区块链 保险业 信任构建

如何行之有效地参与开源?

如何行之有效地参与开源?

手把手教你打造属于自己团队的前端小报系统-InfoQ