Question

我正在尝试阅读HTML文件（client.html），然后收听端口8000 。在该html文件中，我还有一个<script = "client.js"></script>标记，以便我可以使用react.js（不使用jsx）来更改HTML。到目前为止，我已经能够建立服务器，但无论我如何更改client.js文件，这些更改似乎都不会显示在 http://localhost:8000/client.html上。

server.js

＆＃13;

//server.js
var http = require('http'),
    fs = require('fs');

fs.readFile('./client.html', function (err, html) {
    if (err) {
        throw err;
    }       
    http.createServer( async (request, response) => {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(8000,() => console.log("started.."));
});`

＆＃13;

client.js

＆＃13;

//client.js
class Hello extends React.Component {
    render() {
      return React.createElement('div', null, `Hello ${this.props.toWhat}`);
      }
}
ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>

＆＃13;

<!-- client.html -->
<html>
	<body>
		<div id="root"></div>
		<p>helloworld</p>
		<!-- <script src="lib.js"></script> -->
		<script src="client.js"></script> 
	</body>
</html>

＆＃13;

Answer 1

我在你的server.js中做了一些修改。

var http = require("http"),
fs = require("fs");
var path = require("path");

http
   .createServer(function(request, response) {
      var filePath = "." + request.url;
      if (filePath == "./") filePath = "./client.html";

      var extname = path.extname(filePath);
      var contentType = "text/html";
      switch (extname) {
        case ".js":
          contentType = "text/javascript";
          break;
        case ".css":
          contentType = "text/css";
          break;
        case ".json":
          contentType = "application/json";
          break;
      }

      fs.readFile(filePath, function(error, content) {
        response.writeHead(200, { "Content-Type": contentType });
        response.end(content, "utf-8");
      });
    })
   .listen(8000, () => console.log("started..."));

基本上，您需要处理节点服务器中的 .js 文件。参考 - https://developer.mozilla.org/en-US/docs/Learn/Server-side/Node_server_without_framework

使用javascript使用react.js更改html

1 个答案: