基于vue的nuxt框架cnode社区服务端渲染

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.

原文地址:https://segmentfault.com/a/1190000014245013

原文地址:https://www.cnblogs.com/lalalagq/p/9919396.html

时间: 2024-11-05 15:33:15

基于vue的nuxt框架cnode社区服务端渲染的相关文章

Vue.js与 ASP.NET Core 服务端渲染功能整合

http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gy?ngy?si 译者:oopsguy.com 我真的很喜欢在前端使用 Vue.js,Vue 服务端渲染直到第二个版本才被支持. 在本例中,我想展示如何将 Vue.js  服务端渲染功能整合 ASP.NET Core. 我们在服务端使用了 Microsoft.AspNetCore.SpaServices 包,该包提供 ASP.N

解析Nuxt.js Vue服务端渲染摸索

本篇文章主要介绍了详解Nuxt.js Vue服务端渲染摸索,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. Nuxt.js 十分简单易用.一个简单的项目只需将 nuxt 添加为依赖组件即可.Vue因其简单易懂的API.高效的数据绑定和灵活的组件系统,受到很多前端开发人员的青睐.国内很多公司都在使用vue进行项目开发,我们正在使用的简书,便是基于Vue来构建的.我们知道,SPA前端渲染存在两大痛点:(1)SEO.搜索引擎爬虫难以抓取客户端渲染的

追求极致的用户体验ssr(基于vue的服务端渲染)

首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见,我舍弃了ssr中的vuex和vue-router增加了redis,serverfetch等等实现了适合自己公司的业务,个人认为并不是所有的东西都值得吸收,对我来说我能用到的只是ssr将vue生成一个html和对应的js. 虾面我们来看看什么是服务端渲染? 官网给出的解释: Vue.js 是构建客户

如何搭建一个基于 Egg + Webpack + Vue 的服务端渲染工程项目呢?

如何搭建一个基于 Egg + Webpack + Vue 的服务端渲染工程项目呢? 项目你可以通过 easywebpack-cli 直接初始化即可完成或者clone egg-vue-webpack-boilerplate.下面说明一下从零如何搭建一个Egg + Webpack + Vue 的服务端渲染工程项目. 通过 egg-init 初始化 egg 项目 egg-init egg-vue-ssr // choose Simple egg app 安装 easywebpack-vue 和 egg

基于react的nextjs服务端渲染框架学习使用

开发文档 https://nextjs.frontendx.cn/ 源码 该博客的示例代码我已经上传到github,欢迎star或者fork react-next-hello Next介绍 Next.js是一个基于React的一个服务端渲染简约框架.它使用React语法,可以很好的实现代码的模块化,有利于代码的开发和维护. Next.js带来了很多好的特性: 默认服务端渲染模式,以文件系统为基础的客户端路由 代码自动分隔使页面加载更快 (以页面为基础的)简洁的客户端路由 以webpack的热替换

使用 PHP 来做 Vue.js 的 SSR 服务端渲染

对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/server-side-rendering 和 spatie/laravel-server-side-rendering适配 laravel 应用. 让我们一起来仔细研究一些服务端渲染的概念,权衡优缺点,然后遵循第一法则用 PHP 建立一个服务端渲染. 什么是服务端渲染 一个单页应用(通常也叫做 SPA

vue服务端渲染 同构渲染

引言 自JavaScript诞生以来,前端技术发展非常迅速.移动端白屏优化是前端界面体验的一个重要优化方向,Web 前端诞生了 SSR .CSR.预渲染等技术. 十年前,几乎所有网站都使用 ASP.Java.PHP 这类做后端渲染,但后来随着 jQuery.Angular.React.Vue 等 JS 框架的崛起,开始转向了前端渲染.2014年起又兴起了同构渲染,号称是未来,集成了前后端渲染的优点,当真如此? 我们先明确三个概念: 后端渲染:后端渲染指传统的 ASP.Java 或 PHP 的渲染

Vue服务端渲染和Vue浏览器端渲染的性能对比

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. talk is cheap,show us the code!话不多说,我们分别来看两个D

实例PK(Vue服务端渲染 VS Vue浏览器端渲染)

Vue 2.0 开始支持服务端渲染的功能,所以本文章也是基于vue 2.0以上版本.网上对于服务端渲染的资料还是比较少,最经典的莫过于Vue作者尤雨溪大神的 vue-hacker-news.本人在公司做Vue项目的时候,一直苦于产品.客户对首屏加载要求,SEO的诉求,也想过很多解决方案,本次也是针对浏览器渲染不足之处,采用了服务端渲染,并且做了两个一样的Demo作为比较,更能直观的对比Vue前后端的渲染. 话不多说,我们分别来看两个Demo:(欢迎star 欢迎pull request) 1.浏