使用Node.js 搭建一个静态网站
回顾上节的知识点
- Linux 常用命令
- vim编辑器中的常用操作
- node.js 中服务器被请求后返回的 request 的 http协议详情
首先写一个简单的服务器的雏形
const http = require('http'); // 要使用HTTP服务器或客户端功能，引入http模块
const ip = '192.168.1.9'; // 设置ip地址
const port = 3000; // 请求端口
// 创建服务器，每次请求都出触发一个匿名函数返回：request 请求和 response 响应；request是http.IncomingMessage的一个实例.response是http.ServerResponse的一个实例
http.createServer((req,res) => {
res.writeHead(200,{'Content-Type':'text/html'}); // 向请求回复响应头
res.write("1111111111111"); // 发送一块请求体
res.end() // 结束请求
}).listen(port,ip,() => { // 开始在指定的主机名和端口接收连接。
console.log("Server start"); // 控制台输出信息
});
效果图
进行初步 封装成函数，一处修改多处改变，提高代码的重用性
简化
引入URL 模块
获取当前访问URL路径部分
URL
URL
提取到访问url地址，可以进行一些相关操作，返回给用户！
引入 文件操作模块 fs
读取一个文件内容，例子:
fs.readFile('/etc/passwd', function (err, data) {
if (err) throw err;
console.log(data);
});
回调函数传递了两个参数(err, data),data就是文件的内容。
如果未指定编码方式，原生buffer就会被返回。
读取信息
把 文件读取的信息，返回给前台
使用 fs.readFileSync(filename, [options]); 返回文件名为 filename 的文件内容。
如果 encoding 选项被指定， 那么这个函数返回一个字符串。如果未指定，则返回一个原生buffer。
返回信息
这里文件修改后，前台访问的信息还是之前没被修改过的，因为 没有执行 node server.js 去启动，之前的也没有暂停！更新后重启！
根据上述的小例子，我们是不是可以根据前台访问的url，返回给客户端什么页面呢！对吧！
开始改造！
const http = require('http'); // 要使用HTTP服务器或客户端功能，引入http模块
const url = require('url'); // 引入URL模块，该模块包含用以 URL 解析的实用函数
const fs = require('fs'); // 引入文件操作模块 fs
const ip = '192.168.1.9'; // 设置ip地址
const port = 3000; // 请求端口，端口大于1000
var server = new http.Server(); // 创建一个server 服务器
server.listen(port,ip);
server.on('request',function(req,res){
// 解析请求过来的URL
var pathname = url.parse(req.url).pathname; // 获取URL的路径部分
// 监听请求的网站，以当前脚本目录为根目录的url地址
console.log(req.url);
// 更据请求地址url，让服务器在发送响应前先等待
switch (pathname) { // 判断请求路径信息
case '' || '/': // 处理网站根目录，指定加载对应的文件
fs.readFile("./index.html",function(err,content) {
if(err){
res.writeHead(404,{'Content-Type':'text/html;charset="UTF-8"'});
res.write(err.message);
res.end();
}else{
res.writeHead(200,{'Content-Type':'text/html;charset="UTF-8"'});
res.write(content);
res.end();
}
});
break;
case '/showlist':
fs.readFile("./showlist.html",function(err,content) {
if(err){
res.writeHead(404,{'Content-Type':'text/html;charset="UTF-8"'});
res.write(err.message);
res.end();
}else{
res.writeHead(200,{'Content-Type':'text/html;charset="UTF-8"'});
res.write(content);
res.end();
}
});
break;
case '/details':
fs.readFile("./details.html",function(err,content) {
if(err){
res.writeHead(404,{'Content-Type':'text/html;charset="UTF-8"'});
res.write(err.message);
res.end();
}else{
res.writeHead(200,{'Content-Type':'text/html;charset="UTF-8"'});
res.write(content);
res.end();
}
});
break;
default:
;
}
});
4.png
5.png
6.png
这样的一个静态资源网站就完成了！赶快来把页面弄上吧！
学习总结
从头到尾的搭建过程，了解到了node.js的魅力，大量的api，为我们提供了更多的便利，不过学起来也让我要去了解更多的api！
模块聚集地 ：www.npmjs.org
