刚接触nodejs,写博客只是记录一下自己的学习心得
我这里的静态资源是指一个包括文字、图片、以及点击会有详情框的页面。需要2个js文件和一个html文件
- 首先新建一个01.js文件
const http = require(\'http\');
var server = http.createServer();
const fs = require(\'fs\');
server.on(\'request\', function (res, rso) {
var urls = res.url;
if (urls == \'/\') {
rso.setHeader(\'Content-Type\', \'text/html ;charset=utf-8\');//设置编码 防止乱码
fs.readFile(\'./index.html\', \'utf8\', function (err, data) {
rso.end(data);
})
} else {
fs.readFile(\'.\'+urls,(err,data)=>{ //因为图片是在当前目录下,而服务其返回的是/img/1.jpg,所以要添加一个“.”
rso.end(data);
})
}
});
server.listen(8081, function () {
console.log(\'Server running at http://127.0.0.1:8081/\');
});
- 再建一个index.html,(---------不会html语言,只是举例,大佬勿喷-------)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>shdsjhdjsk</p>
<p>shdsds</p>
<img src="./img/1.jpg" alt="">
<h2>cbxnzbczx</h2>
<p>fghgfhgfgh</p>
<i>nm,cnbv,n</i>
<s>u有风度与辐射</s>
</div>
</body>
<script src=\'./img/index.js\'></script>//点击效果
</html>
- 再建一个index.js对应点击详情框效果
document.getElementsByTagName(\'img\')[0].onclick=function () {
alert(\'好看\');//括号中的img为对应上面index.html的标签,选择img,代表点击图片才有详情框,选择‘p’就要点击第一段文字
}
最终效果: