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


<p>For detailed explanation on how things work, checkout the <a href="https://github.com/nuxt/nuxt.js" rel="nofollow noreferrer">Nuxt.js docs</a>.</p> 原文地址:https://segmentfault.com/a/1190000014245013

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

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

    http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者:Mihály Gyöngyösi 译者:oop ...

  2. 用prerender-spa-plugin插件Vue项目优化SEO做ssr服务端渲染及预渲染

    今天在做公交的时候没干,用手机看看文章,偶然发现了一个关于Vue优化seo的文章,我先是在Vue的官方文档看了一篇关于Vue做SEO优化的文章. 上面提到了nuxt.js这个框架,这个框架我做过一个小 ...

  3. 基于netty实现rpc框架-spring boot服务端

    demo地址 https://gitee.com/syher/grave-netty RPC介绍 首先了解一下RPC:远程过程调用.简单点说就是本地应用可以调用远程服务器的接口.那么通过什么方式调用远 ...

  4. 服务端渲染和nuxt简单介绍

    概述 最近研究了一下服务端渲染,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Vue SSR指南 nuxt.js官网 服务端渲染介绍 服务端渲染简单来说,就是分别对项目用we ...

  5. vuejs+nodejs支持服务端渲染的博客系统

    感悟 历时两个多月,终于利用工作之余完成了这个项目的1.0版本,为什么要写这个项目?其实基于vuejs+nodejs构建的开源博客系统有很多,但是大多数不支持服务端渲染,也不支持动态标题,只是做到了前 ...

  6. 服务端渲染 数据驱动 不是渲染后的网页,而是一个由html和Javascript组成的app ssr 隐藏接口服务器

    小结: 1. 服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务器给到客户端的已经是 ...

  7. react+laravel与服务端渲染的几点思考

    一.前后端完全分离 1.用React.js做MVC中的V,剩下的交给Laravel 2.Laravel用来做API接口开发. 3.好处:实现了前后端开发的分离,从而加快前后端开发效率.另外若是多端的如 ...

  8. Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)

    直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...

  9. 部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

    前面介绍了很多关于ABP框架的后台Web API 服务端,以及基于Vue+Element前端应用,本篇针对两者的联合部署,以及对部署中遇到的问题进行处理.ABP框架的后端是基于.net core5.0 ...

随机推荐

  1. mac 下安装Anaconda Python

    # 将anaconda的bin目录加入PATH echo 'export PATH="/Users/work/anaconda/bin/:$PATH"' >> ~/.b ...

  2. splay专题复习——bzoj 3224 &amp; 1862 &amp; 1503 题解

    [前言]快要省选二试了.上次去被虐出翔了~~这次即便是打酱油.也要打出风採!于是暂停新东西的学习.然后開始复习曾经的知识,为骗分做准备.PS:区间翻转的临时跳过,就算学了也来不及巩固了. [BZOJ3 ...

  3. What is an ISAPI Extension?

    https://www.codeproject.com/Articles/1432/What-is-an-ISAPI-Extension Introduction Unless you have be ...

  4. ubuntu安装typora

    optional, but recommended sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys BA300B7755AF ...

  5. bzoj 3721 Final Bazarek

    题目大意: n个数 选k个使和为奇数且最大 思路: 可以先将这n个数排序 然后先去最大的k个数 若和为奇数则直接输出 为偶数可以用没选的最大的奇数替换选了的最小的偶数或用没选的最大的偶数替换选了的最小 ...

  6. bzoj 1022 小约翰的游戏John

    题目大意: n堆石子,两个人轮流取石子,每个人取的时候,可以随意选择一堆石子 在这堆石子中取走任意多的石子,但不能一粒石子也不取,取到最后一粒石子的人算输 思路: 首先当每堆石子数都为1时,偶数为先手 ...

  7. WP处理事件

    (1).Launching事件 Launching(进入)事件是每一个第三方应用在第一次运行时都必须执行的事件,它主要负责应用程序的初始化.这个事件与Closing事件是对应的,一个运行正常的应用程序 ...

  8. Rails 服务器架设失败问题

    更新: 2017/09/14 补充了简单的确认号码的方法 A server is already running. Check /Users/...../pids/server.pid. Exitin ...

  9. 慕课网3-13编程练习:采用flex弹性布局制作页面主导航

    小伙伴们,伸缩容器的属性我们已经学完了,接下来使用我们所学的伸缩容器属性完成下面的效果图. 要求: 1.logo.导航项.登录注册按钮这三项在水平和垂直方向上都对齐,而且他们之间的距离也相等. 2.导 ...

  10. akka设计模式系列-基础模式

    本文介绍akka的基本使用方法,由于属于基础功能,想不出一个很高大上的名称,此处就以基础模式命名.下文会介绍actor的使用方法,及其优劣点. class SimpleActor(name:Strin ...