版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
《Vue.Js基礎(chǔ)與應(yīng)用開發(fā)實戰(zhàn)（微課版）》配
套教學(xué)教案
單元
課時內(nèi)容服務(wù)器端渲染授課時間課時4
?區(qū)分服務(wù)器端渲染和客戶端渲染
?手動搭建項目實現(xiàn)簡單的服務(wù)器端渲染
?使用Nuxtjs框架實現(xiàn)服務(wù)器端渲染
教學(xué)目標(biāo)?認(rèn)知Vuc-SSR的工作原理
?能創(chuàng)建一個簡單的vue-ssr服務(wù)器端洎染項目、創(chuàng)建vue-cli改造而成的vue-
ssr服務(wù)器端渲染項目、基于Nuxt.js創(chuàng)建一個服務(wù)器端渲染應(yīng)用——旅游網(wǎng)
站
教學(xué)重點使用Nuxt.js框架實現(xiàn)服務(wù)器端渲染
教學(xué)難點使用Nuxtjs框架實現(xiàn)服務(wù)器端渲染
1.教學(xué)思路：先介紹服務(wù)器端渲染的概念，然后講解借助vue-server-rcndercr模塊手動
教學(xué)設(shè)計搭建項目實現(xiàn)簡的的服務(wù)器端渲染，最后講解使用Nuxt.js框架實現(xiàn)服務(wù)器端渲染。
2.教學(xué)手段：多媒體展示+軟件操作。
教學(xué)內(nèi)容
9.1區(qū)分服務(wù)器端渲染和客戶端渲染
為了更好地理解服務(wù)器端渲染，下面介紹幾個常用的概念。
①數(shù)據(jù)。通常來自數(shù)據(jù)庫或者笫三方服務(wù)等，例如用戶的信息、訂單詳情等。數(shù)據(jù)使用某些數(shù)據(jù)格式來
存儲和傳輸，例如JSON、XML、數(shù)組、MAPWo
②模板。一個頁面的基本輪廓和展示，模板定義了某個元素顯示在什么位置。例如，PHP/JSP就是模板
語言，還有很多的模板引擎，包括Smarty、Jad、JSX等。
③頁面。為了簡化后面的說明，把頁面狹義地定義為HTMLo
再引入一個公式：頁面=模板+數(shù)據(jù)。
上面加號的意思并不是加法，而是渲染（Render）,渲染就是將模板和數(shù)據(jù)拼裝成HTML頁面。
④服務(wù)器端渲染。渲染過程在服務(wù)器端完成，最終的渲染結(jié)果HTML字符串通過HTTP發(fā)送給客戶端。
對干客戶端而言，只是看到了最終的HTML頁面,看不到數(shù)據(jù).也看不到模板°服務(wù)器端先調(diào)用數(shù)據(jù)庫，獲得
數(shù)據(jù)之后，將數(shù)據(jù)和頁面元素進(jìn)行拼裝，組合成完整的HTML頁面，再直接返回給瀏覽器，以便用戶瀏覽。
⑤客戶端渲染?？蛻舳苏埱箜撁鏁r，服務(wù)器端把模板和數(shù)據(jù)發(fā)送給客戶端，通過請求JavaScnpt、CSS
等，在客戶端進(jìn)行渲染。
Vue是構(gòu)建客戶端應(yīng)用程序的框架。默認(rèn)情況下，可以在瀏覽器中輸出Vue組件，以生成DOM和操作
DOMo也可以將同一個組件渲染為服務(wù)器端的HTML字符串，將它們直接發(fā)送到瀏覽器，最后將這些靜態(tài)標(biāo)
記混合在客戶端上完全可交互的應(yīng)用程序中。
9.1.1熟知基本概念
在互聯(lián)網(wǎng)早期，前端頁面都是一些簡單的頁面。前端頁面都是后端將HTML拼接好，然后將它返回給前端
完整的HTML文件。瀏覽器獲取這個HTML文件之后就可以直接顯示了，這就是所謂的服務(wù)器端渲染。典型
的有通過“Java+Vek)city”“Node+Jade”進(jìn)行HTML模板拼接及渲戮。隨著前端頁面的復(fù)雜性越來越高,前端
的作用就不僅是頁面展現(xiàn)了，還有可能需要添加更多有復(fù)雜功能的組件。
隨著AJAX的興起，逐漸出現(xiàn)前端開發(fā)這個行業(yè)，前后端分禹變得越來越重要。這個時候，后端就不提供
完整的HTML頁面,而是提供一些API接口.返回一些JSON數(shù)據(jù),前端拿到該JSON數(shù)據(jù)之后再使用HTML
對數(shù)據(jù)進(jìn)行拼接，然后展現(xiàn)在瀏覽器中，這種方式就是客戶端渲染。由此可見，前端專注于UI的開發(fā)，后端
專注于邏輯的開發(fā)。
1.同構(gòu)
服務(wù)器端渲染的Vue應(yīng)用程序也可以被認(rèn)為是“同構(gòu)”或“通用”因為應(yīng)用程序的大部分代碼都可以在服務(wù)
器端和客戶端上運行，即同一套代碼既可以在服務(wù)器端渲染，也可以在客戶端渲染。當(dāng)首次訪問時，換言之，
當(dāng)訪問首屏頁面時，使用服務(wù)器謊渲染，返回已經(jīng)渲染完成的最終HTML頁面，這樣就同時解決了首屏白屏問
題和SE。問題。首屏頁面訪問完成后,當(dāng)再進(jìn)行交互時，則使用客戶端渲染，HTML、CSS、JavaScript等資
源都不需要再重新請求，只需要通過AJAX、WebSocket等途徑獲取數(shù)據(jù)，在客戶端完成渲染過程。
一個服務(wù)器端渲染的同構(gòu)Web應(yīng)用架構(gòu)示意圖如圖所示。得益于Node.js的發(fā)展與流行，JavaScript成
為一門同構(gòu)語售,這意味著只需要編寫一套代碼，就可以同時在客戶端與服務(wù)器端執(zhí)行。
客戶端
JavaScriptCSS
，公共組件7__API
(React.Redux)X**(Java,PHP.Node)
HTML服務(wù)器端/
(Node),
-J，
一個服務(wù)器端渲染的同構(gòu)Web應(yīng)用架構(gòu)示意圖
2.前端渲染
前端渲染的方式起源于JavaScript的興起，AJAX更是讓前端渲染更加成熟，前端渲染真正意義上實現(xiàn)了
前后端分離,前端只專注于UI的開發(fā)，后端只專注于邏輯的開發(fā)。前后端交互只通過約定好的API來交互，
后端提供JSON數(shù)據(jù)，前端循環(huán)JSON生成DOM插入頁面中去。
下面以Vue為例進(jìn)行說明。生產(chǎn)環(huán)境的頁面的HTML源代碼如下：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Vue</title>
</head>
<body>
<divid="app"></div>
<scripttype="text/javascript'src="xxx.js"></script>
<scripttype=,'text/javascript'src="yyy.js"></script>
<scripttype-"text/javascripfsrc",'zzz.js"></script>
</body>
</html>
這個就是瀏覽器從服務(wù)器端獲取到的HTML文件。這里只有<divid="app"></div>入口，以及引入一系列
的JavaScript文件。其實，用戶看到的頁面就是由這些JavaScript代碼渲染出來的，這就是前端渲染。
3.客戶端渲染
客戶端渲染（ClientSideRender,CSR）即傳統(tǒng)的SPA模式,Vue構(gòu)建的應(yīng)用程序默認(rèn)情況下是一個
HTML模板頁面，只有一個id為app的<div>根容器，然后通過webpack打包生成CSS、JavaScriot等資源
文件，瀏覽器再加載、解析來渲染HTMLo
客戶端渲染的數(shù)據(jù)是由瀏覽器通過AJAX請求動態(tài)取得的，再通過JavaScript文件將數(shù)據(jù)填充我DOM元
素并最終展示到網(wǎng)頁中。頁面上的內(nèi)容是加載的JavaScript文件渲染出來的，JavaScript文件運行在瀏覽器上
面，服務(wù)器端只返回一個HTML模板。
①客戶端渲染模式下，服務(wù)器端把渲染的靜態(tài)文件發(fā)送給客戶端，客戶端獲取服務(wù)器端發(fā)送過來的文件
后再運行一遍JavaScript代碼，根據(jù)JavaScript代碼的運行結(jié)果，生成相應(yīng)DOM,然后渲染給用戶。
②HTML僅作為靜態(tài)文件，客戶端在請求時，服務(wù)器端不做任何處理，直接以原文件的形式返回給客戶
端，然后根據(jù)HTML上的JavaScript文件生成DOM插入HTMLo
客戶端渲染模式下一般使用的是webpack-dev-server插件，它可以幫助用戶自動開啟一個服務(wù)器端，其
主要作用是監(jiān)控代碼并打包，也可以配合webpack-hot-middleware來進(jìn)行熱更替（HMR）,這樣能提高開發(fā)
效率。
4.服務(wù)器端渲染
服務(wù)器端渲染顧名思義就是將頁面或者組件通過服務(wù)器生成HTML字符串，然后將它們直接發(fā)送到瀏覽
器，最后將靜態(tài)標(biāo)記“混合”到客戶端上完全可交互的應(yīng)用程序中。整個渲染過程是在服務(wù)器端執(zhí)行的，瀏覽器
只負(fù)責(zé)展示，即頁面上的內(nèi)容是通過服務(wù)器端渲染生成的，瀏覽器直接顯示服務(wù)器端返回的HTML就可以了。
也就是說，網(wǎng)頁的HTML一般是后端服務(wù)器通過模板引擎渲染好后再交給前端的。
服務(wù)器端渲染的模式下，當(dāng)用戶第一次請求頁面時，由服務(wù)器犯需要的組件或頁面渲染成HTML字符串，
然后把它返回給客戶端?？蛻舳双@取的內(nèi)容是可以直接渲染然后呈現(xiàn)給用戶的HTML內(nèi)容，不需要為了生成
DOM內(nèi)容自己再去運行一遍JavaScript代碼。使用服務(wù)器端渲染的網(wǎng)站，可以說是“所見即所得”，頁面上呈
現(xiàn)的內(nèi)容在HTML源文件里也能找到。
Vue-SSR利用Node.js搭建頁面渲染服務(wù)，在服務(wù)器端完成頁面的渲染（把以前需要在客戶端完成的頁
面渲染放在服務(wù)器端來完成），便于輸出SEO更友好的頁面。
Vue進(jìn)行服務(wù)器端渲染時，需要利用Node.js搭建一個服務(wù)器，并添加服務(wù)器端渲染的代碼邏輯。它使用
webpack-dev-middleware中間件對更改的文件進(jìn)行監(jiān)控，使用wbpack-hot-middleware中間件進(jìn)行頁面的熱更
新，使用vue-server-rendrere插件來渲染服務(wù)器端打包的bundle文件到客戶端。
5.服務(wù)器端渲染和客戶端渲染的區(qū)別
服務(wù)器端渲染和客戶端的渲染的本質(zhì)區(qū)別是誰來渲染HTML頁面，如果HTML頁面在服務(wù)器端那邊拼接
完成，那么它就是服務(wù)器端渲染，而如果是前端做的HTML拼接及渲染的話，那么它就屬于客戶端渲染的。
其實前后端的渲染本質(zhì)是一樣的，都是字符串的拼接，將數(shù)據(jù)渲染進(jìn)一些固定格式的HTML代照中，形成
最終的HTML代碼展示在用戶頁面上。因為字符串的拼接必然會損耗一些資源，如果在服務(wù)器端渲染，那么消
耗的就是服務(wù)器端的資源。如果是在客戶端渲染，常見的手段是直接生成DOM插入HTML中，或者是使用一
些前端的模板引擎等。它們初次渲染的原理大多是將原HTML中的數(shù)據(jù)標(biāo)記（例如{{text}}）替換掉。
在前后端分離的項目中，前端部分需要先加載靜態(tài)資源，再采用異步的方式去獲取數(shù)據(jù)，最后來渲染頁面。
其中，在獲取靜態(tài)資源和異步獲取數(shù)據(jù)階段，頁面上是沒有數(shù)據(jù)的，這將會影響首屏的渲染速度和年戶體驗。
服務(wù)器端渲染解析HTML模板的工作是交給服務(wù)器完成的，客戶端只需要解析標(biāo)準(zhǔn)的HTML頁面即可，
取內(nèi)容的，則需要使用服務(wù)器端渲染來解決此問題。
8.怎么判斷一個網(wǎng)站是不是服務(wù)器端渲染
打開一個網(wǎng)站的首頁，然后查看網(wǎng)頁源代碼，可以看到與網(wǎng)頁內(nèi)容相關(guān)的HTML代碼，則就是服務(wù)器端渲
染的。例如Vue官網(wǎng)(網(wǎng)址為/)就屬于服務(wù)器端渲染，HTML內(nèi)容都是服務(wù)器端拼接完成
后返回到客戶端的。
能看到與網(wǎng)頁內(nèi)容相關(guān)的HTML代碼，且大部分代碼加載的是JavaScript文件則就是客戶端渲染，例如
http://h5.ele.me/msite/這個網(wǎng)站就是客戶端渲染，頁面內(nèi)容都是由JavaScript動態(tài)渲染的。
9.使用服務(wù)器端渲染需要權(quán)衡之處
使用服務(wù)器端渲染時還需要考慮以下問題。
(1)開發(fā)條件所限
一些瀏覽器特定的代碼只能在某些生命周期鉤子函數(shù)中使用；一些外部擴(kuò)展庫(ExternalLibrary)可能需
要特殊處理，才能在服務(wù)器端渲染應(yīng)用程序中運行。
(2)涉及構(gòu)建和部署的更多要求
與可以部署在任何青爭態(tài)文件服務(wù)器上的完全靜態(tài)SPA程序不同，服務(wù)器端渲染應(yīng)用程序需要處于Node.js
Server運行環(huán)境中。
(3)更多的服務(wù)器端負(fù)載
在Node.js中渲染完整的應(yīng)用程序顯然比僅提供靜態(tài)文件的Server更加占用CPU資源，因此如果能預(yù)料
在高流量環(huán)境下使用，則需準(zhǔn)備相應(yīng)的服務(wù)器端負(fù)載，并明智地采用緩存策略。
10.預(yù)渲染(Prerendering)
如果使用服務(wù)器端渲染只是用來改善少數(shù)營銷頁面(例如關(guān)于我們頁面、聯(lián)系我們頁面等)的SEC,那么使
用預(yù)渲染就可以了。無須使用Web服務(wù)器實時動態(tài)編譯HTML,而是使用預(yù)渲染方式，在構(gòu)建時簡單地生成
針對特定路由的靜態(tài)HTML文件。這樣做的優(yōu)點是設(shè)置預(yù)渲染更簡單，并可以將前端作為一個完全靜態(tài)的站
點O
如果使用webpack,可以使用prerender-spa-plugin輕松地添加預(yù)渲染，它己經(jīng)被Vue應(yīng)用程序廣泛應(yīng)
用。
9.1.2認(rèn)知vue-router(前端路由)的兩種路由模式
vue-router有hash模式和history模式兩種路由模式，默認(rèn)是hash模式。
1.hash模式
hash也稱為錨點，其本身是用來做頁面定位的，它可以使對應(yīng)的id元素顯示在可視區(qū)域。hash模式是指
URL中會自帶#號，例如http://localhosV#/logino其中加login就是hash值，雖然#出現(xiàn)在URL中，但不會被
包括在http請求中，對后端完全沒有影響，因此改變hash不會被重新加載頁面。
hash值的變化不會導(dǎo)致瀏覽器向服務(wù)器發(fā)出請求，而hash改變(只改變#后面的URL片段)則會觸發(fā)
hashchange事件。hash發(fā)生變化都會被瀏覽器記錄下來，從而可以使用瀏覽器的前進(jìn)和后退按鈕。
2.history模式
history模式是指URL中不會自帶#號，看起來比較美觀一些，例如http://localhost/loginohistcry模式利
用history.pushState來完成URL跳轉(zhuǎn)而無須重新加載頁面。由于hash模式路由屬于前端路由，無法提交到服
務(wù)器，因此服務(wù)器端渲染的路由需要使用history模式。
9.2手動搭建項目實現(xiàn)簡單的服務(wù)器端渲染
本節(jié)借助vue-server-renderer模塊手動搭建項目實現(xiàn)簡單的服務(wù)器端渲染。
9.2.1了解vue-server-renderer的作用及基本語法
在Vue中使用服務(wù)器端渲染，需要借助Vue的擴(kuò)展模塊vue-server-renderer，執(zhí)行以下命令安裝vue-server-
「enderer模塊：
npminstallvue-server-renderervue-save
執(zhí)行以下命令也可以安裝指定版本的vue-server-renderer?模塊：
npminstallvue-server-renderer02.6.x-save
vue-server-renderer模塊的主要功能是處理服務(wù)器加載，給Vue提供在Node.js服務(wù)器端渲染的功能v
1.createRenderer。方法
該方法用于創(chuàng)建一個renderer實例，例如：
constrenderer=require('vue-server-renderer').createRenderer();
2.renderer.renderToString(vm,cb)方法
該方法的作用是將Vue實例呈現(xiàn)為字符串，該方法的回調(diào)函數(shù)是一個標(biāo)準(zhǔn)的Node.js回調(diào)函數(shù)，它接收錯
誤作為第一個參數(shù)。示例代碼如下。
【示例】demo01-vue-ssr
略
保存文件renderer.js,然后在命令行中執(zhí)行noderenderer.js命令，輸出結(jié)果如下：
<divdata-server-rendered="true,'>Goodluck</div>
<divdata-server-rendered="true">Goodluck</div>
可以看到，在div中有一個特殊的屬性data-server-rendered,該屬性的作用是告訴Vue這是服務(wù)器端渲
染的元素，并且應(yīng)該以激活的模式進(jìn)行掛載。
3.createBundleRenderer(code,[rendererOptions])方法
Vue-SSR依賴包vue-server-render,它的調(diào)用支持兩種格式：createRenderer。方法和
createBundleRenderer()方法createRenderer。方法是以vue組件為入口的，而createBundleRenderer()方法以打包后
的JavaScript文件或JSON文件為入口。所以createbundleRencerer。方法的作用和createRenderer。方法
的作用是一樣的，無非就是支持的人口文件不一樣而已。
下面的代碼是createBundleRenderer()方法的使用實例。
【示例】demo02-vue-ssr
項目文件夾demo02-vue-ssr中的renderer.js文件的代碼如下：
constcreateBundleRenderer=require('vue-server-renderer').create6undleRenderer;
//絕對文件路徑
letrenderer=createBundleRenderer('./package.json')；
console.log(renderer);
將以上代碼保存為renderer.js文件，在命令行中執(zhí)行noderenderer.js命令，輸出結(jié)果如下：
(
renderToString:[Function:renderToString],
renderToStream:[Function:renderToStream]
)
可以看到，該方法也同樣有renderToStringO^flrenderToStream。兩個方法。
9.2.2直接編寫代碼將Vue實例渲染為HTML
【實例9?1】在vue?ssr項目中編寫代碼將Vue實例渲染為HTML
【操作要求】
創(chuàng)建vue-ssr項目01-vue-ssr,在該項目中直接編寫代碼將Vue實例渲染為HTML?
【實現(xiàn)過程】
1.創(chuàng)建vue-ssr項目
在指定文件夾下，在命令行中執(zhí)行以下命令創(chuàng)建一個vue-ssr項目01-vue-ssr:
mkdir01-vue-ssr
cd01-vue-ssr
2.項目初始化
在命令行中執(zhí)行以下命令：
npminit-y
成功執(zhí)行上述命令后，會在文件夾01-vue-ssr中生成一個package.json文件。
3.創(chuàng)建服務(wù)器腳本文件serverjs
vue-server-renderer成功安裝后，創(chuàng)建服務(wù)器腳本文件server.js,實現(xiàn)將Vue實例的渲染結(jié)果輸出到控
制臺界面中。
(1)創(chuàng)建一個Vue實例
constVue=require('vue')
constapp=newVue({
template:*<div>Goodluck</div>'
})
(2)創(chuàng)建一個renderer
constrenderer=requirefvue-server-renderer^.createRendererO
(3)將Vue實例渲染為HTML
renderer.renderToString(app,(err,html)=>{
if(err)throwerr
console.log(html)
))
4.執(zhí)行運行腳本文件的命令
在命令行中執(zhí)行以下命令：
nodeserver.js
成功執(zhí)行該命令后，命令行中輸出以下內(nèi)容：
<divdata-server-rendered="true">Goodluck</div>
從輸出結(jié)果可以看出，在<dir>標(biāo)簽中添加了一個特殊的屬性data-server-rendered,該屬性告訴客戶端的
Vue標(biāo)簽是由服務(wù)器端演染的。vue-server-renderer的作用是將Vue實例渲染成HTML結(jié)構(gòu)。
9.2.3使用Express框架搭建服務(wù)器端渲染
FxprRss是一個基于Nedajs平臺的Wfth庖用開發(fā)框架,用來快速開發(fā)Web庖用程序。
【實例9-2］在vue-ssr項目中使用Express框架搭建服務(wù)器端渲染
【操作要求】
創(chuàng)建vue-ssr項目02-vue-ssr,在該項目中使用Express框架搭建服務(wù)器端渲染。
【實現(xiàn)過程】
1.創(chuàng)建vue-ssr項目
在指定文件夾下，在命令行中執(zhí)行以下命令創(chuàng)建一個vue-ssr項目02-vue-ssr:
mkdir02-vue-ssr
cd02-vue-ssr
2.項目初始化
在命令行中執(zhí)行以下命令：
npminit-y
成功執(zhí)行上述命令后，會在文件夾02-vue-ssr中生成一個package.json文件。
3.創(chuàng)建template.html文件
在剛創(chuàng)建的Vue項目中創(chuàng)建template.html文件，編寫模塊頁面。template.html文件的代碼如下：
<!DOCTYPEhtml>
<html>
<head><title>輸出當(dāng)前位假</litle></head>
<body>
<!-vue-ssr-outlet->
</body>
</html>
上述代碼中，注釋<!--vue-ssr-outlet-，是HTML注入的位置，該注釋不能刪除，否則會報錯。
4.使用Express框架實現(xiàn)服務(wù)器端渲染
(1)在vue-ssr項目中安裝Express框架
在命令行中執(zhí)行以下命令安裝Express框架：
npminstallexpress-save
在命令行中執(zhí)行以下命令安裝指定版本的Express框架：
npminstallexpress@4.17.x-seve
(2)創(chuàng)建server.js文件
在項目根文件夾02-vue-ssr口創(chuàng)建server.js文件，在該文件中編寫下表所示的代碼。
項目根義件夾02-vue-ssr中server.js文件的代碼
序號代碼
01//創(chuàng)建Vue實例
02constVue=require('vue')
03constserver=requirefexpress')()
04//讀取模板
05constrenderer=require('vue-server-renderer').createRenderer({
06template:requireCfs'J.readFileSyncC./template.html','utf-8')
07})
08constcontext={
09title:'vuessr1,
10metas:"
11<metaname="keyword,'content="vue,ssr">
12<metaname="description"content="vuesrrdemo">
13
14}
15//處理GET方式請求
16server.get('*',(req,res)=>{
17rGS.SGt({'Cont?nt-TypQ':'text/html;charsGt=utf-8'})
18constvm=newVue({
19data:{
20url:req.url
21}，
22〃使用兩對大括號進(jìn)行HTML轉(zhuǎn)義插值
23template:、<div>當(dāng)前訪問的URL是：{{url}}</div>\
24})
25//將Vue實例渲染為HTML后輸出
26renderer.renderToString(vm,context,(err,html)=>{
27if(err){
28res.status(500i.end('err:'+err)
29return
30)
31res.end(html)
32))
33})
34server.listen(3000,function(){
35console.Iog('serverstartedatlocalhost:3000')
36!)
代碼第06行使用了一個頁面模板template.html,當(dāng)渲染Vue應(yīng)用程序時，renderer只從應(yīng)用程序生成
HTML標(biāo)記(Markup、本示例中，必須用一個額外的HTML頁面包裹容器來包裹生成的HTML標(biāo)記。為了簡
化這些，可以直接在創(chuàng)建renderer時提供一個頁面模板。大多數(shù)時候，會將頁面模板放在特有的文件中，例如
template.html,該頁面模板的代碼如前所述。
表9-2的第26行代碼通過傳入一個'渲染上下文對象”，作為renderToString()函數(shù)的第2個參數(shù)來提供插值數(shù)
據(jù)。也可以與Vue應(yīng)用程序?qū)嵗蚕韈ontext對象，允許模板插值中的組件動態(tài)地注冊數(shù)據(jù)。
(3)執(zhí)行啟動服務(wù)器的命令
在命令行中執(zhí)行以下命令啟動服務(wù)器：
nodeserver.js
成功執(zhí)行上述命令后，打開瀏覽器，在地址欄中輸入“http://localhost:3000/"，按【Enter】鍵，頁面顯示“當(dāng)
前位置:心
在瀏覽器中查看源代碼如下：
<!DOCTYPEhtml>
<html>
<head>vtitle>輸出當(dāng)前位置v/1itle>〈/head>
<body>
<divdata-server-rendered='true">?:/</div>
</body>
</html>
從以上代碼可以看出，data-server-rendered屬性的值為true,說明當(dāng)前頁面是服務(wù)器端渲染后的結(jié)果。
9.2.4使用Koa框架搭建服務(wù)器端渲染
Koa是一個基于Node.js平臺的Web開發(fā)框架，Koa框架能幫助開發(fā)者快速地編寫服務(wù)器應(yīng)用程序，通
過async()函數(shù)很好地處理異步的邏輯，有力地增加錯誤處理能力。
【實例9-3］在vue-ssr項目中使用Koa框架搭建服務(wù)器端渲染
【操作要求】
創(chuàng)建vue-ssr項目03-vue-ssr,在該項目中使用Koa框架搭建服務(wù)器端渲染。
【實現(xiàn)過程】
1.創(chuàng)建vue-ssr項目
在指定文件夾下，在命令行中執(zhí)行以下命令創(chuàng)建一個vue-ssr項目03-vue-ssr:
mkdir03-vue-ssr
cd03-vue-33r
2.項目初始化
在命令行中執(zhí)行以下命令：
npminit-y
成功執(zhí)行上述命令后，會在文件夾03-vue-ssr中生成一個package.json文件。
3.創(chuàng)建template.html文件
在剛創(chuàng)建的Vue項目中創(chuàng)建1emplate.html文件，編寫模塊頁面。template.html文件的代碼如下：
<!DOCTYPEhtml>
<html>
<head><title>輸出當(dāng)前位置</1itle></head>
<body>
<!-vue-ssr-outlet->
</body>
</html>
上述代碼中，)ifl<!-vue-ssr-outlet->MHTML注入的位置，該注釋不能刪除，否則會報錯。
4.使用Koa框架實現(xiàn)服務(wù)器端渲染
使用Koa框架實現(xiàn)服務(wù)器端演染的過程與代碼編寫如下：
(1)在vue-ssr項目中安裝Koa框架
在命令行中執(zhí)行以下命令安裝Koa框架：
npminstallkoa@2.8.x-save
(2)創(chuàng)建server.js文件
略
(3)執(zhí)行啟動服務(wù)器的命令
在命令行中執(zhí)行以下命令啟動服務(wù)器：
nodeserver.js
成功執(zhí)行上述命令后，打開瀏覽器，在地址欄中輸入“http:〃localhost:8080/“，按【Enter】鍵，頁面顯示“當(dāng)
前位置：r0
9.3使用Nu戲js框架實現(xiàn)服務(wù)器端渲染
Nuxt.js是一個基于Vue.js的輕量級服務(wù)器端渲染框架，可以月來創(chuàng)建服務(wù)器端渲染應(yīng)用，也可以充當(dāng)靜
態(tài)站點引擎生成靜態(tài)站點應(yīng)用，具有優(yōu)雅的代碼結(jié)構(gòu)和熱加載等特性。
9.3.1頁面和路由
在項目中，pages文件夾用來存放應(yīng)用的路由及頁面文件，Nuxt.js項目創(chuàng)建時該文件夾下默認(rèn)會有兩個文件，
分別是index.vue和README.md,當(dāng)直接訪問根路徑/的時候，默認(rèn)打開的是index.vue文件。
Nuxt.js會根據(jù)文件夾結(jié)構(gòu)自動生成對應(yīng)的路由配置，將請求路徑和pages文件夾下的文件名映射，例如，
訪問/test就表示訪問test.vue文件,如果文件不存在，就會輸出“Thispagecouldnotbefound"(該頁面未找
到)錯誤提示信息。
Nuxt.js提供了非常方便的自動路由機(jī)制，當(dāng)它檢測到pages又件夾下的文件發(fā)生變更時，就會自動更新
路由。通過查看.nuxt'router.js路由文件，可以看到Nuxt.js自動生成的代碼。只要編寫.vue文件，Nuxt.js就會
自動生成路由文件，然后到瀏覽器就可以直接訪問。
1.一級路由
pages文件火下的所有一級.vue文件或者是一級文件火下的index.vue文件都是一級路由，pages文件災(zāi)
下的子文件夾以及.vue文件的結(jié)構(gòu)如下。
pages
J—about
|—Jd.vue
」index.vue
|—index.vue
1-news.vue
pages文件夾下的index.vue、news.vue屬于一級路由，只是直接放在了pages文件夾下，Nuxt.js會自動
檢測pages文件夾下的所有.vue文件，并自動生成路由，不需要編寫代碼進(jìn)行配置，因此如非必要,pages
文件夾的名稱不要隨意改動。通常訪問路徑為http:〃localhost:3000/index或http:〃
localhost:3000/news,分別對應(yīng)著首頁(index.vue)和新聞頁(news.vue卜
about文件夾下的index.vue文件也屬于一級路由，只不過是放在了about文件夾下。當(dāng)訪問about路由時，
會查找有沒有一級節(jié)路由about.vje,如果沒有就查找about文件夾并且默認(rèn)會查找index.vue文件。不管是
哪種方式，訪問路徑都為http://localhost:3000/abouto
2.二級路由
所謂二級路由就是建立一個與一級路由同名的文件夾，這個文件夾下的.vue文件就是二級路由。例如
news.vue需要建立一個news義件夾來存放news的一級路由,結(jié)構(gòu)如下。
pages
(-about
||—Jd.vue
I(—aboutChild.vue
1-index.vue
news
I」newsChild.vue
卜index.vue
1—news.vue
訪問路徑分別為http://localhost:3000/about/aboutChild與http://localhost:3000/news/newsChildo一級路由里
寫一個可以存放二級路由的標(biāo)簽<nuxt-child/>o
3.動態(tài)路由
對于以下的結(jié)構(gòu)。
pages
(―about
1—Jd.vue
I」index.vue
(—index.vue
」news.vue
如果要跳轉(zhuǎn)到about文件夾中的index.vue頁面，可以這么寫：
<nuxt-link:to="{name:'about'"〉about</nuxt-link>
如果需要傳遞參數(shù)，則可以這么寫：
<nuxt-link:to="{name:'about/123456'">about</nuxt-link>
如果傳遞的是id，則需要先建立一個」d.vue的文件作為接收參數(shù)的頁面，注意必須這么建，這是一個Nuxt
的約定。
9.3.2頁面跳轉(zhuǎn)
Nuxt.js中使用<nuxt-link>組件來完成頁面中路由的跳轉(zhuǎn)，它類似于Vue中的路由組件<router-
link>,它們具有相同的屬性，并且使用方式也相同。需要注意的是，在Nuxtjs項目中不要直接使用<a>標(biāo)簽來進(jìn)
行頁面的跳轉(zhuǎn)，因為<a>標(biāo)簽是重新獲取一個新的頁面，而<nuxt-link>更符合SPA的開發(fā)模式。
頁面跳轉(zhuǎn)的語法格式如下：
<nuxt-link:to="{name:*.vue文件名稱'}">頁面名稱</nuxt-link>
例如：
<nuxt-link:to="{name:'details'}">查看詳情頁</nuxt?link>
頁面跳轉(zhuǎn)時，參數(shù)傳遞的語法格式如下：
<nuxt-link:to="{name:'.vue文件名稱'，params:{參數(shù)名：參數(shù)值}}”>頁面名稱v/nuxt-link>
<nuxt-link:to="{name:'.vue文件名稱queiy{參數(shù)名：參數(shù)值}}">頁面名稱</nuxt-link>
例如：
<nuxt-link:to="{name:'details',params:{id:'123456'}}"》查看詳情頁</iuxt-link>
<nuxt-link:to=',{name:'details',query:{id:'123456'}}”>查看詳情頁</nuxt-link>
1.聲明式路由與編程式路由
聲明式路由與編程式路由是Nuxt.js中頁面跳轉(zhuǎn)的兩種方式。
(1)聲明式路由
在頁面中使用<nuxt-link>標(biāo)簽實現(xiàn)聲明式路由跳轉(zhuǎn)。以pages\test.vue頁面為例，實現(xiàn)代碼如下：
<template>
<div>
<div>
<nuxt-linkto="/sub/tes<’>跳轉(zhuǎn)到sub/test</nuxt-link>
</div>
<div>test</div>
</div>
</template>
(2)編程式路由
編程式路由就是在JavaScript代碼中通過程序代碼實現(xiàn)路由的跳轉(zhuǎn)。以pages\sub\test.vue頁面為例，實
現(xiàn)代碼如下：
<template>
<div>
<button@click="jumpTo”>跳轉(zhuǎn)到test〈/button>
<div>sub/test</div>
</div>
</template>
<script>
exportdefault{
methods:{
jumpTo(){
this.$router.push(7test')
}
}
)
</script>
Button組件綁定jumpTot)方法，然后在methods中加入jumpTo()方法，該方法中使用
this.$router.push(7test')導(dǎo)航至！］test頁面,實現(xiàn)了路由跳轉(zhuǎn)功能。
2.同級文件夾路由跳轉(zhuǎn)與嵌套路由跳轉(zhuǎn)
假設(shè)在文件夾pages中有1個子文件夾home和兩個.vue文件(index.vue,home.vue)，子文件夾home
中也有兩個.vue文件(title.vue.xxx.vue),文件夾與文件的結(jié)構(gòu)如下。
pages
|—home
||—title.vue
|1-xxx.vue
index.vue
1-home.vue
(1)同級文件夾路由跳轉(zhuǎn)
從當(dāng)前文件夾中的index.vue跳轉(zhuǎn)到同級文件夾下的home.vue路由下，這種方式很簡單，代碼如下：
<nuxt-linkto=7home'>HOMEpage</nuxt-link>
也可以寫成以下形式，t。前面有半角冒號：：
<nuxt-link:to="{name:'home.vue'}">HOMEpage</nuxt-link>
(2)嵌套路由跳轉(zhuǎn)
如果需要從當(dāng)前文件夾中的home.vue跳轉(zhuǎn)到同級文件夾home中的title.vue,由于在pages文件夾下有一
個和home子文件夾同書的home.vue,在home.vue中添加以下代碼即可切換到title.vue中：
<nuxt-linkto="/home/title,,>home/title</nuxt-link>
<nuxt-child></nuxt-child>
如果需要從當(dāng)前文件夾中的index.vue跳轉(zhuǎn)到同級文件夾home中的title.vue,可以通過動態(tài)添加路由的
方法實現(xiàn)，在index.vue中添加以下代碼即可：
<nuxt-link:to="{name:'home-title',params:{id:'title'}}">title</nuxt-link>
關(guān)鍵點是要把Htle.vue的名字修改為」itle.vue，其中id:'title'的目的是使path為/home/title，這樣就實現(xiàn)了
嵌套路由跳轉(zhuǎn)。
如果需要在_title.vue中跳轉(zhuǎn)到同級文件夾下的xxx.vue中，在」itle.vue中添加以下代碼即可：
<nuxt-linkto='/home/xxx'>xxx</nuxt-link>
【實例9-4】創(chuàng)建Nuxt.js項目搭建服務(wù)器端渲染
【操作要求】
創(chuàng)建Nuxt.js項目04-nuxt-ssr,在該項目中搭建服務(wù)器端渲染。
【實現(xiàn)過程】
1.全局安裝create-nuxt-app腳手架工具
在命令行中執(zhí)行以下命令，完成create-nuxt-app腳手羋T具的全局安裝：
npminstallcreate-nuxt-app-g
執(zhí)行以下命令，可以安裝指定版本的create-nuxt-app腳手架工具：
npminstallcreate-nuxt-app@2.9.x-g
2.創(chuàng)建Nuxt.js項目
在指定文件夾下執(zhí)行以下命令，創(chuàng)建Nuxt.js項目：
create-nuxt-app04-nuxt-ssr
命令啟動后，會有一些選項需要進(jìn)行選擇例如項目名稱選擇04-nuxt-ssr程序開發(fā)語言選擇“JavaScript”，
包管理器選擇“Npm”，渲染模式(Renderingmode)選擇“Universal(SSR/SSG)”選項等。各個選項的選擇結(jié)
果如下：
create-nuxt-appv3.7.1
□GeneratingNuxt.jsprojectin04-nuxt-ssr
?Projectname:04-nuxt-ssr
?Programminglanguage:JavaScript
?Packagemanager:Npm
?UIframework:None
?Nuxt.jsmodules:(Press<space>toselect,<a>totoggleall,<i>toinvertselection)
?Lintingtools:(Press<space>toselect,<a>totoggleall,<i>toinvertselection)
?Testingframework:None
?Renderingmode:Universal(SSR/SSG)
?Deploymenttarget:Server(Node.jshosting)
?Developmenttools:(Press<space>toselect,<a>totoggleall,<i>toinvertselection)
?WhatisyourGitHubusername?
?Versioncontrolsystem:None
成功創(chuàng)建Nuxt.js項目后，命令行中會顯示以下信息：
Successfullycieuledprujeul04-nuxl-ssr
Togetstarted:
cd04-nuxt-ssr
npmrundev
Tobuild&startforproduction:
cd04-nuxt-ssr
npmrunbuild
npmrunstart
3.啟動Nuxt.js項目
在命令行中執(zhí)行以下命令，啟動Nuxt.js項目：
cd04-nuxt-ssr
npmrundev
在Nuxt.js項目04-nuxt-ssr的啟動過程中，命令行中會出現(xiàn)圖9-2所示的提示信息。
Nuxt.js項目04-nuxt-ssr啟動過程中命令行的提示信息
打開瀏覽器，在地址欄中輸入“http:〃localhost:3000/",按［En:er］鍵后，04-nuxt-ssr首頁的瀏覽結(jié)果如
圖9-3所示。
ZANuxtJS
Nuxt.js項目04-nuxt-ssr首頁的瀏覽結(jié)果1
4.查看創(chuàng)建Nuxt.js項目默認(rèn)生成的文件
(1)查看package.json文件中的代碼
略
(2)查看nuxt.config.js文件中的代碼
略
(3)查看文件夾.nuxt下router.js文件中的代碼
在Nuxt.js項目新建頁面時，Nuxt.js會自動在.nuxt/router.js文件中注冊好路由，訪問的默認(rèn)文件是
index.vue<>
略
5.創(chuàng)建新的.vue文件實現(xiàn)所需功能
(1)在pages文件夾中的index.vue文件中編寫代碼
將圖片文件tO1.jpg復(fù)制到static文件夾中，然后在index.vue文件中添加以下代碼：
<template>
<imgsrc="-/static/tO1.jpg"alt='"'>
</template>
<script>
exportdefault{}
</script>
對新添加的代碼予以保存。
打開瀏覽器，在地址欄中輸入“http:〃localhost:3000J按［Enter］鍵后，首頁的瀏覽結(jié)果如圖所示。
Nuxt.js項目04-nuxt-ssr首頁的瀏覽結(jié)果2
(2)在Nuxt.js項目中創(chuàng)建與使用組件
在文件夾components中創(chuàng)建User.vue文件，打開User.vue文件，添加以下代碼：
<template>
<p>歡迎登錄</p>
</template>
在pages文件夾中的index.vue添加以下代碼：
<template>
<div>
<User></User>
</div>
</template>
<script>
importUserfrom~/comporents/User.vue*
exportdefault{
components:{
User
}
}
</script>
重新瀏覽index.vue頁面，首頁的瀏覽結(jié)果如圖所示。
OX
<-->C@localhost：3000☆公介士：
歡I膻錄
Nuxt.js項目04-nuxt-ssr首頁的瀏覽結(jié)果3
(3)在Nuxt.js項目中使用布局
在文件夾04-nuxt-ssr中創(chuàng)建子文件夾layouts,在該子文件夾中創(chuàng)建myNav.vue文件，再在該文件中輸
入以下代碼：
<template>
<div>
<ul>
vli>登錄v/li>
<li>注冊</li>
</ul>
<nuxt/>
</div>
</template>
代碼中的<的乂(/>與vue-route的<router-view/>作用類似。
在pages文件夾中的index.vue文件中添加以下代碼：
<template></template>
<script>
exportdefault{
layout:'myNav'
)
</scrlpt>
重新瀏覽index.vue頁面，首頁的瀏覽結(jié)果如圖所示。
+
<■">C①localhos
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 單身聯(lián)誼會策劃方案
- 2026山東威海市環(huán)翠區(qū)民兵訓(xùn)練基地招聘事業(yè)單位人員2人備考筆試試題及答案解析
- 水庫項目施工方案
- 2025北京農(nóng)業(yè)農(nóng)村部科技發(fā)展中心招聘4人備考筆試試題及答案解析
- 護(hù)理專升本五官科護(hù)理學(xué)知識精講
- 2025浙江寧波人才服務(wù)有限公司招聘2人備考考試題庫及答案解析
- 功血護(hù)理中的疼痛管理
- 儀器儀表廠車間質(zhì)量抽檢管理方案
- 大宗氣體站項目技術(shù)方案
- 2026年陜西交通控股集團(tuán)有限公司校園招聘備考考試題庫及答案解析
- 2026年公安機(jī)關(guān)理論考試題庫300道（培優(yōu)a卷）
- 橋機(jī)安裝拆卸監(jiān)理實施細(xì)則
- 志愿者服務(wù)品牌建設(shè)方案
- 2025年個人信息保護(hù)專項工作總結(jié)與整改報告
- 2025年秋季學(xué)期國家開放大學(xué)《人文英語3》形考任務(wù)綜合測試完整答案（不含聽力部分）
- GB/T 191-2025包裝儲運圖形符號標(biāo)志
- 688高考高頻詞拓展+默寫檢測- 高三英語
- 2022年4月自考《市場營銷學(xué)》真題(完整試題)含答案
- 輸變電工程綠色建造
- 儲罐檢修-罐壁貼板補焊施工方案
- 超星爾雅學(xué)習(xí)通《藝術(shù)鑒賞》章節(jié)測試含答案
評論
0/150
提交評論