博客 / 詳情

返回

週報小系統,支持導出和郵件提醒

This just is a README.

GitHub issuesGitHub pull requestsGitHub forksGitHub starsGitHub licenseTwitter

使用 Vue + LeanCloud 開發的一個週報系統,純前端實現。

並利用 LeanCloud 提供的雲引擎服務實現在週五給全員發送郵件提醒填寫週報,週六週日分別再次對未填人員發送郵件進行填寫提醒。

基本配置

LeanCloud 應用配置

前往 LeanCloud 新增應用。 並導入 /appSchema/ 下的 schema

修改 src/config/av.config-example.js 文件,填入 LeanCloud 應用的 App IDApp key

idkey 可以從 LeanCloud 要關聯的應用 => 設置 => 應用 Key 中獲取。

// 填寫配置後重命名此文件為av.config.js
export default {
  id: '填寫LeanCloud應用的ID',
  key: '填寫LeanCloud應用的Key'
}

週報配置

可以從 src/config/input.config.jssrc/config/group.config.js 中配置週報填寫的類型、説明以及小組配置,格式相應參見文件即可。

  • input.config.js 中的配置信息,用於配置輸入頁面中存在的不同類型和相對應的提示,以及每週的基礎工時、計算為任務飽和度的關聯任務等。
  • group.config.js 中配置的小組信息,將在首個成員註冊時自動寫入到 LeanClound 應用中。
規劃時,計算任務飽和度是單獨配置的,但實際開發中,這塊耦合住了,在考慮優化掉,做成一個通用的產品,如果你有任何想法,可以聯繫我,謝謝。

發送郵件配置

修改 mail/mailer-example.php 文件,配置完成後重命名為 mailer.php 即可

public static $HOST = 'smtp.163.com'; // 郵箱的服務器地址
public static $PORT = 465; // smtp 服務器的遠程服務器端口號
public static $SMTP = 'ssl'; // 使用 ssl 加密方式登錄
public static $CHARSET = 'UTF-8'; // 設置發送的郵件的編碼

/**
 * 配置此處信息後將此文件重命名為mailer.php即可
 */
private static $USERNAME = '配置用户'; // 授權登錄的賬號
private static $PASSWORD = '配置授權密碼'; // 授權登錄的密碼
private static $NICKNAME = '新點前端週報'; // 發件人的暱稱

無需郵件服務器,直接使用各個郵箱的 SMTP 服務即可完成。

這裏發送郵件的實現是使用了 PHPMailer 簡單包裝來實現的。

注:

  • 不要使用 QQ 郵箱的 SMTP ,我在使用中,團隊30+人, 單獨發送到10+後,之後的都失敗了,提醒發送郵件過快。使用163郵箱的暫無問題。
  • why php?

    • 因為目前沒在服務器上裝有nodejs。
    • 雖然 LeanCloud 提供的免費雲引擎,本身就支持nodejs服務,但是免費版是做測試用的,會自動休眠,不夠穩定,經常掛掉。
    • 若使用nodejs,可使用 nodemailer 來發送郵件。

以上展示了配置發送郵件的功能,還需要定時查找用户或未提交的用户來發送郵件。

此處使用了 LeanCloud 提供的雲引擎中的定時任務來實現。

  1. 定義雲函數,以便發送郵件。實現可參考 weeklyReportSendEmail
  2. 在 LeanCloud 的應用中 點擊 雲引擎 => 定時任務 來創建定時任務,定時執行發送郵件。

https://user-gold-cdn.xitu.io/2018/2/11/16183733010fb5ef?w=608&h=413&f=png&s=22638

相關文檔可參考 LeanCloud 開發指南

構建使用步驟

此項目直接使用 Vue-cli 工具初始化,配置進行了略微修改,相關命令如下:

# install dependencies
npm install

# serve with hot reload at localhost:8086
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

關於打包後的部署使用,請根據要放的目錄,自行調整 /config/index.js 中的
assetsPublicPath 路徑,並將打包生成的文件(默認在 /dist/ 下)全部拷貝到你指定目錄下即可。

// 例如:這裏最後期望通過訪問 域名/weeklyreport/ 訪問此週報系統,則配置為/weeklyreport/即可
assetsPublicPath: '/weeklyreport/',

效果展示

填寫

填寫 https://user-gold-cdn.xitu.io/2018/2/11/16183731c8c0e9bf?w=760&h=955&f=gif&s=806356

彙總展示

彙總展示 https://user-gold-cdn.xitu.io/2018/2/11/16183731cb5c1b12?w=1170&h=723&f=png&s=125193

只想看你關心的?這裏有!

只想看你關心的?這裏有!

彙總圖表

彙總圖表 https://user-gold-cdn.xitu.io/2018/2/11/16183732f3442fff?w=948&h=662&f=png&s=67149

還支持任意時段的歷史查看,下方表格和圖標的展示同周彙總。

任意時間段彙總 https://user-gold-cdn.xitu.io/2018/2/11/16183731e539027b?w=745&h=148&f=png&s=9768

個人信息維護

個人信息維護 https://user-gold-cdn.xitu.io/2018/2/11/1618373201d21329?w=522&h=570&f=png&s=17943

管理員對成員查看和管理

管理員對成員查看和管理 https://user-gold-cdn.xitu.io/2018/2/11/1618373202b93564?w=1159&h=372&f=png&s=71799

對了,還可以導出表格為csv

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.