国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

基于vue的nuxt框架cnode社區服務端渲染

tainzhi / 3194人閱讀

摘要:基于的框架仿的社區服務端渲染,主要是為了優化以及首屏加載速度線上地址地址技術棧目錄結構配置文件封裝工具函數滾動條操作函數靜態資源實例化之前執行的插件注冊全局組件注冊全局服務端渲染時保存供服務端請求時的獲取頁面級組件首頁登錄頁未讀消

nuxt-cnode
基于vue的nuxt框架仿的cnode社區服務端渲染,主要是為了seo優化以及首屏加載速度

線上地址 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                  # 工具函數
|   └scroll.js                  # 滾動條操作函數
├─store                         # store
|   ├─actions.js
|   ├─getters.js
|   ├─index.js
|   ├─mutation-types.js
|   ├─mutations.js
|   ├─README.md
|   └state.js
├─static                        # 靜態資源
|   ├─favicon.ico
|   └README.md
├─plugins                       # vue實例化之前執行的插件
|    ├─component.js             # 注冊全局組件
|    ├─filter.js                # 注冊全局filter
|    ├─README.md                
|    └ssrAccessToken.js         # 服務端渲染時保存access_token,供服務端請求時的api獲取
├─pages                         # 頁面級組件
|   ├─index.vue                 # 首頁
|   ├─login.vue                 # 登錄頁
|   ├─README.md 
|   ├─user
|   |  ├─messages.vue           # 未讀消息頁
|   |  ├─_id
|   |  |  ├─index.vue           # 用戶信息頁
|   |  |  └collections.vue      # 用戶收藏的主題頁
|   ├─topic
|   |   ├─create.vue            # topic創建頁,復用為編輯頁
|   |   ├─_id
|   |   |  └index.vue           # topic詳情頁
├─mixins                        # mixins
|   └index.js
├─middleware                    # 中間件,頁面渲染之前執行
|     ├─auth.js                 # 用戶權限中間件
|     ├─checkRoute.js           # 主要是對404頁面的重定向
|     └README.md
├─layouts                       # 布局
|    ├─default.vue
|    └README.md
├─filters                       # 全局filter
|    └index.js
├─components
|     ├─alert.vue               # 提示組件
|     ├─backTop.vue
|     ├─clientPanel.vue
|     ├─commentList.vue         # 評論列表
|     ├─commonFooter.vue
|     ├─commonHeader.vue
|     ├─mainLayout.vue          # 頁面內的主布局,劃分左右兩欄
|     ├─markdown.vue            # 基于simplemde封裝的組件
|     ├─messageList.vue         # 消息列表
|     ├─pageNav.vue             # 分頁組件
|     ├─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                           # 請求api
|  └index.js
實現的功能

首頁

topic詳情頁

新建topic

編輯topic

收藏topic

用戶收藏的topic

取消收藏topic

新建topic的評論

新建評論的評論

點贊評論

個人信息及用戶信息

登錄/退出

未讀消息頁

cookie的共享

只要做服務端渲染,不管是vue還是react,都必然會遇到cookie共享的問題,因為在服務器上不會為請求自動帶cookie,所以需要手動來為請求帶上cookie,以下方法主要是借鑒vue-srr導出一個創建app、router、store工廠函數的方法,導出一個創建axios的工廠函數,然后把創建的axios實例注入store,建立store與axios一一對應的關系,
然后就可以通過store.$axios或state.$axios去請求就會自動帶cookie了

首先獲取cookie中的東西放到store.state
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

                // 提交登錄狀態及用戶信息
                dispatch("setUserInfo", {
                    loginState: true,
                    user: userDetail.data,
                    accessToken: accessToken
                })
            }
        } catch (e) {
            console.log("fail in nuxtServerInit", e.message)
        }
    }
}
導出一個創建axios的工廠函數
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)
    }

    // 返回服務端渲染結果時會用JSON.stringify對state處理,因為store與$axios實例循環引用會導致無法序列化
    // 添加toJSON繞過JSON.stringify
    toJSON() {}
}

export default CreateAxios
在創建store時創建axios并把axios注入store
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函數中使用store.$axios、在組件內使用this.$store.$axios、在axtion中使用state.$axios或rootState.$axios發起請求了,這些請求都會自動的帶上cookie中的東西

若該項目對你有幫助,歡迎 star
Build Setup
# 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.

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94073.html

相關文章

  • Nuxt.js 基礎入門教程

    摘要:原文鏈接開發一個單頁面應用,相信很多前端工程師都已經學會了,但是單頁面應用有一個致命的缺點,就是極不友好。基于它,我們可以快速開發一個基于的單頁面應用。只有數據流存在相關配置時可用。引入后,所有頁面均有效。 原文鏈接 Vue 開發一個單頁面應用,相信很多前端工程師都已經學會了,但是單頁面應用有一個致命的缺點,就是 SEO 極不友好。除非,vue 能在服務端渲染(ssr)并直接返回已經渲...

    yedf 評論0 收藏0
  • 淺談NUXT - 基于vue.js服務渲染框架

    摘要:是一款基于的服務端渲染框架,跟的異曲同工。該配置項用于定義應用客戶端和服務端的環境變量。 Vue因其簡單易懂的API、高效的數據綁定和靈活的組件系統,受到很多前端開發人員的青睞。國內很多公司都在使用vue進行項目開發,我們正在使用的簡書,便是基于Vue來構建的。 我們知道,SPA前端渲染存在兩大痛點:(1)SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關信息,使...

    yearsj 評論0 收藏0
  • 淺談NUXT - 基于vue.js服務渲染框架

    摘要:是一款基于的服務端渲染框架,跟的異曲同工。該配置項用于定義應用客戶端和服務端的環境變量。 Vue因其簡單易懂的API、高效的數據綁定和靈活的組件系統,受到很多前端開發人員的青睞。國內很多公司都在使用vue進行項目開發,我們正在使用的簡書,便是基于Vue來構建的。 我們知道,SPA前端渲染存在兩大痛點:(1)SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關信息,使...

    godiscoder 評論0 收藏0
  • 珠峰前架構師培養計劃

    摘要:公司的招聘要求都提到了至少熟悉其中一種前端框架,有前端工程化與模塊化開發實踐經驗相關字眼。我們主要從端公眾號移動端小程序三大平臺進行前端的技術選型,并來說說選其技術的幾大優勢。技術的優勢互聯網前端大潮后,前端出現了大框架,分別是與。 1、技術選型的背景前端技術發展日新月異,互聯網上出現的新型框架也比較多,如何讓新招聘的人員...

    ccj659 評論0 收藏0
  • 服務渲染Nuxt(介紹篇)

    摘要:為了解決問題,推出了服務端預渲染,以便提高對優化。應用,到了,單頁面應用優秀的用戶體驗,逐漸成為了主流,頁面整體式渲染出來的,稱之為客戶端渲染。客戶端接收數據,然后完成最終渲染。通過對客戶端服務端基礎框架的抽象組織,主要關注的是應用的渲染。 現在前端開發一般都是前后端分離,mvvm和mvc的開發框架,如Angular、React和Vue等,雖然寫框架能夠使我們快速的完成開發,但是由于前...

    Shonim 評論0 收藏0

發表評論

0條評論

tainzhi

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<