部署自己的日记系统

一、部署自己的日记系统

前后端完全开源，你可以部署一套自己的日记系统。

该项目包含两个部分：

• 前端：https://github.com/KyleBing/diary-vue vue3、ts、vite
• 后台：https://github.com/KyleBing/portal nodejs

默认的部署目录是这样

[ nginx 文档根目录 ]
      │
      ├── diary      # 日记前端文件
      └── portal     # 日记后台

二、前端部署

1. 请求地址修改

前端系统的默认请求地址是

../portal

所以具体你想怎么放置前端和后台就看你自己了。

如果你的路径跟这个不一样，可以修改 diary-vue 项目中的 /src/request.ts 文件中的这一行，改成你需要的地址再 build 项目即可。

  const BASE_URL = import.meta.env.MODE === 'development' ? '/dev/': '../portal/'

2. 邀请码

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

• 万能的：在后台系统的配置文件中配置
• 一次性：一人一码

1. 登入系统后，点开菜单，选择邀请码菜单，可以生成新的邀请码，点击邀请码就可以复制内容，分享给别人就可以了。

   系统安装后，第一个注册的用户默认为管理员，即 group_id = 1
   用户默认注册后的 group_id 为 2

2. 邀请码页面中显示的是都是未注册的码，复制后邀请码变为绿色，表示已被分享还未使用。
3. 已使用的将会隐藏，不再显示在列表中。

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

三、项目配置

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

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

  "QiniuImgBaseURL": "", // 空间域名，最后面带 `/`
  "QiniuBucketName": "", // 七牛云对象存储空间的名称
  "QiniuStyleSuffix": "", // 七牛云图片样式后缀，缩放图片尺寸

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

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

  // 和风天气开发 key
  // 官网地址：https://console.qweather.com/
  // API文档：https://dev.qweather.com/docs/api/weather/
  "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、ts、vite
• axios 数据请求
• clipboard 剪贴板
• moment 时间处理
• v-calendar 日期选择
• marked MarkDown 渲染
• echarts 图表
• floating-vue 悬窗
• qiniu-js 七牛云相关文件
• js-base64 base64 处理
• js-yaml 转换 yaml to js