基于vue的nuxt框架cnode社区服务端衬着

2024年5月19日 191次阅读 来源: Kim09AI

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.

    原文作者：Kim09AI
    原文地址: https://segmentfault.com/a/1190000014245013
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞