您的位置：首页 > Web前端 > Node.js

用Node.js创建一个静态服务器,然后将一个项目部署在这个服务器中

2019-05-14 19:41 429 查看

源代码

var http = require('http');
var port = 9000;
var hostname = 'localhost';
//1.创建磁盘路径处理的模块（绝对路径）
var path = require('path');
//2.用文件系统读index.html文件的内容,就是操作文件、目录的模块
var fs = require('fs');
//5.处理url的模块
var url = require('url');
http.createServer(function (request, response) {
//4.得到index.css路径
var urlObj = url.parse(request.url);//将字符串转对象
//6.用path处理static的绝对路径
var staticPath = path.join(__dirname, 'static')//join方法拼接两个路径字符串
//7.加一个判断
if (urlObj.pathname === '/') {
urlObj.pathname += 'index.html'
}
console.log(urlObj.pathname)
//8.
var filePath = path.join(staticPath, urlObj.pathname);
//3.用fs   fs.readFile(路径（index.html所在的路径），字符编码，错误优先的回调函数)
//filecontent是一个纯字符串，读不了index.css，所以要把index.css也发送出去
fs.readFile(filePath, 'binary', function (error, filecontent) {
if (error) {
throw error
} else {
response.write(filecontent, 'binary')//binary是二进制的意思，因为有图片，图片是天生异步的
response.end()
}
})

}).listen(port, hostname, function () {
console.log(`The server running in:http://${hostname}:${port}`)
})

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>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="baidu">
<!-- 8张大图：默认第一张显示，其他全部透明度为0 -->
<ul class="pic_list">
<li style="opacity: 1"><a href="#"><img src="img/1.jpg"></a></li>
<li><a href="#"><img src="img/2.jpg"></a></li>
<li><a href="#"><img src="img/3.jpg"></a></li>
<li><a href="#"><img src="img/4.jpg"></a></li>
<li><a href="#"><img src="img/5.jpg"></a></li>
<li><a href="#"><img src="img/6.jpg"></a></li>
<li><a href="#"><img src="img/7.jpg"></a></li>
<li><a href="#"><img src="img/8.jpg"></a></li>
</ul>
<!-- 8个小圆圈  active：当前选择的小圆圈-->
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
<!-- 左右箭头 -->
<a href="javascript:;" id="btn_left">&lt;</a>
<a href="javascript:;" id="btn_right">&gt;</a>
</div>
<script src="js/banner.js"></script>
</body>
</html>

css样式代码

* {
padding: 0px;
margin: 0px;
list-style: none;
}

.baidu {
width: 560px;
height: 305px;
border: 1px solid orange;
margin: 20px auto;
position: relative;
}

.pic_list li {
position: absolute;
left: 0px;
top: 0px;
opacity: 0;
}

.pic_list li.show {
opacity: 1;
}

.pic_list li img {
width: 560px;
height: 305px;
opacity: 1;
}

.baidu ol {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 10;
}

.baidu ol li {
width: 20px;
height: 20px;
border-radius: 50%;
background: #ccc;
float: left;
text-indent: -999em;
margin-right: 5px;
cursor: pointer;
}

.baidu ol li.active {
background: orange;
}

.pic_title {
width: 560px;
height: 24px;
line-height: 24px;
position: absolute;
left: 10px;
bottom: 10px;
}

.pic_title li {
position: absolute;
left: 0px;
top: 0px;
color: #fff;
opacity: 0;
}

#btn_left,
#btn_right {
font-size: 80px;
color: #fff;
text-decoration: none;
position: absolute;
top: 50%;
margin-top: -60px;
display: none;
}

#btn_left {
left: 20px;
}

#btn_right {
right: 20px;
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航