Vue SSR配合Java的Javascript引擎j2v8实现服务端渲染1概述
原文地址
http://www.terwergreen.com/post/vue-ssr-j2v8-1.html
初步实现方案探索(Node环境)
// 第 1 步:创建一个 Vue 实例
const Vue = require('vue')
const app = new Vue({
template: `<div>Hello World</div>`
})
// 第 2 步:创建一个 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步:将 Vue 实例渲染为 HTML
renderer.renderToString(app, (err, html) => {
if (err) throw err
console.log(html)
// => <div data-server-rendered="true">Hello World</div>
})
引入vue-server-renderer
,他里面有一个createRenderer
的方法,这个方法里的renderToString
,可以把app渲染成字符串,第一个参数是vue实例,第二个参数是回调(错误参数(err),编译好的字符串(html))。
非node环境实现服务端渲染(例如j2v8)
// entry-server.js
import Vue from "vue";
const renderVueComponentToString = require("vue-server-renderer/basic.js");
console.log("renderVueComponentToString");
console.log(renderVueComponentToString);
// app.js
const vm = new Vue({
template: `<div>{{ msg }}</div>`,
data: {
msg: "hello"
}
});
console.log("data.msg:" + vm.$data.msg);
console.log("renderVueComponentToString");
console.log(renderVueComponentToString);
global.renderServer = context => {
console.log("context:" + JSON.stringify(context));
return new Promise((resolve, reject) => {
renderVueComponentToString(vm, context, (err, res) => {
if (err) {
console.log(err);
reject(err);
}
resolve(res);
console.log(res);
});
});
};
// test-entry-server.js
require("../../src/ssr/entry-server")
const context = {
url: "/"
};
const promise = global.renderServer(context);
console.log("promise");
console.log(promise);
promise.then(
value => {
console.log(value);
},
reason => {
console.log(reason);
}
);
运行结果
➜ webapp git:(develop) ✗ yarn babel-node ./tests/ssr/test-entry-server.js --presets=@babel/preset-env
yarn run v1.13.0
$ /mnt/c/Users/Terwer/IdeaProjects/jvue-cli/src/main/webapp/node_modules/.bin/babel-node ./tests/ssr/test-entry-server.js --presets=@babel/preset-env
renderVueComponentToString
[Function: renderToString]
data.msg:hello
renderVueComponentToString
[Function: renderToString]
context:{"url":"/"}
<div data-server-rendered="true">hello</div>
promise
Promise { '<div data-server-rendered="true">hello</div>' }
<div data-server-rendered="true">hello</div>
Done in 3.63s.
Github
https://github.com/terwer/jvue
https://github.com/terwer/jvue-cli
Vue SSR配合Java的Javascript引擎j2v8实现服务端渲染1概述的更多相关文章
- Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染2创建Vue2+webpack4项目
前提 安装好nodejs并配置好环境变量,最好是 node10,https://nodejs.org/en/download/ 参考我之前的文章 debian安装nodejs Yarn &&a ...
- Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染3配置webpack支持ssr
安装 cross-env yarn add -D cross-env 安装 html-webpack-plugin yarn add -D html-webpack-plugin 安装 webpack ...
- Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染4支持构建bundle
安装 webpack-node-externals yarn add -D webpack-node-externals
- 使用 PHP 来做 Vue.js 的 SSR 服务端渲染
对于客户端应用来说,服务端渲染是一个热门话题.然而不幸的是,这并不是一件容易的事,尤其是对于不用 Node.js 环境开发的人来说. 我发布了两个库让 PHP 从服务端渲染成为可能.spatie/se ...
- 服务端渲染 数据驱动 不是渲染后的网页,而是一个由html和Javascript组成的app ssr 隐藏接口服务器
小结: 1. 服务端渲染主要的工作是把组件渲染为服务器端的 HTML 字符串,将它们直接发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务器给到客户端的已经是 ...
- Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...
- Vue 服务端渲染(SSR)
什么是服务端渲染? 简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序. 服务端渲染的优点 更好的SEO,搜索引 ...
- 追求极致的用户体验ssr(基于vue的服务端渲染)
首先这篇博客并不是ssr建议教程,需要ssr入门的我建议也不要搜索博客了,因为官网给出了详细的入门步骤,只需要step by step就可以了,这篇博客的意义是如何使用ssr,可能不同的人有不同的意见 ...
- vue ssr服务端渲染
SSR:Server Side Rendering(服务端渲染) 目的是为了解决单页面应用的 SEO 的问题,对于一般网站影响不大,但是对于论坛类,内容类网站来说是致命的,搜索引擎无法抓取页面相关内容 ...
随机推荐
- Eclipse环境安装Python插件PyDev
转载自:http://blog.csdn.net/typa01_kk/article/details/49251247 clipse环境安装Python插件PyDev 软件准备,下载地址,先看安装,再 ...
- Spark 核心篇-SparkContext
本章内容: 1.功能描述 本篇文章就要根据源码分析SparkContext所做的一些事情,用过Spark的开发者都知道SparkContext是编写Spark程序用到的第一个类,足以说明SparkCo ...
- Atitit 类库冲突 解决方案
Atitit 类库冲突 解决方案 表现情况,找到不某些方法 类等,一个情况是真的找不到,一个情况是加载了错误的jar,导致正确的jar无法加载.. 1.1. 查找现在ide正在使用的jar1 1.2. ...
- [docker]使用quaaga实现(rip ospf)实现主机间容器互通
使用quaaga实现(rip ospf)实现主机间容器互通 - n1设置 brctl addbr br0 ip a a 10.1.1.1/24 br0 ip a a 10.1.1.1/24 dev b ...
- RelativeLayout 布局参数
今天调布局的时候 想把界面做成横屏竖屏都可以的 突然发现之前理解的android:布局参数都是有问题的 今天贴出来 下次自己也记得 以下大部为用在RelativeLayout中的一些参数: andro ...
- Numpy合并矩阵
横向合并:hstack 纵向合并:vstack
- iOS开发 关于启动页和停留时间的设置
引言: 在开发一款商业App时,我们大都会为我们的App设置一个启动页. 苹果官方对于iOS启动页的设计说明: 为了增强应用程序启动时的用户体验,您应该提供一个启动图像.启动图像与应用程序的首屏幕看起 ...
- Spring自动扫描无法扫描jar包中bean的解决方法(转)
转载自:http://www.jb51.net/article/116357.htm 在日常开发中往往会对公共的模块打包发布,然后调用公共包的内容.然而,最近对公司的公共模块进行整理发布后.sprin ...
- Retrieve id of record just inserted into a Java DB (Derby) database
https://stackoverflow.com/questions/4894754/retrieve-id-of-record-just-inserted-into-a-java-db-derby ...
- Java知多少(45)未被捕获的异常
在你学习在程序中处理异常之前,看一看如果你不处理它们会有什么情况发生是很有好处的.下面的小程序包括一个故意导致被零除错误的表达式. class Exc0 { public static void ma ...