前端技术前沿7

落日映苍穹つ 2021-09-19 13:36 441阅读 0赞
  1. //加载一个http模块
  2. var http = require('http');
  3. //creatServer来创建WEB服务器名为server
  4. var server= http.createServer(function(req,res){//函数的两个参数分别为req和res,作用分别是请求和响应
  5. res.writeHead(200,{'content-Type':'text/pain'});//返回的请求头上写状态码是200,返回的文本内容的类型是纯文本
  6. res.end('Hellow Nodejs\n');
  7. });
  8. server.listen(1337, '127.0.0.1');//listen在1337端口监听请求,服务器就可以收到任何来自端口的请求
  9. console.log('Server running at http://127.0.0.1:1337/');
  10. var http = require("http");
  11. http.crateServer(function(request, response) {
  12. response.writeHead(200, {"Content-Type": "text/plain"});
  13. response.write("Hello World");
  14. response.end();
  15. }).listen(8888);
  16. var http = require("http");
  17. function onRequest(request, response) {
  18. response.writeHead(200, {"Content-Type": "text/plain"});
  19. response.write("Hello World");
  20. response.end();
  21. }
  22. http.createServer(onRequest).listen(8888);
  23. //加载一个http模块
  24. var http = require('http');
  25. //creatServer来创建WEB服务器名为server
  26. var server= http.createServer(function(req,res){//函数的两个参数分别为req和res,作用分别是请求和响应
  27. res.writeHead(200,{'content-Type':'text/pain'});//返回的请求头上写状态码是200,返回的文本内容的类型是纯文本
  28. res.end('Hellow Nodejs\n');
  29. });
  30. server.listen(1337, '127.0.0.1');//listen在1337端口监听请求,服务器就可以收到任何来自端口的请求
  31. console.log('Server running at http://127.0.0.1:1337/');

服务器是如何处理请求的

使用response.writeHead()函数发送一个HTTP状态200和HTTP头的内容类型content-type,使用response.write()函数在HTTP相应主体中发送文本。

调用response.end()完成响应

  1. var http = require("http");
  2. http.createServer(...);

请求服务器模块的脚本仅仅需要启动服务器而已。

  1. var http = require("http");
  2. function start() {
  3. function onRequest(request, response) {
  4. console.log("Request received");
  5. response.writeHead(200, {"Context-Type": "text/plain"});
  6. response.write("Hello World");
  7. response.end();
  8. }
  9. http.createServer(onRequest).listen(8888);
  10. console.log("Server has started");
  11. }
  12. exports.start = start;
  13. var server = require("./server");
  14. server.start();

路由选择
onRequest()回调函数的第一个参数传递
url和 querystring模块

image.png

  1. var http = require("http");
  2. var url = require("url");
  3. function start() {
  4. function onRequest(request, response) {
  5. var pathname = url.parse(request.url).pathname;
  6. console.log("Request for " + pathname + " received.");
  7. response.writeHead(200, {"Content-Type": "text/plain"});
  8. response.write("Hello World");
  9. response.end();
  10. }
  11. http.createServer(onRequest).listen(8888);
  12. console.log("Server has started.");
  13. }
  14. exports.start = start;
  15. function route(pathname) {
  16. console.log("About to route a request for " + pathname);
  17. }
  18. exports.route = route;

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

requestHandler.js修改
image.png

  1. function start(response) {
  2. console.log("Request handler 'start' was called.");
  3. var body = '<html>'+
  4. '<head>'+
  5. '<meta http-equiv="Content-Type" content="text/html; '+
  6. 'charset=UTF-8" />'+
  7. '</head>'+
  8. '<body>'+
  9. '<form action="/upload" method="post">'+
  10. '<textarea name="text" rows="20" cols="60"></textarea>'+
  11. '<input type="submit" value="Submit text" />'+
  12. '</form>'+
  13. '</body>'+
  14. '</html>';
  15. response.writeHead(200, {"Content-Type": "text/html"});
  16. response.write(body);
  17. response.end();
  18. }
  19. function upload(response) {
  20. console.log("Request handler 'upload' was called.");
  21. response.writeHead(200, {"Content-Type": "text/plain"});
  22. response.write("Hello Upload");
  23. response.end();
  24. }
  25. exports.start = start;
  26. exports.upload = upload;
  27. 如下所示:
  28. request.addListener("data", function(chunk) {
  29. // called when a new chunk of data was received
  30. });
  31. request.addListener("end", function() {
  32. // called when all chunks of data have been received
  33. });
  34. 先从 server.js开始:
  35. var http = require("http");
  36. var url = require("url");
  37. function start(route, handle) {
  38. function onRequest(request, response) {
  39. var postData = "";
  40. var pathname = url.parse(request.url).pathname;
  41. console.log("Request for " + pathname + " received.");
  42. request.setEncoding("utf8");
  43. request.addListener("data", function(postDataChunk) {
  44. postData += postDataChunk;
  45. console.log("Received POST data chunk '"+
  46. postDataChunk + "'.");
  47. });
  48. request.addListener("end", function() {
  49. route(handle, pathname, response, postData);
  50. });
  51. }
  52. http.createServer(onRequest).listen(8888);
  53. console.log("Server has started.");
  54. }
  55. exports.start = start;
  56. function route(handle, pathname, response, postData) {
  57. console.log("About to route a request for " + pathname);
  58. if (typeof handle[pathname] === 'function') {
  59. handle[pathname](response, postData);
  60. } else {
  61. console.log("No request handler found for " + pathname);
  62. response.writeHead(404, {"Content-Type": "text/plain"});
  63. response.write("404 Not found");
  64. response.end();
  65. }
  66. }
  67. exports.route = route;

在 requestHandlers.js中,我们将数据包含在对 upload请求的响应中:

  1. function start(response, postData) {
  2. console.log("Request handler 'start' was called.");
  3. var body = '<html>'+
  4. '<head>'+
  5. '<meta http-equiv="Content-Type" content="text/html; '+
  6. 'charset=UTF-8" />'+
  7. '</head>'+
  8. '<body>'+
  9. '<form action="/upload" method="post">'+
  10. '<textarea name="text" rows="20" cols="60"></textarea>'+
  11. '<input type="submit" value="Submit text" />'+
  12. '</form>'+
  13. '</body>'+
  14. '</html>';
  15. response.writeHead(200, {"Content-Type": "text/html"});
  16. response.write(body);
  17. response.end();
  18. }
  19. function upload(response, postData) {
  20. console.log("Request handler 'upload' was called.");
  21. response.writeHead(200, {"Content-Type": "text/plain"});
  22. response.write("You've sent: " + postData);
  23. response.end();
  24. }
  25. exports.start = start;
  26. exports.upload = upload;

querystring模块来实现:

  1. var querystring = require("querystring");
  2. function start(response, postData) {
  3. console.log("Request handler 'start' was called.");
  4. 构建应用的模块 33
  5. var body = '<html>'+
  6. '<head>'+
  7. '<meta http-equiv="Content-Type" content="text/html; '+
  8. 'charset=UTF-8" />'+
  9. '</head>'+
  10. '<body>'+
  11. '<form action="/upload" method="post">'+
  12. '<textarea name="text" rows="20" cols="60"></textarea>'+
  13. '<input type="submit" value="Submit text" />'+
  14. '</form>'+
  15. '</body>'+
  16. '</html>';
  17. response.writeHead(200, {"Content-Type": "text/html"});
  18. response.write(body);
  19. response.end();
  20. }
  21. function upload(response, postData) {
  22. console.log("Request handler 'upload' was called.");
  23. response.writeHead(200, {"Content-Type": "text/plain"});
  24. response.write("You've sent the text: "+
  25. querystring.parse(postData).text);
  26. response.end();
  27. }
  28. exports.start = start;
  29. exports.upload = upload;

处理文件上传

image.png

  1. node-formidable 官方的例子展示了这两部分是如何融合在一起工作的:
  2. var formidable = require('formidable'),
  3. http = require('http'),
  4. sys = require('sys');
  5. http.createServer(function(req, res) {
  6. if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
  7. // parse a file upload
  8. var form = new formidable.IncomingForm();
  9. form.parse(req, function(err, fields, files) {
  10. res.writeHead(200, {'content-type': 'text/plain'});
  11. res.write('received upload:\n\n');
  12. res.end(sys.inspect({fields: fields, files: files}));
  13. });
  14. return;
  15. }
  16. // show a file upload form
  17. res.writeHead(200, {'content-type': 'text/html'});
  18. res.end(
  19. '<form action="/upload" enctype="multipart/form-data" '+
  20. 'method="post">'+
  21. '<input type="text" name="title"><br>'+
  22. '<input type="file" name="upload" multiple="multiple"><br>'+
  23. '<input type="submit" value="Upload">'+
  24. '</form>'
  25. );
  26. }).listen(8888);

image.png


请点赞!因为你的鼓励是我写作的最大动力!

官方微信公众号

吹逼交流群:711613774

吹逼交流群

发表评论

表情:
评论列表 (有 0 条评论,441人围观)

还没有评论,来说两句吧...

相关阅读

    相关 前端技术前沿10

    允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NP