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. Kafka VS Flume

     (1)kafka和flume都是日志系统.kafka是分布式消息中间件,自带存储,提供push和pull存取数据功能.flume分为agent(数据采集器),collector(数据简单处理和写入) ...

  2. Android.mk添加第三方jar包(转载)

    转自:www.cnblogs.com/hopetribe/archive/2012/04/23/2467060.html LOCAL_PATH:= $(call my-dir)include $(CL ...

  3. In 7-bit

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3713 题意:给定一个字符串,首先输出这个字符串的长度(以两位的十六进制的形 ...

  4. 使用js模拟ecshop元素挪移

    <!DOCTYPE html><html><head> <title>移动</title> <script src="jqu ...

  5. codevs1230元素查找(hash)

    1230 元素查找  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond     题目描述 Description 给出n个正整数,然后有m个询问,每个询问一个 ...

  6. 使用Keras做OCR时报错:ValueError: Tensor Tensor is not an element of this graph

    现象 项目使用 Flask + Keras + Tensorflow 同样的代码在机器A和B上都能正常运行,但在机器C上就会报如下异常.机器A和B的环境是先安装的,运行.调试成功后才尝试在C上跑. F ...

  7. Codeforces Round 411 Div.2 题解

    A Fake NP standard input/output s, MB Submit Add to favourites x3673 B -palindrome standard input/ou ...

  8. CF126B Password

    思路: kmp略作修改. 实现: #include <iostream> #include <cstdio> using namespace std; ; int neXt[M ...

  9. http服务器与https服务器的区别

    1.HTTPS服务器使用的是HTTPS协议,而HTTP使用的是HTTP协议. 2.HTTPS服务器需要向证书授权中心申请证书,一般免费证书很少,需要交费. 3.HTTP服务器与客户端传递的是明文数据, ...

  10. HDU_1160_FatMouse's Speed_dp

    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...