NodeJS简易博客系统（七）express框架入门学习

ゝ一世哀愁。 2022-05-12 13:28 300阅读 0赞

# 一、安装及demo #

如果已经装好webstorm，直接新建项目如下：

![70][]

否则cd到项目目录下，使用npm install express --save即可完成安装。

demo:

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> 
    <table> 
     <tbody> 
      <tr> 
       <td>var express=require('express'); /*引入 express*/<br> var app=new express(); /*实例化 express 赋值给 app*/<br> //配置路由 匹配 URl 地址实现不同的功能<br> app.get('/',function(req,res){ <br> res.send('首页');<br> })<br> app.get('/search',function(req,res){ <br> res.send('搜索');<br> //?keyword=华为手机&amp;enc=utf-8&amp;suggest=1.his.0.0&amp;wq<br> })<br> app.get('/login',function(req,res){ <br> res.send('登录');<br> })<br> app.get('/register',function(req,res){ <br> res.send('注册');<br> })<br> app.listen(3000)</td> 
      </tr> 
     </tbody> 
    </table> 然后运行访问<a href="http://localhost:3001/news" rel="nofollow">http://localhost:3000</a>即可看到效果。</td> 
  </tr> 
 </tbody> 
</table>

# 二、路由（routing） #

路由（Routing）是由一个 URI（或者叫路径）和一个特定的 HTTP 方法（GET、 POST 等）  
组成的，涉及到应用如何响应客户端对某个网站节点的访问。

## 1、简单路由配置 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>GET</td> 
   <td>app.get("网址",function(req,res){ &nbsp; });</td> 
  </tr> 
  <tr> 
   <td>POST</td> 
   <td>app.post("网址",function(req,res){ &nbsp; });</td> 
  </tr> 
  <tr> 
   <td>PUT</td> 
   <td>app.put('/user', function (req, res) { &nbsp; res.send('Got a PUT request at /user'); });</td> 
  </tr> 
  <tr> 
   <td>DELETE</td> 
   <td>app.delete('/user', function (req, res) { &nbsp; res.send('Got a DELETE request at /user'); });&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 2、动态路由配置 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>app.get("/user/:id",function(req,res){ var id = req.params["id"]; res.send(id); });&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 3、路由的正则匹配 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>app.get('/ab*cd', function(req, res) { &nbsp; res.send('ab*cd'); });</td> 
  </tr> 
 </tbody> 
</table>

## 4、路由里面获取 Get 传值  ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>/news?id=2&amp;sex=nan&nbsp;</p> <p>app.get('/news, function(req, res) { &nbsp; &nbsp;console.log(req.query); });&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

# 三、 托管静态文件  #

1、如果你的静态资源存放在多个目录下面，你可以多次调用 express.static 中间件：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>app.use(express.static('public'));&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

现在，public 目录下面的文件就可以访问了。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>http://localhost:3000/css/style.css&nbsp;<br> http://localhost:3000/js/app.js&nbsp;<br> http://localhost:3000/hello.html&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

2、如果你希望所有通过 express.static 访问的文件都存放在一个“虚拟（virtual）”目 录（即目录根本不存在）下面，可以通过为静态资源目录指定一个挂载路径的方式来实现， 如下所示：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>app.use('/static', express.static('public'));&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

现在，你就爱可以通过带有 “/static” 前缀的地址来访问 public 目录下 面的文件了。

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>http://localhost:3000/static/css/style.css&nbsp;<br> http://localhost:3000/static/js/app.js&nbsp;<br> http://localhost:3000/static/hello.html&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

# 四、Express 中间件  #

Express 是一个自身功能极简，完全是由路由和中间件构成一个的 web 开发框架：从 本质上来说，一个 Express 应用就是在调用各种中间件。   
中间件（Middleware） 是一个函数，它可以访问请求对象（request object (req)）, 响应对象（response object (res)）, 和 web 应用中处理请求-响应循环流程中的中间件，一般 被命名为 next 的变量。   
中间件的功能包括：

*  执行任何代码。
 *  修改请求和响应对象。
 *  终结请求-响应循环。
 *  调用堆栈中的下一个中间件。

如果我的 get、post 回调函数中，没有 next 参数，那么就匹配上第一个路由，就不会往下匹 配了。如果想往下匹配的话，那么需要写 next() 。

Express 应用可使用如下几种中间件：

## 1. 应用级中间件  ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>app.use(function(req,res,next){ &nbsp;/*匹配任何路由*/ &nbsp; &nbsp; //res.send('中间件');&nbsp;<br> &nbsp; &nbsp; console.log(new Date());&nbsp;<br> &nbsp; &nbsp; next(); &nbsp;/*表示匹配完成这个中间件以后程序继续向下执行*/&nbsp;<br> })&nbsp;<br> app.get('/',function(req,res){&nbsp;<br> &nbsp; &nbsp; res.send('根');&nbsp;<br> })&nbsp;<br> app.get('/index',function(req,res){&nbsp;<br> &nbsp; &nbsp; res.send('首页');&nbsp;<br> })&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 2、路由中间件  ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>app.get("/",function(req,res,next){ &nbsp; &nbsp; console.log("1"); &nbsp; &nbsp; next(); });&nbsp;<br> app.get("/",function(req,res){ &nbsp; &nbsp; &nbsp; &nbsp;console.log("2"); });&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 3、 错误处理中间件  ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>app.get('/index',function(req,res){ &nbsp; &nbsp; res.send('首页'); })&nbsp;<br> /*中间件相应 404*/</p> <p>app.use(function(req,res){ &nbsp; &nbsp;</p> <p>&nbsp; //res.render('404',{});</p> <p>&nbsp; res.status(404).render('404',{});</p> <p>})</p> </td> 
  </tr> 
 </tbody> 
</table>

## 4. 内置中间件 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>//静态服务 &nbsp;index.html</p> <p>app.use('/static',express.static("./static")); &nbsp; /*匹配所有的路径*/&nbsp;<br><br> app.use('/news',express.static("./static")); &nbsp; /*匹配所有的路径*/&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

## 5. 第三方中间件  ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>body-parser 中间件 &nbsp; 第三方的 &nbsp; 获取 post 提交的数据&nbsp;<br> 1.cnpm install body-parser --save&nbsp;<br> &nbsp;2.var bodyParser = require('body-parser')&nbsp;<br> &nbsp;3.设置中间件&nbsp;<br> &nbsp;//处理 form 表单的中间件&nbsp;<br> &nbsp;// parse application/x-www-form-urlencoded &nbsp;app.use(bodyParser.urlencoded({ extended: false })); &nbsp;form 表单提交的数据&nbsp;<br> &nbsp;// parse application/json &nbsp;app.use(bodyParser.json()); &nbsp;提交的 json 数据的数据&nbsp;<br> &nbsp;4.req.body 获取数据&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

# 五、获取 Get  Post 请求的参数  #

● GET 请求的参数在 URL 中，在原生 Node 中，需要使用 url 模块来识别参数字符串。在 Express 中，不需要使用 url 模块了。可以直接使用 req.query 对象。   
● POST 请求在 express 中不能直接获得，可以使用 body-parser 模块。使用后，将可以用 req.body 得到参数。但是如果表单中含有文件上传，那么还是需要使用 formidable 模块。

## 1、安装 ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>npm install body-parser&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## 2.使用req.body 获取 post 过来的参数  ##

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td> <p>var express = require('express')</p> <p>var bodyParser = require('body-parser') &nbsp;</p> <p>var app = express() &nbsp;</p> <p>// parse application/x-www-form-urlencoded &nbsp;app.use(bodyParser.urlencoded({ extended: false })) &nbsp;</p> <p>&nbsp;// parse application/json &nbsp;</p> <p>app.use(bodyParser.json()) &nbsp;</p> <p>app.use(function (req, res) { &nbsp; res.setHeader('Content-Type', 'text/plain') &nbsp; res.write('you posted:\n')&nbsp;<br> res.end(JSON.stringify(req.body, null, 2)) })&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

总结，其实小项目用到的就是路由，获得值传递，响应界面，cookies存储等等。当然，更深层次的学习还有后续。

[70]: /images/20220504/261895a415234799ab16c82006c86cea.png