Vue + LeanCloud 实现周报系统

Posted 2023-05-15

参考技术A

使用 Vue + LeanCloud 开发的一个周报系统，纯前端实现。并利用 LeanCloud 云引擎服务，实现每周五给全员发送邮件，提醒填写周报。周六周日分别再次对未填人员发送邮件提醒。

LeanCloud 应用配置

前往 LeanCloud 或 LeanCloud 国际版新增应用。并导入 /appSchema/ 下的 schema

修改 src/config/av.config-example.js 文件，填入 LeanCloud 应用的 App ID 、 App key 、 服务器地址 。

此 id 、 key 、 url 可以从 LeanCloud 要关联的应用 => 设置 => 应用 Key 中获取。

LeanCloud 国际版应用不强制要求绑定自有域名，如果使用 LeanCloud 国际版应用， url 可以留空（ url: \'\' ）。

周报配置

可以从 src/config/input.config.js 和 src/config/group.config.js 中配置周报填写的类型、说明以及小组配置，格式相应参见文件即可。

发送邮件配置

修改 mail/mailer-example.php 文件，配置完成后重命名为 mailer.php 即可

无需邮件服务器，直接使用各个邮箱的 SMTP 服务即可完成。

这里发送邮件的实现是使用了 PHPMailer 简单包装来实现的。

以上展示了配置发送邮件的功能，还需要定时查找用户或未提交的用户来发送邮件。

此处使用 LeanCloud 云引擎中的定时任务来实现:

<figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">在这里插入图片描述</figcaption>

相关文档可参考 LeanCloud 开发指南 。

构建使用步骤

此项目直接使用 Vue-cli 工具初始化，配置进行了略微修改，相关命令如下：

关于打包后的部署使用，请根据要放的目录，自行调整 /config/index.js 中的 assetsPublicPath 路径，并将打包生成的文件（默认在 /dist/ 下）全部拷贝到你指定目录下即可。

周报填写页面

<figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">在这里插入图片描述</figcaption>

周报汇总展示

<figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">在这里插入图片描述</figcaption>

汇总图表

<figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">在这里插入图片描述</figcaption>

只想看你关心的？这里有！

<figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">在这里插入图片描述</figcaption>

个人信息维护

<figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">在这里插入图片描述</figcaption>

管理员对成员查看和管理

<figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">在这里插入图片描述</figcaption>

支持任意时段的历史查看，并且支持导出 csv 表格。

<figcaption style="line-height: inherit; margin: 0px; padding: 0px; margin-top: 10px; text-align: center; color: rgb(153, 153, 153); font-size: 0.7em;">在这里插入图片描述</figcaption>

点击查看更多云引擎项目示例 。

前端周报：Vue.js 3官方中文文档上线；腾讯奖励万名员工每人一台华为折叠屏手机；多款ChromeOS和安卓设备现bug

前端周报专注大前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点，分为新闻热点、深度阅读、开源项目 & 工具等栏目。欢迎关注【前端之巅】微信公众号（ID: frontshow），及时获取前端周报内容。

前端新闻

Vue.js 3 官方中文文档正式上线

Vue.js 3 官方中文文档现已上线，在文档最上方提供了从 Vue 2 迁移至 Vue 3 的迁移指南，文档中提供了对 Vue 3 的介绍以及一些应用实例。

https://v3.cn.vuejs.org/guide/introduction.html

将 npm 库集成到 Node.js 应用中的危险被夸大

一直以来，将 npm 库集成到 Node.js 应用中这一行为被开发者质疑存在危险，例如通过 Node Package Manager（npm）提供的 JavaScript 软件包。近日，几位 IEEE 的计算机科学家发布了一篇论文，文中表示，npm 软件包其实并不像大家所说的那样具有风险。

https://arxiv.org/abs/2009.09019

Microsoft Edge 推出睡眠标签功能，CPU 使用率或降低 29%

据外媒报道，Microsoft Edge 浏览器或推出一项名为“睡眠标签页”的新功能，有助于降低内存消耗和 CPU 使用率。这项功能基于 Chromium 的冻结技术，能够暂停标签页的后台活动，以最大程度地减少资源使用量，CPU 使用率或降低 29%。

多款 ChromeOS 和 Android 设备现 bug，CPU 负载近 100%

近日，有网友在谷歌论坛中发帖称自己的 ChromeOS 更新到 85.0.4183.108 版本后 CPU 负载近 100%，导致应用程序无法正常运行。有网友找到了临时的解决方式：将 Google Play 回滚到旧版本，禁用后台 Wi-Fi 和数据。谷歌在一份 bug 报告中提到，此问题可能是由 ChromeOS 中的文件丢失引起的。

但后来，不少用户发现自己的 Android 设备也存在此问题。谷歌产品专家 Jim Dantin 表示：“这似乎是 Android 问题，而不仅仅是 ChromeOS 问题，因此故障排除会很复杂。”接下来，ChromeOS 和 Android 团队将合作弄清状况，修复此问题。

行业新闻

外媒曝中国可能在本月对 Google 发起反垄断调查

路透社 9 月 30 日独家消息，由于利用 Android 移动操作系统的主导地位遏制市场竞争，Google 受到了相关单位指控，对此中国正准备对 Google 进行反垄断调查。目前审查具体将集中在哪些 Google 的服务尚不清楚，对于正式调查最终是否会推进的决定最早将会在 10 月做出。

事实上，国际上对 Google 的反垄断调查一直都很频繁，近两年 Google 受到的反垄断调查次数不下 10 次。2018 年，欧盟曾因 Google 的垄断指控对其处以 43 亿欧元（约 51 亿美元）的巨额罚款。2019 年 1 月，法国监管机构又向 Google 开出了 5000 万欧元（约 5700 万美元）的罚款，理由是谷歌未向 Android 用户正确披露数据收集说明。

相关人员表示，虽然目前中国的做法与美国政府对华为的打压不无关系，但事实上在中国之外，即使是在美国，Google 也一再被“针对”。2019 年 6 月，为明确科技巨头们“大而不倒”以及侵犯消费者隐私、威胁数据安全等问题，美国政府对 Facebook、Google 等科技巨头便展开过调查，而在近日，外媒再次报道美国、印度等国司法部均正在对 Google 进行调查。

腾讯奖励万名员工每人一台价值 16999 元华为折叠屏手机

9 月 30 日，腾讯 PCG（平台与内容事业群）举行成立两周年员工沟通活动。此前传闻加入腾讯的滴滴出行副总裁郄小虎作为新增合伙人出席，接下来他会担任腾讯副总裁，负责 PCG 技术公共线，向管理 PCG 技术和内容中台的腾讯副总裁曾宇汇报。当天，PCG 的 1 万名员工每人收到了一款华为折叠屏手机 Mate XS（价值 16999 元），这是 PCG 事业群给员工两周年的纪念和鼓励。

尘埃落定！腾讯 35 亿美元收下搜狗

29 日晚间，搜狗发布公告称，已就私有化交易达成最终协议，将成为腾讯控股的间接全资子公司，该交易预计将在今年第四季度完成。从公告中可以看到，搜狗是与三家公司签订的交易协议，分别是 THL A21 Limited、TitanSupernova Limited、腾讯移动有限公司，而目前这三家公司全都是腾讯控股有限公司的直接或间接全资子公司。交易完成后，搜狗从此将改姓“马”。

微软获 GPT-3 独家授权，马斯克：OpenAI 不 open 了

进入 9 月，OpenAI 决定开放 GPT-3 商业版 API，定价方案也一并公布。而就在前几天，OpenAI 和微软公司共同宣布，微软获得 GPT-3 独家授权。这一决定引来了包括 OpenAI 联合创始人和知名人工智能学者盖瑞·马库斯（Gary Marcus）等业内人士的反对。

一名叫 Whole Mars Catalog 的网友认为 OpenAI 应该让 GPT-3 得到广泛应用，不应该给微软独家授权，并且还就相关问题 cue 了 OpenAI 联合创始人伊隆·马斯克（Elon Musk），每天都活跃于 Twitter 的对此回复：看法一针见血。

深度阅读

使用 Rot.js 构建 Roguelike 游戏

Roguelike 游戏是角色扮演游戏的一个子类，玩家游戏角色会永久死亡，每次均会生成随机的关卡，经典的代表作就是《龙与地下城》。在本文中，作者将会介绍如何使用 Rot.js 创建一个库，一个可以帮助开发者在浏览器中开发 Roguelike 游戏的库。

https://blog.logrocket.com/building-a-roguelike-game-with-rot-js/

如何提高 Node.js 的 libuv 性能

Node.js 的底层 JS 引擎是 v8，异步库 是 libuv。本文介绍一个小技巧，通过设置 UV_THREADPOOL_SIZE 参数，提高 libuv 性能。

https://hackernoon.com/how-libuv-thread-pool-can-boost-your-node-js-performance-bel3tyf

如何动态创建带有事件处理程序的 JavaScript 元素

在本文中，作者将研究如何动态创建 JavaScript 元素以及如何将事件处理程序附加到动态创建的 JavaScript 元素。

https://blog.logrocket.com/how-to-dynamically-create-javascript-elements-with-event-handlers/

如何写一个 Node.js 命令行程序，获取 Slack 的 OAuth 授权？

本文是一个 OAuth 授权示例，演示如何用 Node.js 在命令行获得 Slack 的授权，从而可以操作 Slack 的 API。

http://thecodebarbarian.com/oauth-in-nodejs-cli-apps.html

软件 & 工具 & 库

Node.js v14.13.0 发布

Node.js 14.13.0 现已发布，详情移步更新公告。

https://nodejs.org/en/blog/release/v14.13.0/

Ubuntu 20.10 Beta 版本发布

Ubuntu 20.10 “Groovy Gorilla” 的 Beta 版本发布了，这是开发周期计划中唯一的 Beta 版本。

https://lists.ubuntu.com/archives/ubuntu-announce/2020-October/000262.html

Electron 10.1.3 发布

Electron 10.1.3 现已发布，修复了诸多问题。

https://github.com/electron/electron/releases/tag/v10.1.3

Release

一个 Node.js 库，一键生成软件包的 changelog。

https://github.com/vercel/release