一个日记应用
一个 web 日记应用
一个纯文本 web 日记应用
一个纯文本 web 日记应用,专注记录生活琐事
线上地址:http://kylebing.cn/diary
体验账号:test@163.com
| test
用概括的标题来概览你的近期生活。
建议标题字数控制在 20 字以内,这样更方便从列表概览内容。
不要流水帐一样记录很多内容,每天记录一下当天比较重要的事、要点就好,比如:
- 今天干嘛了?理发了?出游了?
- 学习了什么?
- 看了什么电影,感觉如何?
- 给车加油了#92 加了多少?油价多少?
- 回老家了,几点回的家,油耗多少?
- 等等
经过几年的使用,感觉日记最重要的功能就是,搜索过去的某件事发生在什么时间:
- 上次理发什么时候?
- 上次回老家什么时候?
- 上次车检什么时候?
- 6月12日我做了什么工作
- 我这个月的支出/收入分别是多少
当你用它记录了足够多小事的时候,就知道这个日记该怎么用了。
就是记下你一天的重要时刻,怕忘的内容,日后好查找。
- 记录天气、环境温度。
- 多个关键字搜索日记标题、内容。
- 日期、类别筛选日记。
- 分享某篇日记 比如当前这篇日记的分享链接是:http://kylebing.cn/diary/#/share/6766
- 自动跟随系统切换
明亮
暗黑
两种样式。 - 日记统计
- 日记导出,多种格式:
json
,txt
,json
,csv
- 账单(需要指定格式书写)
- 我一般每周整理一次账单
- 为了方便整理,建议你统一支付出口,只用一个作为主要支付手段:支付宝、微信,这样在统计的时候好统计,不然还需要去多个地方统计。
有浏览器就能访问,电脑 + 移动端:都能完美显示
快捷键 | 功能 |
---|---|
CTRL+ D | 复制当前行。 |
Tab | 在前面插入 4 个空格。 |
Shift + Tab | 删除行前的空格,多于4个,一次性删除4个,小于四个,清除前面的空格。 |
CTRL+ ← | 移动到行最左端 |
CTRL+ → | 移动到行最右端 |
前后端完全开源,你可以部署一套自己的日记系统。
该项目包含两个部分:
- 前端:https://github.com/KyleBing/diary-vue
vue3
+ts
+vite
- 后台:https://github.com/KyleBing/portal
nodejs
具体的部署方式在各个项目中都有介绍
http
https
不同部署环境对功能的影响
- 编辑页面中,内容输入区在 ctrl + x 的时候无法将内容放置到剪贴板上。
- 整个程序在打开的时候无法以
ServiceWorker
的形式快速载入,只有完整的从服务器再次载入。 ServiceWorker
和navigator.clipboard
只在环境是https
或localhost
的时候生效。
新用户注册需要邀请码,邀请码分为两种:
- 一种是万能的,在后台系统的配置文件中配置
- 一种是一次性的,一人一码
- 登入系统后,点开菜单,选择邀请码菜单(用户默认注册后的
group_id
为2
,只有用户group_id
为1
的用户才能看到,需要手动去数据库中指定管理员账户),可以生成新的邀请码,点击邀请码就可以复制内容,分享给别人就可以了。 - 邀请码页面中显示的是都是未注册的码,复制后邀请码变为绿色,表示已被分享还未使用。
- 已使用的将会隐藏,不再显示在列表中。
目前初始化的过程还不是很好,还是代码层面的,所以先手动修改数据吧
如若不配置:只是不能显示用户头像而已
头像文件是存储到 七牛云 上的,免费注册会有免费额度,够用。
需要修改/src/projectConfig.ts
文件内容,改成你的七牛云配置。
export default {
// 七牛云
// 地址: https://portal.qiniu.com/kodo/overview
QiniuImgBaseURL: 'http://rnov15v13.hb-bkt.clouddn.com/', // 空间域名,最后面带 `/`
QiniuBucketName: 'diary-container', // 七牛云对象存储空间的名称
}
如若不配置:只是不能自动获取当地天气和温度而已
用于从 和风天气 中获取地域的天气和温度信息,也是在/src/projectConfig.ts
文件中
export default {
// 和风天气开发 key
// 地址:https://dev.qweather.com/
HefengWeatherKey: '',
}
部署前端项目时,最好在 nginx
中添加 gzip
开关,这样能有效加快项目载入速度,比如我的 1.3M 的 js
文件,在 gzip
处理后压缩到了 360kb。
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
)
vue3
+ts
+vite
vue-router
pinia
axios
clipboard
剪贴板moment
时间处理v-calendar
日期选择marked
MarkDown 渲染echarts
图表floating-vue
悬窗qiniu-js
七牛云相关文件js-base64
base64 处理
- 2017 年的时候学 iOS 顺便做了个不太成熟的 iOS 版 app,当时日记是存储在
iCloud
中,有了 app 的界面样子,但并不能很完美的使用。 - 后来到 2019 年的时候感觉自己前端技术差不多了,就想以前端的方式实现它,最初用的是
HTML
+jQuery
。 - 之后对
Vue
了解的足够多之后,就改成了HTML
+Vue
。最初只有移动端的,添加了 PC 版界面。 - 再后来就大改了,改成了纯
Vue
模式,此时的 PC 版和移动端还是在两个分支上。 - 又过了好久,总算把移动端和 PC 两个版本融合到了一起。
- 2024年1月,改写成
vite
+ts
版本
2017-09-27
~ 现在
因为自己在用这个,也是自己最喜欢、使用频率最高的项目,所以只要我还健在,这个项目就会被一直维护下去。
感谢 JetBrains 提供的工具支持
iPad Pro 截图
移动端