In the previous pre-class study, we learned about the connections and differences between different module specifications. In this section, we officially start learning node. First, we start by building an http server that can run simple programs.
1. hello world
The most classic hello world. First we create a server.js to save our code:
console.log( 'hello world' ); Enter node server.js in the terminal to run:
node server.jsThe terminal will output the words hello world. But our node server program always needs to be accessed on the browser. Here we need to use the http module that comes with node:
var http = require('http'); // 引入http模块// 创建http服务器// request : 从浏览器带来的请求信息// response : 从服务器返回给浏览器的信息http.createServer(function(request, response){
response.writeHead(200, {'content-type': 'text/plain'}); // 设置头部信息，输出text文本
response.write('hello world'); // 输出到页面中的信息
response.end(); // 返回结束}).listen(3000);console.log('server has started...');We enter node server.js in the terminal again to run. There will be output in the terminal server has started..., indicating that the server has been created and is running. Then we run on the browser Visit 127.0.0.1:3000, and you can see hello world output on the page.
2. form form
Just now we just output a simple text on the page, now we want to present a form on the page that allows users to enter information and submit:
// server.js
var http = require('http');
http.createServer(function(request, response){
var html = '<html>\ <head>\ <meta charset=UTF-8" />\ </head>\ <body>\ <form action="/" method="post">\ <p>username : <input type="text" name="username" /></p>\ <p>password : <input type="password" name="password" /></p>\ <p>age : <input type="text" name="age" /></p>\ <p><input type="submit" value="submit" name="submit" /></p>\ </form>\ </body>\ </html>';
response.writeHead(200, {'content-type': 'text/html'}); // 输出html头信息
response.write(html); // 将拼接的html字符串输出到页面中
response.end(); // 结束
}).listen(3000);
console.log('server has started...');Modify the content in server.js and re-run:
node server.jsAfter refreshing the page, we found that 3 text boxes and 1 submit button. Because our program only renders the page and does not do any other processing, submitting data in the page just refreshes the current page.
Note: Every time we modify any code in node, we must restart it.
2.1 Get the data submitted by the form GET method
We use the POST method in the above code, but here we need to discuss the data submitted using the GET method first. Let's not consider the security of the data first, but just learn how to obtain the form data submitted using the get method, change post to get, and run again.
We know that using the get method to submit data will pass the data as URL parameters, so we obtain the data by parsing the parameters in the URL. Here we use the url module Method:
// server.js
var http = require('http'),
url = require('url');
http.createServer(function(request, response){
var html = '<html>\ <head>\ <meta charset=UTF-8" />\ </head>\ <body>\ <form action="/" method="get">\ <p>username : <input type="text" name="username" /></p>\ <p>password : <input type="password" name="password" /></p>\ <p>age : <input type="text" name="age" /></p>\ <p><input type="submit" value="submit" name="submit" /></p>\ </form>\ </body>\ </html>';
var query = url.parse( request.url, true ).query;
if( query.submit ){
var data = '<p><a href="/">back</a></p>'+
'<p>username:'+query.username+'</p>'+
'<p>password:'+query.password+'</p>'+
'<p>age:'+query.age+'</p>';
response.writeHead(200, {'content-type': 'text/html'});
response.write(data);
}else{
response.writeHead(200, {'content-type': 'text/html'});
response.write(html);
}
response.end(); // 结束
}).listen(3000);
console.log('server has started...');After we run the submission again, the data will be displayed on the page.
url.parse is used to parse URL strings and return the parsed URL object. If we only output url.parse(request.url):
url.parse(request.url);
result:
Url {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: '?username=111113&password=123&age=122&submit=submit',
query: 'username=111113&password=123&age=122&submit=submit',
pathname: '/',
path: '/?username=111113&password=123&age=122&submit=submit',
href: '/?username=111113&password=123&age=122&submit=submit'
}If the second parameter is set to true, the query attribute in the returned result will be parsed into an object, and other attributes will remain unchanged; The default value is false, that is, the query attribute is a string:
url.parse(request.url, true);result:Url {
...
query: {
username: '111113',
password: '123',
age: '122',
submit: 'submit' },
...
}Therefore, we can use the following statement to determine whether there is submitted data and obtain the submitted data, and then output it to:
var query = url.parse( request.url, true ).query;
/*
{
username: '111113',
password: '123',
age: '122',
submit: 'submit'}
*/2.2 Get the data submitted by the form POST method
Now we use the post method to submit the data. Because POST requests are generally "heavy" (users may enter a large amount of content), if they are processed in a blocking manner, it will inevitably lead to blocking of user operations. Therefore, node splits the post data into many small data blocks, and then delivers these small data blocks through the data event (indicating that new small data blocks have arrived) and the end event (indicating that all data has been received). Therefore, our idea should be: obtain the data block in the data event and operate the data in the end event.
// server.js
var http = require('http'),
querystring = require('querystring');
http.createServer(function(request, response){
var html = '<html>\ <head>\ <meta charset=UTF-8" />\ </head>\ <body>\ <form action="/" method="post">\ <p>username : <input type="text" name="username" /></p>\ <p>password : <input type="password" name="password" /></p>\ <p>age : <input type="text" name="age" /></p>\ <p><input type="submit" value="submit" name="submit" /></p>\ </form>\ </body>\ </html>';
if( request.method.toLowerCase()=='post' ){
var postData = '';
request.addListener('data', function(chunk){
postData += chunk;
});
request.addListener('end', function(){
var data = querystring.parse(postData);
console.log( 'postData: '+postData );
console.log(data);
var s = '<p><a href="/">back</a></p>'+
'<p>username:'+data.username+'</p>'+
'<p>password:'+data.password+'</p>'+
'<p>age:'+data.age+'</p>';
response.writeHead(200, {'content-type': 'text/html'});
response.write(s);
response.end();
})
}else{
response.writeHead(200, {'content-type': 'text/html'});
response.write(html);
response.end();
}
}).listen(3000);
console.log('server has started...');The main changes between this code and the previous code project are:
No longer introduce the url module, use the import instead querystring module. Because we no longer operate the URL, there is no need to introduce it;
Use
request.method.toLowerCase()=='post'to determine whether the current There is data submission;The data is spliced in the data event and processed in the end event;
response.end ()is written inside theendevent. Because the end event is an asynchronous operation, it must be executed after the data output is completed.response.end()
We can see in the console that postData is a string like this:
'username=123&password=123&age=23&submit=submit';因此我们使用query.parse将postData解析为对象类型，以便获取提交过来的数据。
3. 路由
现在我们所有的逻辑都是在根目录下进行的，没有按照url区分，这里我们按照功能进行路由拆分。以上面的post请求为例，我们可以拆分为：页面初始化和form提交后的处理。
页面初始化：
// starter.js 页面初始化
function start(request, response){
var html = '<html>\ <head>\ <meta charset=UTF-8" />\ </head>\ <body>\ <form action="/show" method="post">\ <p>username : <input type="text" name="username" /></p>\ <p>password : <input type="password" name="password" /></p>\ <p>age : <input type="text" name="age" /></p>\ <p><input type="submit" value="submit" name="submit" /></p>\ </form>\ </body>\ </html>';
response.writeHead(200, {"Content-Type":"text/html"});
response.write( html );
response.end();
}
exports.start = start;展示获取的数据：
// uploader.js 展示获取的数据var querystring = require('querystring');function upload(request, response){ var postData = '';
request.addListener('data', function(chunk){
postData += chunk;
});
request.addListener('end', function(){ var data = querystring.parse(postData); console.log( 'postData: '+postData ); console.log(data); var s = '<p><a href="/">back</a></p>'+ '<p>username:'+data.username+'</p>'+ '<p>password:'+data.password+'</p>'+ '<p>age:'+data.age+'</p>';
response.writeHead(200, {'content-type': 'text/html'});
response.write(s);
response.end();
})
}
exports.upload = upload;然后在server.js中进行路由选择
// server.jsvar http = require('http'),
url = require('url');
http.createServer(function(request, response){ var pathname = url.parse(request.url).pathname; console.log(pathname);
response.end();
}).listen(3000);console.log('server has started...');我们任意改变URL地址，会看到输出的每个地址的pathname（忽略/favicon.ico）：
http://127.0.0.1:3000/ // 输出： /
http://127.0.0.1:3000/show/ // 输出： /show/
http://127.0.0.1:3000/show/img/ // 输出： /show/img/
http://127.0.0.1:3000/show/?username=wenzi // 输出： /show/因此我们就根据pathname进行路由，对路由进行方法映射：
// server.jsvar http = require('http'),
url = require('url'),
starter = require('./starter'),
uploader = require('./uploader');
http.createServer(function(request, response){ var pathname = url.parse(request.url).pathname; var routeurl = { '/' : starter.start, '/show' : uploader.upload
} if( typeof routeurl[pathname]=== 'function' ){
routeurl[pathname](request, response);
}else{ console.log('404 not found!');
response.end();
}
}).listen(3000);console.log('server has started...');如果匹配到路由 / ，则执行 starter.start(request, response) ；如果匹配到路由 /show ，则执行 uploader.upload(request, response) 。如果都没匹配到，则显示404。
4. 图片上传并显示
在上面我们已经能成功提交数据了，这里来讲解如何进行图片上传并显示。使用node自带的模块处理起来非常的麻烦，这里我们使用别人已经开发好的formidable模块进行编写，它对解析上传的文件数据做了很好的抽象。
npm install formidable --save-dev在starter.js中，我们添加上file控件：
// starter.js
function start(request, response){
var html = '<html>\
<head>\
<meta charset=UTF-8" />\
</head>\
<body>\
<form action="/upload" method="post" enctype="multipart/form-data">\
<p>file : <input type="file" name="upload" multiple="multiple" /></p>\
<p><input type="submit" value="submit" name="submit" /></p>\
</form>\
</body>\
</html>';
response.writeHead(200, {"Content-Type":"text/html"});
response.write( html );
response.end();
}
exports.start = start;4.1 图片上传
首先我们进行的是图片上传操作，首先我们要确保当前目录中存在tmp和img目录。在 uploader.js 中：
// uploader.jsvar formidable = require('formidable'),
util = require('util'),
fs = require('fs');function upload(request, response){ if( request.method.toLowerCase()=='post' ){ var form = new formidable.IncomingForm();
form.uploadDir = './tmp/';
form.parse(request, function(err, fields, files) { var oldname = files.upload.name,
newname = Date.now() + oldname.substr(oldname.lastIndexOf('.'));
fs.renameSync(files.upload.path, "./img/"+newname ); // 上传到 img 目录
response.writeHead(200, {'content-type': 'text/plain'});
response.write('received upload:\n\n');
response.end(util.inspect({fields: fields, files: files}));
}); return;
}
}
exports.upload = upload;我们上传图片后跳转到upload路径，然后显示出相应的信息：
received upload:
{
fields: { // 其他控件，如input, textarea等
submit: 'submit'},
files:{ // file控件
upload:{
domain: null,
_events: {},
_maxListeners: undefined,
size: 5097,
path: 'tmp\\upload_b1f7c3e83af224e9f3a020958cde5dcd',
name: 'chrome.png',
type: 'image/png',
hash: null,
lastModifiedDate: Thu Jan 12 2017 23:09:50 GMT+0800 (中国标准时间),
_writeStream: [Object]
}
}
}我们再查看img目录时，就会发现我们刚才上传的照片了。
4.2 图片显示
将图片上传到服务器后，怎样才能把图片显示在浏览器上呢。这里我们就使用到了fs模块来读取文件，创建一个shower.js来专门展示图片：
// shower.jsvar fs = require('fs'),
url = require('url');function show(request, response){ var query = url.parse(request.url, true).query,
imgurl = query.src; // 读取图片并进行输出
// 这里读取链接中的src参数，指定读取哪张图片 /show?src=1484234660592.png
fs.readFile('./img/'+imgurl, "binary", function(err, file){ if(err) throw err;
response.writeHead(200, {"Content-Type": "image/png"});
response.write(file, "binary");
response.end();
})
}
exports.show = show;然后在 server.js 中添加上 show 的路由映射：
var routeurl = {
'/' : starter.start,
'/upload' : uploader.upload,
'/show' : shower.show
// 添加
};最后在 upload.js 中进行图片的引用：
form.parse(request, function(err, fields, files) { var oldname = files.upload.name,
newname = Date.now() + oldname.substr(oldname.lastIndexOf('.'));
fs.renameSync(files.upload.path, "./img/"+newname ); // 同步上传图片
response.writeHead(200, {'content-type': 'text/html'}); var s = '<p><a href="/">back</a></p><p><img src="/static/imghwm/default1.png" data-src="/show?src='+newname+'" class="lazy" / alt="Learn node from 0 to 1 (2) to build an http server" ></p>'; // 显示刚才的图片
response.write(s);
response.end();
});5. 综合
刚才学习了上传数据和上传图片，这里我们将其综合一下，拟定一个题目：“设定用户名密码，并上传头像”。希望可以自己实现一下。
6. 接口的实现
在第2部分学习了GET和POST请求，那么在这里写一个简单json或jsonp接口应该不是什么难事儿了吧。
创建一个 inter.js ：
// inter.jsvar url = require('url');function init(request, response){ if( request.method.toLowerCase()=='get' ){ var query = url.parse(request.url, true).query; var data = {"code":0, "msg":"success", "data":[{"username":"wenzi", "age":26}, {"username":"bing", "age":25}]}; if( query && query.callback ){ // jsonp
response.end( query.callback + '(' + JSON.stringify(data) + ')' );
}else{ // json
response.end( JSON.stringify(data) );
}
}
}
exports.init = init;在server中添加inter的引用和路由映射：
var routeurl = { '/' : starter.start, '/upload' : uploader.upload, '/show' : shower.show, '/inter' : inter.init // 添加};然后对 http://127.0.0.1:3000/inter 进行json请求或jsonp请求即可。
7. 总结
这节还是写了不少的内容，最核心的就是讲解如何搭建一个简单的http服务器，进行数据和图片的提交与处理，在最后稍微讲了下接口的编写，后面有机会的话，会再具体讲解下接口的编写。
JavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AMJavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.
JavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AMThe main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.
Understanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AMUnderstanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.
Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AMPython is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.
Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AMPython and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.
From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AMThe shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.
JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AMDifferent JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.
Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AMJavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
Dreamweaver Mac version
Visual web development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.
SublimeText3 Mac version
God-level code editing software (SublimeText3)
