初学Express

最新推荐文章于 2023-10-10 10:58:42 发布

Floatwor青舟

最新推荐文章于 2023-10-10 10:58:42 发布

阅读量390

点赞数

分类专栏： nodejs 文章标签： nodejs

本文链接：https://blog.csdn.net/f944913628/article/details/109251472

版权

nodejs 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了Express.js，一个基于Node.js的Web开发框架，包括它的安装、特点、基本使用如HelloExpress实例、路由设置、托管静态文件及中间件功能。通过实例展示了如何创建路由、处理HTTP请求和响应，以及如何使用中间件来处理静态资源和实现请求的分发。此外，还讲解了body-parser中间件在处理POST请求数据中的作用。

摘要由CSDN通过智能技术生成

Express简介

Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。它提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。

使用 Express 可以快速地搭建一个完整功能的网站。

Express 框架核心特性：

可以设置中间件来响应 HTTP 请求。
定义了路由表用于执行不同的 HTTP 请求动作。
可以通过向模板传递参数来动态渲染 HTML 页面。

安装Express

$ npm install express --save

以上命令会将 Express 框架安装在当前目录的 node_modules 目录中， node_modules 目录下会自动创建 express 目录。

Express的特点

(1)实现了路由的功能。没有express之前使用大量的if判断来实现路由的划分。
(2)中间件功能。帮我们把之前写进服务中的方法以及程序封装在不同的方法中。
(3)对req和res的对象扩展。
(4)可以集成其他模板引擎。

Hello Express 实例

记得首先要在终端上安装哦

var express = require('express')
var app = express()

app.get('/',(req,res)=>{
    res.send("Hello Express")
})

app.listen(3000,()=>{
    console.log("running....");
})

还可以对以上代码进行优化：

var app = require（'express'）();//简化为一行代码
app.get('/',(req,res)=>{
    res.send("Hello Express")
})
app.listen(3000,()=>{
    console.log("running....");
})

在浏览器中访问http://localhost:3000如图：
hello express

路由

路由是指确定应用程序如何响应客户端对特定端点的请求，该特定端点是URI（或路径）和特定的HTTP请求方法（GET，POST等）。

每个路由可以具有一个或多个处理程序函数，这些函数在匹配该路由时执行。

路由方法
下面我举一些简单的例子说一下路由方法：

路由方法是从HTTP方法之一派生的，并附加到express该类的实例。

Hello World!在首页上回应：

var express = require('express')
var app = express()

app.get('/',(req,res)=>{
    res.send("Hello World")
})

app.listen(3000,()=>{
    console.log("running....");
})

以下我就省略引入express和端口监听了。

GET和POST方法定义的到应用根目录的路由的示例。

// GET method route
app.get('/',  (req, res)=> {
  res.send('GET request ')
})

// POST method route
app.post('/',  (req, res)=> {
  res.send('POST request')
})

Express支持与所有HTTP请求方法相对应的方法：get，post、put、delete等。

路线路径

路由路径与请求方法结合，定义了可以进行请求的端点。路由路径可以是字符串，字符串模式或正则表达式。

字符?，+，*，和()是他们的正则表达式的对应的子集。连字符（-）和点（.）由基于字符串的路径按字面意义解释。

如果您需要 $在路径字符串中使用美元字符（），请将其转义 ([并括在和中]) 。例如， “ / d a t a /$ book”处用于请求的路径字符串将为“ /data/([$])book”。

示例：
此路由路径会将请求匹配到根路由/。

app.get('/', function (req, res) {
  res.send('root')
})

此路由路径会将请求匹配到/about。

app.get('/about', function (req, res) {
  res.send('about')
})

此路由路径将与acd和匹配abcd。

app.get('/ab?cd', function (req, res) {
  res.send('ab?cd')
})

利用 Express 托管静态文件

为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件， Express 提供了 express.static 的内置中间件函数。

express.static(root, [options])

root参数指定要从其提供静态资产的根目录。

例如，通过如下代码就可以将 public 目录下的图片、CSS 文件、JavaScript 文件对外开放访问了：

app.use(express.static('public'))

现在，你就可以访问 public 目录中的所有文件了：

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

注意：因为Express 在静态目录查找文件，因此，存放静态文件的目录名不会出现在 URL 中。

要使用多个静态资源目录，就可以多次调用 express.static 中间件函数：

app.use(express.static('public'))
app.use(express.static('hello'))

注意：访问静态资源文件时，express.static 中间件函数会根据目录的添加顺序查找所需的文件。

中间件

Express是一个路由和中间件Web框架，其自身的功能很少：Express应用程序本质上是一系列中间件函数调用。

中间件功能是可以访问请求对象（req），响应对象（res）和应用程序的请求-响应周期中的下一个中间件功能的功能。下一个中间件功能通常由名为的变量表示next。

应用层中间件
使用和函数将应用程序级中间件绑定到应用程序对象的实例，其中，中间件函数处理的请求的HTTP方法（小写）是HTTP方法。

const app=require('express')();

//统计用户访问的总数量
let total=0;
app.use('/user',(req,res,next)=>{
    console.log(Date.now()) //1970 1 1 到现在的毫秒数
    next()
})

app.use('/user',(req,res,next)=>{
    console.log('访问了/user');
    next();//next()实现了阻塞的请求，并没有通过res的方式响应
})

app.use('/user',(req,res)=>{
    total++;
    console.log(total);
    res.send('result')
})

app.listen(3000,()=>{
    console.log('running...');
})

路由器级中间件

路由器级中间件与应用程序级中间件的工作方式相同，只不过它绑定到的实例express.Router()。

var app=require('express')();

app.get('/abc',(req,res,next)=>{
    console.log(1);
    next('route');// 跳转到下一个路由
    //可以吧next()理解为跳转到下一个路由
},(req,res)=>{
    console.log(2);//这两个属于一个路由
    // res.send('abc')
})

app.get('/abc',(req,res)=>{
    console.log(3);
    res.send('hello')
})

const app=require('express')();

var cb0=(req,res,next)=>{
    console.log('cb0');
    next();
}

var cb1=(req,res,next)=>{
    console.log('cb1');
    next()
}

var cb2=(req,res)=>{
    res.send('Hello fsafsa')
}

app.get('/example',[cb0,cb1,cb2])

app.listen(3000,()=>{
    console.log('running...');
})

第三方中间件 body-parser (应用中间件)

主要是获取post的请求数据。

let express=require('express');
var app=express();

const bodyParser=require('body-parser');

//挂载参数处理中间件(post)
//app.use 挂载
//固定的写法 记住
app.use(bodyParser.urlencoded({extended:false}))
//处理json格式参数
app.use(bodyParser.json())
//挂载内置的中间件 处理静态资源文件托管
app.use(express.static('public'))

app.post('/login',(req,res)=>{
    //动态路由 :day/:date  ==> req.params
    //以下req.body是post请求参数获取的方式
    let data=req.body;
    console.log(data);
    if(data.username=='admin'&&data.password=='123'){
        // res.send('登陆成功')
        res.send({flag:1})
    }else{
        // res.send('登陆失败')
        res.send({flag:2})
    }

})

// app.get('/login',(req,res)=>{
//     //动态路由 :day/:date  ==> req.params
//     //以下req.query是get请求参数获取的方式
//     let data=req.query;
//     console.log(data);
//     if(data.username=='admin'&&data.password=='123'){
//         res.send({flag:1});
//     }else{
//         res.send({flag:2});
//     }

// })
app.listen(3000,()=>{
    console.log('running...')
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script >
        $(function(){
            $('#btn').click(function(){
                //获取表单数据
                // var name=$('#name').val();
                // var pwd=$('#pwd').val();
                var obj={
                    username:$('#name').val(),
                    password:$('#pwd').val()
                }
                // console.log(name+'=='+pwd);
                // console.log('===');
                //原生的ajax一定要会写 切记 一定
                $.ajax({
                    type:'post',
                    url:'http://localhost:3000/login',
                    contentType:'application/json',
                    dataType:'text',
                    //将data数据转换为json字符串
                    //   data:{username:name,password:pwd},
                    data:JSON.stringify(obj),
                    success:function(data){
                        console.log(data);
                        //前台人员会拿到后台给的接口文档
                        //接口文档中有标注请求的接口地址、方法、请求参数、返回结果
                        //localhost:3000/login get username password flag=1表示成功
                        //  console.log(data);
                        // if (data.flag==1) {
                        //     $('#span_01').html('登录成功');
                        // }else{
                        //     $('#span_01').html('登录失败');
                        // }
                    //    $('#span_01').html(data)

                       let result=JSON.parse(data);
                        if (result.flag==1) {
                            $('#span_01').html('登录成功');
                        }else{
                            $('#span_01').html('登录失败');
                        }
                    }
                })
            })
        })
    </script>
</head>
<body>
    <!-- 使用submit提交表单用的很少几乎不用 用原生js ajasx比较多 -->
    <form action="http://localhost:3000/login" method="GET">
        用户名：<input type="text" name="username" id="name"><br>
        密码：<input type="password" name='password' id="pwd"><br>
        <!-- <input type="submit" value="提交"> -->

        <input type="button" value="提交" id="btn"><br>

        <span id="span_01"></span>
    </form>
    
</body>
</html>