一个纯文本日记应用
在线项目,点击登录界面右下角的体验账号登录即可
http://kylebing.cn/diary
详细的截图在文章最后
PC
移动
《标题日记》 用概括的标题列表来概览你的近期生活。 建议标题字数控制在 20 字以内,这样更方便从列表概览内容。
每天一句话概括自己的一天,一目了然的查看近一个月以来的事。
- 记录标题、内容。
- 记录室内、室外温度、天气情况。
- 区分日记类别:生活、学习、工作、运动、游戏、电影、大事、周报、文章、账单。
- 列表中同日日记只显示一个日期时间。
- 支持多个关键字搜索日记标题或内容。
- 可根据日期、类别筛选日记。
- 支持日记分享功能
- 编辑日记时,将分享的开关打开,保存日记后,在日记详情页的工具栏中会多出一个分享按钮,点击会复制这篇日记的共享链接,这个链接是公开的,任何人都可以通过链接查看此篇日记。 比如当前这篇日记的分享链接是:http://kylebing.cn/diary/#/share/6766
- 支持暗黑皮肤,根据本机颜色样式,自动切换黑白两种样式。
- 日记统计信息
- 账单统计功能(需要指定格式书写)
跨平台,PC 和 移动端匀能完美显示。
该项目包含两个部分,具体的部署方式在各个项目中均有介绍:
不配置只是不能显示用户头像而已 头像文件是存储到 七牛云 上的,免费注册会有免费额度,够用。 需要修改
/src/projectConfig.js
文件内容,改成你的七牛云配置。
export default {
// 七牛云
// 地址: https://portal.qiniu.com/kodo/overview
QiniuImgBaseURL: 'http://rnov15v13.hb-bkt.clouddn.com/', // 空间域名,最后面带 `/`
QiniuBucketName: 'diary-container', // 七牛云对象存储空间的名称
}
不配置只是不能自动获取当地天气和温度而已 用于从 和风天气 中获取地域的天气和温度信息,也是在
/src/projectConfig.js
文件中
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
: 用户的配置信息(类别筛选,日期筛选,关键字)DiaryAuthorization
: 用户信息(用户名,token,uid)
vue3
+vue-router
+vuex
axios
qs
clipboard
@vuepic/vue-datepicker
moment
marked
echarts
floating-vue
- 2017 年的时候想学 iOS 了顺便做了个不太成熟的 iOS 版 app,当时日记是存储在
iCloud
中的,有了 app 的界面样子,但并不能很完美的使用。 - 后来过了很久,到 2019 年的时候感觉自己前端技术差不多了,就想把它实现了,最初使用的是
HTML
+jQuery
。 - 后来对
Vue
了解的足够多之后,就改成了HTML
+Vue
。最初只有移动端的,添加了 PC 版界面。 - 再后来就大改了,改成了纯
Vue
模式,此时的 PC 版和移动端还是在两个分支上的。 - 又过了好久,移动端和 PC 两个版本整合到一起,也就是现在的版本。
感谢 JetBrains 提供的工具支持
始于
2017-09-27
PC
移动端