书接上文,昨天简单的说到了 SSR 服务端渲染的相关内容《二十五║初探SSR服务端渲染》,主要说明了相关概念,以及为何使用等,昨天的一个小栗子由于时间问题,没有好好的给你们铺开来说,今天呢,我们就继续说一下这个 SSR 服务端渲染,并结合着 Client 客户端渲染,一块儿说一说相关的内容,固然仍是围绕着原理来的,并非要搭建项目,项目我会在下一个系列说到,通过和群里小伙伴的商量,并采纳你们的意见,我初步考虑了下,下一个系列我会说下 Nuxt.js 相关内容(我感受这个颇有必要的说,如今网站SEO是灰常重要滴 ),而后再下一个系列就是搭建一个功能丰富的 后台管理系统 做为开源项目,手里有货的小伙伴来群里,我们一块儿开源吧哈哈哈。css
这个时候细心的小伙伴会发现,天天的那个脑图不见了,哈哈,并无,而是在最下边,看文末就知道了。html
为了介绍浏览器渲染是怎么回事,咱们运行一下npm run build 看看咱们以前的项目——就是咱们的我的博客初版,你们应该还记得《 二十二║Vue实战:我的博客初版(axios+router)》,发布版本的文件,到底有哪些东西,前端
执行 vue
npm run build
这里咱们经过 Webpack 打包,将咱们的项目打包,生成一个 dist 目录 ,咱们能够看到里面有 css+fonts+js 文件夹,还有一个 index.html 静态页面,咱们打开这个静态页面,能够看到下面内容:node
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta http-equiv=X-UA-Compatible content="IE=edge"> <meta name=viewport content="width=device-width,initial-scale=1"> <link rel=icon href=/favicon.ico> <title>blogvue3</title> <link href=/js/about.143cb27a.js rel=prefetch> <link href=/css/app.51e9ecbc.css rel=preload as= style> <link href=/css/chunk-vendors.5aa02cc7.css rel=preload as= style> <link href=/js/app.16d68887.js rel=preload as=script> <link href=/js/chunk-vendors.1c001ffe.js rel=preload as=script> <link href=/css/chunk-vendors.5aa02cc7.css rel=stylesheet> <link href=/css/app.51e9ecbc.css rel=stylesheet>//所有都是样式文件,可忽略研究 </head> <body> <noscript> <strong>We're sorry but blogvue3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id=app />//页面挂载入口 <script src=/js/chunk-vendors.1c001ffe.js />//vue 用到的区块文件,vue-cli全家桶默认配置里面这个chunk就是将全部从node_modules/里require(import)的依赖都打包到这里 <script src=/js/app.16d68887.js />//这个就是咱们项目的核心内容,主要就是 app.vue 的内容,封装了全部方法,包括路由和页面渲染之类的 </body> </html>
你们观察生成的文件,只有一个div挂载入口,并无多余的dom元素,那么页面要怎么呈现呢?答案是js append拼接,对,下面的那些 js 会负责innerHTML。而js是由浏览器解释执行的,因此呢,咱们称之为浏览器渲染,相信这里你们应该很明白这个原理了,和咱们平时用 jQuery 写局部异步加载是同样的,可是,这有几个致命的缺点:webpack
这个时候,咱们就想其余的一些办法,好比会单独给咱们的首页写一个静态处理,为了应对相应速度,可是这个并非一个好的办法,咱们须要处理两套逻辑,基于以上的一些问题,服务端渲染呼之欲出....ios
总结:相信你们看到这里应该都能明白,客户端渲染的工做原理了,其实就是开发的时候组件化,而后经过 webpack 打包工具,将咱们的逻辑处理 js ,打包成文件,而后和前端页面一块儿部署,这样就能讲数据在 DOM 上展现出来了。web
上边我们看了客户端浏览器渲染,明白了原理和弊端,我们这个时候就须要用到服务器渲染,SSR , Server Side Render
的简称, 服务端渲染. 首先服务端渲染的思想由来已久, 在 ajax
兴起以前, 全部 web 应用都是服务端渲染, 服务器直接返回 html 文本给浏览器, 用户操做好比在登陆页面提交表单, 成功后跳转到首页, 服务器须要返回两个页面. 这样的弊端显而易见, 加大了服务器的消耗,到了 vue 时代,我们虽然是经过 api 返回的Json,可是须要 node 服务器, 很耗费性能, 须要作好缓存和优化, 至关于空间换时间。ajax
这里我们先说下原理vue-router
从这个图里你们应该也能看到,咱们的SSR打包流程变化了,在客户端渲染的时候,咱们 webpack 是打包成js约束文件,直接发给浏览器,而后再获取数据渲染DOM,
网络解释有点儿羞涩难懂:ssr 有两个入口文件,client.js 和 server.js, 都包含了应用代码,webpack 经过两个入口文件分别打包成给服务端用的 server bundle 和给客户端用的 client bundle. 当服务器接收到了来自客户端的请求以后,会建立一个渲染器 bundleRenderer,这个 bundleRenderer 会读取上面生成的 server bundle 文件,而且执行它的代码, 而后发送一个生成好的 html 到浏览器,等到客户端加载了 client bundle 以后,会和服务端生成的DOM 进行 Hydration(判断这个DOM 和本身即将生成的DOM 是否相同,若是相同就将客户端的vue实例挂载到这个DOM上, 不然会提示警告)。
能够看出来,咱们增长了一个步骤:就是以前咱们是在浏览器里,经过JavaScript框架来渲染数据的,可是如今咱们的请求中间走了一遍 node 服务器,而后 node 服务器帮咱们生成相应的 Html 片断,直接发送给浏览器,那浏览器确定是认识html的,因此不用再经过 js 去获取数据渲染了,直接就渲染了,嗯大概就是这样,就好像多了一个中间件。
相信你们看内容可能不是很清楚,关键时候仍是得上代码才能说的更清晰。
客户端渲染我们就不写代码了吧,这些天都写了不少了
执行
npm install vue vue-server-renderer --save
会看到生成一个 node_modules 文件夹 和 package-lock.json 文件。
而后执行
npm install express --save
安装 express 的node服务。
<!-- 如同vue-cli建立项目中的index.html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{title}}</title> {{{meta}}} </head> <body> <!--vue-ssr-outlet--> <!--↑↑↑↑↑ 注意上边的格式必定要有,而且不能带空格 ↑↑↑↑↑--> </body> </html>
const Vue = require('vue')//引入 vue const server = require('express')()//引入 express 服务框架 const fs = require('fs') //读取 html 模版 const renderer = require('vue-server-renderer').createRenderer({ template: fs.readFileSync('./index.html', 'utf-8')//文件地址路径 }) // 此参数是vue 生成Dom以外位置的数据 如vue生成的dom通常位于body中的某个元素容器中, //此数据可在header标签等位置渲染,是renderer.renderToString()的第二个参数, //第一个参数是vue实例,第三个参数是一个回调函数。 const context = { title: '老张的哲学', meta:` <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="vue-ssr"> <meta name="generator" content="GitBook 3.2.3"> ` } //定义服务 server.get('*', (req, res) => { //建立vue实例 主要用于替换index.html中body注释地方的内容, //index.html中 <!--vue-ssr-outlet-->的地方 ,约定俗成 const app = new Vue({ data: { url: req.url, data: ['C#', 'SQL', '.NET', '.NET CORE', 'VUE'], title: '个人技能列表' }, //template 中的文本最外层必定要有容器包裹, 和vue的组件中是同样的, //只能有一个父级元素,这里是div! template: ` <div> <p>{{title}}</p> <p v-for='item in data'>{{item}}</p> </div> ` }) //将 Vue app实例渲染为字符串 (其余的API本身看用法是同样的) renderer.renderToString(app, context, (err, html) => { if (err) { res.status(500).end('err:' + err) return } //将模版发送给浏览器 res.end(html) //每次请求 都在node 服务器中打印 console.log('success') }) }) //服务端口开启并监听 server.listen(8060, () => { console.log('server success!') })
文档中的解释已经很详细了,你们能够自行看一看,这样咱们就定义好了一个 node 服务,并经过 express 框架,将咱们的 vue 实例经过 renderer.renderToString() 方法生成字符串,返回到浏览器。
执行
node server
注意,这里的 server 是咱们的文件名,你也能够用其余的,好比 node aaa.js,或者 node aaa
这个时候,咱们就发现咱们已经成功的把咱们的页面内容返回到了浏览器,为何呢?由于咱们的页面源代码已经有内容了,证实不是经过 js 后期渲染的。binggo!
你们有没有对 SSR 服务端渲染有必定的任何和了解,是否是品出来一点儿感受了,这个仍是最简单的一个 node 服务器渲染。
代码就不上传了,你们粘贴复制就行,所有结构文件
dang dang dang,若是你们看到这里不费劲,或者看懂前边的了,好滴,你能够看这一块了,若是上边的不是很清晰,或者很难懂,好吧,这一块可能更羞涩了,不过不要紧,慢慢来!
结构以下:
├── dist // 保存咱们的打包后的文件 ├── node_modules // 依赖包文件夹 ├── entry // 打包入口文件夹 │ └── entry-server.js // 服务端 打包入口文件 ├── src // 咱们的项目的源码编写文件 │ ├── views // view存放目录 │ │ ├── about.vue //about 页面 │ │ ├── like.vue //like 页面 │ │ └── Home.vue //Home 页面 │ └── App.vue // App入口文件 │ └── main.js // 主配置文件 │ └── router.js // 路由配置文件 └── .babelrc // babel 配置文件 └── package.json // 项目依赖包配置文件 └── package-lock.json // npm5 新增文件,优化性能 └── server.js // server 文件 └── README.md // 说明文档
我们分块的说一说
这一块,就是对应的咱们 src 文件夹下的模板,这些内容你们必定很熟悉了,就很少说了,就是 组件的定义、路由定义、app入口和 main.js 主方法,这里重点说下 main.js
在以前的 main.js 咱们是直接实例化 vue() ,而后对 #appp 进行挂载的,可是如今我们变成了 服务器渲染,这里就不能挂载了,而是把建立的vue实例返回出去。
//main.js import Vue from 'vue' import createRouter from './router' import App from './App.vue' // 导出一个工厂函数,用于建立新的vue实例 export function createApp() { const router = createRouter() const app = new Vue({ router, render: h => h(App) }) return app }
你会问了,可是返回给谁呢,欸?!这个问题好,请往下看。
网友总结:所谓Promise,简单说就是一个容器,里面保存着某个将来才会结束的事件(一般是一个异步操做)的结果。从语法上说,Promise 是一个对象,从它能够获取异步操做的消息。Promise 提供统一的 API,各类异步操做均可以用一样的方法进行处理。
Promise对象有如下两个特色。
(1)对象的状态不受外界影响。Promise对象表明一个异步操做,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和Rejected(已失败)。只有异步操做的结果,能够决定当前是哪种状态,任何其余操做都没法改变这个状态。这也是Promise这个名字的由来,它的英语意思就是“承诺”,表示其余手段没法改变。
(2)一旦状态改变,就不会再变,任什么时候候均可以获得这个结果。Promise对象的状态改变,只有两种可能:从Pending变为Resolved和从Pending变为Rejected。只要这两种状况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对Promise对象添加回调函数,也会当即获得这个结果。这与事件(Event)彻底不一样,事件的特色是,若是你错过了它,再去监听,是得不到结果的。
有了Promise对象,就能够将异步操做以同步操做的流程表达出来,避免了层层嵌套的回调函数。此外,Promise对象提供统一的接口,使得控制异步操做更加容易。
简单来讲,就是把咱们 main入口文件中的vue实例,都封装到 promise,就像增长一个外衣,方便咱们 webpack打包。对,重点来了
/* 五、webpack.server.js 服务端打包 */ const path = require('path');//获取路径对象 const projectRoot = path.resolve(__dirname, '..');//根路径 //定义模块 module.exports = { // 此处告知 server bundle 使用 Node 风格导出模块(Node-style exports) // 这里必须是node,由于打包完成的运行环境是node,在node端运行的,不是在浏览器端运行。 target: 'node', // entry须要提供一个单独的入口文件 entry: ['babel-polyfill', path.join(projectRoot, 'entry/entry-server.js')], // 输出 output: { //指定libraryTarget的类型为commonjs2,用来指定代码export出去的入口的形式。 // 在node.js中模块是module.exports = {...},commonjs2打包出来的代码出口形式就相似于此。 libraryTarget: 'commonjs2', path: path.join(projectRoot, 'dist'), // 打包出的路径 filename: 'bundle.server.js',// 打包最终的文件名,这个文件是给 node 服务器使用的 }, module: { // 由于使用webpack2,这里必须是rules,若是使用use, // 会报个错:vue this._init is not a function rules: [ //规则一、vue规则定义 { test: /\.vue$/, loader: 'vue-loader', },//js规则定义 { test: /\.js$/, loader: 'babel-loader', include: projectRoot, // 这里会把node_modules里面的东西排除在外,提升打包效率 exclude: /node_modules/, // ES6 语法 options: { presets: ['es2015'] } },//css定义 { test: /\.less$/, loader: "style-loader!css-loader!less-loader" } ] }, plugins: [], resolve: { alias: { 'vue$': 'vue/dist/vue.runtime.esm.js' } } }
基本的内容就是上边这些,注释已经很清楚了,你们能够看一看,这个时候咱们的准备工做就已经作好了,下一步就改打包了
npm run server
这个时候,你会发现,咱们的dist 文件夹内,多了一个 bundle.server.js 文件
咱们看一下生成的文件,部分截图,会发现,咱们的这个文件包含了全部页面内的内容和方法,可是这个 bundle.server.js 并非直接返回给前端的,并且在 node 服务器使用的
/*七、 server.js */ const express = require('express')()//引入express 服务框架 const renderer = require('vue-server-renderer').createRenderer() const createApp = require('./dist/bundle.server.js')['default']//引入咱们刚刚打包文件 // 响应路由请求 express.get('*', (req, res) => { const context = { url: req.url } // 建立vue实例,传入请求路由信息 createApp(context).then(app => { renderer.renderToString(app, (err, html) => { if (err) { return res.state(500).end('运行时错误') } res.send(` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue2.0 SSR渲染页面</title> </head> <body> ${html} </body> </html> `) }) }, err => { if(err.code === 404) { res.status(404).end('所请求的页面不存在') } }) }) // 服务器监听地址 express.listen(8089, () => { console.log('服务器已启动!') })
node server
这个时候咱们就能够看到效果了
好啦,这个就是 SSR 服务端渲染的整个过程。
哈喽你们好,在这里忙碌的日子又和你们见面了,我们的先后端系列入门篇已经 26 篇了,按照个人计划,基本的讲解已经到这里了,相信若是你们按照我写的系列,能搭建本身的博客系统了,甚至若是你比较厉害,已经开始开发中型项目了哈哈,我们这里先回顾下知识,包括 API ,Swagger 文档,Sugar 数据持久层的ORM,Repository仓储架构,Asyn/Await 异步编程,AOP面向切面编程,IoC控制反转和DI依赖注入,Dto数据传输对象,Redis缓存等后端知识,还有Vue 基础语法、JS高级、ES六、Vue 组件 、生命周期、数据绑定、开发环境搭建、Vue-Cli 脚手架、axios Http请求、vue-router 路由协议、webpack 打包、Vuex 状态管理等前端知识。虽然都是简单的说了下皮毛,也是都涵盖了这个框架内容,我们能够看看我们的结构树,这个天天都会出现的哈哈,这个就是这一个月我们的辛苦,也是颇有回报滴,群里的小伙伴都破50了,这是个大图,你们能够看看:
原本想着要换其余的系列,可是在群里小伙伴的建议下,仍是在把Vue好好说说吧,思考了下,在国庆前的时间再说下 SSR 框架——Nuxt.js 吧,感受这一块应该是要用到的,也是自学的一个吧,至于国庆以后,再慢慢考虑写其余的吧。