1.静态服务器定义
能够根据需要请求的文件，原封不动的将服务器磁盘中的数据直接返回给到浏览器。
- 根据设定的目录，判断用户是否请求的文件时静态文件
//解析路径
let urlObj = path.parse(req.url)
//判断是否请求静态文件
urlObj.dir=='/static'
- 从磁盘读取静态文件并返回
//根据请求的后缀名，返回文件的类型
res.setHeader("content-type",getContentType(urlObj.ext))
//从服务器磁盘中读取文件，并输出到响应对象中
let rs = fs.createReadStream('./static/'+urlObj.base)
rs.pipe(res)
- 如何 根据后缀名返回文件类型
function getContentType(extName){
switch(extName){
case ".jpg":
return "image/jpeg";
case ".html":
return "text/html;charset=utf-8";
case ".js":
return "text/javascript;charset=utf-8";
case ".json":
return "text/json;charset=utf-8";
case ".gif":
return "image/gif";
case ".css":
return "text/css"
}
}
完整案例
//引入http模块
let http = require('http');
//创建server对象
let server = http.createServer()
//引入path模块
let path = require('path')
//引入文件模块
let fs = require('fs')
//监听客户端发送过来的请求
//req请求对象包含了请求的相关的信息
//res对象用于响应内容，可以通过这个对象帮助我们快速实现HTTP响应
server.on('request',function(req,res){
//解析路径
let urlObj = path.parse(req.url)
//识别请求的路径
//console.log(urlObj)
//进入首页，返回首页的内容
if(req.url=="/"){
res.setHeader("content-type","text/html;charset=utf-8")
res.end(`<link rel="stylesheet" href="./static/style.css"><h1>首页</h1><img src='./static/cxk.jpg'>`)
}else if(urlObj.dir=='/static'){
res.setHeader("content-type",getContentType(urlObj.ext))
let rs = fs.createReadStream('./static/'+urlObj.base)
rs.pipe(res)
}else{
res.setHeader("content-type","text/html;charset=utf-8")
res.end("<h1>404页面找不到</h1>")
}
})
function getContentType(extName){
switch(extName){
case ".jpg":
return "image/jpeg";
case ".html":
return "text/html;charset=utf-8";
case ".js":
return "text/javascript;charset=utf-8";
case ".json":
return "text/json;charset=utf-8";
case ".gif":
return "image/gif";
case ".css":
return "text/css"
}
}
//启动服务器，监听服务端口
server.listen(80,function(){
console.log("服务已启动")
})
2.根据数据和模板动态生成页面
- 根据规则去解析链接，并且获取ID或者时索引值
//请求路径：http://127.0.0.1/muisc/0
let index = req.pathObj.base;
- 根据索引获取数据
let muisc = [
{
name:"a",
brief:"aaaaa.....",
author:"AA"
},{
name:"b",
brief:"bbbbb.....",
author:"BB "
}
]
let pageData = muisc[index]
- 根据模板渲染页面
res.render(muisc[index],'./template/index.html')
- 底层需要实现渲染函数，通过正则匹配，找到需要修改的地方进行一一的修改。
function render(options,path){
fs.readFile(path,{encoding:"utf-8",flag:"r"},(err,data)=>{
if(err){
console.log(err)
}else{
console.log(data)
let reg = /{{(.*?)}}/igs
let result;
while(result = reg.exec(data)){
//去除2边的空白
let strKey = result[1].trim()
let strValue = options[strKey]
data = data.replace(result[0],strValue)
}
this.end(data)
}
})
}
完整代码实例：
lcApp.js
let http = require('http')
let path = require('path')
let url = require('url')
let fs = require('fs')
class LcApp{
constructor(){
this.server = http.createServer()
this.reqEvent = {}
this.staticDir = '/static'
this.server.on('request',(req,res)=>{
//解析路径
let pathObj = path.parse(req.url)
//console.log(pathObj)
if( pathObj.dir in this.reqEvent ) {
res.render = render
res.setHeader("content-type","text/html;charset=utf-8");
req.pathObj = pathObj
this.reqEvent[pathObj.dir](req,res)
}else if(pathObj.dir==this.staticDir){
res.setHeader("content-type",this.getContentType(pathObj.ext))
let rs = fs.createReadStream('./static/'+pathObj.base)
rs.pipe(res)
}else{
res.setHeader("content-type","text/html;charset=utf-8")
res.end("<h1>404!页面找不到</h1>")
}
})
}
on(url,fn){
this.reqEvent[url] = fn;
}
run(port,callback){
this.server.listen(port,callback)
}
getContentType(extName){
switch(extName){
case ".jpg":
return "image/jpeg";
case ".html":
return "text/html;charset=utf-8";
case ".js":
return "text/javascript;charset=utf-8";
case ".json":
return "text/json;charset=utf-8";
case ".gif":
return "image/gif";
case ".css":
return "text/css"
}
}
}
function render(options,path){
fs.readFile(path,{encoding:"utf-8",flag:"r"},(err,data)=>{
if(err){
console.log(err)
}else{
console.log(data)
let reg = /\{\{(.*?)\}\}/igs
let result;
while(result = reg.exec(data)){
//去除2边的空白
let strKey = result[1].trim()
let strValue = options[strKey]
data = data.replace(result[0],strValue)
}
this.end(data)
}
})
}
module.exports = LcApp;
index.js
let LcApp = require('./lcApp');
let app = new LcApp()
app.staticDir = "/abc"
app.on('/',(req,res)=>{
res.setHeader("content-type","text/html;charset=utf-8");
res.end("<h1>这是首页</h1><img src='./abc/cxk.jpg'>")
})
app.on("/gnxw",(req,res)=>{
res.setHeader("content-type","text/html;charset=utf-8");
if(req.pathObj.base=="index"){
res.end("这是国内新闻首页")
}else{
res.end("这是国内新闻其他页面")
}
})
app.on('/movies',(req,res)=>{
let movies = [
{
name:"雪暴",
brief:"电影《雪暴》讲述了在一座极北的边陲小镇，一伙穷凶极恶、作案手法老到的悍匪为抢夺黄金，打劫运金车，并借助大雪掩盖了所有犯罪痕迹。为了探求真相，警察王康浩暗地里搜集证据，熟悉地形，终于在一场灾难级的暴雪降临时，与谋财害命的悍匪发生了惊心动魄的正面对决……",
author:"张震",
list:["小明","TFBOY","蔡徐坤"]
},{
name:"少年的你",
brief:"陈念（周冬雨 饰）是一名即将参加高考的高三学生，同校女生胡晓蝶（张艺凡 饰）的跳楼自杀让她的生活陷入了困顿之中。胡晓蝶死后，陈念遭到了以魏莱（周也 饰）为首的三人组的霸凌，魏莱虽然表面上看来是乖巧的优等生，实际上却心思毒辣，胡晓蝶的死和她有着千丝万缕的联系。",
author:"周冬雨 "
}
]
let index = req.pathObj.base;
res.render(movies[index],'./template/index.html')
})
app.run(80,()=>{
console.log("服务器已启动：","http://127.0.0.1")
})
index.html
<!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>电影页</title>
<link rel="stylesheet" href="/abc/style.css">
</head>
<body>
<h1>{{name}}</h1>
<h3>电影简介:{{brief}}</h3>
<p>电影主角：{{author}}</p>
</body>
</html>
图片.png
最近忙起来了，学习的时间也不是特别多了，慢慢学吧。
日期：2021/11/19
学习参考视频：*https://www.bilibili.com/video/BV1i7411G7kW?p=24&t=1330.4
学习参考文档参考部分相关视频文案和课件，仅供个人学习和记录
