SSR服务器端渲染技术(一)

先引包

var http =require('http');
var Vue = require('vue')
var serverRender = require('vue-server-renderer')

//步骤1 创建vue实例

var app = new Vue({
    template:`<div>
        <my-component/>
    </div>`,
    components:{
        myComponent:{
            template:'<div>vvvvvvvvvvvvvvv</div>'
        }
    }
})

//步骤2 创建renderer实例

var renderer = serverRender.createRenderer()

//步骤3 将vue实例转化为 html字符串

renderer.renderToString(app,function(err,html){
    console.log(html)
})

此时输出的结果为（这里只是展示可以转字符串）

Administrator@PC-Liyueran MINGW64 /e/www/WWWWWW/ssrDemo
$ node demo.js
<div data-server-rendered="true"><div>vvvvvvvvvvvvvvv</div></div>

//步骤4 将VUE实例的字符串输出到服务器

//步骤4  将VUE实例的字符串输出到服务器
http.createServer((req,res)=>{  
    //步骤3  将vue实例转化为 html字符串
    renderer.renderToString(app,function(err,html){
        console.log(html)
        res.end(`<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
        </head>
        <body>
            ${html}
            <div>wowoow</div>
        </body>
        </html>`)
    })   
}).listen(3000);

完整例子代码如下：

var http =require('http');
var Vue = require('vue')
var serverRender = require('vue-server-renderer')

//步骤1 创建vue实例
var app = new Vue({
    template:`<div>
        <my-component/>
    </div>`,
    components:{
        myComponent:{
            template:'<div>vue实例</div>'
        }
    }
})
//步骤2 创建renderer实例
var renderer = serverRender.createRenderer()


//步骤4  将VUE实例的字符串输出到服务器
http.createServer((req,res)=>{  
    //步骤3  将vue实例转化为 html字符串
    renderer.renderToString(app,function(err,html){
        console.log(html)
        res.end(`<!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <meta http-equiv="X-UA-Compatible" content="ie=edge">
            <title>Document</title>
        </head>
        <body>
            ${html}
            <div>wowoow</div>
        </body>
        </html>`)
    })   
}).listen(3000);

这样把字符串都放在node里面不是很好，所以把template 写出去。

-------------------------------------------------------------------------------------------------------------

createrender 里面可以通过FS模块读取template 模版，那么我们可以新建一个html来存放之前的template,

//步骤2 创建renderer实例
var renderer = serverRender.createRenderer({
    template:require('fs').readFileSync('./index.template.html','utf-8')
})


//步骤4  将VUE实例的字符串输出到服务器
http.createServer((req,res)=>{  
    //步骤3  将vue实例转化为 html字符串
    renderer.renderToString(app,function(err,html){
        console.log(html)
        res.end(html)
    })   
}).listen(3000);

template 代码如下需要注意的是要添加一个  这个是表示vue实例里面的东西可以插入到这个地方

中间不要写空格，否则报错

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!--vue-ssr-outlet-->
</body>
</html>

----------------------------------------------------------------------------------------------------------------------

renderer.renderToString 中第2个参数可以在模版里面init 进去你要添加的标签如下

我init进入了script标签

//步骤4  将VUE实例的字符串输出到服务器
http.createServer((req,res)=>{  
    //步骤3  将vue实例转化为 html字符串
    renderer.renderToString(app,{
        init:`<script> console.log('aaaa') </script>`
    },function(err,html){
        console.log(html)
        res.end(html)
    })   
}).listen(3000);

在template模版中加了｛｛｝｝和｛｛｛｝｝｝ 2个括号和3个括号

其中2个括号就会转译成字符串 3个括号直接执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    {{init}}
    {{{init}}}
    <!--vue-ssr-outlet-->
</body>
</html>

完整代码那个index.template.html 模版我就不复制了，如上

var http =require('http');
var Vue = require('vue')
var serverRender = require('vue-server-renderer')

//步骤1 创建vue实例
var app = new Vue({
    template:`<div>
        <my-component/>
    </div>`,
    components:{
        myComponent:{
            template:'<div>vue实例</div>'
        }
    }
})
//步骤2 创建renderer实例
var renderer = serverRender.createRenderer({
    template:require('fs').readFileSync('./index.template.html','utf-8')
})


//步骤4  将VUE实例的字符串输出到服务器
http.createServer((req,res)=>{  
    //步骤3  将vue实例转化为 html字符串
    renderer.renderToString(app,{
        init:`<script> console.log('aaaa') </script>`
    },function(err,html){
        console.log(html)
        res.end(html)
    })   
}).listen(3000);

SSR服务器端渲染技术(一)

猜你喜欢