前後端渲染詳解

2021-10-04 20:17:03 字數 2262 閱讀 6927

訪問網頁時,先請求到 html 內容,並渲染出來。然後根據需要傳送 ajax 請求獲取後台返回的資料來更新頁面。

區域性重新整理。無需每次都進行完整頁面請求

懶載入。如在頁面初始時只載入可視區域內的資料,滾動後rp載入其它資料,可以通過 react-lazyload 實現

富互動。使用 js 實現各種酷炫效果

節約伺服器成本。省電省錢,js 支援 cdn 部署,且部署極其簡單,只需要伺服器支援靜態檔案即可

天生的關注分離設計。伺服器來訪問資料庫提供介面,js 只關注資料獲取和展現

js 一次學習,到處使用。可以用來開發 web、serve、mobile、desktop 型別的應用

前端渲染就是先請求到頁面的資料,再去發ajax請求拿到資料,再把拿到的資料去更新頁面

//這裡實現乙個小案例

index.html

banana

pear -->

index.js

//後端服務**

const express = require('express')

//靜態資源託管

let fruits = [

'banana',

'pear'

]res.send(fruits)

}) console.log('服務啟動成功')

})

???

localhost:3000是渲染的前端頁面

localhost:3000/getfruits是陣列

訪問網頁時,後端將 html 內容與 json 資料拼接好之後再返回到客戶端來渲染。

seo服務端渲染不用關心瀏覽器相容性問題(隨意瀏覽器發展,這個優點逐漸消失)

對於電量不給力的手機或平板,減少在客戶端的電量消耗很重要

ejs官網

案例1

index.ejs

index.js

const express = require('express')

//設定模板引擎的配置

//訪問這個位址的時候,講模板頁面的內容輸出

/*** 渲染模板頁面

* res.render(view,locals)

* -view 要渲染的模板頁面的名字,直接寫檔名即可,可以省略字尾

* -locals 要攜帶到模板頁面中的資料

*/res.render('index.ejs', )

//模板變數可以傳到模板頁面中

}) console.log('服務啟動成功')

})

頁面渲染成果:

案例2

hello.ejs

姓名:年齡:

index.js

const express = require('express')

//設定模板引擎的配置

//問號後面的引數不可以寫死

//建構函式相當於req.query.name=name

const = req.query

res.render('hello.ejs', )

}) console.log('服務啟動成功')

})

頁面渲染成果

案例3

world.ejs

index.js

res.render('world', )

})

頁面渲染成果

案例4

world.ejs

id名字

**

index.js

res.render('world', ,,]

})})

頁面渲染成果

前後端渲染頁面的區別?

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

前後端分離方式渲染資料(2018 11 12)

一 前後端分離 渲染資料 總的來說就是在index.js中向某個埠甩出data.json中的資料 然後在.html檔案中從這個埠中獲取這個資料然後將其遍歷到網頁中 先生成express專案 在bin www 中檢視埠號 模擬乙個data.json 資料 檢查是否成功引入jquery npm star...

詳解前後端互動 B S

千鋒逆戰班,rayson.jin學習打卡第三天!今天給大家介紹一下前後端互動 b s。在伺服器上訪問 1.把我們的 放在 www 目錄裡面 2.通過再瀏覽器位址列輸入 localhost 或者 127.0.0.1 的方式檢視 書寫位置 寫在乙個 php 字尾的檔案裡面,以 結尾,注意 檔名不能用中文...