我有一個與從節點 js 渲染 HTML 相關的問題。
我正在創建動態 HTML（他們目前使用的 Reactj 概念），但我不知道如何像 Reactjs 在我的節點 js 服務器上那樣做。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.static ..，它只加載靜態檔案。
所以我決定添加一個端點，將站點轉換為動態：
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.
});
在 Reactj 中，他們做了類似的事情。它們注入 ReactDOM.render。他們有個：
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 頁面會怎樣。按照我說的步驟？
編輯：
I have to return a whole directory of files. (But some modified and some not) For instance: I modify the index.html but it has associated a css, js, bootstrap ... It has to work like an "app.use (express.static (" public "));" but with some modified files. In short, modify a file using node js and then call app.use (express.static ("public")); and that this file is modified. (Similar to what React does)
// Modify file
// calls app.use (express.static ("public")); (with the modification)
or would there be some way to inject the code into my "app" variable? Some of the style
app.injectPath ("public / index.html"). Tour_the_DOM (tag ["tag1"]) = "<div> add this div </div>";
Just like React does?
I can't use templates (pug, manillar...), because the source code of the pages is written elsewhere.
I have also read: https://es.reactjs.org/docs/add-react-to-a-website.html But I don't know how to integrate it with app.use (express.static ("public"))
這就是我正在尋找的。 https://tech-wiki.online/es/react-server-side-rendering.html 但它不起作用。有什么解決方案可以做同樣的事情嗎？
提前致謝。
uj5u.com熱心網友回復：
我不確定我是否完全理解您在這里嘗試做什么，但是 DOM 操作是由瀏覽器處理的，因此它發生在客戶端，而不是服務器端。
當您使用 express 時，您可以使用 sendFile() 將檔案發送到瀏覽器并執行 DOM 操作。
例如
索引.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>
應用程式.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}`)
})
uj5u.com熱心網友回復：
抱歉，我要離開 Node js。使用 node js 的“簡單錯誤”太多。我嘗試了兩個月來“非常關注”node js。
我必須呼叫許多庫來相互鏈接，渲染是手工完成的，還有無數的簡單錯誤。
我打算用PHP來做。
PHP 使您免于頭痛并解決了我的問題。如果是舊的。但它的力量太大了。
PHP是迄今為止最好的后端語言。很抱歉這個論壇上的節點 js。但真相令人痛心
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/331384.html
標籤：javascript html 节点.js 反应 dom
上一篇：在Python中使用minidom計算<ns1:Status>標記中“已注冊”行的數量
下一篇：如果未下載s3檔案，則捕獲錯誤