我有一个与从node js呈现HTML相关的问题。
我正在创建动态HTML(他们目前使用的Reactj概念)，但我不知道如何以同样的方式在我的node js服务器上使用Reactjs。https://es.reactjs.org/docs/rendering-elements.html
我使用:
const express = require ('express')
const app = express ()
const port = 3000
// app.use (express.static ("public"))
app.listen (port, () => {
console.log (`Example app listening at http: // localhost: $ {port}`)
})
我读到如果你使用app.use (express.)静. .
所以我决定添加一个端点，将站点转换为动态:
app.get ("/", (req, res) => {
res.send ("<html> <head> </head> <body> <h1> .... </h1> </body> </html>");
});
问题是我需要一个"index.html"将它传递给纯文本，用DOM读取它，并通过DOM添加或删除元素(文本)最后返回整个html页面。
1 - Pass the html to text.
2 - Cycle that text by dom
3 - Add or remove items
3.1 - Add divs inside other containers "through an id" by DOM
app.get ("/", (req, res) => {
res.send (stringTextHtmlWebPage);
// The problem is that I have to return the entire directory like
// app.use(express.static ("public")) does; but with the modified file.
});
index.js
function App () {
return (<div className = "container mt-5"> ... </div>);
// I was surprised by this line, it goes without any quotes ... and it works ...
}
ReactDOM.render (
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById ('root') // element from public / index.html
);
Index.html
<body>
<noscript> You need to enable JavaScript to run this app. </noscript>
<div id = "root"> </div>
在我的例子中，如何返回整个HTML页面。按照我说的步骤?
编辑:
我必须返回整个目录的文件。(但有些修改了，有些没有)例如:我修改了index.html，但它已经关联了css, js, bootstrap…它必须像一个"应用程序"一样工作。使用(表达。静态(";公共"));"但是修改了一些文件。简而言之，使用node . js修改文件，然后调用app.use (express)。静态("public");这个文件被修改了。(与React类似)
// Modify file
// calls app.use (express.static ("public")); (with the modification)
或者是否有办法将代码注入到我的应用程序中;变量?一些风格
app.injectPath ("public / index.html"). Tour_the_DOM (tag ["tag1"]) = "<div> add this div </div>";
就像React一样?
我不能使用模板(pug, manillar…)，因为页面的源代码写在别处。
我也读过:https://es.reactjs.org/docs/add-react-to-a-website.html但我不知道如何与app.use (express)整合。静态("public")
这就是我要找的。https://tech-wiki.online/es/react-server-side-rendering.html但是它不工作。有同样的解决方案吗?
提前感谢。
我不确定我完全理解你在这里想做什么，但是DOM操纵是由浏览器处理的，所以它发生在客户端，而不是服务器端。
在使用express时，您可以使用sendFile()将文件发送到浏览器并执行DOM操作。
例如
index . html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Document</title>
</head>
<body>
<div id="results"></div>
<script>
const div = document.getElementById('results');
div.innerHTML = 'Adding Text Here';
</script>
</body>
</html>
app.js
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.sendFile('index.html', { root: __dirname })
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
对不起，我要离开Node js。太多的"简单errors"使用node js。我花了两个月的时间来"多加注意"。给node js.
我必须调用许多库来相互链接，并且渲染是手工的，并且有无数的简单错误。
我将使用PHP.PHP让你不再头疼，也解决了我的问题。如果它是旧的。但它的力量太大了。
PHP是目前最好的后端语言。对不起，在这个论坛上的节点js的人。但事实是伤人的