# BetterMe **Repository Path**: htt-htt/better-me ## Basic Information - **Project Name**: BetterMe - **Description**: 百度前端训练营A题 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 1 - **Created**: 2021-08-16 - **Last Updated**: 2022-04-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README #### 产品及程序结构简介 ##### 产品名称：Better Me ##### 产品slogan：成为更好的自己 ##### 产品功能简介： Better Me的初衷就是帮助立下目标的人更高效的完成自己设置的目标，从而成为一个更自律的人~ 产品内包含个人计划、我的笔记、思维导图、数据统计、广场，其他六大模块。 在个人计划中，您可以创建今日计划和长期计划，页面左下角也会动态显示临近计划完成情况 在我的笔记中，您可以归档您的笔记，通过Markdown编辑器实现笔记的整理 在思维导图中，您可以随时记录头脑风暴，随时整理逻辑 在数据统计中，您可以随时了解自己的产品使用情况 在广场中，您可以随时了解其他伙伴的目标完成情况，相互监督，共同成长 乘风破浪会有时，直挂云帆济沧海 我们期待，您成为更好的自己！ #### **产品模块：** 1. 个人计划 2. 我的笔记 3. 思维导图 4. 数据统计 5. 广场 6. 其他 #### **项目分工：** | 成员 | 分工 | | ------ | ---------------------------------------------- | | 何甜甜 | 引导页、注册、登录、个人中心模块以及服务端开发 | | 王贝贝 | 思维导图模块 | | 王国伟 | 我的笔记模块以及服务端开发 | | 赵敏 | 数据统计模块 | | 沈晓伟 | 广场模块以及服务端的开发 | | 姚思涵 | 个人计划模块 | #### 项目运行方式： 1. 安装依赖 ``` npm install nodemailer --save npm install mongoose --save npm install mongodb --save ``` 2. 项目根目录下输入命令：`node ./app.js` ### 具体模块介绍： #### 笔记模块 ##### 功能简介 能够在网页中嵌入一个markdown编辑器，便于用户记录日常生活、学习笔记等等，所有笔记按照笔记本进行归档，并设置搜索框进行笔记查询。markdown编辑器也集成了丰富的工具栏功能，方便不熟悉markdown语法的用户进行笔记的编辑。我们都能成为更好的自己！ ##### 新建笔记 为便于管理，新建笔记，须新建笔记本，点击新建笔记进入编辑界面，之后保存并退出后即可完成新建。 ##### 预览笔记 点击笔记本右侧的笔记栏目，点击对应笔记，即可在右侧生成一个笔记预览界面，在这里即可完成预览。 ##### 编辑笔记 若想修改已存在的笔记，在预览界面右下方有一个“进入编辑界面”按钮，点击即可直接进入笔记编辑界面，进行编辑，保存并退出后，即可完成笔记的编辑 ##### 搜索笔记 在中间搜索框中可以对当前笔记本进行笔记或标签的模糊搜索，输入有限的关键字，即可完成搜索，搜索结果会显示在笔记栏目中。 ##### 删除笔记 在PC端，右键笔记标题，或者移动端长按笔记的标题，都会呼出删除菜单，点击并确认之后即可完成删除。 #### 程序结构 本模块采用MVC的设计模式，通过将视图层、控制层与模型层进行分离，从而达到程序解耦合的效果，大幅提升了程序的可复用性以及软件开发的效率，其主要结构如下： ##### Models（模型层） 主要包含note_model.js文件，负责利用mongoose，从数据库中抽象模型接口，并供给控制层进行调用。 ##### VIew（视图层） 主要包含如下文件夹： * index.html：笔记查看的首页 * edit.html：进行笔记编辑的页面 * 404.html：当访问页面不存在，进行提示的页面 视图层的目的即，通过控制层从模型层获取数据，同时进行前端渲染，同时，视图层也时刻监听前端响应，并通过http请求向后端发送请求，控制层会接收并处理该请求，并对应改变模型层和视图层。 ##### Controller（控制层） 主要包含note_control.js文件，负责响应前端请求，对应进行视图层和模型层的数据修改。 ##### Public（共有接口） 主要包含以下文件： * css文件夹： * aside-selection.css ：负责设定左侧笔记本选择栏样式 * editor-note.css ：负责设定笔记编辑界面样式 * header.css：负责设定导航栏样式 * text-display.css：负责设定笔记预览界面样式 * main.css ：负责设定全局主要样式 * js文件夹： * book_struct.js：负责设定有关笔记本及笔记的对应操作，包括新建、查询、删除等，通过向后端发送http请求来实现这些功能 * main.js：负责设定一些影响全局的操作逻辑 * editor.md文件夹： * 为GitHub开源项目，作为导入markdown编辑器的源地址 * resources文件夹： * 主要包括一些图片资源等 #### 个人计划模块 * 今日计划的添加编辑删除，选择完成，取消完成功能 * 长期计划的添加编辑删除置顶功能 * 长期计划倒计时展示 ##### 源码介绍: * myTodo.html:存放响应式布局代码。在PC端采用tab栏切换的方式展示今日计划和长期计划，在移动端通过调整布局和事件监听，制作成假两页，分别为首页和长期计划页，首页展示今日计划与长期计划导航，今日计划详情和长期计划倒计时；长期计划页展示长期计划详情。 * myTodo.css:存放PC端全部样式代码，和移动端首页代码。 * longTodo.css:存放移动端长期计划代码。 * api.js: ①封装了移动端仿QQ聊天列表的li标签滑动函数； ②封装了计划 * longTodo.js:封装了长期计划 * myTodo.js:主要用本地存储今日计划数据，绑定各种按钮事件，获取开始日期值并付给结束日期min属性实现表单联动，调用自己的api函数完成事件绑定数据交换等。 #### 思维导图模块 整个思维导图就是一个树的形状，因此数据结构采用树形结构 目前思维导图模块实现的功能有： 1. 添加上级节点 2. 添加下级节点 3. 双击编辑节点文本内容 ##### CSS文件 路径：better-me/public/css/minder 文件：mind.css ##### HTML文件 路径：better-me/view/minder 文件：mind.html ##### js文件 路径：better-me/public/js/minder ##### 文件1：mind.js 辅助完成页面顶部导航条响应式布局 ##### 文件2：MindNode.js 思维导图节点类 **属性包括**： 1、parent：当前节点的父节点 2、root：当前节点的根节点 3、children:当前节点的孩子节点 4、data:表征当前节点信息的数据，具体包括如下属性： - id：当前节点的id值 - rectX：rect矩形元素的x坐标 - rectY：rect矩形元素的y坐标 - rectWidth：rect矩形元素的宽度 - rectHeight：rect矩形元素的高度 - textX：文本元素的x坐标 - textY：文本元素的y坐标 - textFontSize：节点文本字体大小 - text：节点文本内容 - flag：文本节点内容是否发生变化，认为一旦文本编辑框被打开，节点文本内容就有可能发生变化，flag从false变为true - type：节点的类型 - pathData：path元素的起点、控制点、终点坐标数组，长度为6，数组元素依次为：起点x坐标、起点y坐标、控制点x坐标、控制点y坐标、终点x坐标、终点y坐标 5、tempData:表征当前节点信息的附加数据，具体包括如下属性： - rectEle：rect矩形元素 - textEle：text文本元素 - g：g分组元素 - path：path路径元素 在做本地存储或者前后交互时，将每个node节点的数据保存下来，其中，tempData的数据不需要保存，另外还需要保存idContainer对象的数据，以使得节点的id值不会发生重复 **方法包括：** 1. setText：设置当前节点的初始文本内容 2. isRoot：判断当前节点是否是根节点 3. isLeaf：判断当前节点是否是叶子节点 ##### 文件3：createBlandMind.js 创建思维导图节点，并为相应元素绑定事件 1. createNodeEle(node, selecNode, opaType)函数：根据节点数据和对应需求生成对应的DOM元素，显示在网页上 2. createPath(node)函数：为节点生成对应的路径（即node节点与其父节点之间的连接线） 3. gClick(g, rectEle)函数：为g分组元素绑定click事件 4. ctrRectSize(textEle, rectEle, node)函数：根据节点文本内容控制rect矩形元素尺寸，使其尺寸自适应文本内容 5. addDblEvent(Ele, rectEle, textEditEle, textEle, node)函数：为g元素绑定dblclick事件 6. setStyle(rectEle, textEditEle, textEle, node)函数：设置g元素被双击后的rect矩形元素、text-Edit文本编辑元素的样式，text文本元素和text-Edit文本编辑元素的位置 7. textChangePath(node)：节点文本内容变化，重绘该节点及其之后所有子节点的path 8. recurTransMain(selecNode, centerDistan)：为selecNode添加子节点时，调整以selecNode现有的子节点为根节点的所有子树上的节点的y位置 9. recurTransSub(selecNode, centerDistan) ：为selecNode添加子节点时，调整selecNode兄弟元素及其祖先元素的y位置 10. recurTransAfter(selecNode, node, diff)：插入上级节点或者改变节点文本内容时，调整下级节点的x位置 ##### 文件4：addNode.js 为工具栏的“插入上级节点”和“插入下级节点”元素绑定click事件，通过事件代理方式在事件捕获阶段捕捉click事件，判断思维导图中哪个节点被选择，为该节点添加上级节点或子节点 #### 数据统计 用原生的Canvas实现了进度条，饼图，雷达图，水滴图，日历图等图表的展现。采用面向对象的方式，将每个图表分为一个独立的类，将dom元素和option选项，option选项尽可能模仿echarts的选项配置。 **饼图**：用于展示笔记的分类。 亮点：1.开场动画：每个扇形角度逐渐旋转变大，起始角度根据扇形所占空间实时计算；同时标签的引线从对应扇形半径长度开始逐渐前进，直到标签所在位置；标签文字从浅变深逐渐显示。 2.模式控制：可以按照不同的配置选项展现普通饼图和玫瑰饼图两种形式，也可以控制标签是否显示。 3.鼠标动画：鼠标在元素上滑动时通过角度和半径计算是否位于某个扇形区域内，鼠标所在的区域颜色变亮，半径逐渐变长，鼠标箭头变为手势。 **雷达图**：用于展示我的状态分布。 亮点：1：开场动画：开始时背景多边形，标签，以及各项的顶点已就位，内部多边形从中心开始均匀向各个方向逐渐延申，知道达到所在顶点位置。 2：数据灵活：可以有2个以上的任意系列数，会自动根据输入的数据改变多边形的边数；输入多个大系类也会分不同颜色显示不同大系的分布。 3：鼠标动画：鼠标经过颜色变亮，鼠标箭头变为手指形状。 **水球图**：用于显示一周计划完成情况。 亮点：1：水波动画：用正弦函数改变初相的方式生成不同初始相位的水滴图，实现平滑的动画效果，文字随水波位置的不同显示不同的底色；开始时水滴从空到最终位置也实现了过渡动画。 **日历饼状图**：用于显示一月内每天学习，运动以及其他三个模块完成质量的分布。 亮点：1：日历形状：结合根据传入的不同时间，计算当月按周分行 的占位情况，之后绘制黑色边框和灰色网格。 2：组件复用：复用了已开发好的饼图，用在日历网格内创建dom节点的方式将饼图复用进去，使图表变美观的同时展现更加丰富的信息量。 **仪表盘**：用于展示我的综合得分。 亮点：1：数据联动：开场时指针从0度开始旋转，直到到达相应的位置。同时显示的数值随之改变。 **进度条**：用于展示今日计划和长期计划的完成程度。 亮点：1：开场动画：进度条从0开始逐渐增长。 2：响应式色彩：不同进度区间显示不同的颜色。 同时，还有文字型数据统计以及根据不同事件类型显示不同颜色的时间轴，以及响应式卡片布局等。 #### 广场模块 ##### 功能简介 展示所有用户发布的内容，可以点赞、评论，查看该用户的所有动态，可以让用户之间相互监督鼓励、成为更好的自己！ ##### 广场页 将每个用户发表的内容以瀑布流的方式呈现（背景可以做成动画，根据时间变化）；页面包含内容编辑发布；每条内容（点击可跳转到内容详情页）包含图片、用户头像和昵称（点击可跳转到个人主页）、点赞数、评论数； ##### 内容详情页 主要是对评论功能细化包含评论具体内容和发表评论功能 ##### 个人主页 显示该用户所有已发布的内容 ##### 程序结构 主要集中于前端，包含html、css、js ##### js 主要包含各个页面的js文件，负责接收请求、查找数据、动态往页面上渲染节点。 主要包含以下文件： * js文件夹： * square.js ：负责广场页发送请求 * userPost.js ：负责用户动态页发送请求 * detailContent.js：负责详情页发送请求 * animation.js：负责动画效果 * topBar.js ：负责导航栏效果 * dataShow.js ：负责处理请求、查找数据、生成节点 * masonryLayout.js ：负责渲染节点 ##### css 主要用于设置静态节点的样式以及响应式样式 主要包含以下文件： * css文件夹： * square.css ：负责设定广场页样式 * userPost.css ：负责设定用户动态页样式 * detailContent.css：负责设定详情页样式 * animation.css：负责设定动画样式 * topBar.css ：负责设定导航栏样式 ##### html 主要用于展示通过js获取的数据 * html文件夹： * square.html ：广场页 * userPost.html ：用户动态页 * detailContent.html：详情页 ##### 其他 主要包含以下文件： * assets文件夹：资源文件 #### 其他模块 我们将欢迎页、注册、登录、修改昵称、修改密码、新手引导和产品简介归类为其他模块。 该模块不包含软件的具体实用功能，但却是产品必不可少的部分。 该模块的设计采用MVC的架构模式，每个部分的具体介绍如下： ##### model(数据层) 主要包含sql.js,该文件主要用于与MongoDB数据库进行交互，从数据库中获取数据，然后返回给controller层对应的方法进行调用。 在该文件中，将与数据库的交互封装增删改查四个抽象函数，controller层的方法只需要调用对应的方法传入参数即可与数据库进行交互，无需重复编写增删改查的代码。 ##### view(视图层) * other为其他模块，该模块下的文件有 * welcome.html:欢迎界面 * register.html: 注册界面 * pswLogin.html: 密码登录界面 * emailLogin.html: 邮箱登录界面 * userInfo.html: 个人中心界面 个人中心下包括修改密码、修改昵称、新手指引、产品简介四个部分 * modifyName.html: 修改昵称页面 * modifyPsw.html:修改密码页面 * noviceGuidance.html:新手指引页面 * productInfo.html:产品简介页面 ##### controller(控制层) 主要包含requestDeal.js文件，服务端的大部分逻辑处理都在这个文件中，包括对前端请求的响应和处理，以及和数据库的交互 ##### public文件夹下包括页面文件对应的css、js以及资源文件 每个页面都有对应的css、js、资源文件。文件名与页面文件一样，只是后缀各不相同. other模块所有页面的css文件都在public/css/other文件夹下 other模块所有页面的js文件都在public/js/other文件夹下 公用的ajax.js和api.js在public/js文件夹下 * public/js * ajax.js中封装了原生的AJax请求，以方法名ajax暴露出去供其他需要和服务端进行交互的函数调用。封装后的写法和jQuery中的ajax请求写法基本一致。 * api.js中封装了路由和alert组件，单独将路由文件抽出来的好处是当路由名称发生更改时无须寻找具体js文件下的具体写法，只需集中在api.js中修改，其他调用的文件便会自动生效。 * public/js/other * register.js主要为注册页面提供数据交互，包括密码强度动态校验、请求服务端发送验证码，以及存储注册用户信息至服务端。 * emailLogin.js主要为邮箱登录页面提供数据交互，包括发送验证码和登录权限判断 * pswLogin.js主要为邮箱登录页面提供数据交互，包括登录权限判断 * userInfo.js主要为个人中心首页提供数据交互，包括其他页面的跳转 * modifyPsw.js主要为用户修改密码提供和服务端的数据交互 * modifyName.js主要为用户修改密码提供和服务端的数据交互