基于React和Node开发个人博客

`
题目：基于React和Node开发个人博客
基于React和Node搭建个人博客
摘要：本论文按照WEB网站架构思路，完整的阐述个人博客网站开发的全过程，本博客采用当下流行的HTML5+CSS3和前端用户界面JS库-React.js,并且增加了不少H5的动画和css3动画，以增强网站的交互性，提高网站的用户体验，以吸引更多用户到博客进行交流和讨论，后台采用非阻塞I/O模型+事件驱动的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, and increased the number of H5D css3 animation and animation, to enhance the site's 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 maintainability of the site and scalability also security.
Key words：React JS; NodeJS; personal blog
在互联网的时代，开发个人博客已经是一种趋势，在现在流行的各种开发工具和技术中，ReactJS和NodeJS在最近两年中特别火爆，React 是一个Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。

很人多认为 React 是 MVC 中的V（视图）。

React对于开发者来说是一个学习成本很高的一个框架，主要用来构建随着时间数据的不断变化的大规模应用程序，所以对于前端初学者来说上手难度特别大，他颠覆了以往的传统的JQ开发模式和现在很火爆的AngluarJS-MVC模式，所以第一眼看上去有点疯狂，React主要通过构建可复用的组件进行开发，得益于良好的的封装性，使组件间的代码复用、测试、关注分离更加简单，所以特别适合开发大型WEB应用。

NodeJS自09年发布以来，发展迅速，Node优点在于采用事件驱动、异步编程，为网络服务而生，javascript的匿名函数和闭
包特性非常适合事件驱动和异步编程。

在众多开发者强烈的追捧的气氛下，学习Node还是很有必要的。

1 需求分析
现在越来越多的技术爱好者有着自己的独立的个人博客，以方便发表和保存个人工作生活中的一些资料和文档，并且能与他人共享这些资料和文档等信息，借助互联网这个平台，来完善和充实自己的知识和生活，他人可以查看个人博客上的文章信息，可以发表评论和建议还有留言，这样有助于博客作者对自己所发表的文章有着更深入的研究。

所以，基于这些优点，我着手开发了我的个人博客，个人博客是我在大二期间就已经实现了，当时是用的wordepress搭建的个人博客，基本没敲多少代码，也没学到太多关于编程的知识，所以打算用毕业设计这次机会重构我的个人博客，并且用当下最流行的React和Node进行开发，使自己的技术更上一层楼，并且网站还采用了，HTML5的CANVAS动画，使网站用户体验更好，能更粘合用户，网站主要采用当下流行的扁平化设计风格，是网站更美观和大气，进入博客首页，就是最新的文章消息，文章有发布时间和作者，还有文章的标签名，标签名就是关键字，方便对文章进行分类处理。

首先分析个人博客需求：
（1）登陆-注册-登出
a)注册-用户输入用户名、密码、邮箱等信息进行注册-注册成功后返回首页，并保持当前注册用户登录状态
b)登录-用户输入已经注册过的用户名和密码进行登录，登录后才能管理和访问当前用户所发布的文章和评论和留言等
c)登出-用户登出，退出当前用户登录状态
（2）发布文章-修改文章
d)用户登录后才能发布文章和修改自己所发布的文章
e)发表评论-留言功能
f)用户可以登录进行留言和发表对某篇文章的评论
（3）文章分类
g)文章可以通过标签对文章进行分类处理
2 前端架构与后台搭建
2.1 前端架构
前端架构主要由React和JQuery构成，React是用于构建用户界面的。

引用官方主页上的说法：“对开发者来说，React就是MVC中的V”。

你可以自由地写独立的组件，在这一点上或多或少优于Angular的指令集，React省思了目前Web 开发中遇到的一些问题并作出了最佳的实践。

比如，它鼓励的单向数据流，并坚信组件是被数据驱动的状态机。

然而大部分其它类似的框架都是直接操作DOM，React并不喜欢这种方式且尽量避免这种方式。

React恰如其分地提供了定义一个UI组件所需的最基本的API。

它遵循UNIX的信条：做一件事，做到极致。

因此，本博客网站根据功能模块和前端页面布局结构进行封装React的UI组件，Jquery 在本博客中主要用于AJAX交互，在这方面不得不承认，Jquery仍然是使用最多最广泛的前端框架。

首先，根据功能需求进行集中的模块划分，按照模块化程序设计要求，得到网站功能模块图如图2-1所示。

图2-1 简易功能表
根据如图2-1所示，前端React的UI组件大致的结构就出来了，如图2-2所示，React前端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前端/这是官网地址，然后就是配置数据headerConfig。

然后就是header的UI类<header />，最终渲染到header的DOM标签上。

2.2 后台搭建
本博客后台选择的是前端脚本语言JavaScript的NodeJS，本博客是在基于windows的系统下开发的，所以这里Node的安装讲的是windows环境下，首先去node.js的官网下载windows平台的node的安装包，/这是Node.js的中文官网，可以下载NodeJS的最新版本，最新版本的NodeJS是集成了NPM功能，安装好nodeJS后，用管理员身份打开Node.js command prompt，输入node -v 可以查看NodeJS的版本，如果报错，说明Node没安装成功，Node 安装成功后，就可以进行express的安装，express基于 Node.js 平台的 web 应用开发框架基于Node.js 平台,快速、开放、极简的web 开发框架。

/官网有详细的开发文档，使用以下命令行进行express的安装，前提是先进入你的工程目录。

安装完express后，就要安装supervisor，supervisor是Node的一个插件，它会自动检测你的代码是否改变，如果改变自动刷新浏览器，自动更新代码。

安装supervisor的方法跟express一样,npm install supervisor -g,npm中-g代表全局安装，否则就是局部安装，还有-dev是代表开发环境，-save代表保存插件到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-blog for express4.x",
"scripts": {
"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",
"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风格
网站UI设计在开发网站中很重要，UI设计的质量直接回影响到一个网站的流量和用户体验度，前端所有的样式都是根据UI设计来进行开发，我第一家公司就是一家专业做UI设计的公司，在公司也学到很多关于UI设计的知识，UI在网站中包括字体-图片-布局-色彩-元素等等，所以，根据博客一般的UI设计模式，我做了如下UI设计。

3.1.1 网站配色
网站配色的好坏直接影响到网站的用户体验度和网站对用户的粘性，一个好的配色再加上优秀的前端动画效果，往往能达到意想不到的效果，本网站采用先进的HTML5-CANVAS动画效果，再配上一些小的交互动画，能大大增强网站的用户体验，使用户流连忘返，时不时的回到网站看一下。

3.1.2 网站布局
网站布局对网页的影响很大，一个好的布局能够给用户一个清晰明了的网页，使用户能第一时间找到自己所需要的信息，现在网上很多下载网站，把下载地址或者按钮做的很小或者很不明显，用户往往要花上很多时间去找下载链接和下载按钮，用户体验十分之差。

3.2 网站内容
博客网站主要展示博客文章，所以博客文章要放在最醒目的位子上，然后，头部链接和LOGO，登陆和注册，登陆后的用户名称和退出，侧边栏的文章列表和个人信息。

3.3 数据库
因为本博客基于Node.js开发，所以选择了当下最流行的express+mongodb，MongoDB 是一个基于分布式文件存储的NoSql数据库。

由 C++ 语言编写。

旨在为WEB 应用提供可扩展的高性能数据存储解决方案。

NoSql，全称是 Not Only Sql,指的是非关系型的数据库。

下一代数据库主要解决几个要点：非关系型的、分布式的、开源的、水平可扩展的。

原始的目的是为了大规模web应用，这场运动开始于2009年初，通常特性应用如：模式自由、
支持简易复制、简单的API、最终的一致性（非ACID）、大容量数据等。

NoSQL被我们用得最多的当数key-value存储，当然还有其他的文档型的、列存储、图型数据库、xml数据库等。

MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。

MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。

MongoDB 文档类似于JSON 对象。

字段值可以包含其他文档，数组及文档数组。

主要特点如下：
MongoDB的提供了一个面向文档存储，操作起来比较简单和容易。

你可以在MongoDB记录中设置任何属性的索引(如：FirstName="Sameer",Address="8 Gandhi Road")来实现更快的排序。

你可以通过本地或者网络创建数据镜像，这使得MongoDB有更强的扩展性。

如果负载的增加（需要更多的存储空间和更强的处理能力），它可以分布在计算机网络中的其他节点上这就是所谓的分片。

Mongodb支持丰富的查询表达式。

查询指令使用JSON形式的标记，可轻易查询文档中内嵌的对象及数组。

Mongodb 使用update()命令可以实现替换完成的文档（数据）或者一些指定的数据字段。

Mongodb中的Map/reduce主要是用来对数据进行批量处理和聚合操作。

Map和Reduce。

Map函数调用emit(key,value)遍历集合中所有的记录，将key与value传给Reduce函数进行处理。

Map函数和Reduce函数是使用Javascript编写的，并可以通过db.runCommand或mapreduce命令来执行MapReduce操作。

GridFS是MongoDB中的一个内置功能，可以用于存放大量小文件。

MongoDB允许在服务端执行脚本，可以用Javascript编写某个函数，直接在服务端执行，也可以把函数的定义存储在服务端，下次直接调用即可。

MongoDB支持各种编程语言:RUBY，PYTHON，JAVA，C++，PHP，C#等多种语言。

MongoDB安装简单。

根据上面的介绍，我们为什么要用MongoDB:
1、JSON风格文件的形式，面向文档存储：数据存储
2、对任何属性可索引
3、复制和高可用性
4、自动分片
5、丰富的查询
6、快速就地更新
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的核心概念，多个键及其关联的值有序地放置在一起便是文档。

在js里，文档表示为对象,如图3-1所示。

{"greenting" : "Hello,world!"}
这个对象只有一个键"greeting"，其对应的值"Hello,world!"
文档的键是字符串，除少数例外情况，键可以使用任意UTF-8字符：
- 键不能含有\0(空字符)。

这个字符用来表示键的结尾
- .和$有特别的意义，只有当特定环境下才能使用，通常来说是被保留了 - 以下划线"_"开头的键是保留的，虽然不是严格要求的
图3-1 MongoDB服务
MongoDB不单区分类型，也区分大小写，还有，MongoDB的文档不能有重复的键，例如下面的文档是非法的：
{"greeting":"Hello,world!","greeting":"Hello,mongoDB!"}
3.3.2 MongoDB集合
集合是一组文档。

如果说MongoDB中的文档类似于关系型数据库中的行，那么集合就如同表。

无模式
集合是无模式的。

这意味着集合里面的文档可以是各式各样的，例如下面两个文档可以存在于同一个集合里面：
{"greeting": "Hello,world!"}
{"foo": 5}
3.3.3 MongoDB命名
我们可以通过名字来标示集合。

集合名可以是满足下列条件的UTF-8条件 - 集合名不能是空字符串""。

- 集合名不能含有\0字符（空字符）
- 集合名不能以"system."开头，这是为系统集合保留的前缀
- 用户创建的集合名字不能含有保留字符$
组织集合的一种惯例是使用"."字符分开的按命名空间划分的子集合。

MongoDB中多个文档组成集合，同样多个集合可以组成数据库。

一个MongoDB 实例可以承载多个数据库，数据库名可以是满足以下条件的任意UTF-8字符串 - 不能是空字符串("")
- 不能含有''(空格)、.、$、/、\和\0(空字符)
- 应全部小写
- 最多64字节
3.3.4 MongoDB数据类型
MongoDB支持许多数据类型的列表下面给出：
String : 这是最常用的数据类型来存储数据。

在MongoDB中的字符串必须是有效的UTF-8。

Integer : 这种类型是用来存储一个数值。

整数可以是32位或64位，这取决于您的服务器。

Boolean : 此类型用于存储一个布尔值 (true/ false) 。

Double : 这种类型是用来存储浮点值。

Min/ Max keys : 这种类型被用来对BSON元素的最低和最高值比较。

Arrays : 使用此类型的数组或列表或多个值存储到一个键。

Timestamp : 时间戳。

这可以方便记录时的文件已被修改或添加。

Object : 此数据类型用于嵌入式的文件。

Null : 这种类型是用来存储一个Null值。

Symbol : 此数据类型用于字符串相同，但它通常是保留给特定符号类型的语言使用。

Date : 此数据类型用于存储当前日期或时间的UNIX时间格式。

可以指定自己的日期和时间，日期和年，月，日到创建对象。

Object ID : 此数据类型用于存储文档的ID。

Binary data : 此数据类型用于存储二进制数据。

Code : 此数据类型用于存储到文档中的JavaScript代码。

Regular expression : 此数据类型用于存储正则表达式
MongoDB的基本命令
3.3.5 use 命令
MongoDB use DATABASE_NAME 用于创建数据库。

该命令将创建一个新的数据库，如果它不存在，否则将返回现有的数据库。

dropDatabase() 方法
MongoDB db.dropDatabase() 命令是用来删除一个现有的数据库。

dropDatabase() 命令的基本语法如下：
db.dropDatabase()
drop() 方法
MongoDB 的 db.collection.drop() 是用来从数据库中删除一个集合。

insert() 方法
要插入数据到MongoDB 集合，需要使用MongoDB 的insert() 或save() 方法。

find() 方法
要从MongoDB 查询集合数据，需要使用MongoDB 的 find() 方法。

pretty() 方法
结果显示在一个格式化的方式，可以使用 pretty() 方法.
Limit() 方法
要限制 MongoDB 中的记录，需要使用 limit() 方法。

limit() 方法接受一个数字型的参数，这是要显示的文档数。

语法:
limit() 方法的基本语法如下
>db.COLLECTION_NAME.find().limit(NUMBER)
MongoDB 数据转储
创建备份MongoDB中的数据库，应该使用mongodump命令。

mongodump命令的基本语法如下：
>mongodump
3.3.6 恢复备份数据
恢复备份数据使用MongoDB 的mongorerstore 命令。

此命令将恢复所有的数据从备份目录。

语法：
mongorestore命令的基本语法
>mongorestore
3.3.7 表设计
表3-1 user表
名称类型长度是否为空说明
id ObiectId 11 否用户Id username string 32 否用户名
password string 32 否密码
email string 32 否邮箱
根据本博客的具体需求，前期只需要3张表，第一张表user是存储用户信息，如账号和密码和邮箱，如表3-1所示。

sessions表示存储用户的cookie信息，如表3-2所示。

表3-2 sessions表
名称类型长度是否为空说明
id ObiectId 11 否Session id值session string 2 否Session内容
expires string 32 否Session时效如表3-3所示，post是存储文章信息，有发布用户名称，发布时间，文章标题，文章标签，文章内容，文章评论，文章阅读数等等信息。

表3-3 post表
名称类型长度是否为空说明
id ObiectId 11 否文章id
name string 2 否文章名称
head string 32 是作者头像
time Object 32 否文章发布时间
title string 32 否文章标题
tags Array 3 否文章标签
post string * 否文章内容
comments Array * 否文章评论reprint_info Object * 否转载信息pv Int32 * 否阅读量
3.3.6 数据库关系
此图展示了user表、sessions表、post表之间的索引，如图3-3所示。

图3-3 数据库关系图
4 具体实现
4.1 header.ejs
Header.ejs是网站通用的头部文件，包含了网站的导航菜单和登陆注册按钮，还有登陆后的用户信息和退出按钮。

因为使用React前端框架，不能用普通的引擎模板if else去判断是否登陆，然后输出具体的代码，这里我是通过js变量去做判断，在页面写上变量，通过引擎模板去给变量赋值，如果变量值为true，说明已经登录，那么久调用username 变量渲染到视图中，headerCOnfing对象用于存储连接信息和链接名称，是json 对象格式,通过React内置循环方法调用，生成ReactDOM对象，然后最终渲染到Header标签上，如图4-2所示。

header.jsx里面通过判断isLogin的值判断是否登陆，最终达到的效果如图4-1所示。

图4-1 header.jsx效果
图4-1 index.js流程图
4.2 index.ejs
如图4-3所示，Index.ejs是首页的模板引擎文件，包含了最新的文章信息，文章作者，文章发布时间，文章阅读数，评论数，转载数，和文章的一部分内容，右边是关于博客的一些信息，还有文章列表，简洁大方为主。

导航有两种状态，一种状态是未登录状态，一种是已登录状态，处于登录状态下，右上角显示的是用户名和退出按钮，并且有发表和上传链接，未登录状态右上角是登录和注册按钮，用户可以登录注册账户，文章标题用的24px大小，一目了然，能让用户一眼就能找到自己所要的信息。

登陆页为了让用户体验度更好，我采用了HTML5-CANVAS技术，做一个动画背景，让用户对本博客映像深刻，如图4-4所示。

注册页以简洁大方为主，包含用户名和密码以及确认密码以及游戏，密码和确认添加有表单验证，让用户一眼就能看出自己的输入的密码是否正确，提升用户体验。

如图4-5所示。

标签页，如图4-6所示，是为了方便用户查询不同分类的文章，标签就相当于分类效果，点击标签会列出这个标签下的所有文章。

图4-3 index.ejs效果图
4-4 login.jsx效果
如图4-7所示，友情链接，链接到常用的技术网站，比如：前端网，/,codrops网站/codrops/，有着丰富的前端开发资料，其中codrops有着最新的前端技术的运用，喜欢捣鼓新技
术或者前端效果的发烧友的必备网站。

图4-5 注册页
图4-6 标签页
如图4-8所示，发布文章页，包括，标题，标签和正文3部分组成，此页面简单单一，给用户更直观的感受，让用户一眼明白不同的输入框的不同功能，正文部分使用了富文本编辑框，让用户自由的编辑出自己想要的内容和效果，用户可以想富文本编辑器中输入各类字体、居中、字体加粗、字体大小、链接，甚至还可以直接切换成html模式，往里面直接写html代码，往里面插入视频等这一些列的操作。

图4-7 友情链接
图4-8 发布文章页图4-9 上传页
如图4-9所示，为上传页，上传页总共可以上传5个文件。

5 结束语
参考文献:
[1] 弗拉纳根．JavaScript权威指南[M]．机械工业出版社，2007.
[2] Larry Ullman．JavaScript设计与开发新思维[M]．人民邮电出版社，2012.
[3] Brian P.Hogan．HTML5与CSS3实例教程（第二版）[M]．人民邮电出版社，2014.
[4] Chris Mills．CSS3实战开发与设计[M]．机械工业出版社，2013.
[5] Douglas Crockford. JavaScript语言精粹（修订版）[M]. 电子工业出版社，2012.
[6] 陆凌牛. Node.js权威指南[M]. 北京：机械工业出版社.2014.
[7] Azat Mardanov. Express.js Guide: The Comprehensive Book on Express.js[M]．
CreateSpace Independent Publishing Platform，2013.
[8] 赵坤,寸志,雷宗民,吴中骅. Node.js实战[M]．电子工业出版社，2014．
[9] StrongLoop．Node.js Products and Expertise[M]．其他，2013.
[10] Guillermo Rauch．Smashing Node.js: JavaScript Everywhere[M]．其他，2013.
[11] Brad Dayley．Node.js, MongoDB, and AngularJS Web Development[M]．其他，2014.
[12] 錢逢祥,蔡政崇,林政毅．不一樣的Node.js: 用JavaScript打造高效能的前後台網頁
程式[M]．其他，2013.。