devbox
你好赵伟
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Node.js Express框架

作者：你好赵伟 | 2024-04-22 16:42:24

赞

踩

Node.js Express框架

一、Express 介绍

       Express是一个最小的，灵活的Node.js Web应用程序框架，它提供了一套强大的功能来开发Web和移动应用程序。 它有助于基于Node Web应用程序的快速开发。Express框架的核心功能是：

  • 允许设立中间件响应HTTP请求
  • 定义了用于执行基于HTTP方法和URL不同动作的路由表
  • 允许动态渲染基于参数传递给模板HTML页面

二、安装Express

        安装Express 框架全局使用NPM，以便它可以被用来使用Node终端创建Web应用程序。

               $ npm install -g express-generator

       上面的命令在本地node_modules目录保存安装，并创建一个目录express在node_modules里边。还有，应该使用express安装以下几个重要的模块：

  1. body-parser ：这是一个Node.js中间件处理JSON，Raw，文本和URL编码的表单数据
  2. multer ：这是一个Node.js的中间件处理multipart/form-data
  3. cookie-parser ： 解析Cookie头和填充req.cookies通过cookie名字键控对象

               $ npm install body-parser --save

               $ npm install cookie-parser --save

               $ npm install multer --save

三、Express创建项目

       一个非常基本的Express应用程序，它会启动服务器，并侦听端口3000等待连接。这个应用程序使用"Hello World! "回应！为请求网页。 对于所有其他路径，这将响应一个404表示未找到。

       1、进入工作目录（自定义）

       2、执行创建命令，创建一个名为hello的Express项目

              express hello

       表示安装成功

       3、进入hello目录安装依赖包：

             F:\hello> npm  install

       4、安装完成后，执行命令启动应用：

             F:\hello>npm  start

       5、在浏览器中输入http://localhost:3000/

 四、Express项目结构分析

           1、bin：启动配置文件，在www 里修改运行端口号
           2、node_modules：存放所有的项目依赖库，就像java存放架包
           3、public：用于存放静态资源文件 图片，CSS，JAVASCRIPT文件..
           4、routers：路由文件相当于springmvc中的Controller，ssh中的action
           5、views：存放页面的地方
           6、package.json：项目依赖配置及开发者信息。
           7、app.js：应用核心配置文件，项目入口

五、app.js配置详解

       app.js文件相当于项目启动的主入口文件，包含以下公共方法和服务器配置信息等

  1. var createError = require('http-errors');//http错误处理模块
  2. var express = require('express');//引入Express
  3. var path = require('path');//引入path
  4. var cookieParser = require('cookie-parser');//引入cookie处理对象
  5. var logger = require('morgan');//引入日志模块
  6.  
  7. //引入路由目录中的index.js文件
  8. var indexRouter = require('./routes/index');
  9. //引入路由目录中的users.js文件
  10. var usersRouter = require('./routes/users');
  11. var app = express(); //创建express应用
  12. // view engine setup
  13. app.set('views', path.join(__dirname, 'views')); //定义页面目录
  14. app.set('view engine', 'jade');//定义页面模板引擎
  15. app.use(logger('dev'));//定义日志打印级别
  16. app.use(express.json());//定义json格式处理数据
  17. //定义使用urlencode处理数据及querystring模块解析数据
  18. app.use(express.urlencoded({ extended: false }));
  19. app.use(cookieParser());//定义使用cookie处理对象
  20. app.use(express.static(path.join(__dirname, 'public')));//定义静态资源目录public
  21. app.use('/', indexRouter);//定义指向index.js的路由
  22. app.use('/users', usersRouter);//定义指向users.js的路由
  23. // 定义404错误处理
  24. app.use(function(req, res, next) {
  25.   next(createError(404));
  26. });
  27. // 定义其他错误处理
  28. app.use(function(err, req, res, next) {
  29.   // 设置 locals, 只在开发环境生效
  30.   res.locals.message = err.message;
  31.   res.locals.error = req.app.get('env') === 'development' ? err : {};
  32.   // 返回错误http状态码
  33.   res.status(err.status || 500);
  34.   res.render('error');//渲染错误页面
  35. });
  36. module.exports = app; //导出app

一个页面的运行过程和逻辑大致分为三步，路由中间件(index.js)的书写同时中间件的模板(index.ejs)要写好、最后由app.js配置和调用路由中间件。

      1、app.js配置

      2、routes 调用路由级中间件

      3、views 模板渲染

六、Express路由：

       路由用于确定应用程序如何响应对特定端点的客户机请求，包含一个 URI（或路径）和一个特定的 HTTP 请求方法（GET、POST 等）。

    每个路由可以具有一个或多个处理程序函数，这些函数在路由匹配时执行。它的使用形式如下：

app.method(path, handler)

          app：是 express 的实例。
    method：是 HTTP 请求方法。
         path：是服务器上的路径。
    handler：是在路由匹配时执行的函数。

注意：如果有多个路由处理程序，那么不是最后一个路由的情况下，其参数要有next：

       next() 函数不是 Node.js 或 Express API 的一部分，而是传递给中间件函数的第三自变量。next() 函数可以命名为任何名称，但是按约定，始终命名为“next”。为了避免混淆，请始终使用此约定。

       next函数主要负责将控制权交给下一个中间件，如果当前中间件没有终结请求，并且next没有被调用，那么请求将被挂起，后边定义的中间件将得不到被执行的机会。

七、Express的页面

      1、更换模板引擎

          Express默认的模板引擎是jade，为了方便用户开发，可以把它替换成更简洁、更高效的art-template

         (1)安装art-template依赖包

              npm  install  -S  art-template

              npm  install  -S   express-art-template

        (2)修改app.js文件

              app.engine(‘.html’,requare(‘express-art-template’)

              app.set(‘view engine’,’html’)

2、渲染数据到页面

       在开发网页的时候，网页上的内容往往不是一成不变的，而是根据服务端内容变换的，这就需要将数据渲染到页面上。即调用response的render方法向页面传递数据，在页面中使用{{ 变量名 }}接收服务端的数据

  1. router.get('/post',function(req,res){
  2.   res.render('post',{
  3.     title:'孔子学院',
  4.     name:'张三',
  5.     age:31,
  6.    happy:true
  7.   })
  8. })

 前端页面：

  1.      <p>
  2.          姓名：{{name}}
  3.          <br><br>
  4.          年龄：{{age}}
  5.      </p>

        (1)条件渲染：根据不同的情况展示不同的页面

  1. <h2>{{title}}</h2>
  2.    <!-- 判断年龄小于30-->
  3.    {{ if age<30 }}
  4.        <p>大家好，我是{{name}},我今年{{age}}岁，很高兴认识大家!</p>
  5.    {{ /if }}
  6.    <!-- 判断年龄大于等于30 -->
  7.    {{ if age>30 }}
  8.        <p>大家好，我是{{name}},很高兴认识大家!</p>
  9.    {{ /if }}

         (2)嵌套条件渲染

  1.    <h2>{{title}}</h2>
  2.    <!-- 判断年龄小于30-->
  3.    {{ if age<30 }}
  4.       <p>大家好，我是{{name}},我今年{{age}}岁，很高兴认识大家!</p>
  5.    {{ /if }}
  6.  
  7.    <!-- 判断年龄大于等于30 -->
  8.    {{ if age>30 }}
  9.       <p>大家好，我是{{name}}
  10.           <!-- 判断happy字段是否为真-->
  11.           {{ if happy }}
  12.             <span>很高兴认识大家!</span>
  13.           {{ /if }}
  14.       </p>
  15.    {{ /if }}

         (3)循环渲染：

  1. router.get('/post',function(req,res){
  2.   res.render('post',{
  3.     title:'德云IT学院',
  4.     list:[{
  5.       id:1,
  6.       content:'今天天气不错'
  7.     },{
  8.       id:2,
  9.       content:'昨天几点睡觉的?'
  10.     },{
  11.       id:3,
  12.       content:'工作好累'
  13. }],
  14.   });
  15. });

页面：

  1.    <h2>{{title}}</h2>
  2.    {{ each list as item}}
  3.       <p>id:{{item.id}},内容:{{item.content}}</p>
  4.    {{ /each }}

         (4)循环渲染结合条件渲染：

  1. router.get('/post',function(req,res){
  2.   res.render('post',{
  3.     title:'德云IT学院',
  4.     list:[{
  5.       id:1,
  6.       content:'今天天气不错'
  7.     },{
  8.       id:2,
  9.       content:'昨天几点睡觉的?'
  10.     },{
  11.       id:3,
  12.       content:'工作好累'
  13.     }],
  14.     targetId:2
  15.   });
  16. });

页面：

  1.    <h2>{{title}}</h2>
  2.    {{ each list as item}}
  3.      {{ if item.id === targetId}}
  4.        <p style="color:#f00">id:{{item.id}},内容:{{item.content}}</p>
  5.      {{ else }}
  6.        <p>id:{{item.id}},内容:{{item.content}}</p>
  7.      {{ /if }}
  8.    {{ /each }}

三、请求对象Request

       req.params：一个数组，包含命过名的路由参数

<a href="http://localhost:8089/test/12/15">params</a>

后台：

  1. router.get('/post/:id/:userid',function(req,res){
  2.   res.send(req.params)
  3. });

     req.query：get请求的查询字符串参数

     req.body：post的请求体内容

     req.cookies：一个对象，包含从客户端传递来的cookie信息

     req.headers：一个对象，从客户端接到的请求抱头

     req.path：请求路径，不包含协议，端口，查询字符串

     req.host：主机名

     req.xhr：boolean值，判断请求是否是ajax请求

     req.protocol：用于标示协议http，https

     req.url：path+查询字符串

四、响应对象Response

       res.status(code)：设置http状态码，express默认是200。可利用此函数返回404或者500页面，重定向的话用redirect()

       res.send(options)：向客户端发送响应数据，可以是一个对象(key-value)

       res.render(视图名,数据)：页面的文件名(不带扩展名),“数据”是向页面发送的数据

       res.cookie(name,value,[options])：设置cookie值

       res.clearCookie(name,[options])：清除cookie值

       res.redirect([status],url)：重定向浏览器，默认状态码：302

       url是路由里面的路径而不是视图里面的路径

       res.json([status],json)：向客户端发送json数据及其可选的状态码

       res.jsonp([status],jsonp)

       res.send([status],body)：向客户端发送响应及其状态吗

       res.type(type)：相当于res.set(‘Content-Type‘,‘type‘)

五、get请求：

一般在网站开发中，get都用作数据获取和查询，类似于数据库中的查询操作，当服务器解析前台资源后即传输相应内容；而查询字符串是在URL上进行的，形如：
           http://localhost:8080/login?goods1=0001&goods2=0002

  （1）GET 请求的特点：

  • GET 请求可被缓存
  • GET 请求保留在浏览器历史记录中
  • GET 请求可被收藏为书签
  • GET 请求不应在处理敏感数据时使用
  • GET 请求有长度限制：

          IE：对URL的最大限制为2083个字符，若超出这个数字，提交按钮没有任何反应。

         Firefox：对Firefox浏览器URL的长度限制为：65536个字符。

          Safari：URL最大长度限制为80000个字符。

         Opera：URL最大长度限制为190000个字符。

          Google(chrome)：URL最大长度限制为8182个字符。

  • GET 请求只应当用于取回数据

   (2)示例

        在views下创建login.html文件

  1. <form action="http://localhost:8082/login" method="get">
  2.     用户：
  3.     <input type="text" name="user" id="user" placeholder="用户名"/>
  4.     <br>
  5.     密码：
  6.     <input type="password" name="password" id="password" placeholder="密码"/>
  7.     <br>
  8.     <input type="submit" value="提交"/>
  9. </form>

        更改router下的index.js文件（路由文件）

  1. var express = require('express');
  2. var router = express.Router();
  3.  
  4. /* GET login page. */
  5. router.get('/', function(req, res, next) {
  6.   res.render('login');
  7. });
  8. /* 获取登录页面的参数 */
  9. router.get('/login',function(req,res){
  10.   console.log(req.query);
  11.   res.send("登录路由，user为："+req.query.user+"==>   password为："+req.query.password)
  12. })
  13. module.exports = router;

六、post请求：

      示例：

       在views下创建post.html文件

  1. <form action = "http://localhost:8082/add" method="POST">
  2.         用户：<input type="text" name = "userName"> 
  3.         <br><br>
  4.         密码：<input type="password" name = "userPwd"> 
  5.         <br><br>
  6.         <button type="submit">提交</button>
  7. </form>

      配置router下的index.js文件（路由文件）

  1. //获取post页面
  2. router.get('/post',function(req,res,next){
  3.   res.render('post')
  4. })
  5. //获取post方式的请求参数
  6. router.post('/add',(req,res)=>{
  7.   res.send("登录路由，user为："+req.body.userName+"==> password为："+req.body.userPwd)
  8. })

附：每次更改路由文件都要重新启动项目才能生效，这样开发效率不高。可以安装nodemon工具，在更改路由后就不用重新启动项目了

1、安装nodemon工具

       npm  install  -g  nodemon

2、修改项目根目录中的package.json文件

  1. "scripts": {
  2.     "start": "node ./bin/www"
  3.   }

改为：

  1. "scripts": {
  2.     "start": "nodemon ./bin/www"
  3.   }

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/你好赵伟/article/detail/469529
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号