1. 启动服务,并获取url上的参数
路径:http://127.0.0.1:3000/photo?name=yyy&age=12
const http = require('http');
const url = require('url');
var server = http.createServer((req, res) => {
if (req.url == '/favicon.ico') {
return;
}
var param = url.parse(req.url, true).query;
console.log(param.name, param.age); // yyy 12
res.end('hello')
});
server.listen(3000, '127.0.0.1');
2. 在fang.html中通过link href='fang.css’引入css,将fang.html的内容及样式效果显示出来
var http = require('http');
var fs = require('fs');
var server = http.createServer((req, res) => {
console.log("服务器接收到了请求,地址为:" + req.url);
switch (req.url) {
case '/fang':
fs.readFile('./html/fang.html', (err, data) => {
res.writeHead(200,{'Content-type': 'text/html;charset=UTF-8'});
res.end(data);
});
break;
case '/fang.css':
fs.readFile('./resource/fang.css', (err, data) => {
res.writeHead(200, {'Content-type': 'text/css'});
res.end(data);
});
break;
default:
res.end('读取数据失败');
}
});
server.listen(3002, '127.0.0.1');
必须要读取fang.css文件,不然样式文件不起作用。
3. 读取文件fs.readFile
var http = require('http');
var url = require('url');
var fs = require('fs');
var path = require('path');
var server = http.createServer((req, res) => {
var pathname = url.parse(req.url).pathname; // 获得端口号以后 ?参数之前的url
if (pathname.indexOf('.') == -1) {
pathname += '/index.html';
}
var fileUrl = './' + path.normalize('./static/' + pathname);
var extname = path.extname(pathname); // 获取后缀名
fs.readFile(fileUrl, (err, data) => {
if (err) {
res.writeHead(404, {"Content-type": "text/html;charset=UTF-8"});
res.end('404, 未找到页面!')
}
getMime(extname, function(mime){
res.writeHead(200, {"Content-type": mime});
res.end(data);
});
})
})
server.listen(3000, '127.0.0.1');
function getMime(extname, callback) {
fs.readFile('./mime.json', (err, data) => {
if (err) {
throw err;
}
var mimeJSON = JSON.parse(data);
callback(mimeJSON[extname]);
});
}
其中mime.json的格式是
{
".png":"image/png" ,
".htm":"text/html" ,
".html":"text/html" ,
...
}
4. 创建文件fs.mkdir
fs.mkdir('./image', (err) => {
if (err) {
throw err;
}
res.writeHead(200, {"Content-type": "text/html;charset=UTF-8"});
res.end('创建完毕');
})
5. 读取文件夹fs.readdir,并输出文件夹中包含的文件夹的名称
在html文件夹中包含aa和bb文件夹,输出aa、bb文件夹的名称
var wjj = [];
fs.readdir('./html', (err, files) => { // 读取文件夹
if (err) {
throw err;
}
for (let i = 0; i < files.length; i++) {
let currentFile = files[i];
fs.stat('./html/' + currentFile, (err, status) => {
if (err) {
throw err;
}
if (status.isDirectory()) { // 判断是否是文件夹
wjj.push(currentFile);
}
console.log(wjj);
})
}
})
第二种方法
fs.readdir('./html', (err, files) => {
if (err) {
throw err;
}
(function iterator(i){
if (i >= files.length) { // 避免造成死循环
console.log(wjj);
return;
}
fs.stat('./html/' + files[i], (err, stat) => {
if (err) {
throw err;
}
if (stat.isDirectory()) {
wjj.push(files[i]);
}
iterator(++i);
})
})(0)
})
6. 接收post请求
相比get请求,post请求稍微麻烦一点点。NodeJS认为,使用post请求一般是数据量相对get请求而言较多,为了追求效率,把数据拆分成了多个小的数据模块(chunk,然后通过特定的事件,把这些小数据模块有序的传递给回调函数)
var http = require('http');
var server = http.createServer((req, res) => {
if (req.url == '/dopost' && req.method.toLowerCase() == 'post') {
/**
* 下面这个公式是post请求的接收公式
* 这里只接收了一小段,防止一个过大的请求处理阻塞了这个进程
*/
var allData = '';
// 传输中
req.addListener('data', function(chunk){
allData += chunk;
})
// 传输完毕
req.addListener('end', function(){
res.end('success')
var dataObj = JSON.parse(allData);
console.log(`机构号::${dataObj.userId}`);
console.log(`账号::${dataObj.jobNum}`);
})
}
})
server.listen(3000, '127.0.0.1');
7. 使用formidable模块处理上传文件,并使用fs.rename重命名已上传的文件
var formidable = require('formidable'), // 处理表单数据
http = require('http'),
util = require('util'),
path = require('path');
var sd = require('silly-datetime');
var fs = require('fs');
http.createServer(function(req, res){
if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
var form = new formidable.IncomingForm();
form.uploadDir = './static/uploads/';
/**
* 回调函数:
* 1. err: 错误
* 2. fields:表单数据中文本数据
* 3. files: 上传文件数据
*/
// 当执行form.parse时,表示表单已经全部加载完毕了
form.parse(req, function(err, fields, files) {
res.writeHead(200, {'Content-type': 'text/plain'});
res.write('received upload::\n\n');
var ran = parseInt((Math.random() * 10000).toFixed(0)); // 获取4位的随机数
var newDate = sd.format(new Date(), 'YYYYMMDD');
var extname = path.extname(files.upload.name);
var oldpath = __dirname + '/' + files.upload.path; // 获取之前的路径
// 两种newpath重命名方式,两者选其一
var newpath = __dirname + '/static/uploads/' + newDate + ran + extname;
var newpath = __dirname + '/static/uploads/' + newDate + ran + files.upload.name;
fs.rename(oldpath, newpath, (err) => {
if (err) {
console.log('上传文件错误::', err);
}
res.writeHead(200, {'Content-type': 'text/plain'});
res.end('success');
})
console.log('标题:', fields.title);
console.log('年龄:', fields.age);
res.end(util.inspect({fields: fields, files: files})); // 把两个对象合并并返回字符串
});
return;
}
res.writeHead(200, {'Content-type': 'text/html'});
res.end(
`<form action="/upload" enctype="multipart/form-data" method="post">
<input type="text" name="title"/><br/>
<input type="text" name="age"/><br/>
<input type="file" name="upload" multiple="multiple"/><br/>
<input type="submit" value="Upload"/>
</form>`
);
}).listen(3000, '127.0.0.1');
8. ejs
ejs.js中
var ejs = require('ejs');
var http = require('http');
var fs = require('fs');
var server = http.createServer(function(req, res){
fs.readFile('./views/index.ejs', function(err, data) {
var template = data.toString();
var data2 = {
num: 2,
list: [
{
title: 'Think',
age: 18
},
{
title: 'Magic',
age: 20
},
{
title: 'selly',
age: 21
}
]
};
var html2 = ejs.render(template, data2);
res.writeHead(200,{"Content-type":"text/html;charset=UTF-8"});
res.end(html2);
})
});
server.listen(3000, '127.0.0.1');
views/index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<%
for (var i = 0; i < list.length; i++) {
if (list[i].age < 20) {
%>
<li>
<span style="color:red"><%= list[i].title %></span>
<span style="color:green"><%= list[i].age %></span>
</li>
<%
}
}
%>
</div>
</body>
</html>
9. 配合express,使用ejs
express_ejs.js中
var express = require('express');
var app = express();
app.set('view engine', 'ejs'); //设置视图引擎,设置视图类型:ejs
app.get('/', function(req, res){
/**
* yuan: 表示文件名,由于设置视图引擎的时候已经告诉他是ejs类型,所以无需指定后缀,默认为ejs
* 默认是views文件夹,所以无需设置yuan.ejs的路径
* */
res.render('yuan', {
'list': ['Think', '懒洋洋', '慢羊羊']
})
});
app.listen(3000);
views/yuan.ejs中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>yuan page</title>
</head>
<body>
<div>
<h1>元page</h1>
<ul>
<%
for(var i = 0; i < list.length; i++) {
%>
<li><%= list[i] %></li>
<%
}
%>
</ul>
</div>
</body>
</html>