摘要：基于的框架仿的社區(qū)服務(wù)端渲染，主要是為了優(yōu)化以及首屏加載速度線上地址地址技術(shù)棧目錄結(jié)構(gòu)配置文件封裝工具函數(shù)滾動(dòng)條操作函數(shù)靜態(tài)資源實(shí)例化之前執(zhí)行的插件注冊(cè)全局組件注冊(cè)全局服務(wù)端渲染時(shí)保存供服務(wù)端請(qǐng)求時(shí)的獲取頁(yè)面級(jí)組件首頁(yè)登錄頁(yè)未讀消

基于vue的nuxt框架仿的cnode社區(qū)服務(wù)端渲染，主要是為了seo優(yōu)化以及首屏加載速度

線上地址 http://nuxt-cnode.foreversnsd.cn
github地址 https://github.com/Kim09AI/nu...

vue

vue-router

vuex

nuxt

axios

simplemde

ES6/7

stylus

├─npm-shrinkwrap.json
├─nuxt.config.js                # nuxt配置文件
├─package.json
├─README.md
├─utils
|   ├─axios.js                  # axios封裝
|   ├─index.js                  # 工具函數(shù)
|   └scroll.js                  # 滾動(dòng)條操作函數(shù)
├─store                         # store
|   ├─actions.js
|   ├─getters.js
|   ├─index.js
|   ├─mutation-types.js
|   ├─mutations.js
|   ├─README.md
|   └state.js
├─static                        # 靜態(tài)資源
|   ├─favicon.ico
|   └README.md
├─plugins                       # vue實(shí)例化之前執(zhí)行的插件
|    ├─component.js             # 注冊(cè)全局組件
|    ├─filter.js                # 注冊(cè)全局filter
|    ├─README.md                
|    └ssrAccessToken.js         # 服務(wù)端渲染時(shí)保存access_token,供服務(wù)端請(qǐng)求時(shí)的api獲取
├─pages                         # 頁(yè)面級(jí)組件
|   ├─index.vue                 # 首頁(yè)
|   ├─login.vue                 # 登錄頁(yè)
|   ├─README.md 
|   ├─user
|   |  ├─messages.vue           # 未讀消息頁(yè)
|   |  ├─_id
|   |  |  ├─index.vue           # 用戶信息頁(yè)
|   |  |  └collections.vue      # 用戶收藏的主題頁(yè)
|   ├─topic
|   |   ├─create.vue            # topic創(chuàng)建頁(yè)，復(fù)用為編輯頁(yè)
|   |   ├─_id
|   |   |  └index.vue           # topic詳情頁(yè)
├─mixins                        # mixins
|   └index.js
├─middleware                    # 中間件，頁(yè)面渲染之前執(zhí)行
|     ├─auth.js                 # 用戶權(quán)限中間件
|     ├─checkRoute.js           # 主要是對(duì)404頁(yè)面的重定向
|     └README.md
├─layouts                       # 布局
|    ├─default.vue
|    └README.md
├─filters                       # 全局filter
|    └index.js
├─components
|     ├─alert.vue               # 提示組件
|     ├─backTop.vue
|     ├─clientPanel.vue
|     ├─commentList.vue         # 評(píng)論列表
|     ├─commonFooter.vue
|     ├─commonHeader.vue
|     ├─mainLayout.vue          # 頁(yè)面內(nèi)的主布局，劃分左右兩欄
|     ├─markdown.vue            # 基于simplemde封裝的組件
|     ├─messageList.vue         # 消息列表
|     ├─pageNav.vue             # 分頁(yè)組件
|     ├─panel.vue
|     ├─README.md
|     ├─tabHeader.vue
|     ├─topicCreatePanel.vue
|     ├─topicList.vue           # 文章列表
|     └userInfoPanel.vue
├─assets
|   ├─README.md
|   ├─css
|   |  ├─common.styl
|   |  ├─icon.styl
|   |  ├─index.styl
|   |  ├─mixin.styl
|   |  ├─reset.styl
|   |  └simplemdecover.styl
├─api                           # 請(qǐng)求api
|  └index.js

首頁(yè)

topic詳情頁(yè)

新建topic

編輯topic

收藏topic

用戶收藏的topic

取消收藏topic

新建topic的評(píng)論

新建評(píng)論的評(píng)論

點(diǎn)贊評(píng)論

個(gè)人信息及用戶信息

登錄/退出

未讀消息頁(yè)

只要做服務(wù)端渲染，不管是vue還是react，都必然會(huì)遇到cookie共享的問(wèn)題，因?yàn)樵诜?wù)器上不會(huì)為請(qǐng)求自動(dòng)帶cookie,所以需要手動(dòng)來(lái)為請(qǐng)求帶上cookie，以下方法主要是借鑒vue-srr導(dǎo)出一個(gè)創(chuàng)建app、router、store工廠函數(shù)的方法，導(dǎo)出一個(gè)創(chuàng)建axios的工廠函數(shù)，然后把創(chuàng)建的axios實(shí)例注入store,建立store與axios一一對(duì)應(yīng)的關(guān)系，
然后就可以通過(guò)store.$axios或state.$axios去請(qǐng)求就會(huì)自動(dòng)帶cookie了

export const nuxtServerInit = async ({ commit, dispatch, state }, { req }) => {
    let accessToken = parseCookieByName(req.headers.cookie, "access_token")

    if (!!accessToken) {
        try {
            let res = await state.$axios.checkAccesstoken(accessToken)

            if (res.success) {
                let userDetail = await state.$axios.getUserDetail(res.loginname)
                userDetail.data.id = res.id

                // 提交登錄狀態(tài)及用戶信息
                dispatch("setUserInfo", {
                    loginState: true,
                    user: userDetail.data,
                    accessToken: accessToken
                })
            }
        } catch (e) {
            console.log("fail in nuxtServerInit", e.message)
        }
    }
}

class CreateAxios extends Api {
    constructor(store) {
        super(store)
        this.store = store
    }

    getAccessToken() {
        return this.store.state.accessToken
    }

    get(url, config = {}) {
        let accessToken = this.getAccessToken()

        config.params = config.params || {}
        accessToken && (config.params.accesstoken = accessToken)

        return axios.get(url, config)
    }

    post(url, data = {}, config = {}) {
        let accessToken = this.getAccessToken()

        accessToken && (data.accesstoken = accessToken)

        return axios.post(url, qs.stringify(data), config)
    }

    // 返回服務(wù)端渲染結(jié)果時(shí)會(huì)用JSON.stringify對(duì)state處理,因?yàn)閟tore與$axios實(shí)例循環(huán)引用會(huì)導(dǎo)致無(wú)法序列化
    // 添加toJSON繞過(guò)JSON.stringify
    toJSON() {}
}

export default CreateAxios

const createStore = () => {
    let store = new Vuex.Store({
        state,
        getters,
        mutations,
        actions
    })

    store.$axios = store.state.$axios =  new CreateAxios(store)

    if (process.browser) {
        let replaceState = store.replaceState.bind(store)
        store.replaceState = (...args) => {
            replaceState(...args)
            store.state.$axios = store.$axios
            replaceState = null
        }
    }

    return store
}

export default createStore

之后就可以在asyncData函數(shù)中使用store.$axios、在組件內(nèi)使用this.$store.$axios、在axtion中使用state.$axios或rootState.$axios發(fā)起請(qǐng)求了，這些請(qǐng)求都會(huì)自動(dòng)的帶上cookie中的東西

若該項(xiàng)目對(duì)你有幫助，歡迎 star

# install dependencies
$ npm install # Or yarn install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm start

# generate static project
$ npm run generate

For detailed explanation on how things work, checkout the Nuxt.js docs.