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的原生开发方式,存在诸多不便,后面将通过引入框架来提高开发的效率。

备注

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

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

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

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

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

相关文章
|
19天前
|
JavaScript 前端开发 C语言
javascript基础入门
javascript基础入门
27 1
|
19天前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
32 0
|
19天前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
89 0
|
19天前
|
存储 JavaScript 前端开发
【JavaScript技术专栏】JavaScript基础入门:变量、数据类型与运算符
【4月更文挑战第30天】本文介绍了JavaScript的基础知识,包括变量(var、let、const)、数据类型(Number、String、Boolean、Undefined、Null及Object、Array)和运算符(算术、赋值、比较、逻辑)。通过实例展示了如何声明变量、操作数据类型以及使用运算符执行数学和逻辑运算。了解这些基础知识对初学者至关重要,是进阶学习JavaScript的关键。
|
11天前
|
JavaScript
学习Node.js入门范例
然后,cmd中运行命令node E:/Test/server.js
15 2
|
12天前
|
IDE JavaScript 开发工具
Auto.js 开发入门
Auto.js 开发入门
|
17天前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
17天前
|
JavaScript 前端开发 程序员
web前端入门到实战:32道常见的js面试题(1),面试哪些
web前端入门到实战:32道常见的js面试题(1),面试哪些
|
17天前
|
JavaScript 前端开发 程序员
javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍
javascript基础(入门),当上项目经理才知道,推荐程序员面试秘籍
|
19天前
|
缓存 前端开发 搜索推荐
服务端渲染(SSR)与静态网站生成(SSG):Next.js入门
服务端渲染(SSR)与静态网站生成(SSG):Next.js入门
37 0