Skip to content
forked from KyleBing/diary

《标题日记》web 纯文字日记应用,分类日记,共享日记 Headline Diary, web app, text only, summary of the day | Vue3 | PC & Mobile

License

Notifications You must be signed in to change notification settings

YutHelloWorld/diary

 
 

Repository files navigation

标题日记

一个纯文本的日记 web 应用

http://kylebing.cn/diary

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

界面

详细的截图在文章最后

编辑


一、介绍

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

1. 初衷

一句话概括自己的一天,一目了然的查看近况。

2. 主要功能、特性

  • 记录标题、内容。
  • 记录室内、室外温度、天气情况。
  • 日记类别:生活、学习、工作、运动、游戏、电影、大事、周报、文章、账单。
  • 支持多个关键字搜索日记标题或内容。
  • 可根据日期、类别筛选日记。
  • 支持日记分享功能
    • 编辑日记时,将分享的开关打开,保存日记后,在日记详情页的工具栏中会多出一个分享按钮,点击会复制这篇日记的共享链接,这个链接是公开的,任何人都可以通过链接查看此篇日记。 比如当前这篇日记的分享链接是:http://kylebing.cn/diary/#/share/6766
  • 支持暗黑皮肤,根据本机颜色样式,自动切换黑白两种样式。
  • 日记统计信息
  • 账单统计功能(需要指定格式书写)

3. 支持平台

跨平台,PC 和 移动端均能完美显示。

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

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

二、安装

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

三、邀请码的使用

新用户注册需要邀请码,邀请码有两种:一种是万能的,在后台系统的配置文件中配置;另外一种是一次性的,一人一码。
登入系统后,点开菜单,选择邀请码菜单(只有前端配置的管理员帐户才能看到),可以生成新的邀请码,点击邀请码就可以复制内容,分享给别人就可以了。
邀请码页面中显示的是都是未注册的码,复制后邀请码变为绿色,表示已被分享还未使用。

四、项目配置

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

七、项目历程

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

八、支持

感谢 JetBrains 提供的工具支持

JetBrains

九、项目周期

始于 2017-09-27

十、界面截图 - 详细

PC

登录

编辑

长列表

统计

列表

银行卡列表

账单列表

菜单

类别

分享

分享

移动端

About

《标题日记》web 纯文字日记应用,分类日记,共享日记 Headline Diary, web app, text only, summary of the day | Vue3 | PC & Mobile

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • Vue 64.1%
  • SCSS 25.4%
  • JavaScript 9.3%
  • Other 1.2%