vue.js - 在 Sails.js 中使用 vue 作为视图引擎,无需前端
问题描述
我正在使用 Sails.js(无前端)设置电子邮件服务器,我需要帮助在我的控制器中导入 vue 文件或在 View.js 文件中设置 getRenderFn 以呈现我的 vue 文件。
我已经尝试了几件事,但没有任何效果。我尝试的第一件事是将 View.js 文件中的扩展名更改为 vue,但这还不够。我还必须编写一个渲染函数,但我不知道该怎么做。
这导致我在控制器中使用第二种方法来导入 vue 并使用一个名为vue-server-renderer的库。我正在返回 HTML 并通过电子邮件发送。问题是我将有几个模板,所以我的控制器会很混乱,所以我想把它分解成不同的文件。我创建了一个 template.vue 文件并尝试将其导入控制器中,但出现script is undefined
错误,因此我需要一种将 vue 文件加载到控制器中的方法。
module.exports = {
send: function (req, res) {
// change the type of body from obj to JSON so it's easy to parse
let parsedBody = JSON.parse(JSON.stringify(req.body));
let emailSubj;
let emailTemplate;
const jsdom = require("jsdom");
const { JSDOM } = jsdom;
const dom = new JSDOM(`<!DOCTYPE html><div class="vue-target">Hello</div>`);
const Vue = require('vue');
const templateVue = require("../../views/template.vue");
const Constructor = Vue.extend(templateVue);
const getTemp = new Constructor({
propsData: {
body: parsedBody
},
render: h => h("../../views/template.vue"),
}).$mount(dom.window.document.querySelector(".vue-target"));
sails.log(getTemp);
// create renderer
const renderer = require('vue-server-renderer').createRenderer();
let test;
// Render the Vue instance to HTML
renderer.renderToString(getTemp, (err, html) => {
test = html;
if (err) throw err;
sails.log(html)
// => <div data-server-rendered="true">Hello World</div>
});
解决方案
以这种方式解决了问题
const Vue = require('vue');
const renderer = require('vue-server-renderer').createRenderer();
const app = new Vue({
data: {
title: 'this is a test title',
Name: 'Name',
Sender: 'Someone'
},
template: require('fs').readFileSync('./index.template.html', 'utf-8')
});
let sent;
let context = {
title: 'this is a test title',
Name: 'Name',
Sender: 'Someone'
};
renderer.renderToString(app, context, (err, html) => {
if (err) {
res.status(500).end('Internal Server Error');
return
}
sent = html;
sails.log(sent);
});
可以使用“Mustache”语法在 index.template.html 中访问数据,例如 {{ title }}
推荐阅读
- laravel - 返回正常结果 tnt search
- mysql - MySQL - 链接表问题(选择唯一行)
- php - 如何删除输入数据中的“空格”?
- matlab - 是否有可用于创建 ISS 的真实图表的 matlab 函数?
- swift - 日期格式 dd MMMM, yyyy 的正则表达式是什么,这里 MMMM 是通过本地化显示的。例如,对于荷兰来说,就像 2019 年 1 月 12 日
- javascript - 如何从 window.open() 获取 returnValue?
- watson-knowledge-catalog - 本地运行的 WKC 是否会利用 StoredIQ 作为数据连接器,还是利用 IBM Governance Catalog IGC 中的连接器?
- javascript - react-redux:元素类型无效
- javascript - 用momentjs比较日期之间的差异
- mysql - MySQL计算每个客户的在线订单与电话订单的百分比