recursos estáticos A. Enviar
1. Al incluir externa js recursos / css / imagen, etc., dentro de las necesidades de la página solicitada para ser adquirida, si el servidor no se envía, el navegador ha sido cargado, la observación más directa es que cuando se abre la pestaña de la página ha estado en un anillo girar.
//index.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>
//页面所需要的资源
<link rel="stylesheet" href="../public/main.css">
</head>
<body>
<h1>获取静态资源</h1>
</body>
</html>
//http-server.js
var http = require('http')
var fs = require('fs')
var server = http.createServer()
server.listen(3000, function (error) {
if (error) {
console.log('服务器监听失败...')
} else {
console.log('服务器监听成功,可通过http://127.0.0.1:3000/进行访问...')
}
})
server.on('request', function (req, res) {
var url = req.url
if (url == '/') {
fs.readFile('./views/index.html', function (error, data) {
if (error) {
return res.end('404 Not Found...')
} else {
res.end(data)
}
})
}
// else if (url.indexOf('/public/') == 0) {
// fs.readFile('.' + url, function (error, data) {
// if (error) {
// return res.end('获取main.css失败...')
// } else {
// res.end(data)
// }
// })
// }
})
2. Si queremos enviar estos recursos estáticos a la parte solicitante, a continuación, es necesario agregar la palabra clave está anotado.
server.on('request', function (req, res) {
var url = req.url
//回应第一次请求发送index.html的数据
if (url == '/') {
fs.readFile('./views/index.html', function (error, data) {
if (error) {
return res.end('404 Not Found...')
} else {
res.end(data)
}
})
}
//请求方解析index.html时发现需要main.css资源则又一次发送请求,请求的url对应link的路径
else if (url.indexOf('/public/') == 0) {
fs.readFile('.' + url, function (error, data) {
if (error) {
return res.end('获取main.css失败...')
} else {
res.end(data)
}
})
}
})
! La obtención de otros recursos, también
Dos 0,404 redirecciones URL y simplificar
1. Cuando añadimos el nombre de dominio especificado en un lío al final de la cadena de tiempo, si el servidor no puede encontrar la página web correspondiente, por lo general redirigido a una página 404
2. De hecho, sólo tiene que añadir el código que implementa redirigir los demás en la final de la frase página juicio
3 . URL simplificada, la eliminación de los sufijos (ver más abajo gif comparativo)
server.on('request', function (req, res) {
var url = req.url
if (url == '/') {
fs.readFile('./views/index.html', function (error, data) {
if (error) {
return res.end('获取index页面失败...')
} else {
res.end(data)
}
})
}
else if (url == '/views/next') {
fs.readFile('.' + url+'.html', function (error, data) {
if (error) {
return res.end('获取next.html失败...')
} else {
res.end(data)
}
})
} else {
fs.readFile('./views/404.html', function (error, data) {
if (error) {
return res.end('获取404页面失败...')
} else {
res.end(data)
}
})
}
})
URL simplificar la comparación:
III. Mensaje de ejercicios (sin la participación de la base de datos)
1. Mostrar la página
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>留言板</title>
<link rel="stylesheet" href="../public/css/main.css">
<link rel="stylesheet" href="../public/css/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1>留言板 <small>写你所想</small></h1>
<a class="btn btn-success" href="./public/views/post.html">发表留言</a>
</div>
</div>
<div class="comments container">
<ul class="list-group">
{{each comments}}
<li class="list-group-item">
{{$value.name}}说: {{$value.message}}
<span style="float: right;">{{$value.date}}</span>
</li>
{{/each}}
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>发表留言</title>
<link rel="stylesheet" href="../css/bootstrap.css">
</head>
<body>
<div class="header container">
<div class="page-header">
<h1>留言板 <small>发表评论</small></h1>
</div>
</div>
<div class="comments container">
<form action="comments" method="get">
<div class="form-group">
<label for="InputName">你的大名:</label>
<input type="text" class="form-control" id="InputName" placeholder="Input Your Name" required
name="name">
</div>
<div class="form-group">
<label for="IputMeassge">留言内容</label>
<textarea id="InputMessage" cols="30" rows="10" class="form-control" required name="message"></textarea>
</div>
<button type="submit" class="btn btn-success">发表</button>
</form>
</div>
</body>
</html>
2. puede comentar y mostrar
var http = require('http')
var fs = require('fs')
var template = require('art-template')
var parse = require('url')
var server = http.createServer()
var comments = [
{
name: "法外狂徒",
message: "我为非作歹",
date: "2020-3-18"
}, {
name: "张三",
message: "俺也一样",
date: "2020-3-18"
},
]
server.listen(3000, function (error) {
if (error) {
console.log('服务器监听失败...')
} else {
console.log('服务器监听成功,可通过http://127.0.0.1:3000/进行访问...')
}
})
server.on('request', function (req, res) {
var parseObj = parse.parse(req.url, true)
var pathname = parseObj.pathname
if (pathname == '/') {
fs.readFile('./public/views/index.html', function (error, data) {
if (error) {
return res.end('获取index页面失败...')
} else {
var htmlStr = template.render(data.toString(), {
comments: comments
})
res.end(htmlStr)
}
})
console.log(pathname)
} else if (pathname == '/public/views/comments') {
var comment = parseObj.query
comment.date = "2020-3-17"
comments.unshift(comment)
res.statusCode = 302
res.setHeader('Location', '/')
res.end()
} else if (pathname.indexOf('/public/') == 0) {
fs.readFile('.' + pathname, function (error, data) {
if (error) {
return res.end('获取失败...')
} else {
res.end(data)
}
})
console.log(pathname)
} else {
fs.readFile('./views/404.html', function (error, data) {
if (error) {
return res.end('Nothing')
} else {
res.end(data)
}
})
}
})
