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

This just is a README.

GitHub issuesGitHub pull requestsGitHub forksGitHub starsGitHub licenseTwitter

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

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

基本配置

LeanCloud 應用配置前端

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

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

idkey 能夠從 LeanCloud 要關聯的應用 => 設置 => 應用 Key 中獲取。github

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

週報配置npm

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

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

發送郵件配置服務器

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

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

相關文章
相關標籤/搜索