用NOTEJS快速搭建一个BLOG

前言

nodeJS 是基于 Chrome JavaScript 运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。nodeJS 使用事件驱动，非阻塞 I/O 模型而得以轻量和高效。
再来介绍一下深受 nodeJS 开发者欢迎的 web 开发框架 Express 。Express 是一个基于 nodeJS 平台的极简、灵活的 web 应用开发框架，这好比如是 Flask 和 Python 的搭配一样。Express 拥有丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件，方便快速、简单地创建健壮、友好的 API。

环境搭建

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/。

步骤 1 : 双击下载后的安装包

步骤 2 : 点击以上的Run(运行)

步骤 3 : 勾选接受协议选项，点击 next（下一步） 按钮

步骤 4 : Node.js默认安装目录为 "C:\Program Files\nodejs\" , 你可以修改目录，并点击 next（下一步）：

步骤 5 : 点击树形图标来选择你需要的安装模式 , 然后点击下一步 next（下一步）

步骤 6 :点击 Install（安装） 开始安装Node.js。

点击 Finish（完成）按钮退出安装向导。

检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入"cmd" => 输入命令"path"，输出如下结果：我们可以看到环境变量中已经包含了C:\Program Files\nodejs\

安装 Express

在 Express v3.x 之前，还内置许多中间件，但在 v4.x 后，除了 static 都被分离为单独的模块，这也是许多初学者，面对的最大的问题，因为现在许多网上的文章还停留在 v3.x。
详情可以访问 Express中文网。
先通过 npm 全局安装 Express：
sudo npm install -g express-generator

在安装好 Express 开发框架及其命令行工具后，就可以快速生成我们需要的项目框架了。执行下面这条命令：
express -e LouBlog
成功后便会生成所需的框架。
文件结构如下 

|-- LouBlog
    |-- public
        |-- javascripts
        |-- images
        `-- stylesheets
            `-- style.css
    |-- routes
        |-- index.js
        `-- users.js
    |-- views
        |-- index.ejs
        `-- error.ejs
    |-- bin
        `-- www
    |-- app.js
    `-- package.json

简单了解一下 Express 都为我们准备好了什么：
LouBlog: 自然就是我们项目名，如果没有此文件夹，在创建项目框架时加上名称，就像刚刚执行完的那条命令，Express 就会自动帮我们创建此文件夹；若你在已是项目名的文件夹中生成框架，此项可省去。
public: 是我们项目的静态资源，存放 imgs、js、css 等文件；
routes: 可以说是整个项目的控制部分，存放路由文件；
views: 存放项目的视图文件；
bin: 存放可执行文件；
app.js: 项目的启动文件；
package.json: 文件中有项目的基本信息，包括项目名、版本号、开放权限、启动命令等；以及项目的模块依赖信息，当运行 npm install 时, npm 就会此文件，并根据 dependencies 对象中的属性安装模块。
简单了解了 Express 为我们生成的框架，有没有感受得到 Express 的强大呢，帮我做好了很多建站的基本工作，大大提高了效率。
注意：希望大家能多多学习生成的文件内容，尤其是 app.js 、routes/index.js 、bin/www 这几个文件，
接下来我们做一点点修改，方便我们启动项目服务，进入项目根目录，并安装项目的依赖模块： 

cd LouBlog
npm install

 

设置路由
修改 app.js 文件， 在文件最后的
module.exports = app; 之前添加一行代码 app.listen(3000);
最后一部执行启动命令：
node app.js
启动项目，通过浏览器访问 localhost:3000，即可看到结果

 熟悉Express框架工作原理
接下来学习 Express 框架中非常重要的路由控制。
routers/index.js 中有以下代码：

router.get('/', functoin(req, res) {
    res.render('index', { title: 'Express' });
});

代码意思是当访问主页时，调用 ejs 模板（这里提到的 ejs 模板将会在下一节中详细讲解）来渲染 views/index.ejs 模板文件。 其中 get 指 http 的 get 请求方式，Express 封装了许多 http 请求方式，我们主要使用 get() 和 post() 两种;
参数一：'/' 则代表了其路由规则，这里指向项目根目录，同时路由规则还支持正则表达式，这给我们设计路由带来很多的方便;
参数二：为处理请求的回调函数，函数中又有两个参数 req 和 res，代表请求信息和响应信息。
路径请求及对应的获取路径有以下几种形式：
req.query: 处理get请求，获取get请求参数。
req.body: 处理post请求，获取post请求体。
req.params: 处理/:XXX形式的get或post请求，获取请求参数
req.param(): 处理get和post请求，但查找优先级由高到低为req.params -> req.body -> req.query。
res.render() 则将所有数据以 json 格式传递给模板引擎。
4.3.2 路由规则实践
现在我们直接访问 localhost:3000/login 会显示：

这是因为我们还没有建立 /login 这一路由规则
在 routers/index.js 文件中添加代码

 

router.get('/login', function(req, res, next) {
    res.render('login', {title: 'login'});
});

Ctrl + c 停止服务，node app.js 再次启动服务，访问 localhost:3000/login 后显示：

出现这个错误是因为 view 中并没用 login 对应的文件，添加 login.ejs 文件，文件中写入 <%= title%>，直接刷新浏览器，这时便可以看到正确的显示：

还记得之前简单讲解过 Express 生成的模板框架吗，routes 中存放路由文件，views 中存放视图文件，这就相当于 MVC 模式中的 C 和 V，而 index.ejs 文件中的 <%= title%> 是 ejs 模板引擎的语句，意思是将后台传递来的 title 数据在页面中显示出来。
现在你应该大致了解了 Express 的路由工作原理，但在刚在的操作中，我们发现每次修改后台代码时，想要浏览修改结果，就需要先重启服务。这无疑增加了开发的负担。
使用 supervisor 模块可以很好的解决这个问题，每当我们保存文件后，此模块便会自动重启服务，提高了开发效率。
首先要安装此模块：

 

sudo npm install -g supervisor

配置启动命令：

 

supervisor app.js

之后，我们的项目启动命名便从 node app.js 更改为

 

supervisor app.js

这样我们的开发环境已经初步配置完成，接下来我们根据 Express 的路由控制原则来设计我们的博客项目
搭建路由模块
依据我们博客指定好的功能，我们初步设计以下几个路由规则：

 

/login
/logout
/reg
/post
/search
/edit/:_id
/remove/:_id

以上几个路由规则分别对应“登录”、“退出登录”、“注册”、“发表文章”、“查询”、“编辑”、“删除”功能。
再分别建立好对应的视图文件：

views/login.ejs
views/register.ejs
views/index.ejs
views/post.ejs
views/search.ejs
views/edit.ejs

“删除”功能只是在请求完成后返回一个状态信息，因此不必要创建视图文件。
完成上面两步，就需要在浏览器中依次测试刚刚设计好的路由规则是否有效果，有没有报出错误，那这节实验的任务就完成了。