e5分享网站开发记录

• 后端（node+express+js） https://github.com/haruki1953/e5share_node
• 前端（vue3+element plus+js） https://github.com/haruki1953/e5share_vue3
• 移动端（vue3+vant4+ts） https://github.com/haruki1953/e5share-web-mobile

240215

决定了开发流程

• 编写项目文档：项目概述、界面与功能、技术方案
• 编写接口文档
• 开发后端
• 开发前端
• 测试与部署

01_项目文档

规划设计了页面

1. 登录注册页
2. 主页面布局
3. 首页：列出正在分享的账号
4. 用户列表
5. 用户主页
6. 动态页：类似群聊，显示正在帮助自己的用户所发的消息
7. e5账号分享管理页

240216

可以使用uuid库生成UUID，用于：动态消息id、私信消息id、通知id

240217

整理并描述了每个页面的功能

240218

在Node.js中，有一些工具可以像Django的admin那样快速可视化操作SQLite数据库。
Express Admin 是一个基于Express.js的中间件，用于为MySQL, MariaDB, PostgreSQL, SQLite等数据库创建管理界面

240219

基本完成了数据库的设计，对后端大部分接口进行了梳理

240220

后端开发，mvc三层架构：表现层、业务逻辑层、数据访问层
02_后端开发记录

后端命名 e5share_node
前端命名 e5share_vue3

初始化项目

1. 安装配置ESLint node项目中使用ESLint
2. 新建 app.js 初始化一个基本的 express 服务器实例
3. 配置 cors 跨域
4. 提交至 development 分支

240221

1. 安装sqlite3，好像因为缺少编译工具会报错，需要设置代理，以不在本地编译而从远程服务器下载预编译的二进制包。 【02_后端开发记录】二、数据库创建
2. orm框架Sequelize的基本使用以及在项目中的使用方式 【node项目中使用sqlite数据库】

240222

完成了sequelize在项目中的配置，做了写接口前的准备
试着弄了adminjs，但感觉太大了就放弃了

240223

03_接口文档

240224

完成了注册登录接口，正在写用户信息修改相关接口
整理好了接口编写流程，写起来顺很多了： 准备

• 接口文档先写个大概
• 整理接口要干的事
  代码
• 先完成路由和路由处理函数，确保畅通
• 配置表单数据验证
• 编写业务逻辑
  完善
• 测试接口
• 完善接口文档

240225

完成了用户信息修改相关接口

• multer 解析表单数据
• sharp 压缩处理图片
• moment 解析日期并设置时区

240226

完成了 公共接口 与 e5动态相关接口
明天再测试测试 确认访问动态权限 之类的吧

240227

正在写e5分享相关接口，头有点疼，没写多少就撂了

240228

只完成了注销分享接口，还很史
还是看看指尖相触恋恋不舍吧，好累

240229

后端基本的功能终于马马虎虎完成了
明天大概可以开始写前端了

240301

开始前端开发 04_前端开发记录

240302

完成登录页面

240303

只弄了导航栏，还挺好看

240304

• 个人信息获取与渲染
• 渲染通知徽章提示
• 通知抽屉

240305

今天什么也没干😭
倒是想了想交错式瀑布流应该怎样做，直接分成三列对应三个数组，然后遍历获取的数据并判断元素高度添加入最低的列
希望有现成的组件吧

240306

思考了一下需要解决的问题

1. 登录（等需调用api的）按键防抖
2. 对用户可以自定义的信息，转义特殊字符 （也可以不用，Vue 的 {{}} 插值表达式和 v-bind 指令都会自动转义特殊字符）
   至于头像，后端已经处理并压缩了，不会有xss攻击

优化了项目结构，完成了用户列表的获取

240307

完成了动态获取与其未读提示

240308

• 登录访问拦截
• logo通过配置文件控制
• 完成通知卡片的静态样式

240309

• 完成通知渲染
• 首页卡片静态样式

240310

完成了首页卡片 e5sharing-card 的封装与数据显示

240311

• 对首页中的内容进一步进行了封装与设计
• 完成了交错式瀑布流

240312

完成了用户列表页，可搜索用户
完善：

• 重写了通知卡片
• 美化了用户卡片
• 封装用户卡片容器 UsercardContainer
• 将登录背景封装进配置文件

240313

• 完成了用户主页
• 完善了用户卡片的布局

240314

什么都没干
只是想了想

240315

设置页写了一点

240316

还是在写设置页

• 将多个修改内容的卡片封装为组件
• 点击菜单滚动到对应卡片，鼠标进入卡片设置对应菜单活动
• 左侧添加 联系方式 与 友情链接 卡片，封装为组件 LinksCard

240317

还是在写设置页
完成了：

• ProfileCard 修改基本信息
• AvatarCard 修改头像
• EmailCard 修改邮箱
• PasswordCard 修改密码

改进：

• 添加了右侧预览用户卡片 大屏时显示在右侧 小屏时显示在底部
• 根据分享状态选择性显示e5信息修改卡片
• 改进关于文本内容的空格与换行

240318

完成了设置页：E5Card 修改E5订阅信息
比想象中要麻烦一点，早点休息了

240319

• 正在写分享管理页
• 完成了 stores/modules/share.js
• utils/initial.js 优化了数据加载时序，并重命名为 utils/dataManage.js。主要用于管理数据，初始化数据、修改信息后的更新数据、退出登录等操作都将封装于此

待解决：退出登录问题，在分享页无法退出登录

240320

解决了退出登录问题，又简单写了分享管理页的表格

240321

完成了多个弹出层的弹出
登记分享抽屉的功能方面完成了 将设置中的修改分享信息，封装为日期选择组件

240322

完成了 分享注销抽屉 与 分享信息添加对话框

240323

分享信息操作对话框，完成了备注修改与删除功能

240324

• 分享信息操作对话框，
  • 分享进度步骤条
  • 发送分享确认功能
  • 停止分享功能
• 通知抽屉，完成了快速添加功能

240325

• 通知抽屉，确认接受分享
• 用户主页
  • 停止接受分享对话框
  • 申请分享抽屉
• 保存返回的通知id，完成了申请信息的保存于获取

240326

• 申请分享抽屉中显示申请信息
• 分享信息操作对话框
• 通知抽屉中将重点通知置顶
• 改进通知卡片

240330

确定了动态页的基本布局，这几天因为一些事情懈怠了开发，明天要重新开始努力。。其实之前就不够努力，明天要更努力

希望在四月上旬能开始部署吧，现在还需要：

• 完成动态页
• 完善引导帮助、或许可以用 VitePress(?) 写说明
• 添加基本的管理功能：关闭注册、添加用户、删除用户、修改用户信息

240331

完成了基本的静态样式

240401

完成了动态菜单 PostMenu

240402

完成了：

• 动态消息卡片 PostMessage
• 动态发送卡片 PostSend
• 未读状态相关功能

240403

• 尝试解决动态页的卡顿，姑且算是优化了一点
• 动态关注功能，完成了功能方面的设计，明天要尽快完成功能的实现

240404

• 完成了动态关注功能
• 添加了通知清除功能（前后端都有修改）

240405

现在基本的、对于用户的前后端都已经开发完毕，接下来需要完善管理系统方面的

1. 后端完善

   • 数据库备份
   • 日志

2. 用户管理系统

   • 管理员登录
   • 修改管理员密码、用户名
   • 创建新管理员
   • 删除管理员
   • 创建用户
   • 删除用户
   • 修改用户
   • 停止/恢复注册

3. VitePress说明文档

240406

设计了数据库备份，完成了启动时备份

240407

完成了每日与每月备份，完成了基本日志功能

好神奇，做日志功能时发现，在有些get请求时，statusCode为304，原来是因为客户端缓存。 是服务器在返回响应时，判断资源副本缓存验证头与响应数据是否相同，相同则返回304响应。真是太好了，其实以前就想过类似的做法来优化，原来在不知道的底层就已经有了，完全不用刻意做配置 又发现在请求全部用户数据时，因为最后登录时间字段一直在变化，导致其不会是304，现在可以把最后登录时间做成新的接口来优化！！

【散装笔记】客户端缓存与304状态码

240408

• 完善日志系统 日志切割、限制数量
• 为了使使客户端缓存副本发挥作用，优化后端 获取全部用户信息接口、 获取用户最后登录时间接口，前端也配合修改
• 前端路由无效页面拦截
• 前端切换路由加载效果

240409

完善了网站图标与标题

240410

初步构思了管理系统的后端部分 今天怠慢了，明天要努力起来

240411

• 完成了可修改的持久化配置
• 完成了管理员登录接口
• 完成了获取管理信息接口

240412

完成多个接口

• 修改管理信息
• 修改登录信息
• 改写用户注册接口
• 获取全部用户接口
• 用户注册接口
• 用户密码修改接口
• 用户注销接口（半完成）

240413

• 完成用户注销接口
• 完善日志 错误/警告日志
• 查询数据库时，raw: true 会使返回的时间格式不一样，导致火狐浏览器上显示不正常

240414

• 确保无效用户id不会影响显示
• 注销用户功能
• 管理系统新前端 还剩用户主页与设置页

240415

后端、网站前端、管理前端，均已开发完成

240416

• 清理了服务器
• 尝试部署，失败了，明天再学学docker再说吧

240417

• 通过环境变量来配置监听端口，默认端口暂定为23769
• 通过环境变量来配置jwt
• 更改了存放数据库的位置，为 data/
• 尝试docker部署，寄，有点破防，让我缓缓，歇了

240418

• 由于sharp导致在部署时Illegal instruction (core dumped)，更换图片处理模块为jimp
• 为了方便部署，JWT 随机生成并保存至 utils/jwtKeys.json
• 在本地部署成功😭

240419

前后端均部署成功

240420

• 为docker学习收尾了
• 整理docker部署node项目

240429

尝试改进缓存

240430

• 开始制作移动端前端，Vue3、TypeScript、Vant4组件库
• 初始化了项目，ts还是有一点区别的
• 引入 Vant4 组件库，解决自动引入与ts造成的变量类型未声明问题【重点】
  • 在 eslintrc.cjs 中声明全局变量名
  • 在 tsconfig.app.json 中添加自动引入生成的类型声明文件

240501

• 项目中的 vw 适配
• 整体路由设计
• 中止移动端前端开发，先学习uniapp小兔鲜的课程

240503

使用ts重写了已经写好的api、store、utils等代码

240504

登录注册页面 布局 Tabbar 标签栏

240505

layout页面布局，快完成了 也没干什么，但是好累

240506

完成了layout页面布局

240507

在弹出层中的底部添加联系方式与友情链接折叠面板

240508

完成了主页

240509

完成了用户列表 基本完成用户主页的视图部分

240510

完成了 ApplySheet 申请分享面板

240511

• 用户主页：
• StopSheet 停止接受分享面板
• AddShareSheet 添加分享信息面板
• 关注/查看动态
• e5分享管理页：
• 页面基础
• ShareRegisterSheet 分享登记面板
• E5dateForm 日期选择表单

240512

• e5分享管理页：
• ShareCancelSheet 分享注销面板
• ShareInfoUpdateSheet 分享信息修改面板
• 完善了e5进度条
• 通知页：
• 初始化了通知页与通知卡片

240513

• 通知页：
• 完成 通知页面、通知卡片
• 通知已读功能
• 重点通知处理
• 解决了 app.vue里onMounted不生效？问题，修改了路由
• 分享确认面板、添加面板

240514

• 动态菜单页：动态菜单、悬浮球、弹出面板
• 动态详情页：PostCard 动态卡片、SendSheet 动态发送面板

240515

• 设置页
• ProfileCard
• AvatarCard
• EmailCard
• PasswordCard
• E5Card
• E5dateForm问题

240516

• ClearNotifCard、DeleteUserCard
• 根据屏幕大小重定向
• 打包部署