# CoNet **Repository Path**: hatrixxxx/co-net ## Basic Information - **Project Name**: CoNet - **Description**: 软工导论作业——CoNet康奈尔笔记本 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-10-12 - **Last Updated**: 2026-01-27 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ## 部署说明 1. 安装 nodejs、mysql（mysql 安装过程中需要设置密码，用于将来的登录）并加入环境变量 2. 配置 mysql 服务为开机自启：以管理员身份运行 windows powershell，输入 ```shell sc.exe config mysql80 start= auto ``` 在命令行输入以下命令并输入密码，成功打开 mysql 命令行则表示 mysql 安装配置完成 ```shell mysql -u root -p ``` 3. 创建用户和数据库 在 mysql 命令行中输入如下命令以创建用户并授予权限 ```mysql create user Hatrix identified by 'Hrx20020729,'; GRANT ALL PRIVILEGES ON Hatrix.* TO 'Hatrix'@'%'; FLUSH PRIVILEGES; ``` 在 mysql 命令行中输入如下命令以创建数据库和存储结构 ```mysql create database Hatrix; use Hatrix; CREATE TABLE users ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(255) NOT NULL UNIQUE, password_hash VARCHAR(255) NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ); CREATE TABLE folders ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, name VARCHAR(255) NOT NULL, parent_id INT NOT NULL, previous_parent_id INT NOT NULL, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE ); CREATE TABLE files ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, folder_id INT NOT NULL, previous_folder_id INT NOT NULL, title VARCHAR(255) NOT NULL, HintEditor TEXT NOT NULL, ContentEditor TEXT NOT NULL, SummaryEditor TEXT NOT NULL, is_reviewed BOOLEAN DEFAULT TRUE, review_date DATE, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, FOREIGN KEY (folder_id) REFERENCES folders(id) ON DELETE CASCADE, FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE ); CREATE TABLE tags ( id INT AUTO_INCREMENT PRIMARY KEY, user_id INT NOT NULL, name VARCHAR(255) NOT NULL UNIQUE, FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE ); CREATE TABLE file_tags ( file_id INT NOT NULL, tag_id INT NOT NULL, user_id INT NOT NULL, FOREIGN KEY (file_id) REFERENCES files(id) ON DELETE CASCADE, FOREIGN KEY (tag_id) REFERENCES tags(id) ON DELETE CASCADE, FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE, PRIMARY KEY (file_id, tag_id) ); INSERT INTO users (username, password_hash) VALUES ('root', 'root'); INSERT INTO folders (name, parent_id, previous_parent_id, user_id) VALUES ('根目录', 0, 0, 1); INSERT INTO folders (name, parent_id, previous_parent_id, user_id) VALUES ('回收站', 0, 0, 1); INSERT INTO folders (name, parent_id, previous_parent_id, user_id) VALUES ('剪贴板', 0, 0, 1); ``` 4. 在 frontend 目录和 backend 目录下**分别**执行以下命令，安装依赖 ```bash npm install ``` backend 目录再执行 ```bash npm install jsonwebtoken ``` > [!CAUTION] > > 如果需要重构表结构，在 mysql 命令行中输入如下命令 > > ```mysql > use Hatrix; > drop table file_tags; > drop table tags; > drop table files; > drop table folders; > drop table users; > ``` > > 后重新运行构建说明中创建存储结构的命令即可 ## 运行 先运行后端 ```bash node server ``` 再运行前端 ```bash npm run serve ``` ## 文件目录说明 此处不展开node_modules目录下冗长的依赖文件和用于服务器部署的压缩包dist - frontend目录为前端vue代码，其中src目录为主要源码部分，其余部分均为vue工程生成时自带的目录结构；src下assets目录存放图片视频等多媒体资源；router目录下有index.js，负责路由管理；views目录为所有页面，其中Review.vue为封面页、Login.vue为登录页、Register.vue为注册页、MainPage为主页、Editor.vue为笔记编辑页，所有页面在文件中均有详细注释。src目录下的App.vue、main.js、registerServiceWorker.js也均为vue工程生成时自带的文件，只作了引入依赖的修改或者没有更改。 - backend为后端js代码，只有一个server.js文件作为后端，在文件中有详细注释。 ```shell |-- .vscode | settings.json |-- backend |-- .vscode | settings.json | .gitignore | package-lock.json | package.json | server.js |-- frontend |-- dist |-- public |-- img |-- icons | android-chrome-192x192.png | android-chrome-512x512.png | android-chrome-maskable-192x192.png | android-chrome-maskable-512x512.png | apple-touch-icon-120x120.png | apple-touch-icon-152x152.png | apple-touch-icon-180x180.png | apple-touch-icon-60x60.png | apple-touch-icon-76x76.png | apple-touch-icon.png | favicon-16x16.png | favicon-32x32.png | msapplication-icon-144x144.png | mstile-150x150.png | safari-pinned-tab.svg | favicon.ico | index.html | robots.txt |-- src |-- assets | 02.gif | 03.gif | bg.mp4 | file.svg | folder.svg | logo.svg | review-bg.png | user-avatar.png |-- router | index.js |-- views | Editor.vue | Login.vue | MainPage.vue | Register.vue | Review.vue | App.vue | main.js | registerServiceWorker.js | .browserslistrc | .gitignore | babel.config.js | dist.zip | jsconfig.json | package-lock.json | package.json | README.md | vue.config.js | README.md | readme.txt ``` ## 功能测试表（11.17 晚） | 测试项目 | 预期输出 | 备注 | | :----------------------- | ------------------------------------------------------------ | ------------------------------------------------------ | | **以下是跳转测试** | | | | 打开页面 | 访问 URL 能打开并显示主页 | | | 登录-->注册跳转 | 登录页单击”注册“进入注册页 | | | 登录-->主页跳转 | 登录页输入用户名和密码，单击”登陆“进入主页 | | | 注册-->登录跳转 | 注册页单击”已有账户去登录“，跳转到登录页 | | | 主页-->登录页 | 主页单击头像注销，进入登录页 | | | 主页-->编辑页 | 双击任意非回收站内的文件，进入笔记编辑页 | | | 主页加载 | 从任意位置进入主页，加载资源管理器视图并加载根目录 | | | 功能栏切换 | 单击”我的笔记“进入笔记管理页，单击”搜索“弹出搜索框并自动聚焦，单击”回收站“进入回收站页 | | | 搜索 | 单击”搜索“弹出搜索框并自动聚焦，输入内容会根据文件标题进行搜索 | | | **以下是资源管理器测试** | | ==注意在资源管理器视图、标签视图共和回收站下分别测试== | | 菜单显示 | 不同页面/视图，点击不同位置显示不同菜单 | | | 路径跳转 | 单击顶部橙色指示的路径按钮可跳转到对应路径，路径按钮由组成路径的每级文件夹名称构成 | | | 切换视图 | 单击切换视图按钮，在资源管理器视图和标签视图切换 | | | 新建文件/文件夹 | 在任意路径下新建文件或新建文件夹，出现对应图标和名称输入框并自动聚焦；enter 确认，esc 或失焦取消；或右键菜单新建文件夹 | | | 单击选中 | 左键或右键单击文件或文件夹被选中，右键单击时还会弹出菜单；名称过长的文件/文件夹会在此时显示全名 | | | 鼠标多选 | 鼠标拖选范围，范围内的文件或文件夹被选中；并可以进行多选后的**批量移动、剪切、复制和粘贴** | | | 键盘多选 | 按住 ctrl 或 shift 单击选择，可以不连续或连续选择 | | | 打开 | 双击或右键菜单单击”打开“，打开文件夹进入下级目录或打开文件进入编辑页；回收站页面执行操作弹出恢复提示 | | | 重命名 | 右键菜单单击”重命名“，出现输入框并自动聚焦；enter 确认，esc 或失焦取消 | | | 删除 | 右键菜单单击”删除“，文件或文件夹进入回收站；可以批量操作 | | | 恢复 | 回收站页面右键菜单单击”恢复“，文件或文件夹恢复之前路径；可以批量操作 | | | 彻底删除 | 回收站页面右键菜单单击”彻底删除“，弹出提示确认后文件或文件夹被彻底删除；可以批量操作 | | | 清空回收站 | 单击”清空回收站“弹出提示，确认后清空 | | | 移动 | 拖拽可移动选中对象到文件夹内，其它不合规移动不会引起操作；可以批量操作 | | | 复制 | 右键菜单可以复制选中的文件；可以批量操作 | | | 粘贴 | 当剪贴板中有内容时，右键菜单有粘贴选项，单击后可以粘贴；可以批量操作 | | | 剪切 | 剪切选中文件到剪贴板，可供后续粘贴；可以批量操 | | | 快捷键 | | 尚未实现 | | **以下是复习测试** | | | | 设置复习时间 | 右键菜单并单击”设置复习日期“可设置复习日期，或在笔记编辑页中也可设置复习时间 | | | 复习安排展示 | 日历突出显示有复习安排的日期，鼠标悬停显示”待复习“字样 | | | 复习提醒 | 复习提醒按照时间顺序展示有复习计划的笔记，勾选完成复习，双击打开对应笔记 | | | **以下是编辑页测试** | | | | 编辑笔记 | 三个框中均可记笔记，支持Markdown语法和图片的插入 | | | 添加标签 | 单击”添加标签“可添加至多三个标签，有标签重复的提醒 | | | **以下是登陆测试** | | 还没做完，后续编写 | | | | | | | | | | | | | | | | |