前端渲染與後端渲染

2021-09-23 08:13:12 字數 2226 閱讀 9332

前端渲染是通過ajax請求資料,然後通過js語法將資料展示到頁面中,稱之為前端渲染

後端渲染是通過後端語言 + 後端模板( ejs ) 將 頁面整個傳送給前端

後端模板

ejspug( jade )

art-template

現在流行的: 前端渲染

問題: 當前後端同時進行專案開發是, 後端資料介面沒有寫好,但是前端卻需要這個介面,這個時候怎麼辦?

分析: 需要一段資料

解決: 模擬假資料( mock資料 json-server / mock.js )

以上這種形式叫做 : 前後端架構分離

很久以前,沒有前端崗位的, 所有的網頁都需要後端完成, 那個時候的情況我們稱之為: 前後端耦合

node.js做專案的時候 ,就有兩種選擇了

前後端分離 :後端提供介面,前端渲染

前後端耦合: 後端渲染

直接借助乙個工具來搭建乙個node.js專案,這個工具叫做 express-generator ,這個工具幫助我們實現了express框架

建立express專案的流程

安裝 express-generator

$ cnpm i express-generator -g

建立express 專案

$ express -e 專案名稱-e是安裝 ejs 模板,支援js語法

分析目錄

啟動專案 package.json 中 npm 指令碼

$ npm run start

研究專案**

//引入專案所需要的第三方包

//引入專案路由配置檔案

var indexrouter =

require

('./routes/index');

var usersrouter =

require

('./routes/users');

express()

;// view engine setup

set(

'views'

, path.

join

(__dirname,

'views'))

;set

('view engine'

,'ejs');

use(

logger

('dev'))

;use

(express.

json()

);use(express.

urlencoded()

);use(

cookieparser()

);use(express.

static

(path.

join

(__dirname,

'public'))

);//路由及中介軟體

use(

'/', indexrouter)

;use

('/users'

, usersrouter)

;// catch 404 and forward to error handler

use(

function

(req, res, next));

//錯誤處理中介軟體,前面的所有中介軟體全部掛掉,錯誤處理中介軟體才會報錯

// error handler

use(

function

(err, req, res, next)

;// render the error page

res.

status

(err.status ||

500)

; res.

render

('error');

});

前端渲染與後端渲染

大概十年前,jsp php asp等為大多數 使用,也是由後端作為渲染。因為大多數工作都是由後端完成,對後端人員要求較高,前端的地位也就比較低。後端渲染的優勢 第一次搭建簡單 的速度快 seo 搜尋引擎優化 友好度高,特別是對於一些營銷購物推廣類 伺服器渲染不用關心瀏覽器相容性問題 隨著瀏覽器發展,...

前端渲染和後端渲染

定義 前端預定義好html,然後向後端請求資料,得到資料 xml json等 後,通過js去載入資料。優點 節省網路流量,利於seo,節省部分伺服器資源。缺點 前端處理資料費時,可能造成假死等。舉例 easyui 定義 在後端就渲染好html頁面,直接傳送給瀏覽器顯示。優點 前端頁面載入迅速,無資料...

前端渲染 vs 後端渲染

前端渲染是通過ajax請求資料,然後通過js語法將資料展示到頁面中,稱之為前端渲染 後端渲染是通過後端語言 後端模板 ejs 將 頁面整個傳送給前端 後端模板 ejspug jade art template 現在流行的 前端渲染 問題 當前後端同時進行專案開發是,後端資料介面沒有寫好,但是前端卻需...