Node.js基础入门第八天

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

经过前面七天的学习,对Node.js开发已经有了一个初步的认识,今天继续学习Node.js在web开发参数传递相关内容,仅供学习分享使用,如有不足之处,还请指正。

参数传递方式

在Node.js中,参数传递常见的共两种方式:

  1. GET方式:通过地址栏键=值的方式进行传递。
  2. POST方式:通过表单的方式传递请求数据。

GET方式

GET方式通常是在请求地址中以【?参数1=值1&参数2=值2】的格式进行传递,在Node.js中可以通过获取url然后进行获取参数,如下所示:

1. //1.引入http模块
2. var http  = require('http');
3. //2.创建服务
4. var server = http.createServer();
5. //3. 监听请求事件,当有请求时,触发回调函数
6. server.on('request',function(req,res){
7.     res.writeHead(200,{"content-type":"text/html;charset=utf-8"});
8. var url = req.url;
9. if(url.indexOf('?')>0){
10.         params = url.split('?')[1];
11.         paramArray = params.split('&');
12.         res.write("<h3>请求的参数为:</h3>");
13. for(var index in paramArray){
14.             res.write(paramArray[index])
15.             res.write("<br />");
16.         }
17.     }
18.     res.end();
19. });
20. 
21. //4. 监听8080端口
22. server.listen(8080,function(){
23. console.log("server is running");
24. });

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

POST方式

目前一般采用form表单的方式传递POST数据。在Node.js中,POST传递的数据在请求体中。

首先创建一个reg.html静态html页面,然后提交数据到action.html,具体如下所示:

1. //1.引入http模块
2. var http  = require('http');
3. var fs = require('fs');
4. var path = require('path');
5. //2.创建服务
6. var server = http.createServer();
7. var extnames = {".html":"text/html",".css":"text/css",".png":"image/png"};
8. //3. 监听请求事件,当有请求时,触发回调函数
9. server.on('request',function(req,res){
10. var url=req.url;
11. if(url==="/"){
12.         url="/index.html";
13.     }
14. var localPath = './www'+url;
15. var extname = path.extname(localPath);
16.     res.writeHead(200,{"content-type":""+extnames[extname]+";charset=utf-8"});
17. if(url==="/action.html"){
18. //从请求主体中获取POST方式传输的数据
19. var params='';
20.         req.on('data',function(data){
21.             params += data.toString();
22.         });
23. //监听结束事件
24.         req.on('end',function(){
25.             res.write("<h3>后台已经收到请求:</h3>");
26.             res.write(params);
27.             res.end();
28. 
29.         });
30. return;
31.     }
32. 
33. console.log(localPath);
34. if(extname===".ico"){
35.         res.end();
36.     }else{
37.         fs.readFile(localPath,function(err,data){
38.             res.write(data);
39.             res.end();
40.         });
41.     }
42. });
43. 
44. //4. 监听8080端口
45. server.listen(8080,function(){
46. console.log("server is running");
47. });

运行服务,然后在浏览器输入网址,如下所示:

注意:可以看出,GET方式和POST方式的参数结构都是一样的,只是GET通过URL,POST通过请求主体。

动态网页

在之前的示例中,所有的html页面都是静态页面,不会随着用户请求的变化而变化。那如何动态的变更网页呢?答案是采用模板。

首先创建一个html页面,并在页面中定义一个变量。如下所示:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>这是首页</title>
6. <link type="text/css" href="css/index.css" />
7. </head>
8. <body>
9. <h3>这是首页</h3>
10. <h3>你的访问IP为:</h3>
11. <h3><%=ipAddr%></h3>
12. </body>
13. </html>

然后在Node.js后端程序中,动态获取变量的值,并进行替换,如下所示:

1. var http  = require('http');
2. var fs = require('fs');
3. var path = require('path');
4. //2.创建服务
5. var server = http.createServer();
6. var extnames = {".html":"text/html",".css":"text/css",".png":"image/png"};
7. //3. 监听请求事件,当有请求时,触发回调函数
8. server.on('request',function(req,res){
9. var url=req.url;
10. if(url==="/"){
11.         url="/index.html";
12.     }
13. var localPath = './www'+url;
14. var extname = path.extname(localPath);
15.     res.writeHead(200,{"content-type":""+extnames[extname]+";charset=utf-8"});
16. console.log(localPath);
17. if(extname===".ico"){
18.         res.end();
19.     }else{
20.         fs.readFile(localPath,function(err,data){
21. var ip = req.socket.remoteAddress;
22. var content  = render(data.toString(),'<%=ipAddr%>',ip);
23.             res.write(content);
24.             res.end();
25.         });
26.     }
27. });
28. 
29. //4. 监听8080端口
30. server.listen(8080,function(){
31. console.log("server is running");
32. });
33. 
34. function render(html,name,value){
35. return html.replace(name,value);
36. }

运行示例,在浏览器中输入http://http://127.0.0.1:8080/,如下所示:

注意:IP为客户端IP,随着访问的客户端电脑而改变。

以上示例都是Node.js的原生开发方式,存在诸多不便,后面将通过引入框架来提高开发的效率。

备注

梁州故人【作者】韦应物 【朝代】唐

江汉曾为客,相逢每醉还。

浮云一别后,流水十年间。

欢笑情如旧,萧疏鬓已斑。

何因不归去,淮上有秋山。

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

热门文章

最新文章