初学Express

程序员文章站 2022-07-03 16:56:43

目录Express简介安装ExpressExpress的特点Hello Express 实例路由利用 Express 托管静态文件中间件Express简介Express是基于 Node.js 平台，快速、开放、极简的 Web 开发框架。它提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。Express 框架核心特性：可以设置中间件来响应 HTTP 请求。定义了路由表用于执行不同的 HTTP 请求动作。可以通过...

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如图：
初学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>

本文地址：https://blog.csdn.net/f944913628/article/details/109251472

初学Express

目录

Express简介

安装Express

Express的特点

Hello Express 实例

路由

利用 Express 托管静态文件

中间件

MYSQL初学者命令行使用指南

Ajax异步文件上传与NodeJS express服务端处理

浅谈Vue初学之props的驼峰命名

详解vue+webpack+express中间件接口使用

关键词密度——SEO初学者必须了解的知识

为PHP初学者的8点有效建议

初学AS3的几点技巧汇总

Photoshop基础_初学者学习经验谈

初学python数组的处理代码

使用ngrok+express解决本地环境中微信接口调试问题