“Pendo”笔记是一个笔记类的web app。用户可以在本网站上记录所有自己想要记录的任何事，或许是灵光一现的想法，或许是一些日常。甚至可以当做存储照片、文件的地方。网站主要的功能有登录注册，写笔记，上传文件、图片，视频等功能。管理员后台用于管理网站用户，评论。网站主要使用了ant design组件库设计页面，应用基于koa2为基础的egg.js作为后台接口框架，将Mysql作为数据库管理工具。本文对“Pendo”笔记的功能、架构进行了全方面的叙述与分析。
目录
一、引言 1
(一) 网站背景和意义 1
(二) 网站介绍 1
二、关键技术介绍 1
(一) REACT 1
(二) EGG.JS 1
(三) MYSQL数据库 1
三、网站需求分析 2
(一) 可行性分析 2
1. 需求可行性分析 2
2. 技术可行性分析 2
(二) 网站的目标 2
(三) 网站用例 2
四、网站总体设计 3
(一) 网站前台模块设计 3
(二) 网站的数据模型设计 4
1. 实体关系(ER)图设计 4
2. 数据物理模型的设计 5
五、网站详细设计 8
(一) 前台设计 8
1. 网站页面的详细设计 8
2. 登录注册详细设计 8
3. 创建文件夹功能按钮详细设计 12
4. 文件夹操作详细设计 13
5. 文件上传详细设计 16
6. 侧边栏文件选项详细设计 18
7. 编辑器组件详细设计 19
(二) 后台设计 21
1. 后台登录详细设计 21
2. 用户管理详细设计 22
3. 文件管理详细设计 25
六、总结 26
致谢 27
参考文献 28
一、引言
网站背景和意义
随着社会的发展，目前我们正处于信息化时代。据《中国互联网络发展状况统计报告》显示， *景先生毕设|www.jxszl.com +Q: ^351916072# 
截至2020年3月，我国网民规模已达9.04亿，这一数据很好的诠释了我们中的大多数人都在上网，大多数的上班族和学生都会上网，在网络上能接收到各种各种的信息，当看到对自己有帮助的信息想要记下来时，此时身边却没有笔记或着笔，或许会不了了之。此时笔记网站的开发就显得很有必要。本课题的主要内容是构建一个笔记类的web app，帮助大家更好的记录生活，更好的工作学习。
网站介绍
“Pendo”笔记网站使用了Facebook公司在2013年推出的前端框架React作为构建SPA的基础，使用开源免费的Mysql数据库作为网站数据管理工具。笔记主要分为网站前台和后台管理两个部分，主要功能为用户登录、用户注册、关于文件夹的操作、关于笔记的操作、文件的上传和下载、搜索笔记、用户可以评论他人分享出去的笔记文章、修改用户基本资料、修改密码等。后端框架通过与Mysql的连接，可以通过用户的操作对数据库进行增删查改。
二、关键技术介绍
React
React是Facebook在2013年开源在GitHub上的JavaScript库。React把用户界面抽象成一个个组件，开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入JSX语法，复用组件变得非常容易，同时也能保证组件结构清晰。有了组件这层抽象，React把代码和真实渲染目标隔离开来，除了可以在浏览器端渲染到DOM来开发网页外，还能用于开发原生移动应用。
Egg.js
在讲到Egg.js时，我们不得不先说说Node.js。Node.js是一个异步的世界，官方 API 支持的都是 回调函数形式的异步编程模型，这会带来许多问题，比如臭名昭著的回调地狱，在ES6中这个问题得以很好的解决，Egg使用了async Function来解决这个问题，这为网站带来了更好的性能。使用Egg开发接口的好处不止是更高的性能，还有团队开发中重要的一点——开发规范。Egg很好的帮助我们规定了开发规范，让团队合作更轻松。
Mysql数据库
MySQL是现在常用的关系型数据库，也使用结构化查询语句。它的数据处理速度快速，也相当可靠。相较于SQL Server 2008 而言，他的安装过程简易，Navicat图形化界面的很美观，功能也十分强大，适合中小型网站系统的开发。
三、网站需求分析
可行性分析
需求可行性分析
“Pendo”笔记能为用户提供了一个能够随时随地记录学习笔记，想法，生活的地方，人们在平常生活中或者在浏览各种各样的信息时，当发现了对自己有用的信息时，或者脑中浮现出一个好的想法时，可能会因为一些小问题，苦于没办法立刻记录下来，或许这个信息或者想法就消逝不见，“Pendo”笔记的出现就是为了解决这个问题，出门在外，就可以通过它随时随地的记录你想要记录的东西，甚至可以把你记录的文章分享出去，让更多的人看到你的想法，碰撞出更大的思想的火花。
技术可行性分析
本网站是一个应用性网站，是围绕着笔记的功能所开发的网站，所选技术都是前沿的技术，保证了应用的功能，同时兼顾了性能。
网站的目标
“Pendo”笔记的初心是为了备忘，及时记录易逝的资料、事情、思想、灵感等，然后整理利用。还能够通过清晰有序、系统条理的笔记，梳理、分析知识、思想、事情。同时锻炼自己的分析、思考能力和素养。本网站希望能够给用户带来学习、工作、生活的高效辅助工具。
网站用例
“Pendo”笔记的网站结构并不复杂，下面是对网站的功能的概述。网站主要使用Ant Design作为前端UI框架，使用createreactapp作为前端工程脚手架，网站前台功能模块主要分为登录、注册、个人信息的查看与修改、查看笔记、添加笔记、删除笔记、上传文件、搜索笔记功能。网站中的所有数据获取自数据库。用例图如31所示。

原文链接：http://www.jxszl.com/jsj/jsjkxyjs/564409.html