基于React和Node开发个人博客.docx
《基于React和Node开发个人博客.docx》由会员分享，可在线阅读，更多相关《基于React和Node开发个人博客.docx（20页珍藏版）》请在冰点文库上搜索。
基于React和Node开发个人博客
`
题目：
基于React和Node开发个人博客
基于React和Node搭建个人博客
摘要：
本论文按照WEB网站架构思路，完整的阐述个人博客网站开发的全过程，本博客采用当下流行的HTML5+CSS3和前端用户界面JS库-React.js,并且增加了不少H5的动画和css3动画，以增强网站的交互性，提高网站的用户体验，以吸引更多用户到博客进行交流和讨论，后台采用非阻塞I/O模型+事件驱动的Node.js,这样提高了网站的可维护性和扩展性还有安全性。
关键词：
ReactJS；NodeJS；个人博客
Abstract：
Inthispaper,accordingtotheWEBsitearchitectureideas,expresstheirpersonalblogsitecompletethewholeprocessofdevelopment,thisblogusesthecurrentpopularHTML5+CSS3andfront-enduserinterfaceJSlibrary-React.js,andincreasedthenumberofH5Dcss3animationandanimation,toenhancethesite'sinteractivity,improvetheuserexperienceonyoursitetoattractmoreuserstocommunicateandblogdiscussions,backgroundusingnon-blockingI/Omodel+event-drivenNode.js,therebyimprovingthemaintainabilityofthesiteandscalabilityalsosecurity.
Keywords：
ReactJS;NodeJS;personalblog
在互联网的时代，开发个人博客已经是一种趋势，在现在流行的各种开发工具和技术中，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-2React前端UI组件
我以header组件作为例子。
varContainer=AMUIReact.Container;
varNav=AMUIReact.Nav;
varNavItem=AMUIReact.NavItem;
varIcon=AMUIReact.Icon;
以上代码是引入已经封装好的ReactUI库，这里我用的amaze-react前端http:
//amazeui.org/这是官网地址，然后就是配置数据headerConfig。
然后就是header的UI类，最终渲染到header的DOM标签上。
2.2后台搭建
本博客后台选择的是前端脚本语言JavaScript的NodeJS，本博客是在基于windows的系统下开发的，所以这里Node的安装讲的是windows环境下，首先去node.js的官网下载windows平台的node的安装包，commandprompt，输入node-v可以查看NodeJS的版本，如果报错，说明Node没安装成功，Node安装成功后，就可以进行express的安装，express基于Node.js平台的web应用开发框架基于Node.js平台,快速、开放、极简的web开发框架。
安装完express后，就要安装supervisor，supervisor是Node的一个插件，它会自动检测你的代码是否改变，如果改变自动刷新浏览器，自动更新代码。
安装supervisor的方法跟express一样,npminstallsupervisor-g,npm中-g代表全局安装，否则就是局部安装，还有-dev是代表开发环境，-save代表保存插件到package.json配置文件里，这样如果在其他环境和电脑下，进行npminstall就会把package.json文件里的插件全部安装好，-gd代表一起安装依赖库，如npminstallexpress-gd,代表全局安装express并一起安装依赖库，这里就不一一向大家讲述怎么安装本博客的nodejs的插件安装，具体需要哪些插件在package.json文件里。
package.json文件如下：
{
"name":
"N-blog",
"version":
"1.0.0",
"private":
true,
"description":
"N-blogforexpress4.x",
"scripts":
{
"start":
"nodeapp"
},
"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安装的依赖库，通过npminstall命令安装依赖库后，后台环境就配置完成。
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，全称是NotOnlySql,指的是非关系型的数据库。
下一代数据库主要解决几个要点：
非关系型的、分布式的、开源的、水平可扩展的。
原始的目的是为了大规模web应用，这场运动开始于2009年初，通常特性应用如：
模式自由、支持简易复制、简单的API、最终的一致性（非ACID）、大容量数据等。
NoSQL被我们用得最多的当数key-value存储，当然还有其他的文档型的、列存储、图型数据库、xml数据库等。
MongoDB是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。
MongoDB将数据存储为一个文档，数据结构由键值（key=>value）对组成。
MongoDB文档类似于JSON对象。
字段值可以包含其他文档，数组及文档数组。
主要特点如下：
MongoDB的提供了一个面向文档存储，操作起来比较简单和容易。
你可以在MongoDB记录中设置任何属性的索引（如：
FirstName="Sameer",Address="8GandhiRoad"）来实现更快的排序。
你可以通过本地或者网络创建数据镜像，这使得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--serviceNameMongoDB--serviceDisplayNameMongoDB--logpathD:
\MongoDB.Log--dbpathD:
\MongoDB--directoryperdb
这样就会在windows服务下出现MongoDB，如图3-1所示。
3.3.1MongoDB文档
文档是MongoDB的核心概念，多个键及其关联的值有序地放置在一起便是文档。
在js里，文档表示为对象,如图3-1所示。
{"greenting":
"Hello,world!
"}
这个对象只有一个键"greeting"，其对应的值"Hello,world!
"
文档的键是字符串，除少数例外情况，键可以使用任意UTF-8字符：
-键不能含有\0（空字符）。
这个字符用来表示键的结尾
-.和$有特别的意义，只有当特定环境下才能使用，通常来说是被保留了
-以下划线"_"开头的键是保留的，虽然不是严格要求的
图3-1MongoDB服务
MongoDB不单区分类型，也区分大小写，还有，MongoDB的文档不能有重复的键，例如下面的文档是非法的：
{"greeting":
"Hello,world!
","greeting":
"Hello,mongoDB!
"}
3.3.2MongoDB集合
集合是一组文档。
如果说MongoDB中的文档类似于关系型数据库中的行，那么集合就如同表。
无模式
集合是无模式的。
这意味着集合里面的文档可以是各式各样的，例如下面两个文档可以存在于同一个集合里面：
{"greeting":
"Hello,world!
"}
{"foo":
5}
3.3.3MongoDB命名
我们可以通过名字来标示集合。
集合名可以是满足下列条件的UTF-8条件
-集合名不能是空字符串""。
-集合名不能含有\0字符（空字符）
-集合名不能以"system."开头，这是为系统集合保留的前缀
-用户创建的集合名字不能含有保留字符$
组织集合的一种惯例是使用"."字符分开的按命名空间划分的子集合。
MongoDB中多个文档组成集合，同样多个集合可以组成数据库。
一个MongoDB实例可以承载多个数据库，数据库名可以是满足以下条件的任意UTF-8字符串
-不能是空字符串（""）
-不能含有''（空格）、.、$、/、\和\0（空字符）
-应全部小写
-最多64字节
3.3.4MongoDB数据类型
MongoDB支持许多数据类型的列表下面给出：
String:
这是最常用的数据类型来存储数据。
在MongoDB中的字符串必须是有效的UTF-8。
Integer:
这种类型是用来存储一个数值。
整数可以是32位或64位，这取决于您的服务器。
Boolean:
此类型用于存储一个布尔值（true/false）。
Double:
这种类型是用来存储浮点值。
Min/Maxkeys:
这种类型被用来对BSON元素的最低和最高值比较。
Arrays:
使用此类型的数组或列表或多个值存储到一个键。
Timestamp:
时间戳。
这可以方便记录时的文件已被修改或添加。
Object:
此数据类型用于嵌入式的文件。
Null:
这种类型是用来存储一个Null值。
Symbol:
此数据类型用于字符串相同，但它通常是保留给特定符号类型的语言使用。
Date:
此数据类型用于存储当前日期或时间的UNIX时间格式。
可以指定自己的日期和时间，日期和年，月，日到创建对象。
ObjectID:
此数据类型用于存储文档的ID。
Binarydata:
此数据类型用于存储二进制数据。
Code:
此数据类型用于存储到文档中的JavaScript代码。
Regularexpression:
此数据类型用于存储正则表达式
MongoDB的基本命令
3.3.5use命令
MongoDBuseDATABASE_NAME用于创建数据库。
该命令将创建一个新的数据库，如果它不存在，否则将返回现有的数据库。
dropDatabase（）方法
MongoDBdb.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-1user表
名称
类型
长度
是否为空
说明
id
ObiectId
11
否
用户Id
username
string
32
否
用户名
password
string
32
否
密码
email
string
32
否
邮箱
根据本博客的具体需求，前期只需要3张表，第一张表user是存储用户信息，如账号和密码和邮箱，如表3-1所示。
sessions表示存储用户的cookie信息，如表3-2所示。
名称
类型
长度
是否为空
说明
id
ObiectId
11
否
Sessionid值
session
string
2
否
Session内容
expires
string
32
否
Session时效
表3-2sessions表
如表3-3所示，post是存储文章信息，有发布用户名称，发布时间，文章标题，文章标签，文章内容，文章评论，文章阅读数等等信息。
表3-3post表
名称
类型
长度
是否为空
说明
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.1header.ejs
Header.ejs是网站通用的头部文件，包含了网站的导航菜单和登陆注册按钮，还有登陆后的用户信息和退出按钮。
因为使用React前端框架，不能用普通的引擎模板ifelse去判断是否登陆，然后输出具体的代码，这里我是通过js变量去做判断，在页面写上变量，通过引擎模板去给变量赋值，如果变量值为true，说明已经登录，那么久调用username变量渲染到视图中，headerCOnfing对象用于存储连接信息和链接名称，是json对象格式,通过React内置循环方法调用，生成ReactDOM对象，然
升级会员 