前端基础-Node.js核心模块的使用
第2章 核心模块的使用
2.1.1 FS模块
node核心模块之一，用于操作文件；
中文手册 : http://nodejs.cn/api/fs.html
- 文件读写
// 引入模块
var fs = require('fs');
// console.log(typeof fs); //object
// 向文件中写入内容
fs.writeFile('./2.1.txt','itcast',function(cb,cb2){
// 回调函数 (写入成功后执行的函数)
console.log(cb);
console.log(cb2);
})
// 从文件中读取内容
fs.readFile('./2.1.txt','utf8',function(e,d){
// 回调函数 (读取成功后执行的函数)
console.log(e);
console.log(d);
});- 追加内容
// 引入模块
var fs = require('fs');
// 向文件中追加内容
fs.readFile('./2.1.txt','utf8',function(e,d){
d+='2344';
fs.writeFile('./2.1.txt',d,function(e){
if(e){
console.log('写入失败')
}else{
console.log('写入成功')
}
})
});课堂作业：尝试操作json数据，时间15分钟
var str = [
{id:1,names:'路飞',sex:'男',img:''},
{id:2,names:'乌索普',sex:'男',img:''},
{id:3,names:'娜美',sex:'女',img:''}
]要求1：将数据转为字符串存入文件 hzw.json
要求2：向 hzw.json 文件中添加一条数据 {id:'4',names:'罗宾'，sex:'女',img:''} ;
要求3：删除 hzw.json 文件中 id 值为2的数据
要求4：将 hzw.json 文件中id为3的数据中的names改为 ‘女帝’；
2.1.2 http协议理论
参见http部分课件
2.2 HTTP模块
node核心模块之一，用于搭建HTTP服务器；
中文手册 http://nodejs.cn/api/http.html
在这里插入图片描述
2.2.1 开启服务器
// 1. 导入http模块
var http = require('http');
// 2. 使用http这个模块中的createServer()创建一个服务器实例对象
var server = http.createServer();
// 3. 绑定端口号,启动web服务器
server.listen(8000, function() {
console.log(' 请访问http://localhost:8000');
});
// 4. 为这个服务器实例对象注册 request 请求处理函数
// 请求处理函数function(形参1,形参2){}
// 形参1:request请求对象 获取到当前请求的路径,方法等本次请求的所有信息
// 形参2:response响应对象 发送响应数据
server.on('request', function(request, response) {
console.log('服务端收到客户端的请求啦!!!');
// 向客户端页面返回字符串
response.write("hello node");
// 结束响应
response.end();
});
在这里插入图片描述
因为我们的服务器接受请求处理并响应数据时，并没有指定响应数据的类型，所以出现了乱码；
而在http中，我们可以通过服务器的响应头指定数据类型，在 http.ServerResponse 类 中为我们提供了setHeader 方法：
在这里插入图片描述
2.2.2 响应 HTML 页面
在这里插入图片描述
在这里插入图片描述
但是，我们不能一直将html代码写到服务器的方法中，而是需要建一个xx.html的文件，将html文件中的内容返回给客户端；
2.2.2 .html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>你好，我是西岭老湿</h1>
<h2>另外，我还很帅……</h2>
</body>
</html>nodejs代码
var http = require('http');
// 1:引入文件操作模块
var fs = require('fs');
var server = http.createServer();
server.on('request', function(request, response) {
// 2：读取html文件中的内容
fs.readFile('./2.2.2.html','utf8',function(error,html_data){
// 设置响应头
response.setHeader('Content-Type', 'text/html;charset=utf-8');
// 将html中的内容响应回客户端，结束响应
response.end(html_data);
})
});2.2.3 响应图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>你好，我是西岭老湿</h1>
<h2>另外，我还很帅……</h2>
<img src="./img/03.jpg" alt="野生脆脆.jpg">
</body>
</html>server.on('request', function(request, response) {
// url 属性返回请求的URL字符串
var urls = request.url;
if( urls =='/'){
fs.readFile('./2.2.2.html','utf8',function(error,html_data){
// 设置响应头
response.setHeader('Content-Type', 'text/html;charset=utf-8');
// 将html中的内容响应回客户端，结束响应
response.end(html_data);
})
}else if(urls.indexOf('jpg')>=0){ // 判断请求图片
fs.readFile('./img/03.jpg',function(error,html_data){
response.end(html_data);
})
}
}2.2.4 响应其他静态资源
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./public/h.css">
</head>
<body>
<h1>你好，我是西岭老湿</h1>
<h2>另外，我还很帅……</h2>
<img src="./img/03.jpg" alt="野生脆脆.jpg">
</body>
<script src="./public/h.js"></script>
</html>server.on('request', function(request, response) {
// url 属性返回请求的URL字符串
var urls = request.url;
if( urls =='/'){
fs.readFile('./2.2.2.html','utf8',function(error,html_data){
// 设置响应头
response.setHeader('Content-Type', 'text/html;charset=utf-8');
// 将html中的内容响应回客户端，结束响应
response.end(html_data);
})
}else{
fs.readFile('.'+urls,function(error,html_data){
response.end(html_data);
})
}
});2.3 服务器遍历文件及文件夹-案例
在这里插入图片描述
模仿Apache服务器，遍历文件及文件，显示时间及大小；
右键另存为，下载页面当作静态页面模板使用；
使用node载入静态页面：
在这里插入图片描述
在这里插入图片描述
使用ajax技术在页面中发送请求到后台，apache.html
<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(this.readyState == 4){
console.log(this.responseText);
}
}
xhr.open('get','/file_list');
xhr.send();
</script>node：
server.on('request', function(request, response) {
// url 属性返回请求的URL字符串
var urls = request.url;
if( urls =='/'){
fs.readFile('./apache.html','utf8',function(error,html_data){
// 设置响应头
response.setHeader('Content-Type', 'text/html;charset=utf-8');
// 将html中的内容响应回客户端，结束响应
response.end(html_data);
})
}else if(urls == '/file_list'){
fs.readdir('./','utf8',function(err,files){
response.end(JSON.stringify(files));
});
}else{
fs.readFile('.'+urls,function(error,html_data){
response.end(html_data);
})
}
});apache.html --> ajax
xhr.onreadystatechange=function(){
if(this.readyState == 4){
var data = JSON.parse(this.responseText);
var htmls = '';
for(var i = 0;i<data.length;i++){
htmls+='<tr><td valign="top">';
htmls+= '<img src="./img/layout.gif" alt="[ ]"></td>';
htmls+='<td><a href="http://localhost/%e7%ac%94%e8%ae%b0-01.pdf">';
htmls+= data[i]+'</a> </td>';
htmls+= '<td align="right">2018-04-26 10:31 </td>';
htmls+= '<td align="right">3.2M</td><td> </td></tr>';
}
var tb = document.getElementsByTagName('tbody')[0];
tb.innerHTML+=htmls;
}
}2.4 动态展示文件的其他属性
获取文件的其他属性：
var fs = require('fs');
fs.readdir('./','utf8',function(err,files){
fs.stat(files[0],function(er,st){
console.log(st.mtime);
console.log(st.size);
console.log(st.isFile());
})
});修改node代码
server.on('request', function (request, response) {
// url 属性返回请求的URL字符串
var urls = request.url;
if (urls == '/') {
fs.readFile('./apache.html', 'utf8', function (error, html_data) {
// 设置响应头
response.setHeader('Content-Type', 'text/html;charset=utf-8');
// 将html中的内容响应回客户端，结束响应
response.end(html_data);
})
} else if (urls == '/file_list') {
fs.readdir('./', 'utf8', function (err, files) {
// response.end(JSON.stringify(files));
var file_obj = [];
// 判断条件：声明一个变量，这个变量用来记录两个数据的中数据的长度
var count = 0;
for (var i = 0; i < files.length; i++) {
file_obj[i] = {};
// 利用自调用匿名函数，保留i的变量值
(function (i) {
fs.stat(files[i], function (er, st) {
count ++;
file_obj[i].name = files[i];
if(st.isFile()){
file_obj[i].type = 'file';
}else{
file_obj[i].type = 'dir';
}
file_obj[i].mtime = st.mtime;
file_obj[i].size = st.size;
// 当读取的文件个数与所有文件个数相等时
if(count == files.length){
response.end(JSON.stringify(file_obj));
}
})
// console.log(file_obj);
})(i);
// console.log(files[i]);
}
});
} else {
fs.readFile('.' + urls, function (error, html_data) {
response.end(html_data);
})
}
});修改 ajax代码
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(this.readyState == 4){
var data = JSON.parse(this.responseText);
var htmls = '';
for(var i = 0;i<data.length;i++){
htmls+='<tr><td valign="top">';
if(data[i].type == 'file'){
htmls+= '<img src="./img/layout.gif" alt="[ ]"></td>';
}else{
htmls+= '<img src="./img/folder.gif" alt="[ ]"></td>';
}
htmls+='<td><a href="">';
htmls+= data[i].name+'</a> </td>';
htmls+= '<td align="right">'+ data[i].mtime +'</td>';
htmls+= '<td align="right">'+ data[i].size +'</td><td> </td></tr>';
}
var tb = document.getElementsByTagName('tbody')[0];
tb.innerHTML+=htmls;
}
}
xhr.open('get','/file_list');
xhr.send();循环后 i 丢失的问题：
// var arr = ['a', 'b', 'c'];
// for (var i = 0; i < arr.length; i++) {
// // 模拟延迟
// setTimeout(function () {
// console.log(arr[i]);
// }, 1000);
// }
/*
* *******************************************
* 上面的代码 全部输出 undefined
* *******************************************
*/
var arr = ['a','b','c'];
for(var i = 0; i < arr.length; i ++) {
(function(i){
// 模拟延迟
setTimeout(function() {
console.log(arr[i]);
}, 1000);
})(i);
}解决方案2: 直接使用count 记录
var fs = require('fs');
fs.readdir('./', 'utf8', function (err, files) {
// console.log(files);
var count = 0;
var arr = []
for (var i = 0; i < files.length; i++) {
fs.stat(files[i], 'utf8', function (err, stats) {
// 在回调中声明对象
var obj = {};
// console.log(i);
obj.size = stats.size
obj.mtime = stats.mtime
// 不在使用i变量,因为循环结束i 就会消失
// 但是count 不会
obj.name = files[count];
// 将对象的数据存入数组
arr.push(obj);
// console.log(arr);
// 自增count 下次使用
count++;
// console.log(obj);
if (files.length == count) {
console.log(arr);
}
})
}
})本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录