根据不同的网址刷新不同的页面
/*
服务器
//1.引入http模块
//2.创建server对象
//3.绑定端口和ip
//4.监听浏览器请求服务事件
//5.响应数据给浏览器
*/
const fs = require("fs");
// 使用http 模块 封装好的服务器的API
const http = require("http");
// 创建一个服务器
const server = http.createServer();
// 创建相应的端口 绑定ip 127.0.0.1 本地ip (localhost) 只能自己访问 所有本地都是这个
// 8080端口号是可以修改 建议用8000以上的(自定义端口号) //自己电脑的IP地址局域网别人可以访问
server.listen("8080"); //不写就是默认本地ip地址
server.on("request", (request, response) => {
// 有css就不能在这里放 text/html; 在里面放 html和css分开使用
// response.setHeader("Content-Type", "text/html;charset=utf-8")
console.log("请求路径" + request.url);
var url = request.url
// 页面里面有css img js 必须一起请求 不然会出不来效果
if (url === "/index.html") {
fs.readFile("./index/index.html", (err, data) => {
response.end(data)
})
// html静态文件
} else if (url === "/list.html") {
fs.readFile("./index/list.html", (err, data) => {
response.end(data)
})
// css静态文件
} else if (url === "/css/index.css") {
response.setHeader("Content-Type", "text/css;charset=utf-8")
// css 使用 text/css;
fs.readFile("./css/index.css", (err, data) => {
response.end(data)
})
// 图片静态文件
} else if (url === "/img/1.webp") {
fs.readFile("./img/1.webp", (err, data) => {
response.end(data)
})
// js静态文件
} else if (url === "/js/index.js") {
fs.readFile("./js/index.js", (err, data) => {
response.end(data)
})
}
})
页面里面有css img js 必须一起请求 不然会出不来效果 所以需要把全部的链接都引入
可以根据这个判断路径格式
简化链接路径
通过获取当前的网址作为路径来实现一个路径格式适应多个链接
判断父级文件夹(开头路径)来进行分类处理
const fs = require("fs")
const http = require("http")
const server = http.createServer()
server.listen("8080")
server.on("request", (req, res) => {
console.log("有请求" + req.url);
if (/^\/css/.test(req.url) || /^\/img/.test(req.url) || /^\/js/.test(req.url)) {
// 给css做防止中文乱码 data是数据不会乱码 只有直接加文字才会
res.setHeader("Content-Type", "text/css;charset=utf-8");
fs.readFile("." + req.url, (err, data) => {
res.end(data)
})
} else if (/^\/index/.test(req.url)) {
// 给html做防止中文乱码 data是数据不会乱码 只有直接加文字才会
res.setHeader("Content-Type", "text/html;charset=utf-8");
fs.readFile("./index" + req.url, (err, data) => {
res.end(data)
})
}
})
绝对路径(静态资源)
__dirname 是动态的绝对路径
作用:防止因为改变文件位置要改变所以路径
// 绝对路径__dirname 可以访问所有路径 所以要加限制条件以固定开头的才可以访问
// __dirname 是根据当前的文件夹的路径 所以启动服务器的js文件要和其他文件夹在同一个目录(不用在给这个单独加一个父级文件夹)
// __dirname拿到的绝对路径是相当于大文件 所以要把静态资源文件放在一个文件夹里面 方便统一处理
if (
/^\/css/.test(req.url) ||
/^\/img/.test(req.url) ||
/^\/js/.test(req.url)
) {
// 给css做防止中文乱码 data是数据不会乱码 只有直接加文字才会
// res.setHeader("Content-Type", "text/css;charset=utf-8");
console.log("绝对路径" + __dirname+req.url);
// __dirname 当前文件 "E:\笔记2\nodejs\day1\作业/index/index.html"
fs.readFile(__dirname + req.url, (err, data) => {
res.end(data);
});
} else if (/^\/index/.test(req.url)) {
fs.readFile(__dirname + "/index" + req.url, (err, data) => {
res.end(data);
});
}
因为index.js是服务器文件 是绝对路径的相对大文件夹
获取到的路径少了一个父级 所以index.js文件要单独添加一个 /index
解决这个问题可以把所有文件放同一个文件夹(但是比较混乱,不推荐)
一个if判断是不是可以访问就可以 统一处理 都是同级文件加 " . "
// 路径
const fs = require("fs");
// 服务器
const http = require("http");
const server = http.createServer();
server.listen(9090);
server.on("request", (req, res) => {
// res.end("<h1>hello world!</h1>");
if (
/^\/css/.test(req.url) ||
/^\/img/.test(req.url) ||
/^\/js/.test(req.url) ||
/^\/index/.test(req.url)
) {
// __dirname "E:\笔记2\nodejs\day1\静态资源绝对路径/";
console.log("绝对路径" + __dirname + req.url);
fs.readFile(__dirname + req.url, (err, data) => {
res.end(data);
});
// console.log("相对路径" + req.url);
// fs.readFile("." + req.url, (err, data) => {
// res.end(data);
// });
}
});