十七、创建一个 WEB 服务器(一)
1、Node.js 创建的第一个应用
var http=require("http") http.createServer(function (req,res) { res.writeHead(200,{"Content-Type":"text/html;charset='utf8'"}) res.write("<head><meta charset='UTF-8'></head>") res.write("hello,Node.js!!!") res.end() }).listen(8081)
2、WEB 服务器介绍
Web 服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,可以向浏览
器等 Web 客户端提供文档,也可以放置网站文件,让全世界浏览;可以放置数据文件,让
全世界下载。目前最主流的三个 Web 服务器是 Apache Nginx IIS。
3、Nodejs 创建一个 WEB 服务器。
项目结构截图:
返回html页面示例:
firstServer.js代码(主程序):
//引入http模块: var http = require("http"); //引入fs模块: var fs = require("fs"); /** * 引入path模块 * Node内置模块,可以拿到文件的后缀名 *console.log(path.extname("index.html"));----.html */ var path = require("path") //引入加工响应头文件的自定义模块: var getextname = require("./model/getExtName"); //console.log(getextname.getminiName(".css")); /** * 引入url模块,用来加工有些时候服务地址后面传值的情况: * http://localhost:8081/index.html?name=tom * 这个时候我们仅仅通过上边的模块加工是不够的 */ var url = require("url"); http.createServer(function (req, res) { //var urlStr = req.url;//获取浏览器输入的地址 /* * 引入url模块,用来加工有些时候服务地址后面传值的情况: * http://localhost:8081/index.html?name=tom * 这个时候我们仅仅通过上边的模块加工是不够的,此时就需要借助下面的url模块解析: */ var urlStr = url.parse(req.url).pathname; console.log(urlStr); if (urlStr == '/') {//設置默认加载的頁面 urlStr == '/index.html'; } if (urlStr != '/favicon.ico') { //过滤无效请求:/favicon.ico var extname = path.extname(urlStr); //下面通过文件操作模块读取静态页面内容:最后通过res返回给客户端 fs.readFile("html" + urlStr, function (err, data) { if (err) {//没有这个文件 console.log("404"); fs.readFile("html/404.html", function (err, data404) { //注意下面要修改响应头的状态码 res.writeHead(404, {"Content-Type": "text/html;charset='utf8'"}) res.write(data404) res.end() }) } else { /** * 大部分情况下我们不一定返回html文件,也可能返回css文件,js文件,xml文件等等,因此下面的头文件的 * "Content-Type": "text/html;charset='utf8'"不能写死,而应该动态随着请求的内容改变 */ //res.writeHead(200, {"Content-Type": "text/html;charset='utf8'"}) res.writeHead(200, {"Content-Type": getextname.getminiName(extname) + ";charset='utf8'"}) res.write(data) res.end() } }) } }).listen(8081)
index.html文件代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div{ width: 100px; height: 200px; background-color: red; margin: 0 auto; } </style> <body> <div></div> </body> </html>
自定义模块(功能类js):getExtName.js:
/** * Created by Administrator on 2019/4/24. */ /** * 自定义模块加工响应头文件类型 * @param extname * @returns {*} */ module.exports.getminiName=function (extname) { switch (extname){ case ".html": return "text/html" case ".css": return"text/css" case ".js": return "text/js" case ".xml": return"text/xml" default: return"text/xml" } }
404.html页面代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> div{ font-size: 30px; font-weight: bolder; color: red; } </style> <body> <div>404</div> </body> </html>
效果: