服務器端渲染（SSR)
知識儲備
- ES6
- Nodejs
- Vue
- React
- Angular
什么是服務器端渲染
- 前端渲染：html頁面作為靜態檔案存在，前端請求時后端不對該檔案做任何內容上的修改，直接以資源的方式回傳給前端，前端拿到頁面后，根據寫在html頁面上的js代碼，對該html的內容進行修改，
- 服務端渲染：前端發出請求后，后端在將HTML頁面回傳給前端之前，先把HTML頁面中的特定區域，用資料填充好，再將完整的HTML回傳給前端，在SPA場景下，服務端渲染都是針對第一次get請求，它會完整的html給瀏覽器，瀏覽器直接渲染出首屏，用不著瀏覽器端多一個AJAX請求去獲取資料再渲染，
為什么使用服務器端渲染
優點：
- 更好的 SEO，因為傳統的搜索引擎只會從 HTML 中抓取資料，這會導致前端渲染的頁面無法被抓取，
- 更快的內容到達時間(time-to-content)，特別是對于緩慢的網路情況或運行緩慢的設備 ，頁面首屏時間大概有80%消耗在網路上，剩下的時間在后端讀取資料以及瀏覽器渲染，顯然要優化后面的20%是比較困難的，優化網路時間是效果最明顯的手段，傳統的Ajax請求是先請求js再由js發起資料請求，兩項時間再加上瀏覽器渲染時間才是首屏時間，而SSR能將兩個請求合并為一個，
缺點：
- 更多的服務器端負載，
- 服務器端和瀏覽器環境差異帶來的問題，例如document等物件找不到的問題，
如何選擇
建議：如果注重SEO的站點，非強互動的頁面，建議用SSR；像后臺管理頁面這類強互動的應用，建議使用前端渲染，
1. Nuxt.js服務器端渲染
學習目標
- 了解Nuxt.js的作用
- 掌握Nuxt.js中的路由
- 掌握layouts、pages以及components的區別
- 能夠在Nuxt.js專案中使用element-ui
- 掌握Nuxt.js中異步獲取資料的方式
- 完成小專案
- 掌握SEO的優化
1.1 Nuxt.js入門
1.1.1 什么是Nuxt.js
Vue服務端渲染官網
Nuxt.js官網
Nuxt.js 是一個基于 Vue.js 的通用應用框架，
1.1.2 第一個Nuxt應用程式
npm i create-nuxt-app -g
create-nuxt-app my-nuxt-demo
cd my-nuxt-demo
npm run dev
1.1.3 檔案結構分析
└─my-nuxt-demo
├─.nuxt // Nuxt自動生成，臨時的用于編輯的檔案，build
├─assets // 用于組織未編譯的靜態資源如LESS、SASS或JavaScript,對于不需要通過 Webpack 處理的靜態資源檔案，可以放置在 static 目錄中
├─components // 用于自己撰寫的Vue組件，比如日歷組件、分頁組件
├─layouts // 布局目錄，用于組織應用的布局組件，不可更改?
├─middleware // 用于存放中間件
├─node_modules
├─pages // 用于組織應用的路由及視圖,Nuxt.js根據該目錄結構自動生成對應的路由配置，檔案名不可更改?
├─plugins // 用于組織那些需要在 根vue.js應用 實體化之前需要運行的 Javascript 插件，
├─static // 用于存放應用的靜態檔案，此類檔案不會被 Nuxt.js 呼叫 Webpack 進行構建編譯處理， 服務器啟動的時候，該目錄下的檔案會映射至應用的根路徑 / 下，檔案夾名不可更改，?
└─store // 用于組織應用的Vuex 狀態管理，檔案夾名不可更改，?
├─.editorconfig // 開發工具格式配置
├─.eslintrc.js // ESLint的組態檔，用于檢查代碼格式
├─.gitignore // 配置git忽略檔案
├─nuxt.config.js // 用于組織Nuxt.js 應用的個性化配置，以便覆寫默認配置，檔案名不可更改，?
├─package-lock.json // npm自動生成，用于幫助package的統一設定的，yarn也有相同的操作
├─package.json // npm 包管理組態檔
├─README.md
1.2 頁面和路由
1.2.1 基本路由
Nuxt.js 依據 pages 目錄結構自動生成 vue-router 模塊的路由配置，
假設 pages 的目錄結構如下
└─pages
├─index.vue
└─user
├─index.vue
├─one.vue
那么，Nuxt.js 自動生成的路由配置如下：
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user',
path: '/user',
component: 'pages/user/index.vue'
},
{
name: 'user-one',
path: '/user/one',
component: 'pages/user/one.vue'
}
]
}
1.2.2 頁面跳轉
- 不要寫成a標簽，因為是重新獲取一個新的頁面，并不是SPA
<nuxt-link to="/users"></nuxt-link>- this.$router.push('/users')
1.2.3 動態路由
- 在 Nuxt.js 里面定義帶引數的動態路由，需要創建對應的以下劃線作為前綴的 Vue 檔案 或 目錄，
- 獲取動態引數{{$route.params.id}}
1.2.4 路由引數校驗
Nuxt.js 可以讓你在動態路由對應的頁面組件中配置一個validate方法用于校驗動態路由引數的有效性，該函式有一個布爾型別的回傳值，如果回傳true則表示校驗通過，如果回傳false則表示校驗未通過，
validate(data) {
cosole.log(data)
return true
}
1.2.5 嵌套路由
- 添加一個Vue檔案，作為父組件
- 添加一個與父組件同名的檔案夾來存放子視圖組件
- 在父檔案中，添加
組件，用于展示匹配到的子視圖
1.3 layouts & pages & components
1.3.1 創建layout
- 去layouts檔案夾下面新建一個新的layout組件，例如teachers.vue，并在這個組件中添加
組件，這樣，所有和teachers相關的頁面都會有公共的layout - 給需要用到teachers.vue的組件添加layout屬性，并指定需要使用的layout，例如：layout: 'teachers'
1.3.2 創建特殊layout : error
layouts檔案夾下面新建error.vue，error是關鍵字
1.3.3 新建一個組件
在components檔案夾下面新建一個Header.vue組件
引入組件，注意路徑的~符號，表示根目錄
layout中也能使用組件
1.3.4 樣式配置
nuxt.config.js中設定全域css樣式的檔案路徑
1.4 ElementUI使用
-
下載npm i element-ui -S
-
在plugins檔案夾下面，創建ElementUI.js檔案
import Vue from 'vue' import ElementUI from 'element-ui' Vue.use(ElementUI) -
在nuxt.config.js中添加配置
css: [ 'element-ui/lib/theme-chalk/index.css' ], plugins: [ {src: '~/plugins/ElementUI', ssr: true } ], build: { vendor: ['element-ui'] }
1.5 異步資料
Nuxt.js 擴展了 Vue.js，增加了一個叫 asyncData 的方法，使得我們可以在設定組件的資料之前能異步獲取或處理資料，asyncData方法會在組件（限于頁面組件）每次加載之前被呼叫，它可以在服務端或路由更新之前被呼叫，所以需要注意這個函式中不能使用this
注意：常規寫法如果在created鉤子中寫異步，是在客戶端渲染的而不是在服務端
使用方法：asyncData(context, callback) {callback(null, data)}
context.route.params.xxx獲取引數
callback(new Error(), data)渲染出錯的頁面
注意：這個方法在服務器端執行和在客戶端執行的區別
1.6 axios的使用
安裝npm install --save axios
使用
import axios from 'axios'
asyncData(context, callback) {
axios.get('http://localhost:3301/in_theaters')
.then(res => {
console.log(res);
callback(null, {list: res.data})
})
}
為防止重復打包，在nuxt.config.js中配置
module.exports = {
build: {
vendor: ['axios']
}
}
nuxt中axios如何跨域獲取資料
- 參考檔案：https://axios.nuxtjs.org/
- 參考檔案：https://github.com/nuxt-community/proxy-module
- ajax 跨域問題
- 首先推薦：CORS 處理跨域，只需要服務端做一些配置就好了，客戶端可以直接使用
- 其次：配置服務端（任何Web服務器）代理
- Apache
- nginx
- tomcat
- Node
- webpack 中的 webpack-dev-server
- nuxt 中使用 axios 發請求
- 配置 nuxt
- nuxt 提供了一個模塊 @nuxtjs/axios
- 這個模塊內置了 Node 的一個 http-proxy-middleware 中間件
1.7 小案例(豆瓣電影串列)
介面：
http://api.douban.com/v2/movie/top250
http://api.douban.com/v2/movie/top250?start=0&count=100
獲取電影串列：http://localhost:3301/in_theaters （in_theaters可以替換為coming_soon及top250）
獲取電影詳情：http://localhost:3301/in_theaters/1?_embed=details
http://localhost:3301/in_theaters
http://localhost:3301/coming_soon
http://localhost:3301/top250
http://localhost:3301/details
1.7.1 豆瓣電影首頁創建
1.7.2 豆瓣電影串列頁面創建
1.7.3 電影詳情頁面
1.8 SEO優化
1.8.1 全域
在nuxt.config.js組態檔中修改
head: {
title: pkg.name,
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: pkg.description }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
1.8.2 區域
head(){
return{
title:'豆瓣電影',
meta:[{
'name':'keywords',
'content': '電影、經典電影、熱映、電視劇、美劇、影評、電影院、電影票、排行、推薦'
}]
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/99349.html
標籤：JavaScript