1. 引言
随着社会的飞速发展，信息量呈现爆炸式增长，人们每时每刻都在获取、加工和分享信息，随时记录、及时查询和实时分享成为当今人们学习、工作和生活所需，如何把诸多碎片化的事情整合分类就显得非常重要。同时，人们对信息存储的要求越来越高，不再满足于传统的存储方式，追求更便捷、更强大且更安全的信息存储技术。线上学习笔记本可以帮助处理诸多事情，比如日程安排的记录，日常事务安排的记录，罗列事务的先后顺序等，从而帮助人们有条理地进行时间管理，提升学习和工作效率。
身处网络快速迭代更新的时代，我们应利用好网络所带来的便捷条件，最大限度地释放自主性、突出个性，不断突破环境限制。本次在线学习笔记本的设计与应用的目标在于为用户提供更加方便的记录服务。
2. 国内外研究现状
在国外，在线笔记应用早已兴起，包括EverNote、Notely、NoteSake等网站，他们的功能模式也十分成熟。以EverNote为例，通过文本、截图、手写等多种方式创建笔记，支持离线访问笔记、文档深度搜索、手机密码锁定、一键分享等强大功能[1]。从个人到企业，从自由职业者、小型商店、中型企业、到庞大的跨国公司集团，国外用户在生活和工作上非常依赖这类在线笔记应用，并乐于有偿使用更强大更方便的功能以提高工作效率，从而更加推动该方向应用的积极性。
相对于国外，国内的线上笔记本的发展应用还处于起步阶段，但近几年由于互联网发展迅速，信息量急剧增多，推动了信息类产品的发展。比如国内很流行的笔记软件印象笔记，他的功能齐全且条理清晰，十分符合当代用户使用线上笔记本记录和查看的要求。再比如腾讯公司将在线记事集中在QQ应用、网易公司则推出有道词典的云笔记应用等，但这些产品大多数在线笔记应用仅仅是作为其它应用的辅助应用或集成于其中来生存，这与国内目前的大环境是息息相关的[2]。在国内，记录重要信息大多使用office文档，甚至是纸质版文档；团队工作更喜欢以面对面形式交流讨论数据图表、项目进度等文档，这些大多以手工方式完成。因此，大多数用户不需要甚至不接受有偿使用在线笔记应用，即便其拥有再强大再便捷的功能，这使得此类应用无法得到直接的资源支持，功能更新积极性亦会大打折扣[3]。但鉴于网络与技术的高速发展，摆脱地域限制的协同工作需求将会日益增多，尤其是前几年的疫情期间多数需要居家办公，这就体现了线上笔记本的重要性，在线笔记应用依然具有非常大的发展空间[4]。
3. 需求分析
3.1. 系统定位
在线笔记本是一款Web应用，主要面向两大角色使用：网络用户以及系统后台管理员。
网络用户通过本系统可以将自己的工作、学习、生活杂记进行记录，包括创建、编辑、删除笔记，并为每个笔记指定标题、简介、标签，方便用户管理和查找笔记，创建好后进行笔记内容的填写(见图1)。其次，系统还支持上传多种类型的笔记内容，包括文字、图片、网址链接等，符合多样化的学习需求。同时提供笔记分享、收藏功能，用户可以与他人互动笔记内容，进行有效的沟通和联系。最后，系统还支持笔记内容的层次化记录，帮助用户对记录的笔记内容有更全面清晰的了解，提高学习效率。
Figure 1. System module diagram
图1. 系统模块图
系统管理员则可以通过本系统进行用户管理，修改用户信息、禁止或解禁用户，对用户的笔记内容进行分页、查询、删除等操作(见图1)。本系统满足用户多样化的学习需求，以线上学习为主题，以学生为目标群体，学生的学习习惯及方法对于学习来说十分重要，很多学生容易忘记或混淆知识点[5]，是因为没有系统地整合知识，所以根据学生学习需求而言，他们更需要对知识进行及时记录、分类和建立知识体系联系等功能。
3.2. 系统特点
1) 平台无关性：用户不受设备软硬件、操作系统等平台的限制，可以随时随地使用系统功能。
2) 使用成本低：用户无需额外下载软件包或插件支持即可进入系统享受在线笔记所带来的便利。
3) 操作简单，方便快捷：用户获取内容只需要填写帐号和密码，便可以直接进入帐号所保存的笔记界面。
4) 更具有针对性：主要针对于有学习需求的学生，其功能风格适合于科学的学习习惯和方法。
3.3. 前端流程与功能分析
前端页面供用户使用，功能特点是操作简单、使用成本低、更贴合需求。必须通过注册登录页面才可以到达用户的主页面对自己的笔记进行一系列操作。
首先，若是新用户，需要先输入账号和密码进行用户账户注册。而拥有账户的用户可以通过输入账号、密码来进行实现登录。登录后直接进入主页面，主页面提供功能包括：第一，笔记功能栏，可以选择新增笔记，编辑笔记本基本信息，例如笔记本标题，笔记的标签，笔记简介等。同时也可以编辑笔记内容，可以进行删除笔记，查看笔记内容，编辑笔记内容，其中笔记内容的编写功能和word文档的功能相近，可以实现字体的加粗、下划线、插入图片、插入网页链接，添加序号，插入表格等多种功能。第二，在输入内容的同时用户可以对笔记内容进行优先级的排序，以更好的方便对事务的管理或者对学习内容的把控。整个笔记可以做到两个分类：首先是“大分类”，即主题的一个分类，例如可以分为生活、学习、日常等等，这个可以由用户在新建笔记时决定；其次是“小分类”，即一个大主题下的具体的不同笔记，比如学习中的数学、英语等的知识记录。第三，为方便查询，我们在笔记系统中设置了检索功能，可以通过标题搜索和关键字搜索两种方式进行搜索查询。第四，为了保证笔记的良好互动性，系统具有笔记的收藏、查看、分享等功能，也可以灵活移除收藏笔记，使笔记系统更加生动有趣，同时也大大增加学习交流的机会[6]。第五，为保证用户的笔记隐私，用户可以设置将笔记设为私密，这样大大提高了笔记的安全性。
3.4. 后台流程与功能分析
后端页面供管理员使用，功能特点是操作直接方便、为系统的正常运营提供保障。同样也是必须通过管理员独有的账号密码进行登录才可以到达管理页面，从而对用户的账号密码，笔记内容进行管理。
首先，管理员可通过特定的账号密码登录到管理页面，从而可以对用户账户进行管理，对用户账号进行锁定和删除等操作。第二，管理者可以控制用户笔记的锁定，处理笔记的信息审核，管理者有权对用户的笔记进行锁定或删除处理。第三，后台管理员可以查看用户的基本信息，例如ID、昵称等，方便进行管理。
4. 系统设计
4.1. 系统业务流程设计
线上学习笔记本的特点在于简便和贴合。业务流程主要表现在前端模块，接下来将对前端模块进行业务流程的详细分析。
4.1.1. 登录操作流程
网络用户在登录页面，输入账号，首先判断账号是否合法，合法则进行下一步，否则提示错误，若新用户没有账号，则可以点击注册；然后判断账号是否存在，若存在且密码经核实正确，则可以进入个人笔记页面，否则提示错误，返回重新输入(见图2)。
4.1.2. 用户使用笔记流程
用户凭借正确的账号和密码进行登录，可以使用该系统的所有笔记功能，首先选择新建笔记，设置标题，标签，是否锁定仅自己可见，然后可以撰写笔记内容，进行保存。用户可以浏览其所有的笔记，可以分享笔记，并且可以查看自己公开笔记的收藏和分享次数(见图3)。
4.1.3. 管理员后台操作流程
管理员使用管理员账户登录，进行用户的后台管理。可以在页面查看用户的昵称，账号等，可以进行笔记审核，进行删除操作或者封锁该账户(见图4)。
4.2. 系统结构设计
在线笔记本拟采用MVC (Model-View-Controller)三层模式结构。MVC将应用分为三层：模型层，视图层，控制层；三个部分各自分离，专注于自己负责的模块[7] (见图5)。
Figure 2. Login operation diagram
图2. 登录操作图
Figure 3. User’s operation with the notes
图3. 用户使用笔记操作图
Figure 4. Background management login operation diagram
图4. 后台管理登录操作图
Figure 5. MVC architecture diagram
图5. MVC架构图
4.3. 系统数据库设计
根据需求分析，本次选用关系型数据库。数据来源主要有：业务需求和架构需求[8]。业务需求包括用户信息、用户笔记内容信息；架构需求包括角色信息、访问权限。总体E-R图表示此系统所需实体、属性和实体间的联系，从而可以清晰地表达数据对象及其之间的关系(见图6)。
Figure 6. Overall E-R diagram
图6. 总体E-R图
4.4. 数据表结构设计
4.4.1. 笔记标签表
该表用来记录笔记与其标签的关联性，为笔记附上标签属性，如表1所示。
Table 1. List of labels for notes
表1. 笔记标签表
名称 |
类型 |
长度 |
小数点 |
不是NULL |
键 |
注释 |
note_tag_id |
int |
0 |
0 |
不是 |
主键 |
笔记标签关联id |
noteId |
int |
0 |
0 |
是 |
|
笔记id |
tagId |
int |
0 |
0 |
是 |
|
标签id |
createTime |
datetime |
0 |
0 |
是 |
|
创建时间 |
updateTime |
datetime |
0 |
0 |
是 |
|
更新时间 |
4.4.2. 笔记收藏表
该表用来存储笔记收藏的用户信息及收藏的笔记id等相关信息，如表2所示。
Table 2. Collection of notes
表2. 笔记收藏表
名称 |
类型 |
长度 |
小数点 |
不是null |
键 |
注释 |
collectionId |
int |
0 |
0 |
不是 |
主键 |
收藏Id |
userId |
int |
0 |
0 |
是 |
|
用户Id |
noteId |
int |
0 |
0 |
是 |
|
笔记Id |
createTime |
dateTime |
0 |
0 |
是 |
|
收藏时间 |
4.4.3. 笔记信息表
该表用来存储新建笔记所填的相关信息，如表3所示。
Table 3. Information sheet on notes
表3. 笔记信息表
名称 |
类型 |
长度 |
小数点 |
不是null |
键 |
注释 |
tagId |
int |
0 |
0 |
不是 |
主键 |
标签id |
title |
varchar |
255 |
0 |
是 |
|
笔记标题 |
blurb |
varchar |
255 |
0 |
是 |
|
笔记简介 |
status |
varchar |
255 |
0 |
是 |
|
笔记状态 |
createTime |
dateTime |
0 |
0 |
是 |
|
创建时间 |
updateTime |
dateTime |
0 |
0 |
是 |
|
更新时间 |
4.4.4. 图片上传表
该表用来存储笔记内容中上传图片的相关信息，如表4所示。
Table 4. Image upload form
表4. 图片上传表
名称 |
类型 |
长度 |
小数点 |
不是null |
键 |
注释 |
id |
int |
0 |
0 |
不是 |
主键 |
表id |
url |
varchar |
255 |
0 |
不是 |
|
图片url |
name |
varchar |
255 |
0 |
是 |
|
图片名称 |
mime |
varchar |
255 |
0 |
是 |
|
图片类型 |
create_time |
timestamp |
0 |
0 |
是 |
|
上传日期 |
5. 系统详细设计与系统功能实现
5.1. 系统运行环境
操作系统：Windows 10
数据库：MySQL
开发语言：Java
IDE：IntelliJ IDEA
5.2. 用户功能页面
5.2.1. 笔记登录页面
用户输入正确的账号和密码进入主页面，也可以输入账号和密码进行直接注册，注册更加快捷方便(见图7)。
Figure 7. User registration success page
图7. 用户注册成功页面
5.2.2. 笔记主页
笔记广场可以阅览不同用户的公开笔记信息及其内容，点击收藏操作可以将喜欢的笔记进行收藏。同时可以通过标题或标签进行笔记搜索，找到自己需要的相关笔记(见图8)。
Figure 8. Notes square page
图8. 笔记广场页面
我的笔记页面可以对自己的所有笔记进行查看，对笔记基本属性信息进行更改、新增笔记以及对笔记内容的编辑，插入图片和插入表格等(见图9)。同时也可以查询自己的笔记，方便更快速的找到自己的某一笔记，例如使用标签搜索，根据标题作为关键字搜索，同时还可以进行笔记的删除等操作，这些操作使得用户可以更加直接的使用笔记，提高效率(见图10)。用户可以在我的笔记页面查看到笔记的状态和收藏数等信息，将自己的笔记通过分享链接进行笔记分享，对自己的笔记互动有很好的了解。
5.3. 管理员后台功能页面
5.3.1. 后台登录页面
后台管理员所使用的登录页面，赋予管理员管理权限(见图11)。
Figure 9. The overall page of My Notes
图9. 我的笔记整体页面
Figure 10. Deletion page of My Notes
图10. 我的笔记删除页面
Figure 11. Background login page
图11. 后台登录页面
5.3.2. 后台笔记管理页面
管理员在笔记管理页面同样可以查看用户的笔记信息、笔记的内容以及笔记状态，最主要的是对笔记进行上架管理，决定是否将笔记投入到用户端的笔记广场，并且可以删除或查看笔记(见图12)。
Figure 12. Backend notes management page
图12. 后台笔记管理页面
5.3.3. 后台用户管理页面
管理员可以对用户进行基本信息的查看，例如：用户账号，状态，注册日期，笔记数量等信息(见图13)。同时还可以操作用户的权限、删除、封禁、解封账户、更新用户信息、设置账号身份(见图14)。
Figure 13. Backend user management page
图13. 后台用户管理页面
Figure 14. Background user privilege settings
图14. 后台用户权限设置
6. 结束语
文章设计和实现了在线学习笔记本系统，旨在提供具有针对性的信息记录工具，帮助学生进行更方便、高效率的学习。通过研发该系统，实现了登录注册功能、个人信息管理功能、笔记新建、编辑、删除以及收藏等功能，系统分为管理员和用户两种角色。采用MVC三层模式结构，前后端分离设计实现Web应用。前端使用Vue技术实现，通过Firefox、Google进行网页展示。后端使用Spring Boot框架和MySQL数据库进行设计，通过Navicat进行数据的可视化，使用Java语言进行开发，完成在线学习笔记本的相关功能。整个系统通过合理的前端与后台流程设计，完成了管理员的用户信息管理，笔记管理等功能，完成了用户端的笔记新建、信息设置、笔记编辑等功能。
注 释
文中所有图片均为作者自绘。