Question

我开始使用Node.js，但我的第一个应用程序出现问题：我设置了第一个应用程序＆＃34; app.js＆＃34;，带有html文件＆＃34; new.html＆＃34;和.css文件＆＃34; formato.css＆＃34;。问题是，当我在我的网络浏览器上打开new.html时，它确实尊重.css文件上写的内容，但是当我运行＆＃34; node app.js＆＃34;出现的屏幕并不尊重.css文件中的内容。我该如何解决这个问题？

app.js：

var http = require('http');
var url = require('url');
var fs = require('fs');
var qs = require('querystring');

var nuevoPostHTML= fs.readFileSync('vistas/post/new.html');

function nuevoPost(request, response){
    response.writeHead(200, {'Content-type': 'text/html; charset - utf8'});
    response.end(nuevoPostHTML);
}

function agregarNuevoPost(request, response){
parseBody(request, function(body){
    var post = {
        title: body.title,
        content: body.content
    }
    console.log("Title: " + post.title);
    console.log("Content:" + post.content);
})
response.end();
}


//Utils
function notFound(request, response){
response.writeHead(404);
response.end('404: File not Found');
}

function parseBody(request, callback){
var body = '';
request.on('data', function(chunk){ body += chunk;})
request.on('end', function(){callback(qs.parse(body));})
}
//Rutas
var regexNuevoPost = new RegExp('^/posts/new/?$');
var regexPost = new RegExp('^/posts/?$');


//Comienza servidor
var server = http.createServer(function(request, response){
var nomPath = url.parse(request.url).pathname;

if (regexNuevoPost.test(nomPath)){
    nuevoPost(request, response);
}else if (regexPost.test(nomPath)){
    agregarNuevoPost(request,response);

}else{
    notFound(request,response);
}
});

server.listen(8000);
console.log('Listening on http://127.0.0.1:8000');

new.html：

<!DOCTYPE html>
<html>
<head>
<title>
  Nuevo Post
</title>
<link rel="stylesheet" type="text/css" href="formato.css" />
</head>
<body>
<h1>
  Nuevo Post
</h1>
<form method="post" action="/posts" id="new_post" class="new_post">
  <div class="field">
    <label for="post_title">Titulo</label><br />
    <input type="text" name="title" id="post_title" size="30" />
  </div>
  <div class="field">
    <label for="post_content">Contenido</label><br />
    <textarea name="content" cols="40" rows="20" id="post_content">
    </textarea>
  </div>
  <div class="actions">
    <input type="submit" value="Crear" id="post_submit" />
  </div>
</form>
<p>
  <br />
  <a href="/posts">Back</a>
</p>

formato.css：

body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Answer 1

您必须使用静态服务器中间件来提供静态资产。如果你打算使用expressjs框架，它有一个内置的serve-static中间件。

var express = require('express');
var app = express();

// serve static assets
app.use(express.static(__dirname + '/assets'));

如果您不使用快递，只需在项目中使用middleware即可。

$ npm install serve-static

var serveStatic = require('serve-static');
var serve = serveStatic('/assets', {});

var server = http.createServer(function(req, res){
 var done = finalhandler(req, res);
 serve(req, res, done);
});

Answer 2

正如m59所述，您需要提供脚本使用的文件。

最简单的方法是使用Express，因为它可以非常简单地提供静态内容。

好的写作： http://blog.modulus.io/nodejs-and-express-static-content

我的node.js应用程序不检测.css文件

2 个答案: