yunzerwebsite/yunzerwebsiteallinone

Fork 0

Files

T

hero920103 4aa9204df7 更换编辑器

2026-07-14 15:49:00 +08:00

5.4 KiB

Raw Blame History

记事本模块使用说明

功能概述

这是一个完整的记事本应用模块，支持富文本编辑、笔记管理等功能。

目录结构

notebook/
├── index.vue                  # 主页面（列表+编辑器）
├── components/
│   ├── edit.vue              # 编辑器组件
│   └── TiptapEditor.vue       # Tiptap富文本编辑器（已全局注册）
└── README.md                 # 说明文档

数据库

表名

yz_platform_notebook

表结构

id - 主键ID
title - 笔记标题
content - 笔记内容（HTML格式）
user_id - 创建用户ID
user_name - 创建用户名
is_deleted - 是否删除（0-否 1-是）
create_time - 创建时间
update_time - 更新时间
delete_time - 删除时间

SQL文件位置

sql/yz_platform_notebook.sql

后端接口

模型文件

go/models/platform_notebook.go

控制器文件

go/controllers/platform_notebook.go

API端点

获取笔记列表
- URL: GET /platform/notebook/list
- 参数:
  - page: 页码（默认1）
  - pageSize: 每页数量（默认20，最大100）
  - keyword: 搜索关键词（可选）
- 返回: 笔记列表和总数
获取笔记详情
- URL: GET /platform/notebook/detail/:id
- 参数: id - 笔记ID
- 返回: 笔记详细信息
创建笔记
- URL: POST /platform/notebook/create
- 参数:
```
{
  "title": "笔记标题",
  "content": "<p>笔记内容</p>"
}
```
- 返回: 创建的笔记信息
更新笔记
- URL: POST /platform/notebook/update/:id
- 参数:
```
{
  "title": "更新的标题",
  "content": "<p>更新的内容</p>"
}
```
- 返回: 更新后的笔记信息
删除笔记
- URL: DELETE /platform/notebook/delete/:id
- 参数: id - 笔记ID
- 返回: 删除结果

前端API

API文件

platform/src/api/notebook.js

方法说明

// 获取笔记列表
getNotebookList({ page, pageSize, keyword })

// 获取笔记详情
getNotebookDetail(id)

// 创建笔记
createNotebook({ title, content })

// 更新笔记
updateNotebook(id, { title, content })

// 删除笔记
deleteNotebook(id)

使用步骤

1. 初始化数据库

# 在MySQL中执行SQL文件
mysql -u用户名 -p数据库名 < sql/yz_platform_notebook.sql

2. 启动后端服务

后端已自动注册模型和路由，直接启动即可：

cd go
go run main.go

3. 访问前端

在浏览器中访问笔记本页面（路由需要在菜单中配置）

功能特性

列表功能

✅ 显示所有笔记
✅ 搜索笔记（按标题）
✅ 创建新笔记
✅ 删除笔记
✅ 查看笔记预览
✅ 显示更新时间

编辑器功能

✅ 富文本编辑（基于Tiptap）
✅ 标题编辑
✅ 内容编辑
✅ 保存笔记
✅ 自动识别新建/编辑模式
✅ 加载状态显示

TiptapEditor支持的功能

文本样式（加粗、斜体、下划线等）
标题（H1-H6）
引用
代码块
有序/无序列表
表格
链接
图片上传（需配置上传接口）
视频嵌入

权限说明

所有接口都需要平台用户登录（JWT Token验证）
每个用户只能查看、编辑、删除自己创建的笔记
删除操作为软删除，数据仍保留在数据库中

扩展功能（可选）

如需添加以下功能，可以扩展：

笔记分类
- 添加分类表和分类字段
- 支持笔记分类管理
笔记标签
- 添加标签表和关联表
- 支持多标签筛选
笔记分享
- 添加分享链接生成功能
- 支持公开/私密设置
笔记导出
- 支持导出为PDF
- 支持导出为Markdown
版本历史
- 记录笔记的修改历史
- 支持版本回退
协作编辑
- 支持多人协作编辑
- 实时同步功能

注意事项

图片上传需要配置文件上传接口
富文本内容存储为HTML格式，注意XSS防护
数据库content字段使用longtext类型，支持大容量内容
建议定期清理软删除的数据
生产环境建议添加内容审核机制

技术栈

前端: Vue 3 + Element Plus + Tiptap
后端: Go + Beego + MySQL
编辑器: Tiptap (基于ProseMirror)

开发调试

前端调试

cd platform
npm run dev

后端调试

cd go
go run main.go

查看API请求

打开浏览器开发者工具 -> Network 标签页，查看API请求和响应

问题排查

笔记列表为空
- 检查数据库表是否创建成功
- 检查用户是否已登录
- 查看浏览器Console是否有错误
保存失败
- 检查JWT Token是否有效
- 检查标题是否为空
- 查看后端日志
编辑器显示异常
- 检查Tiptap是否正确安装
- 查看浏览器Console错误信息
- 检查CSS样式是否正确加载

更新日志

v1.0.0 (2024)

✅ 完成基础功能
✅ 支持笔记CRUD操作
✅ 集成Tiptap富文本编辑器
✅ 响应式设计支持
✅ 暗色模式支持

5.4 KiB Raw Blame History Unescape Escape