草庐IT

node前后端交互(Express)

-ZhouYi-- 2023-03-28 原文

1. Express框架是什么

1.1 Express是一个基于Node平台的web应用开发框架,它提供了一系列的强大特性,帮助你创建各种Web应用。我们可以使用 npm install express 命令进行下载。

1.2 Express初体验

// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();
app.get('/' , (req, res) => {
    // send()
    // 1. send方法内部会检测响应内容的类型
    // 2. send方法会自动设置http状态码
    // 3. send方法会帮我们自动设置响应的内容类型及编码
    res.send('Hello. Express');
})
app.get('/list', (req, res) => {
    res.send({name: '张三', age: 20})
})

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');

2. 中间件
2.1 什么是中间件
中间件就是express框架提供的一堆方法,可以接收客户端发来的请求、可以对请求做出响应,也可以将请求继续交给下一个中间件继续处理,即接受请求,处理请求。
中间件主要由两部分构成,中间件方法以及请求处理函数。
中间件方法由Express提供,负责拦截请求,请求处理函数由开发人员提供,负责处理请求。

 //中间件示例
app.get('请求路径', '处理函数') // 接收并处理get请求
app.post('请求路径', '处理函数') // 接收并处理post请求

可以针对同一个请求设置多个中间件,对同一个请求进行多次处理。

默认情况下,请求从上到下依次匹配中间件,一旦匹配成功,终止匹配。

可以调用next方法将请求的控制权交给下一个中间件,直到遇到结束请求的中间件。

//02.中间件.js
//引入express框架
const express = require("express");
//创建网站服务器
const app = express();
//当客户端以get方式访问/request路由时
//第一个中间件
app.get('/request', (req, res, next) => {
  req.name = "张三";
  next();
});
//下一个中间件
app.get('/request', (req, res) => {
  res.send(req.name);
});
//监听端口
app.listen(3000);

2.2 app.use中间件用法

app.use 匹配所有的请求方式,可以直接传入请求处理函数,代表接收所有的请求。

 app.use((req, res, next) => {
     console.log(req.url);
     next();
 });

app.use 第一个参数也可以传入请求地址,代表不论什么请求方式,只要是这个请求地址就接收这个请求。

 app.use('/request', (req, res, next) => {
     console.log(req.url);
     next();
 });
  1. 输入http://localhost:3000,控制台打印 请求走了app.use中间件
  2. 输入http://localhost:3000/request,控制台打印 请求走了app.use中间件、请求走了app.use /request中间件
//03.app.use.js
const express = require("express");
const app = express();
//接受所有请求的中间件
app.use((req, res, next) => {
  console.log('请求走了app.use中间件');
  next()
})
//当客户端访问/request请求时走当前中间件
app.use('/request', (req, res, next) => {
  console.log('请求走了app.use /request中间件');
  next();
});
app.get('/list', (req, res) => {
  res.send('/list');
});
//监听端口
app.listen(3000);

2.3 中间件应用

1.网站维护公告 ,写在最前面,直接为客户端做出响应,网站正在维护中。

// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();
 app.use((req, res, next) => {
    res.send('当前网站正在维护...')
 })

2.路由保护,客户端在访问需要登录的页面时,可以先使用中间件判断用户登录状态,用户如果未登录,则拦截请求,直接响应,禁止用户进入需要登录的页面。

app.use('/admin', (req, res, next) => {
    // 用户没有登录
    let isLogin = true;
    // 如果用户登录
    if (isLogin) {
        // 让请求继续向下执行
        next()
    }else {
        // 如果用户没有登录 直接对客户端做出响应
        res.send('您还没有登录 不能访问/admin这个页面')
    }
})
app.get('/admin', (req, res) => {
    res.send('您已经登录 可以访问当前页面')
})

3.自定义404页面

app.use((req, res, next) => {
    // 为客户端响应404状态码以及提示信息
    res.status(404).send('当前访问的页面是不存在的')
})

// 监听端口
app.listen(3000);
console.log('网站服务器启动成功');

3. Express请求处理

3.1 构建模块化路由

//路由对象也会有get、post方法
// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();
// 创建路由对象
const home = express.Router();
// 为路由对象匹配请求路径
app.use('/home', home);
// 创建二级路由
home.get('/index', (req, res) => {
    res.send('欢迎来到博客首页页面')
})

// 端口监听
app.listen(3000);

把二级路由抽离出来模块化,然后再app.js中引入

//home.js
const express = require("express");
const home = express.Router();
home.get('/index', (req, res) => {
  res.send('欢迎来到博客首页页面')
});
module.exports = home;
//admin.js
const express = require("express");
const admin = express.Router();
admin.get('/index', (req, res) => {
  res.send('欢迎来到博客管理页面')
});
module.exports = admin;
// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();
const home = require('./route/home');
const admin = require('./route/admin');
app.use('/home', home);
app.use('/admin', admin);

// 端口监听
app.listen(3000);

3.2 GET参数的获取

不再引用url模块通过对请求地址进行解析来获取请求参数,直接req.query即可获取,框架内部会将GET参数转换为对象并返回

// 引入express框架
const express = require('express');
// 创建网站服务器
const app = express();

app.get('/index', (req, res) => {
    // 获取get请求参数
    res.send(req.query)
})

// 端口监听
app.listen(3000);

3.3 POST参数的获取

Express中接收post请求参数需要借助第三方包 body-parser。

//10.如何获取post请求参数.js
const express = require("express");
// 引入body-parser模块
const bodyParser = require("body-parser");
const app = express();
//拦截所有请求
//extended:false 方法内部使用querystring模板处理请求参数的格式
//extended:true 方法内部使用第三方模块qs处理请求参数的格式
// 配置body-parser模块
app.use(bodyParser.urlencoded({
  extended: false
}));
// 接收请求
app.post("/add", (req, res) => {
  //接受post请求参数
  res.send(req.body);
});
// 监听端口
app.listen(3000);
 <form action="http:localhost:3000/add" method='post'>
    <input type="text" name='username'>
    <input type="text" name='password'>
    <input type="submit" name=''>
  </form>

疑问:app.use方法需要传递一个请求处理函数进去,但是现在为什么传递了一个方法的调用呢?

实际上调用的这个方法,它的返回值也是一个函数,这个返回的函数正好作为了app.use() 的参数。
这样写的好处就是调用fn函数的同时向fn函数内部传递一些额外的参数,在请求处理函数内部可以根据参数改变请求处理函数的行为

// 引入express框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();
//拦截所有请求。把fn函数的调用写在use的里面,如果为1打印请求地址
app.use(fn ({a: 2}))
function fn (obj) {
    return function (req, res, next) {
        if (obj.a == 1) {
            console.log(req.url)
        }else {
            console.log(req.method)
        }
        next()
    }
}

app.get('/', (req, res) => {
    // 接收post请求参数
    res.send('ok')
})

// 端口监听
app.listen(3000);

3.4 Express路由参数

//传递和接受get参数还有另外一种方式,路由参数
//req.params获取请求参数

// 引入express框架
const express = require('express');
const bodyParser = require('body-parser');
// 创建网站服务器
const app = express();

app.get('/index/:id/:name/:age', (req, res) => {
// 接收get请求参数
res.send(req.params)
})

// 端口监听
app.listen(3000);

 

3.5 静态资源的处理

内置的express.static可以方便地托管静态文件,例如img、CSS、JavaScript 文件等。

//通过express内置的express.static可以托管静态文件,例如img/css/js文件等
//方法内部会判断客户端发来的请求是否是静态资源请求,如果是直接响应给客户端,终止当前请求
const express = require('express');
const path = require('path');
const app = express();

// 实现静态资源访问功能
//app.use(express.static(path.join(__dirname, 'public')))
//为静态资源的目录文件指定一个虚拟路径
app.use('/static',express.static(path.join(__dirname, 'public')))

// 端口监听
app.listen(3000);

4. express-art-template模板引擎

4.1 模板引擎

为了使art-template模板引擎能够更好的和Express框架配合,模板引擎官方在原art-template模板引擎的基础上封装了express-art-template。

npm install art-template express-art-template
//14.模板引擎.js
const express = require('express');
const path = require('path');
const app = express();

// 1.告诉express框架使用什么模板引擎渲染什么后缀的模板文件 
//app.engine('模板后缀', require('使用的模板引擎'))
app.engine('art', require('express-art-template'))
// 2.设置模板存放目录
//app.set('views为固定参数,express框架的配置项名字,告诉模板存放的位置',绝对路径 views模板文件夹)
app.set('views', path.join(__dirname, 'views'))
// 3.渲染模板时不写后缀 默认拼接art后缀
app.set('view engine', 'art');

app.get('/index', (req, res) => {
  //render功能:
  // 1. 拼接模板路径
  // 2. 拼接模板后缀
  // 3. '模板名称',{key:value}
  // 4. 将拼接结果响应给了客户端
  res.render('index.art', {
    msg: 'message page'
  })
});

app.get('/list', (req, res) => {
  res.render('list', {
    msg: 'list page'
  })
})

// 端口监听
app.listen(3000);

4.2 express模块中的req,res参数的常用属性方法

const express = require('express'); 
const router = express.Router()
router.get('/',(req,res)=>{
    // Request
    // req.baseUrl 基础路由地址
    // req.body post发送的数据解析出来的对象
    // req.cookies 客户端发送的cookies数据
    // req.hostname 主机地址 去掉端口号
    // req.ip 查看客户端的ip地址
    // req.ips 代理的IP地址
    // req.originalUrl 对req.url的一个备份
    // req.params 在使用/:id/:name 匹配params
    // req.path 包含请求URL的路径部分
    // req.protocol http 或https协议
    // req.query 查询字符串解析出来的对象 username=zhangsan&password=123 { username:zhangsan }
    // req.route 当前匹配的路由 正则表达式
    // req.params 获取路由匹配的参数
    // req.get 获取请求header里的参数
    // req.is 判断请求的是什么类型的文件
    // req.param(key名称) 用来获取某一个路由匹配的参数
 
 
    //Response
    // res.headersSent 查看http响应是否响应了http头
    // res.append(名称,value) 追加http响应头
    // res.attachment(文件路径) 响应文件请求 
    // res.cookie() 设置cookie
    
    //res.setHeader('Content-Type','text/html;charset=utf8')
    // res.append('Content-Type','text/html;charset=utf8')
    // res.append('hehe','1008')
    // res.append('haha','1008')
    // res.attachment('./xx.zip') //Content-Disposition: attachment; filename="xx.zip"
    // res.clearCookie(cookiename) 删除cookie
    // res.cookie('zhangsan','lisi') 设置cookie
    // res.cookie('zhangsan1','lisi2',{
    //     maxAge:900000,
    //     httpOnly:true,
    //     path: '/admin', 
    //     secure: true,
    //     signed:true
    // })
    // res.clearCookie('zhangsan')
 
    // res.download(文件的path路径) 跟attachment类似 用来处理文件下载的 参数是文件地址
    // res.end http模块自带的
    // res.format()协商请求文件类型 format匹配协商的文件类型
    // res.format({
    //     'text/plain': function(){
    //         res.send('hey');
    //     },
        
    //     'text/html': function(){
    //         res.send('<p>hey</p>');
    //     },
        
    //     'application/json': function(){
    //         res.send({ message: 'hey' });
    //     },
        
    //     'default': function() {
    //         // log the request and respond with 406
    //         res.status(406).send('Not Acceptable');
    //     }
    // });
 
    // res.get('key') 获取响应header数据
    // res.json() 返回json数据 会自动设置响应header Content-type 为json格式 application/json
 
    // res.json({
    //     xx:100
    // })
 
    // res.json({
    //     xx:100
    // })
 
    // jsonp 利用的就是浏览器加载其他服务器的文件不会存在跨域问题
    // ajax请求就会有跨域问题
 
    // res.setHeader('Content-Type','text/javascript;charsert=utf8')
    // res.end(`typeof ${req.query.callback} == 'function' ? ${req.query.callback}({aa:100}):null`)
 
    // res.jsonp({aaa:100})
 
 
    // 重定向 把访问的地址跳转到另一个地址上
    // res.redirect(301,'/api/aes')
 
    // express jade
    // res.render('index',{title:"hehe",test:"23"})
    // res.send('') 发送数据 可以是任意类型的数据
    // res.sendFile() 发送文件的 
    // res.sendStatus(200) 设置发送时的状态码
    // res.set('Content-Type', 'text/plain') //设置响应header
    // res.status(200) // 设置状态码
    // res.type('') // 直接设置响应的文件类型
 
    // res.type('pdf')
 
    // res.send({aa:100})
    // res.end('ok')
    // res.end({aa:100})
 
    // res.end('你好')
 
 
    // res.end(req.get('Accept-Language'))
    // res.json({
    //     is:req.is('text/html')
    // })
 
    // res.json({
    //     type:req.baseUrl,
    //     hostname:req.hostname,
    //     // ip:req.ip,
    //     // ips:req.ips,
    //     // route:req.route,
    //     ct:req.get('Accept'),
    //     cs:'22'
    // })
})
 
router.get('/:id/:date',(req,res)=>{
    console.log(req.params)
    // res.json(req.params)
    res.end(req.param('date'))
})
 
router.get('/aes',(req,res)=>{
    res.json({
        type:req.baseUrl
    })
})
module.exports = router

 

参考:https://blog.csdn.net/weixin_40581714/article/details/111591005

 

有关node前后端交互(Express)的更多相关文章

  1. ruby-on-rails - 如何在 ruby​​ 交互式 shell 中有多行? - 2

    这可能是个愚蠢的问题。但是,我是一个新手......你怎么能在交互式ruby​​shell中有多行代码?好像你只能有一条长线。按回车键运行代码。无论如何我可以在不运行代码的情况下跳到下一行吗?再次抱歉,如果这是一个愚蠢的问题。谢谢。 最佳答案 这是一个例子:2.1.2:053>a=1=>12.1.2:054>b=2=>22.1.2:055>a+b=>32.1.2:056>ifa>b#Thecode‘if..."startsthedefinitionoftheconditionalstatement.2.1.2:057?>puts"f

  2. ruby - 在 ruby​​ 中的字符串前后添加空格? - 2

    我想在随机字符串前后添加一个空格。我试过使用"Random_string".center(1,"")但它不起作用。谢谢 最佳答案 我发现这是最优雅的解决方案:padded_string="#{random_string}"走简单的路没有错。 关于ruby-在ruby​​中的字符串前后添加空格?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/3357897/

  3. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库,其中大部分是用JavaScript(Node.js)编写的,一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread,目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标,所以maketest在每

  4. ruby-on-rails - ruby open ssl api for encrypted key (without nodes option) - 2

    在安装了openssllib的linux机器上,当您执行带有“-nodes”选项的“opensslpkcs12”时,您将获得带有未加密私钥的输出,但如果您跳过–nodes选项,则输出将具有加密的私钥。e.g.opensslpkcs12-intest.pfx-outtest.pem你应该看到像下面这样加密的私钥-----BEGINENCRYPTEDPRIVATEKEY-----MIIFDjBABgkqhkiGG7s=-----ENDENCRYPTEDPRIVATEKEY-----如何使用ruby​​的开放ssl库实现上述目标?这就是我用ruby​​生成私钥的方式:@private_key

  5. node.js - 从未编写过任何自动化测试,我应该如何开始行为驱动开发? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭9年前。多年来,我一直在使用多种语言进行编程,并且认为自己总体上相当擅长。但是,我从未编写过任何自动化测试:没有单元测试,没有TDD,没有BDD,什么都没有。我已经尝试开始为我的项目编写适当的测试套件。我可以看到在进行任何更改后能够自动测试项目中所有代码的理论值(value)。我可以看到像RSpec和Mocha这样的测试框架应该如何使设置和运行所述测试变得相当容易

  6. ruby - 如何在子类中的方法前后运行代码? - 2

    我的第一个想法是这样的:classAbstractBuilderattr_reader:time_takendefbuild_with_timerstarted_at=Time.nowbuild@time_taken=Time.now-started_atenddefbuildraise'Implementthismethodinasubclass'endendclassMyBuilder我怀疑有更好的方法可以提供更好的灵active,例如理想情况下,我想在MyBuilder的实例上调用“build”而不是“build_with_timer”,并且始终记录执行时间。我确实考虑过使用al

  7. node.js - 如何比较图像并确定哪个内容更多? - 2

    目标:我想从动画GIF中抓取最佳帧并将其用作静态预览图像。我相信最好的帧是显示最多内容的帧-不一定是第一帧或最后一帧。以这张动图为例:--这是第一帧:--这是第28帧:很明显,第28帧很好地代表了整个GIF。我如何以编程方式确定一帧是否比另一帧具有更多像素/内容?如果您能向我指出任何想法、想法、包/模块或文章,我们将不胜感激。 最佳答案 实现此目的的一种直接方法是估计entropy每个图像的帧,并选择具有最大熵的帧。在信息论中,熵可以被认为是图像的“随机性”。单一颜色的图像是非常可预测的,分布越平坦,越随机。这与Arthur-R描述

  8. ruby - 如何与 Ruby 中的 Perl 程序交互? - 2

    据我了解,在Ruby和Perl之间没有“桥梁”可以让您直接从Ruby调用Perl函数。据我了解,要从Ruby调用Perl程序,只需将其放在反引号中(即result=`./helloWorld.pl`)。但是,这不允许与Perl程序交互(即您不能与提示交互或提供输入)。我的问题如下:有没有什么方法可以从Ruby向Perl程序提供输入(除了参数)?Ruby和Perl之间没有桥梁,我错了吗?在导航提示时与程序的标准输入交互似乎是错误的方式,我正在处理的程序设计良好,并且具有包含适当Perl函数的库。 最佳答案 有Inline::Ruby模

  9. ruby - IRb:如何使用预加载类启动交互式 ruby​​ session - 2

    在我采用Ruby语言的过程中,我花了很多时间在IRb中。太棒了!但是,由于我不是很清楚它的功能,并且对Ruby仍然是个“笨蛋”,所以我想知道以下内容:如何在不重新启动IRb的情况下“刷新”session(或者这是不可能的)。如何配置IRb加载一堆源文件“hello.rb”和“hello_objects.rb”,即在启动时?我在这些方面投入了大量工作,如果知道加载这些类的速记,而无需再次为每个类手动键入“加载”,那就太好了。 最佳答案 我不确定是否可以“刷新”session。但是,您可以像这样加载您的类:irb-r'hello.rb'

  10. ruby - 通过 node-sass 的 Symfony assetic sass 过滤器? - 2

    我在让asseticsass过滤器与node-sass而不是ruby​​替代品一起工作时遇到了一些困难。我的config.yml文件中有以下配置:assetic:debug:"%kernel.debug%"use_controller:falsebundles:[]write-to:"%kernel.root_dir%/../web/assets"read_from:"%kernel.root_dir%/../web/assets"node:"%%PROGRAMFILES%%\nodejs\\node.exe"node_paths:["%%USERPROFILE%%\\AppData\

随机推荐