前端渲染與後端渲染

前端渲染是通過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 現在流行的 前端渲染 問題 當前後端同時進行專案開發是，後端資料介面沒有寫好，但是前端卻需...