NUXT SSR初级入门笔记(小结)


Posted in Javascript onDecember 16, 2019

nuxt 是基于 vue 开发的一个应用框架,最常用的就是拿来做 ssr。那么什么是 ssr 呢,这就要提及一个相对的概念:csr。

CSR & SSR

web网页开发从之前的 jsp,php 转向现在的三大框架 angular react vue,其实就是从 csr 到 ssr 的转变,即从服务端渲染转而变为客户端渲染。

有使用经验的大概知道,例如之前的 php 开发,是将网页内容和服务端代码逻辑写在一起的,在客户端请求时,服务端经过 php 引擎的渲染生成完整的 html 页面再返回给客户端,这种渲染出的页面在浏览器中右键查看源代码都是能看见 页面全部的 html 代码的。而客户端渲染如 vue,返回的就只有一个挂在 app 节点的 html文件和一个 js 文件,页面的内容都是在客户端的 js 渲染生成的。所以 渲染 html 文本所在的位置就是 CSR(客户端渲染) 和 SSR(服务端渲染) 最本质的区分 。

既然web开发从 ssr 过渡到了 csr,那我们为什么又再去做 ssr 呢,这就要涉及到双方的优缺了:

SSR:

优点:

便于 SEO,渲染完整的 html 更利于搜索引擎的抓取。

页面加载的白屏时间短(几乎没有)。

缺点:

每加载一个页面都要对服务器发起一次请求,服务器的渲染负荷重,请求缓慢。

每次加载都会刷新页面,即使只是页面中的小区域需要改变。

CSR:

优点:

页面具有优秀的性能,更利于页面交互。

缺点:

不利于SEO

首页初始化加载白屏时间长。

在我们普遍使用三大框架的今天,如果我们的页面需要对 SEO 的良好支持,这就需要我们做 ssr 了。 NUXT 项目的初始化

使用以下命令调用脚手架生成项目,脚手架选项按需选择就可以了:

npx create-nuxt-app <项目名>

生成的目录结构如下:

NUXT SSR初级入门笔记(小结) 

.nuxt

运行缓存目录

assets

资源目录,用于存放如 css 文件,js 文件,图片

components

组件目录,用于存放 vue 组件

layouts

布局目录,用于设置布局,文件名即为布局名

在 pages 目录里的组件可以通过 layout 属性指定布局组件,不指定默认为 default。

布局组件中使用 <nuxt /> 标签指定应用布局时,page 组件所在的位置。

middleware

中间件目录,用于设置中间件函数,文件名即为中间件名

在 pages 目录里的组件可以通过 middleware 属性指定中间件函数,中间件会在组件渲染前执行

pages

页面目录,用于设置路由页面,目录下的 vue 文件会自动生成相应的路由配置

如以下目录结构对应的配置:

pages/
--| _slug/
-----| comments.vue
-----| index.vue
--| users/
-----| _id.vue
--| index.vue

router: {
 routes: [
  {
   name: 'index',
   path: '/',
   component: 'pages/index.vue'
  },
  {
   name: 'users-id',
   path: '/users/:id?',
   component: 'pages/users/_id.vue'
  },
  {
   name: 'slug',
   path: '/:slug',
   component: 'pages/_slug/index.vue'
  },
  {
   name: 'slug-comments',
   path: '/:slug/comments',
   component: 'pages/_slug/comments.vue'
  }
 ]
}

nuxt 中使用 <nuxt-link> 代替了 <router-link>

nuxt 会为 page 组件提供额外的配置项,常用到的如下:

  • layout 指定当前页面使用的布局(layouts 根目录下的布局文件)。
  • validate 校验方法用于校验动态路由的参数。
  • middleware 指定页面的中间件函数,中间件函数会在页面渲染之前被调用,也可以指定为middleware文件夹内的中间件名。
  • asyncData 支持异步数据处理,拿来为 page 组件请求异步数据,返回对象中的 data 会覆盖到组件的 data 中。
  • fetch 用于在渲染页面之前获取数据填充应用的状态树(store)。不同的是 fetch 方法不会设置组件的数据。

plugins

插件目录,用于引入第三方模块,

如 element-ui.js:

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(Element, { locale })

然后可以在 nuxt.config.js 中的 plugins 中引入:

plugins: [
  '@/plugins/element-ui'
 ],

server

服务端目录

static

静态文件目录

store

vuex目录,index.js 为主文件,其他文件默认会配置成 module 模块,默认启用 namespace。

文件形式为:

export const state = () => ({
  // state
})

export const actions = {
  // actions
}

export const mutations = {
  // mutations
}

在 index.js 的 actions 中可以配置 nuxtServerInit,可以用来将数据从服务端传到客户端。

具体使用

创建项目如下:

NUXT SSR初级入门笔记(小结)

运行初始项目,效果如下:

NUXT SSR初级入门笔记(小结) 

使用布局

在 layouts 下新建文件 myLayout.vue

<template>
 <div>
  <header>
   <h2>I am header</h2>
  </header>
  <main>
   <nuxt />
  </main>
  <footer>
   <h2>I am footer</h2>
  </footer>
 </div>
</template>

然后我们在 pages 下新建文件 layoutDemo.vue

<template>
 <div>
  <h1>I am layout demo</h1>
 </div>
</template>

<script>
export default {
 layout: 'myLayout'
}
</script>

访问 localhost:3000/layoutDemo,布局效果如下:

NUXT SSR初级入门笔记(小结) 

使用中间件

例如我们实现一个未登录拦截跳转的中间件:

在 middleware 中新建 auth.js

export default function (ctx) {
 // eslint-disable-next-line no-constant-condition
 if (true) { // ctx 判断得到未登录
  ctx.redirect({ path: '/' })
 }
}

再在 layoutDemo.vue 中加上 middleware: 'auth' ,这样访问该页面就会拦截跳转回主页面。

用 asyncData 实现 ssr

我们再在 pages 中新建页面 ssr1.vue

<template>
 <div>
  <ul>
   <li v-for="item of list1" :key="item">
    {{ item }}
   </li>
  </ul>
  <ul style="margin-top: 50px">
   <li v-for="item of list2" :key="item">
    {{ item }}
   </li>
  </ul>
 </div>
</template>

<script>
export default {
 layout: 'myLayout',
 data () {
  return {
   list1: []
  }
 },
 async created () {
  const { status, data: { list } } = await this.$axios.get('/list')
  if (status === 200) {
   this.list = list
  }
 },
 async asyncDate () {
  const { status, data: { list } } = await this.$axios.get('/list')
  if (status === 200) {
   return {
    list2: list
   }
  }
 }
}
</script>

这里我们 list1 是用传统的 vue 方式获取异步数据, list2 用 asyncData 获取异步数据

然后我们在 server 中写接口,应为 node 还是采用 require 的方式,如果我们想使用 import 的方式,可以安装 babel-cli 和 babel-preset-env , 新建配置文件 .babelrc:

{
 "presets": ["env"]
}

然后在 package.json 里将 dev 命令加上后缀 --exec babel-node , server 中书写 node 就可以使用 import 了。

然后安装 koa-router,在 index.js 里加入以下代码:

import Router from 'koa-router'

// 以下代码加在 start 函数内的 原有的 app.use 之前
const router = new Router()
router.get('/list', (ctx) => {
ctx.body = {
 list: ['a', 'b', 'c']
}
})
app.use(router.routes()).use(router.allowedMethods())

然后访问页面,两个列表都正常渲染

NUXT SSR初级入门笔记(小结)

我们右键查看源代码:

NUXT SSR初级入门笔记(小结)

list2 通过 asyncData 的方式实现了 ssr。

使用 nuxtServerInit 实现 ssr

我们新建页面 ssr2.vue

<template>
 <div>
  <ul>
   <li v-for="item of $store.state.list" :key="item">
    {{ item }}
   </li>
  </ul>
 </div>
</template>

<script>
export default {
 layout: 'myLayout'
}
</script>

然后在 store 中新建 index.js

export const state = () => ({
 list: []
})

export const mutations = {
 setList (state, value) {
  state.list = value
 }
}

export const actions = {
 async nuxtServerInit ({ commit }, { app }) {
  const { status, data: { list } } = await this.$axios.get('/list')
  if (status === 200) {
   commit('setList', list)
  }
 }
}

重新 npm run dev, 访问 localhost:3000/ssr2

NUXT SSR初级入门笔记(小结)

查看源代码,也正确渲染

NUXT SSR初级入门笔记(小结)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
javascript禁用键盘功能键让右击及其他键无效
Oct 09 Javascript
js数组操作常用方法
May 08 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
你知道setTimeout是如何运行的吗?
Aug 16 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
vue组件Prop传递数据的实现示例
Aug 17 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
vue样式穿透 ::v-deep的具体使用
Jun 04 Javascript
js实现内置计时器
Dec 16 #Javascript
js实现秒表计时器
Dec 16 #Javascript
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
Dec 16 #Javascript
js实现计时器秒表功能
Dec 16 #Javascript
原生Vue 实现右键菜单组件功能
Dec 16 #Javascript
axios如何取消重复无用的请求详解
Dec 15 #Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 #Javascript
You might like
php 正确解码javascript中通过escape编码后的字符
2010/01/28 PHP
PHP屏蔽过滤指定关键字的方法
2014/11/03 PHP
php+mysql实现无限级分类
2015/11/11 PHP
PHP反射学习入门示例
2019/06/14 PHP
JS 常用校验函数
2009/03/26 Javascript
帮助避免错误的Javascript陷阱清单
2009/05/31 Javascript
javascript中的缓动效果实现程序
2012/12/29 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
深入理解vue中的$set
2017/06/01 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
nodejs nedb 封装库与使用方法示例
2020/02/06 NodeJs
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
初步理解Python进程的信号通讯
2015/04/09 Python
Python中死锁的形成示例及死锁情况的防止
2016/06/14 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
python装饰器常见使用方法分析
2019/06/26 Python
python中open函数的基本用法示例
2019/09/07 Python
浅谈django 重载str 方法
2020/05/19 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
jurlique茱莉蔻英国官网:澳洲天然护肤品
2018/08/03 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
Tomcat中怎么使用log4j输出所有的log
2016/07/07 面试题
高三体育教学反思
2014/01/29 职场文书
应聘销售主管的求职信
2014/04/26 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
病人慰问信范文
2015/02/15 职场文书
志愿者服务宣传标语口号
2015/12/26 职场文书
小学生安全教育心得体会
2016/01/15 职场文书