Vue + LeanCloud 实现周报系统

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

基本配置

LeanCloud 应用配置

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

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

idkeyurl 可以从 LeanCloud 要关联的应用 => 设置 => 应用 Key 中获取。

// 填写配置后重命名此文件为av.config.jsexport default {  id: '填写LeanCloud应用的ID',  key: '填写LeanCloud应用的Key',  url: '填写 leancloud 的 REST API 服务器地址'}

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

周报配置

可以从 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 简单包装来实现的。

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

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

  • 定义云函数,以便发送邮件。实现可参考 weeklyReportSendEmail
  • 在 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 工具初始化,配置进行了略微修改,相关命令如下:

# 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

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

// 例如:这里最后期望通过访问 域名/weeklyreport/ 访问此周报系统,则配置为/weeklyreport/即可assetsPublicPath: '/weeklyreport/',

效果展示

周报填写页面

在这里插入图片描述

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

内容转载自 LeanCloud 用户,项目地址:https://url.leanapp.cn/QD21daJ

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • feisky云计算、虚拟化与Linux技术笔记posts - 1014, comments - 298, trac...
    不排版阅读 3,743评论 0 5
  • Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,028评论 1 32
  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 13,232评论 0 15
  • 1、第八章 Samba服务器2、第八章 NFS服务器3、第十章 Linux下DNS服务器配站点,域名解析概念命令:...
    哈熝少主阅读 3,629评论 0 10
  • 从微薄纯银那里了解到简书的应用,还真是简单,只聚焦于文字写作,跟loft完全不一样的风格,真好~~一直想要的类似的...
    浆糊大雄阅读 176评论 1 3