1、全日制本科生毕业设计题 目： 基于 React 和 Node 开发个人博客 学 院： 计算机与信息科学学院 专业年级： 电子商务 学生姓名： 学号： XXXXXXXXXX 指导教师： 职称： 年 月 日第 1 页（共 21 页）基于 React 和 Node 搭建个人博客摘 要：本论文按照 WEB 网站架构思路，完整的阐述个人博客网站开发的全过程，本博客采用当下流行的 HTML5+CSS3 和前端用户界面 JS 库-React.js,并且增加了不少 H5 的动画和 css3 动画，以增强网站的交互性，提高网站的用户体验，以吸引更多用户到博客进行交流和讨论，后台采用非阻塞 I/O 模型+事件驱动
2、的 Node.js,这样提高了网站的可维护性和扩展性还有安全性。关键词：ReactJS；NodeJS；个人博客Abstract：In this paper, according to the WEB site architecture ideas, express their personal blog site complete the whole process of development, this blog uses the current popular HTML5 + CSS3 and front-end user interface JS library -React.js,
3、and increased the number of H5D css3 animation and animation, to enhance the sites interactivity, improve the user experience on your site to attract more users to communicate and blog discussions, background using non-blocking I / O model + event-driven Node.js, thereby improving the maintainabilit
4、y of the site and scalability also security.Key words：React JS ; NodeJS; personal blog在互联网的时代，开发个人博客已经是一种趋势，在现在流行的各种开发工具和技术中，ReactJS 和 NodeJS 在最近两年中特别火爆，React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很人多认为 React 是 MVC 中的 V（视图）。React 对于开发者来说是一个学习成本很高的一个框架，主要用来构建随着时间数据的不断变化的大规模应用程序，所以对于前端初学者来说上
5、手难度特别大，他颠覆了以往的传统的 JQ 开发模式和现在很火爆的 AngluarJS-MVC 模式，所以第一眼看上去有点疯狂，React 主要通过构建可第 2 页（共 21 页）复用的组件进行开发，得益于良好的的封装性，使组件间的代码复用、测试、关注分离更加简单，所以特别适合开发大型 WEB 应用。NodeJS 自 09 年发布以来，发展迅速，Node 优点在于采用事件驱动、异步编程，为网络服务而生，javascript 的匿名函数和闭包特性非常适合事件驱动和异步编程。在众多开发者强烈的追捧的气氛下，学习 Node 还是很有必要的。1 需求分析现在越来越多的技术爱好者有着自己的独立的个人博客，
6、以方便发表和保存个人工作生活中的一些资料和文档，并且能与他人共享这些资料和文档等信息，借助互联网这个平台，来完善和充实自己的知识和生活，他人可以查看个人博客上的文章信息，可以发表评论和建议还有留言，这样有助于博客作者对自己所发表的文章有着更深入的研究。所以，基于这些优点，我着手开发了我的个人博客，个人博客是我在大二期间就已经实现了，当时是用的 wordepress 搭建的个人博客，基本没敲多少代码，也没学到太多关于编程的知识，所以打算用毕业设计这次机会重构我的个人博客，并且用当下最流行的 React 和 Node 进行开发，使自己的技术更上一层楼，并且网站还采用了，HTML5 的 CANVAS
7、 动画，使网站用户体验更好，能更粘合用户，网站主要采用当下流行的扁平化设计风格，是网站更美观和大气，进入博客首页，就是最新的文章消息，文章有发布时间和作者，还有文章的标签名，标签名就是关键字，方便对文章进行分类处理。首先分析个人博客需求：（1）登陆-注册-登出a) 注册-用户输入用户名、密码、邮箱等信息进行注册-注册成功后返回首页，并保持当前注册用户登录状态b) 登录-用户输入已经注册过的用户名和密码进行登录，登录后才能管理和访问当前用户所发布的文章和评论和留言等第 3 页（共 21 页）c) 登出-用户登出，退出当前用户登录状态（2）发布文章-修改文章d) 用户登录后才能发布文章和修改自己所
8、发布的文章e) 发表评论-留言功能f) 用户可以登录进行留言和发表对某篇文章的评论（3）文章分类g) 文章可以通过标签对文章进行分类处理2 前端架构与后台搭建2.1 前端架构前端架构主要由 React 和 JQuery 构成，React 是用于构建用户界面的。引用官方主页上的说法：“对开发者来说，React 就是 MVC 中的 V”。你可以自由地写独立的组件，在这一点上或多或少优于 Angular 的指令集，React 省思了目前Web 开发中遇到的一些问题并作出了最佳的实践。比如，它鼓励的单向数据流，并坚信组件是被数据驱动的状态机。然而大部分其它类似的框架都是直接操作DOM，React 并不
9、喜欢这种方式且尽量避免这种方式。React 恰如其分地提供了定义一个 UI 组件所需的最基本的 API。它遵循 UNIX 的信条：做一件事，做到极致。因此，本博客网站根据功能模块和前端页面布局结构进行封装 React 的 UI 组件，Jquery 在本博客中主要用于 AJAX 交互，在这方面不得不承认，Jquery 仍然是使用最多最广泛的前端框架。首先，根据功能需求进行集中的模块划分，按照模块化程序设计要求，得到网站功能模块图如图 2-1 所示。第 4 页（共 21 页）图 2-1 简易功能表根据如图 2-1 所示，前端 React 的 UI 组件大致的结构就出来了，如图 2-2所示，Reac
10、t 前端 UI 组件。图 2-2 React 前端 UI 组件我以 header 组件作为例子。var Container = AMUIReact.Container;var Nav = AMUIReact.Nav;var NavItem = AMUIReact.NavItem;var Icon = AMUIReact.Icon;以上代码是引入已经封装好的 ReactUI 库，这里我用的 amaze-react 前端http:/amazeui.org/这是官网地址，然后就是配置数据 headerConfig。然后就是 header 的 UI 类，最终渲染到 header 的 DOM 标签上。2
11、.2 后台搭建第 5 页（共 21 页）本博客后台选择的是前端脚本语言 JavaScript 的 NodeJS，本博客是在基于windows 的系统下开发的，所以这里 Node 的安装讲的是 windows 环境下，首先去node.js 的官网下载 windows 平台的 node 的安装包，http:/ 的中文官网，可以下载 NodeJS 的最新版本，最新版本的 NodeJS 是集成了 NPM 功能，安装好 nodeJS 后，用管理员身份打开 Node.js command prompt，输入 node -v 可以查看 NodeJS 的版本，如果报错，说明 Node 没安装成功，Node安装
12、成功后，就可以进行 express 的安装，express 基于 Node.js 平台的 web 应用开发框架 基于 Node.js 平台,快速、开放、极简的 web 开发框架。http:/ 的安装，前提是先进入你的工程目录。 安装完 express 后，就要安装 supervisor，supervisor 是 Node 的一个插件，它会自动检测你的代码是否改变，如果改变自动刷新浏览器，自动更新代码。安装 supervisor 的方法跟 express 一样,npm install supervisor -g,npm 中-g 代表全局安装，否则就是局部安装，还有-dev 是代表开发环境，-sa
13、ve 代表保存插件到 package.json 配置文件里，这样如果在其他环境和电脑下，进行 npm install 就会把 package.json 文件里的插件全部安装好，-gd 代表一起安装依赖库，如 npm install express -gd,代表全局安装 express 并一起安装依赖库，这里就不一一向大家讲述怎么安装本博客的 nodejs 的插件安装，具体需要哪些插件在 package.json 文件里。package.json 文件如下：“name“: “N-blog“,“version“: “1.0.0“,“private“: true,“description“: “N-
14、blog for express4.x“,“scripts“: 第 6 页（共 21 页）“start“: “node app“,“dependencies“: “express“: “4.10.2“,“body-parser“: “1.9.0“,“cookie-parser“: “1.3.3“,“morgan“: “1.3.1“,“serve-favicon“: “2.1.5“,“ejs“: “1.0.0“,“markdown“: “0.5.0“,“mongodb“: “1.4.15“,“express-session“: “1.9.1“,“connect-flash“: “0.1.1“,“
15、connect-mongo“: “0.4.1“,“multer“: “0.1.6“简单为大家讲述下 package.json 文件里的配置，在 express 安装成功后就会自动生成这个 package.json 文件，name 代表工程名称，version 代表版本号，descirption 是详细描述，scripts 是启动配置，start 是启动工程命令，dependencies 是 model 库，就是通过 npm 安装的依赖库，通过 npm install 命令安装依赖库后，后台环境就配置完成。3 网站设计3.1 网站 UI 风格第 7 页（共 21 页）网站 UI 设计在开发网站中
16、很重要，UI 设计的质量直接回影响到一个网站的流量和用户体验度，前端所有的样式都是根据 UI 设计来进行开发，我第一家公司就是一家专业做 UI 设计的公司，在公司也学到很多关于 UI 设计的知识，UI 在网站中包括字体-图片-布局-色彩-元素等等，所以，根据博客一般的 UI 设计模式，我做了如下 UI 设计。3.1.1 网站配色网站配色的好坏直接影响到网站的用户体验度和网站对用户的粘性，一个好的配色再加上优秀的前端动画效果，往往能达到意想不到的效果，本网站采用先进的 HTML5-CANVAS 动画效果，再配上一些小的交互动画，能大大增强网站的用户体验，使用户流连忘返，时不时的回到网站看一下。3
17、.1.2 网站布局网站布局对网页的影响很大，一个好的布局能够给用户一个清晰明了的网页，使用户能第一时间找到自己所需要的信息，现在网上很多下载网站，把下载地址或者按钮做的很小或者很不明显，用户往往要花上很多时间去找下载链接和下载按钮，用户体验十分之差。3.2 网站内容 博客网站主要展示博客文章，所以博客文章要放在最醒目的位子上，然后，头部链接和 LOGO，登陆和注册，登陆后的用户名称和退出，侧边栏的文章列表和个人信息。3.3 数据库因为本博客基于 Node.js 开发，所以选择了当下最流行的express+mongodb，MongoDB 是一个基于分布式文件存储的 NoSql 数据库。由 C+
18、语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。NoSql，全称是 Not Only Sql,指的是非关系型的数据库。下一代数据库主要解决几个要点：非关系型的、分布式的、开源的、水平可扩展的。原始的目的是为了大规模 web 应用，这场运动开始于 2009 年初，通常特性应用如：模式自第 8 页（共 21 页）由、支持简易复制、简单的 API、最终的一致性（非 ACID）、大容量数据等。NoSQL 被我们用得最多的当数 key-value 存储，当然还有其他的文档型的、列存储、图型数据库、xml 数据库等。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数
19、据库当中功能最丰富，最像关系数据库的。MongoDB 将数据存储为一个文档，数据结构由键值(key=value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档，数组及文档数组。主要特点如下：MongoDB 的提供了一个面向文档存储，操作起来比较简单和容易。你可以在 MongoDB 记录中设置任何属性的索引 (如：FirstName=“Sameer“,Address=“8 Gandhi Road“)来实现更快的排序。你可以通过本地或者网络创建数据镜像，这使得 MongoDB 有更强的扩展性。如果负载的增加（需要更多的存储空间和更强的处理能力） ，它可以分布在计算机网络
20、中的其他节点上这就是所谓的分片。Mongodb 支持丰富的查询表达式。查询指令使用 JSON 形式的标记，可轻易查询文档中内嵌的对象及数组。Mongodb 使用 update()命令可以实现替换完成的文档（数据）或者一些指定的数据字段 。Mongodb 中的 Map/reduce 主要是用来对数据进行批量处理和聚合操作。Map 和 Reduce。Map 函数调用 emit(key,value)遍历集合中所有的记录，将key 与 value 传给 Reduce 函数进行处理。Map 函数和 Reduce 函数是使用 Javascript 编写的，并可以通过db.runCommand 或 mapr
21、educe 命令来执行 MapReduce 操作。GridFS 是 MongoDB 中的一个内置功能，可以用于存放大量小文件。MongoDB 允许在服务端执行脚本，可以用 Javascript 编写某个函数，直接在服务端执行，也可以把函数的定义存储在服务端，下次直接调用即可。第 9 页（共 21 页）MongoDB 支持各种编程语言:RUBY，PYTHON，JAVA，C+，PHP，C#等多种语言。MongoDB 安装简单。根据上面的介绍，我们为什么要用 MongoDB:1、JSON 风格文件的形式，面向文档存储：数据存储2、对任何属性可索引3、复制和高可用性4、自动分片5、丰富的查询6、快速就
22、地更新7、MongoDB 的专业技术支持我们应该在哪里使用 MongoDB?1、大数据2、内容管理和交付3、移动和社交基础设施4、用户数据管理5、数据平台MongoDB 的安装相对于其他数据库的安装简单很多，首先，去官网下载MongoDB 的 windows 版本，然后安装，安装路径一定尽力简短，如：D:/MongoDB，在 D：/MongoDB 目录下新建 MongoDB.log,然后打开 cmd 进入D：/MongoDB/bin,然后输入 mongod -install -serviceName MongoDB -serviceDisplayName MongoDB -logpath D:MongoDB.Log -dbpath D:MongoDB -directoryperdb 这样就会在 windows 服务下出现 MongoDB，如图 3-1 所示。3.3.1 MongoDB 文档文档是 MongoDB 的核心概念，多个键及其关联的值有序地放置在一起便是文
