Node.js基础入门第十天

简介: Node.js基础入门第十天

经过前面九天的学习,对Node.js开发有了一个初步的认识,今天继续学习Node.js后端开发框架Express相关内容,仅供学习分享使用,如有不足之处,还请指正。

响应对象(res)

1. 什么是响应对象?

响应对象(res)是指服务器端向客户端响应数据的对象,包含了所有要响应的内容。Express的响应对象是对Node.js原始响应对象的封装。

2. 响应对象常见方法

响应对象的常见方法,如下所示:

  1. res.send(data)方法,用于向客户端返回任意类型的数据。但是不能直接返回数字,否则会被当成状态码,如果一定要返回,则需要加引号。
  2. res.json()方法,向客户端返回json数据,且会设置返回的Header为的application/json。
  3. res.render()方法,渲染模板,用于将数据填充到模块中。
  4. res.redirect()方法,实现服务端跳转。
  5. res.cookie(),设置cookie。
  6. res.set(),设置响应头

3. res.send方法

返回Json格式的数据,如下所示:

router.get('/', function(req, res, next) {
    var data={"name":"小六公子","age":29};
    res.send(data);
});

在浏览器中打开如下所示:

如果要单独返回一个数字,需要加引号,转换成字符串,否则会被当成状态码,如下所示:

router.get('/', function(req, res, next) {
    //res.send(10);//错误
    res.send("10");//正确
});

返回错误示例,截图如下所示:

注意:res.send方法,在一个请求内,是能生效一次,如果连续写多个,则会丢失且报错。如下所示:

router.get('/', function(req, res, next) {
    res.send("123");
    res.send("456");//此内容不会输出,且后台会报错
});

在浏览器打开及后台错误,如下所示:

针对这种需要需要发送多次数据的情况,可以先将数据进行拼接组装,再统一发送。

4. res.json方法

Express提供了专门的返回json数据的方法,在返回响应数据时,同时设置响应头。如下所示:

router.get('/', function(req, res, next) {
    var data={"name":"小六公子","age":29};
    res.json(data);
});

在浏览器中打开如下所示:

5.  res.render方法

用户读取模板,并渲染数据到模板中,然后再发送到客户端。如下所示:

index.ejs模块文件如下所示:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>Welcome to <%= title %></p>
    <p>I am <%= name %></p>
  </body>
</html>

渲染如下所示:

router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' ,name:"小六公子"});
});

在浏览器中运行,如下所示:

6. res.redirect方法

此方法可以实现页面的后端直接跳转,且没有任何提示,如下所示:

router.get('/', function(req, res, next) {
    res.redirect("https://www.baidu.com");//跳转
});

注意:页面跳转后,浏览器中的网址也会变成跳转后的新网址。

7. 链式调用

响应对象的方法可以链式调用,如下所示:

router.get('/', function(req, res, next) {
    res.status(200).send("小六呀");//先设置状态码,再输出内容
});

请求对象(req)

请求对象包含了一次请求中的所有数据(如:请求头,请求体等)。

1. 获取GET方式参数

在Express中,获取GET方式传递的参数非常简便,如下所示:

router.get('/', function(req, res, next) {
    //请求格式:req.query.参数名
    var name = req.query.name;
    var age = req.query.age;
    res.send("姓名:"+name+",年龄:"+age);
});

在命令行中运行程序,并在浏览器中打开,如下所示:

2. 获取POST方式参数

POST方式通过【req.body.参数名】 的方式进行获取。POST方式一般采用form表单的方式实现。

创建一个静态网页login.html,如下所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>登录</title>
    </head>
    <body>
        <form method="post" action="/login.html">
            姓名:<input type="text" name="name" /> <br />
            年龄:<input type="text" name="age" /> <br />
            <input type="submit" value="登录" />
        </form>
    </body>
</html>

在路由文件中,获取参数,并进行返回,如下所示:

router.post('/login.html',function(req,res,next){
    var name = req.body.name;
    var age = req.body.age;
    res.send("【POST方式】姓名:"+name+",年龄:"+age);
});

在浏览器中打开,如下所示:

注意:第一次打开form表单是GET方式,第二次响应是POST方式,所以在路由中设置的POST方式响应页面。在控制台窗口日志如下所示:

3. 参数匹配模式

地址栏中的参数还可以通过参数匹配的方式进行获取。匹配地址通过【冒号参数名】的方式,然后通过【req.params.参数名】进行获取。如下所示:

router.get('/list/:id/:name', function(req, res, next) {
    var id = req.params.id;
    var name = req.params.name;
    res.send("传递的参数为id:"+id+",name:"+name);
});

然后在浏览器打开,如下所示:

中间件

Express是一个自身功能极简,完全是由路由和中间件构成的一个web开发框架,从本质上来说,一个Express的应用就是在调用各种中间件。

在Node.js中,中间件本质是一个函数,它可以访问请求对象,响应对象和next尾函数。如果当前中间件没有终结请求-响应循环,则必须调用next方法将控制权交给下一个中间件,否则请求会挂起。

如404时,调用创建错误方法,如下所示:

app.use(function(req, res, next) {
  next(createError(404));
});

备注

走马川行奉送出师西征 / 走马川行奉送封大夫出师西征

【作者】岑参 【朝代】唐

君不见走马川行雪海边,平沙莽莽黄入天。

轮台九月风夜吼,一川碎石大如斗,随风满地石乱走。

匈奴草黄马正肥,金山西见烟尘飞,汉家大将西出师。

将军金甲夜不脱,半夜军行戈相拨,风头如刀面如割。

马毛带雪汗气蒸,五花连钱旋作冰,幕中草檄砚水凝。

虏骑闻之应胆慑,料知短兵不敢接,车师西门伫献捷。

相关文章
|
1月前
|
前端开发 机器人 API
前端大模型入门(一):用 js+langchain 构建基于 LLM 的应用
本文介绍了大语言模型(LLM)的HTTP API流式调用机制及其在前端的实现方法。通过流式调用,服务器可以逐步发送生成的文本内容,前端则实时处理并展示这些数据块,从而提升用户体验和实时性。文章详细讲解了如何使用`fetch`发起流式请求、处理响应流数据、逐步更新界面、处理中断和错误,以及优化用户交互。流式调用特别适用于聊天机器人、搜索建议等应用场景,能够显著减少用户的等待时间,增强交互性。
251 2
|
12天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
12天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
19 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
21天前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
55 10
|
18天前
|
数据采集 存储 JavaScript
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
本文介绍了如何使用Puppeteer和Node.js爬取大学招生数据,并通过代理IP提升爬取的稳定性和效率。Puppeteer作为一个强大的Node.js库,能够模拟真实浏览器访问,支持JavaScript渲染,适合复杂的爬取任务。文章详细讲解了安装Puppeteer、配置代理IP、实现爬虫代码的步骤,并提供了代码示例。此外,还给出了注意事项和优化建议,帮助读者高效地抓取和分析招生数据。
如何使用Puppeteer和Node.js爬取大学招生数据:入门指南
|
2月前
|
JavaScript 前端开发 小程序
一小时入门Vue.js前端开发
本文是作者关于Vue.js前端开发的快速入门教程,包括结果展示、参考链接、注意事项以及常见问题的解决方法。文章提供了Vue.js的基础使用介绍,如何安装和使用cnpm,以及如何解决命令行中遇到的一些常见问题。
一小时入门Vue.js前端开发
|
1月前
|
存储 JavaScript 前端开发
前端开发:Vue.js入门与实战
【10月更文挑战第9天】前端开发:Vue.js入门与实战
|
1月前
|
自然语言处理 JavaScript 前端开发
JavaScript高级——ES6基础入门
JavaScript高级——ES6基础入门
22 1
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端大模型入门:Transformer.js 和 Xenova-引领浏览器端的机器学习变革
除了调用API接口使用Transformer技术,你是否想过在浏览器中运行大模型?Xenova团队推出的Transformer.js,基于JavaScript,让开发者能在浏览器中本地加载和执行预训练模型,无需依赖服务器。该库利用WebAssembly和WebGPU技术,大幅提升性能,尤其适合隐私保护、离线应用和低延迟交互场景。无论是NLP任务还是实时文本生成,Transformer.js都提供了强大支持,成为构建浏览器AI应用的核心工具。
430 1
|
1月前
|
Web App开发 JSON JavaScript
深入浅出:Node.js后端开发入门与实践
【10月更文挑战第4天】在这个数字信息爆炸的时代,了解如何构建一个高效、稳定的后端系统对于开发者来说至关重要。本文将引导你步入Node.js的世界,通过浅显易懂的语言和逐步深入的内容组织,让你不仅理解Node.js的基本概念,还能掌握如何使用它来构建一个简单的后端服务。从安装Node.js到实现一个“Hello World”程序,再到处理HTTP请求,文章将带你一步步走进Node.js的大门。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开一扇通往后端开发新世界的大门。