使用 Vue + LeanCloud 開(kāi)發(fā)的一個(gè)周報(bào)系統(tǒng)边败，純前端實(shí)現(xiàn)分预。并利用 LeanCloud 云引擎服務(wù)，實(shí)現(xiàn)每周五給全員發(fā)送郵件漠畜，提醒填寫周報(bào)。周六周日分別再次對(duì)未填人員發(fā)送郵件提醒坞靶。

基本配置

LeanCloud 應(yīng)用配置

前往 LeanCloud 或 LeanCloud 國(guó)際版新增應(yīng)用憔狞。并導(dǎo)入 /appSchema/下的 schema

修改 src/config/av.config-example.js 文件，填入 LeanCloud 應(yīng)用的 App ID彰阴、App key瘾敢、服務(wù)器地址。

此 id 尿这、key簇抵、url 可以從 LeanCloud 要關(guān)聯(lián)的應(yīng)用 => 設(shè)置 => 應(yīng)用 Key 中獲取。

// 填寫配置后重命名此文件為av.config.jsexport default {  id: '填寫LeanCloud應(yīng)用的ID',  key: '填寫LeanCloud應(yīng)用的Key',  url: '填寫 leancloud 的 REST API 服務(wù)器地址'}

LeanCloud 國(guó)際版應(yīng)用不強(qiáng)制要求綁定自有域名射众，如果使用 LeanCloud 國(guó)際版應(yīng)用碟摆，url 可以留空（url: ''）。

周報(bào)配置

可以從 src/config/input.config.js 和 src/config/group.config.js 中配置周報(bào)填寫的類型叨橱、說(shuō)明以及小組配置典蜕，格式相應(yīng)參見(jiàn)文件即可。

• input.config.js 中的配置信息罗洗，用于配置輸入頁(yè)面中存在的不同類型和相對(duì)應(yīng)的提示愉舔，以及每周的基礎(chǔ)工時(shí)、計(jì)算為任務(wù)飽和度的關(guān)聯(lián)任務(wù)等伙菜。

• group.config.js 中配置的小組信息屑宠，將在首個(gè)成員注冊(cè)時(shí)自動(dòng)寫入到 LeanClound 應(yīng)用中。

規(guī)劃時(shí)仇让，計(jì)算任務(wù)飽和度是單獨(dú)配置的典奉，但實(shí)際開(kāi)發(fā)中，這塊耦合住了丧叽，在考慮優(yōu)化掉卫玖，做成一個(gè)通用的產(chǎn)品，如果你有任何想法踊淳，可以聯(lián)系我假瞬，謝謝。

發(fā)送郵件配置

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

public static $HOST = 'smtp.163.com'; // 郵箱的服務(wù)器地址public static $PORT = 465; // smtp 服務(wù)器的遠(yuǎn)程服務(wù)器端口號(hào)public static $SMTP = 'ssl'; // 使用 ssl 加密方式登錄public static $CHARSET = 'UTF-8'; // 設(shè)置發(fā)送的郵件的編碼/** * 配置此處信息后將此文件重命名為mailer.php即可 */private static $USERNAME = '配置用戶'; // 授權(quán)登錄的賬號(hào)private static $PASSWORD = '配置授權(quán)密碼'; // 授權(quán)登錄的密碼private static $NICKNAME = '新點(diǎn)前端周報(bào)'; // 發(fā)件人的昵稱

無(wú)需郵件服務(wù)器脱茉，直接使用各個(gè)郵箱的 SMTP 服務(wù)即可完成。

這里發(fā)送郵件的實(shí)現(xiàn)是使用了 PHPMailer 簡(jiǎn)單包裝來(lái)實(shí)現(xiàn)的垄开。

以上展示了配置發(fā)送郵件的功能琴许，還需要定時(shí)查找用戶或未提交的用戶來(lái)發(fā)送郵件。

此處使用 LeanCloud 云引擎中的定時(shí)任務(wù)來(lái)實(shí)現(xiàn):

• 定義云函數(shù)溉躲，以便發(fā)送郵件榜田。實(shí)現(xiàn)可參考 weeklyReportSendEmail
• 在 LeanCloud 的應(yīng)用中點(diǎn)擊 云引擎 => 定時(shí)任務(wù) 來(lái)創(chuàng)建定時(shí)任務(wù)益兄，定時(shí)執(zhí)行發(fā)送郵件。

在這里插入圖片描述

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

相關(guān)文檔可參考 LeanCloud 開(kāi)發(fā)指南箭券。

構(gòu)建使用步驟

此項(xiàng)目直接使用 Vue-cli 工具初始化净捅，配置進(jìn)行了略微修改，相關(guān)命令如下：

# install dependenciesnpm install# serve with hot reload at localhost:8086npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report

關(guān)于打包后的部署使用辩块，請(qǐng)根據(jù)要放的目錄蛔六，自行調(diào)整 /config/index.js 中的 assetsPublicPath 路徑，并將打包生成的文件（默認(rèn)在 /dist/ 下）全部拷貝到你指定目錄下即可废亭。

// 例如：這里最后期望通過(guò)訪問(wèn) 域名/weeklyreport/ 訪問(wèn)此周報(bào)系統(tǒng)古今，則配置為/weeklyreport/即可assetsPublicPath: '/weeklyreport/',

效果展示

周報(bào)填寫頁(yè)面

在這里插入圖片描述

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

周報(bào)匯總展示

在這里插入圖片描述

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

只想看你關(guān)心的？這里有滔以！

在這里插入圖片描述

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

個(gè)人信息維護(hù)

在這里插入圖片描述

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

管理員對(duì)成員查看和管理

在這里插入圖片描述

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

支持任意時(shí)段的歷史查看，并且支持導(dǎo)出 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>

內(nèi)容轉(zhuǎn)載自 LeanCloud 用戶你画，項(xiàng)目地址：https://url.leanapp.cn/QD21daJ。

點(diǎn)擊查看更多云引擎項(xiàng)目示例桃漾。