一,首先我先在指定的路径下创建文件,方便通过服务器查到文件
二,node 文件
const http = require("http");
const fs = require("fs");
const path = require("path");
const config = require("./config");
//拿到跟目录
const documentRoot = config.documentRoor;
const server = http.createServer();
server.on("request",(req,res)=>{
//路径
let url = req.url;
//拿到跟目录路径
let tmp = documentRoot + url;
//检查跟目录路径是否存在 存在放回true,不存在返回false
let exitst = fs.existsSync(tmp);
//一层判断判断跟目录路径和路径是否符合标准
if(exitst || url == "/favicon.ico" || url == "/"){
//同步接收tmp的路径
let stats1 = fs.statSync(tmp);
//二层判断判断当前路径是否是文件夹
if(stats1.isDirectory()){
//三层判断,判断没有开目录浏览权限
if(!config.directoryBrowse){
res.end("403 not file");
return;
}
//遍历目录,读取文件
fs.readFile("./template.html" , (err,data) =>{
//判断,如果访问err,return 404
if(err){
return res.end("404 not find")
}
//声明进入的页面的display的显示
let prveDisplay = "block";
//判断路径如果为/,为主显示页面,title隐藏
if(url == "/"){
prveDisplay = "none";
}
//读取tmp的文件目录
fs.readdir(tmp,(err,files)=>{
//失败return
if(err){
return res.end("can not find dir")
}
//声明一个字符串,收集遍历字符串模板
let content = "";
//将成功的文件目录进行遍历
files.forEach((item) =>{
//声明样式
let type = "";
//声明文件后缀的一个/
let separate = "";
//同步接收tmp的路径加上tmp的文件目录下的文件路径
let stats2 = fs.statSync(tmp + item)
//判断stats2路径下是否有文件
if(stats2.isDirectory()){
//成功加上样式
type = "dir";
separate = "/";
}else{
type = "file"
}
//http://127.0.0.1:端口号 路径 文件目录的文件 /
content += `
<tr>
<td>
<a class="icon ${type}" href="http://127.0.0.1:${config.port + url + item + separate}">${item + separate}</a>
</td>
</tr>
`
})
//替换
//将成功下的文件转为字符串
data = data.toString();
//将html界面下的文本替换成字符串模板的文本
data = data.replace("tihuan" , content);
//替换页面样式
data = data.replace(/{{path}}/g , url.substring(1))
data = data.replace('{{display}}' , `style="display: ${prveDisplay};"`);
data = data.replace(/{{parentPath}}/g , url.substring(0,url.substr(0,url.length-1).lastIndexOf('/')+1))
//res结束,data
res.end(data)
})
})
//判断跟目录路径和路径不符合标准
}else{
//渲染文件 读取文件
fs.readFile(tmp , (err , data)=>{
//err 直接res.end
if(err){
res.end();
}
//声明ext 接收文件扩展名去掉点
let ext = path.extname(tmp).substring(1);
//文件类型的判断
if(ext in config.mineType.text){
//请求头判断
res.setHeader("Content-type" , `${config.mineType.text[ext]};charset=${config.charset}`)
}else if(ext in config.mineType.image){
//请求头判断
res.setHeader("Content-type" , `${config.mineType.image[ext]}`)
}else{
//请求头判断
res.setHeader("Content-type" , `${config.mineType.other};charset=${config.charset}`)
}
//res.end
res.end(data)
})
}
}else {
//res.end
res.end();
}
})
//静态服务器端口号
server.listen(config.port);
通过找到文件的路径打开cmd 输入 node 文件名 启动服务
启动服务后,通过输入localhost: 端口号
就可以查到对于的文件了,这样一个apache服务就完成了
最后介绍下通过cmd快速创建文件
首先创建好用一个文件夹,通过shift + 鼠标右键,打开cmd界面
然后通过输入npm init 创建初始化文件
然后按照下面的步骤进行执行
然后输入 npm i 创建记录文件
创好后可以可以引入插件文件,比如引入jquery
引入好后显示的页面就是这样的
同时引入jquery,在记录文件里面也有记录