标题日记

一个纯文本的日记 web 应用，专注于记录生活琐事。

用概括的标题列表来概览你的近期生活。
建议标题字数控制在 20 字以内，这样更方便从列表概览内容。

http://kylebing.cn/diary

在线项目，点击登录界面右下角的体验账号登录即可

界面

详细的截图在文章最后

iPad Pro 截图

正确使用方式

不是记录很多内容，而是每天记录一下当天比较重要的事，需要记录的点，比如：

今天干嘛了
理发了
学习了什么
看了什么电影
回老家了
等等

日后在搜索的时候好定位到对应的事，比如查一下上次理发是什么时候。

1. 初衷

每天一句话概括自己的一天，简约而不简单。专注于记录生活琐事。

2. 主要功能、特性

当你记的很多的时候，就知道这个该怎么用了。就是记下你一天的重要时刻，你怕忘的内容，日后好查找。

天气、环境温度。
多个关键字搜索日记标题、内容。
日期、类别筛选日记。
分享功能比如当前这篇日记的分享链接是：http://kylebing.cn/diary/#/share/6766
暗黑皮肤，自动切换黑白两种样式。
统计
账单（需要指定格式书写）

3. 支持平台

PC 和移动端均能完美显示。

4. 日记有效期

只要我还健在。

提供了日记导出功能，如果不想记了，可以通过这个功能导出日记保存到自己的电脑上。

5. 编辑器支持 JetBrains 相关快捷键

CTRL+ D 复制当前行。
Tab 在前面插入 4 个空格。
Shift + Tab 删除行前的空格，多于4个，一次性删除4个，小于四个，清除前面的空格。
CTRL+ ← 移动到行最左端
CTRL+ → 移动到行最右端

二、安装

该项目包含两个部分，具体的部署方式在各个项目中均有介绍：

前端：https://github.com/KyleBing/diary-vue vue
后台：https://github.com/KyleBing/diary-portal nodejs

三、邀请码的使用

新用户注册需要邀请码，邀请码有两种：

一种是万能的，在后台系统的配置文件中配置；
另外一种是一次性的，一人一码。

登入系统后，点开菜单，选择邀请码菜单（用户默认注册后的 group_id 为 2，只有用户 group_id 为 1 的用户才能看到，需要手动去数据库中指定管理员账户），可以生成新的邀请码，点击邀请码就可以复制内容，分享给别人就可以了。
邀请码页面中显示的是都是未注册的码，复制后邀请码变为绿色，表示已被分享还未使用。

目前初始化的过程还不是很好，所以先手动修改数据吧

四、项目配置

1. 图片存储配置 `[选配]`

如若不配置：只是不能显示用户头像而已头像文件是存储到七牛云上的，免费注册会有免费额度，够用。需要修改 /src/projectConfig.js 文件内容，改成你的七牛云配置。

export default {
  // 七牛云
  // 地址： https://portal.qiniu.com/kodo/overview
  QiniuImgBaseURL: 'http://rnov15v13.hb-bkt.clouddn.com/', // 空间域名，最后面带 `/`
  QiniuBucketName: 'diary-container', // 七牛云对象存储空间的名称
}

2. 和风天气配置 `[选配]`

如若不配置：只是不能自动获取当地天气和温度而已用于从和风天气中获取地域的天气和温度信息，也是在 /src/projectConfig.js 文件中

export default {
  // 和风天气开发 key
  // 地址：https://dev.qweather.com/
  HefengWeatherKey: '',
}

3. nginx gzip 配置

部署前端项目时，最好在 nginx 中添加 gzip 开关，这样能有效加快项目载入速度，比如我的 1.3M 的 js 文件，在 gzip 处理后压缩到了 360kb。

可以参阅：1.3mb js 文件压缩至 360kb，加快 vue 项目的加载速度，nginx gzip设置

gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_http_version 1.1;
gzip_comp_level 9;
gzip_types  text/css application/javascript application/json;

五、开发说明

配置存储：所有配置信息都保存在 LocalStorage 中

DiaryConfig: 用户的配置信息（类别筛选，日期筛选，关键字）
Authorization: 用户信息（avatar,city,email,geolocation,group_id,nickname,phone,token,uid）

六、用到的 npm 包

vue3 + vue-router + vuex
axios
clipboard
moment
@vuepic/vue-datepicker
marked
echarts
floating-vue
qiniu-js

七、项目历程

2017 年的时候想学 iOS 了顺便做了个不太成熟的 iOS 版 app，当时日记是存储在 iCloud 中的，有了 app 的界面样子，但并不能很完美的使用。
后来过了很久，到 2019 年的时候感觉自己前端技术差不多了，就想把它实现了，最初使用的是 HTML + jQuery。
后来对 Vue 了解的足够多之后，就改成了 HTML + Vue。最初只有移动端的，添加了 PC 版界面。
再后来就大改了，改成了纯 Vue 模式，此时的 PC 版和移动端还是在两个分支上的。
又过了好久，移动端和 PC 两个版本整合到一起，也就是现在的版本。