訪問網頁時,先請求到 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 字尾的檔案裡面,以 結尾,注意 檔名不能用中文...