Vue之服務端渲染，資料介面

##spa例項

專案中常會包含多個頁面及元件，需要用到 vue-router 來進行路由控制，服務端渲染元件時，都需要從資料庫中獲取真實資料。

一下強調幾個重難點

入口檔案分離

服務端不同於客戶端，需要整個應用的 vue 例項，但可以通過不同的入口檔案來進行不同元件的操作，各取所需。

其中client-entry.js和server-entry.js分別是兩端的入口檔案，

client-entry.js
require('es6-promise').polyfill() // 引入 es6 語法
server-entry.js
router.push(context.url) // 將 router 設定成當前環境下的 url 　
// 手動匹配符合當前路由的元件 　　
return promise.all(router.getmatchedcomponents().map(component => 　　 })).then(() => )
}

##資料介面

前端獲取資料利用的是 xmlhttprequest 物件，而後端 nodejs 若要發起 http 請求則需要利用自身的 http 模組，需要使用乙個第三方庫將兩者的呼叫方式封裝起來，使得在瀏覽器端的時候能使用 xmlhttprequest，而在 nodejs 環境中使用 http 模組，避免重複編寫兩套不同的資料請求介面，

資料介面如下：

// store/api.js
import axios from 'axios' 
const defaults = 
object.assign(axios.defaults, defaults) 
export const fetchlist = () => 
export const fetchdetail = (id) =>

##前後端狀態統一

服務端完成渲染後，需要將應用的狀態（即獲取的資料結構）傳遞給前端的 vue.js 例項，使得能夠進行資料繫結等初始化行為。由於使用者在瀏覽器端是可以直接訪問任意有效 url 的，也就是說服務端需要處理所有有效請求對應的元件，引入 vuex 來管理整體的元件狀態。

import vue from 'vue' 
import vuex from 'vuex' 
import * as api from './api'
vue.use(vuex)
const store = new vuex.store( 
},actions: ) ) => ) 　
}, 　
fetch_detail (, id) ) => ) 　
} },
mutations: , 　
set_detail (state, data) 
}}) 
export default store

Vue之服務端渲染，資料介面

vue服務端渲染新增快取

vue服務端渲染nuxt（一）

React Router之服務端渲染

Vue之服務端渲染，資料介面

vue服務端渲染新增快取

vue服務端渲染nuxt（一）

React Router之服務端渲染

相關推薦