使用 Vue + LeanCloud 开发的一个周报系统，纯前端实现。并利用 LeanCloud 云引擎服务，实现每周五给全员发送邮件，提醒填写周报。周六周日分别再次对未填人员发送邮件提醒。
基本配置
LeanCloud 应用配置
前往 LeanCloud 或 LeanCloud 国际版新增应用。并导入 /appSchema/下的 schema
修改 src/config/av.config-example.js 文件，填入 LeanCloud 应用的 App ID、App key、服务器地址。
此 id 、key、url 可以从 LeanCloud 要关联的应用 => 设置 => 应用 Key 中获取。
// 填写配置后重命名此文件为av.config.jsexport default { id: '填写LeanCloud应用的ID', key: '填写LeanCloud应用的Key', url: '填写 leancloud 的 REST API 服务器地址'}
LeanCloud 国际版应用不强制要求绑定自有域名，如果使用 LeanCloud 国际版应用，url 可以留空（url: ''）。
周报配置
可以从 src/config/input.config.js 和 src/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。
网友评论