後端渲染資料到頁面

2021-09-24 10:08:43 字數 1542 閱讀 8899

1、在建立的資料夾下建好相應檔案,如html,js,json等

2、在資料夾下開啟終端,輸入命令:npm init -y,初始化生成package.json檔案

3、使用express包建立介面,安裝express,命令為:

npm i express -d
4、在js檔案中引入express,語句為:

const express = require('express')

6、建立伺服器,語句為:

console.log(`the server is running at:http://$:$`) //提示語句,說明當前伺服器執行的埠})

此時需要定義host和port

const host = 'localhost';

const port = 8000;

7、暴露介面

res.json()})

8、測試介面

​ 啟動伺服器,即執行js檔案,命令為:

nodemon index.js  //自己的js檔案是哪個就執行哪個
伺服器啟動成功會在終端輸出the server is running at:http://localhost:8000

​ 去insomnia測試,輸入http://localhost:8000看伺服器執行是否有輸出結果

9、去html頁面發ajax

​ 先引入jquery,在bootcdn**去複製jquery標籤

$.ajax(

})

寫入這段**,傳送ajax請求,ctrl+b執行,控制台會報跨域錯誤,此時,需要解決跨域問題,可以前端跨域,也可以後端跨域,這裡選擇後端跨域,所以需要去js檔案中解決跨域問題

10、使用cors跨域,可以去npm**查詢使用方法

先安裝cors,命令為

npm i cors -d
在js檔案中引入cors,語句為

const cors = require('cors')
"origin":"*",

"method":"get","post","head","put","delete",

"preflightcontinue":false,

"optionssuccessstatus":200 //這段**可以在npm**查詢到,複製進來使用即可

}))

此時跨域問題就解決了,重新整理html頁面,測試伺服器連線,正常會在控制台接收到傳送過去的資料

11、渲染頁面

拿到資料後通過jquery方法將資料渲染到頁面

request('',(error,response,data)=>)})

這裡需要引入request

13、使用檔案讀取的方式請求資料

fs.readfile('./text.json','utf8',(error,data)=>)})

這裡需要引入fs

前後端渲染頁面的區別?

我們都知道模板都是需要渲染的,最近在使用react,它是後端渲染的,而angular是前端渲染的。要弄清前後端渲染的區別,先來看看瀏覽器在完整展示乙個頁面前做了哪些工作 載入 根據請求的url進行網域名稱解析,向伺服器發起請求,接收檔案 html js css 圖象等 解析 從html解析出dom ...

websocket資料過多分批渲染到頁面

業務需求 感測器採集到的振動資料需要全部記錄,當條件發生變化的時候需要及時反饋並記錄當下的資料並觸發機器關閉 實時資料與設定的上限資料與下限資料同時體現在echarts折線圖之中,當實時資料超過上線時觸發報警並關機。由於資料量太大,一秒鐘至少一百條,因此實時渲染到echarts上會導致整個頁面卡死。...

React如何從後端獲取資料並渲染到前端?

id name name name value reactdom.render react.createelement hellomessage,mountnode ajax done function data class servicelist extends react.component r...