# 笔记系统

**Repository Path**: JY2001/note-taking-app

## Basic Information

- **Project Name**: 笔记系统
- **Description**: 大软课的课程项目，笔记系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2022-09-20
- **Last Updated**: 2024-03-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 笔记系统

## 介绍
这是大型应用软件设计课的课程项目：协同笔记系统。官网位于[这里](https://notes.haolow.com)。

我们团队设计的是一款协同笔记系统，支持多人协作、方便共享各自的笔记内容以达到笔记开源的目的。

这款协同笔记系统可以应用于高中生高考，由一些参加过高考的学长学姐分享自己高中时期的优秀笔记，学生可以登录这款协同笔记系统查看该学长、学姐底下的公开部分的笔记内容，方便借鉴好的学习方法。同样也可以应用到大学生考研这一方面，由已上岸的学长、学姐分享自己的考试经历和复习方法，用户即可登录自己的账号查看对应学长、学姐账号下公开的内容。除了以上方面外，还可以应用于工作中团队成员的协同作业，一个团队可以建立属于自己的私密的一个笔记，只有团队成员可以共享、修改其中的内容，方便线上的信息共享。所有这些功能，使得该款笔记系统具有较好的易用性、及时性、共享性、可修改性和安全性。

我们团队会尽力完善这款协同笔记系统的功能，使之整体上符合预期，也会在开发过程中不断迭代修正，以期开发出一款优秀的协同笔记系统。

![截图1](./resources/截图1.png)

## 具体功能介绍

- 基于文件夹的笔记管理
	- 文件树状图显示在侧边栏中，在其中可以方便地进行文件的增、删、改操作
	- 无论电脑还是手机，都可以通过拖拽的方式移动文件和文件夹
- 编辑器
	- 支持富文本编辑
	- 支持图片上传，由于图床的限制较多，目前上传的图片存储于MongoDB中
	- 通过快捷键或者富文本工具条，可以方便地调整笔记的格式
- 支持协同编辑
	- 打开笔记，复制笔记链接共享给其他用户，其他用户打开即可进行实时的协同编辑
	- 支持暂时的离线编辑，只要不关闭网页，在重新连上网络时，就会重新和其他用户同步自己编辑的内容，保证内容不丢失
	- 支持显示每个用户的光标位置，可以看到大家在编辑什么地方
	- 支持基于黑名单和白名单的权限控制，笔记的拥有者可以精确地管理每个用户是否可以访问对应笔记
- 账号系统
	- 笔记全平台同步，并且通过协同编辑实现了实时同步
	- 密码在服务端加密存储，不必担心泄露问题
- UI 细节
	- 倾向于简洁，页面仅包括侧边栏和笔记区域
	- 通过响应式布局，适配移动端和桌面端
	- 笔记工具条位于底部，方便移动端用户
- 其他
	- 本产品为开源产品，可以参考下述的部署步骤自行构建与部署在自己的服务器上

## 部署步骤

### 0 说明

您可以使用我们提供的官方部署，也就是通过[官网链接](https://notes.haolow.com)访问（官网不保证稳定的连接）。

也可以根据以下的步骤轻松搭建一个自己的版本。为了简化这个部署教程，我们省略了一些比较基础的内容，如怎么安装 docker，怎么使用 NGINX（可选），请自行学习。

注意，如果希望部署自己的版本，你至少需要拥有一个 VPS。当然，您也可以使用 Heroku 等 serverless 方式部署，不过我们没有提供教程，请自行探索。另外，如果希望启用 HTTPS，那么需要所有请求都必须是加密的，比如 `.env` 中的所有 http、ws 就需要对应修改为 https、wss。

### 1 使用 docker 安装和配置 MongoDB

1. 安装 docker
2. 使用命令 `docker run -d -p 27017:27017 --restart=always --name mongo -e MONGO_INITDB_ROOT_USERNAME=admin -e MONGO_INITDB_ROOT_PASSWORD=<password> mongo:latest` 启动 MongoDB 数据库容器，注意修改其中的密码
3. 使用命令 `docker exec -it mongo mongosh` 进入数据库容器的命令行
4. 通过 `use admin` 和 `db.auth("admin", "password")` 验证刚刚创建的根用户
5. 通过 `use notedb` 和 `db.createUser({ user: "app", pwd: "pwd", roles: [ {role:"dbOwner", db:"notedb"} ] })` 创建新的业务数据库和业务用户，注意修改用户名和密码，保证与步骤2中的.env文件中的一致

### 2 部署笔记系统的服务端程序
1. 安装 git、node.js、npm、pm2
2. 使用 `git clone https://gitee.com/JY2001/note-taking-app.git` 克隆本项目，并 `cd note-taking-app/backend` 进入到服务端目录
3. 将 .env.example 文件改名为 .env，并修改其中的内容，保证与步骤1中配置的一致
4. 使用 `npm install` 安装所有依赖
5. 使用 `pm2 start npm --name backend -- start` 命令启动服务端

### 3 部署websocket协同编辑服务器

1. 安装 git、node.js、npm、pm2
2. 创建文件夹 `backend-websocket`（名字随意），进入文件夹
3. 使用 `npm init` 初始化（一直回车即可），使用 `npm install y-websocket` 安装依赖
4. 编辑 `package.json`，把 `"scripts": { ... }` 中间省略号的部分全部替换为 `"start": "HOST=0.0.0.0 PORT=3002 npx y-websocket"`
5. 使用 `pm2 start npm --name backend-websocket -- start` 命令启动协同编辑服务器

### 4 部署笔记系统的前端程序

1. 在部署前端之前，推荐您购买一个自己的域名，并绑定到对应 IP，然后配置 NGINX、Caddy 等 Web 服务器。如果您决定使用 IP 地址访问，可以跳过这一步
2. 安装 git、node.js、npm、pm2（需要使用 Node.js v14 及以上的版本）
3. 使用 `git clone https://gitee.com/JY2001/note-taking-app.git` 克隆本项目，并 `cd note-taking-app/frontend`
4. 如果需要，可以将 `package.json` 中的端口修改为您想要的，默认是3001
5. 将 .env.example 文件改名为 .env，并修改其中的内容，保证与步骤2和步骤3中配置的一致（每次您重新更改本文件的内容，都需要重新进行以下的步骤）
6. 使用 `npm install` 安装所有依赖，并使用 `npm run build` 构建
7. 使用 `pm2 start npm --name frontend -- start` 命令启动前端

## 软件架构

前端：React、Next.js

后端：Express.js

数据库：MongoDB

界面：Bootstrap

富文本编辑：Tiptap

协同编辑：yjs