我正在尝试将名为“ui.ejs”的 EJS 模板嵌入到 handler.js 中。 目的是捕获 URL 查询参数,然后将它们传递给函数名称“ui.js”以捕获数据,然后将该数据传递到名为“ui.ejs”的 EJS UI 模板上。 该脚本运行良好,但实际的网页看起来乱七八糟。 实际的网页 UI 看起来像这样。
"\r\n\r\n\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n"
\r\n\r\n Next Page -> \r\n\r\n
\r\n\r\n <- Previous Page \r\n\r\n
是不是stringify解析有问题? 提前致谢...!
这是 handler.js 代码:
import {ui} from './index.js';
var ejs = require('ejs');
var fs = require('fs');
const path = require('path');
// Implementing the UI
export async function UserInterface(event, context, callback) {
// Capture data event
const e = event.queryStringParameters;
// Get UI parameters
let params = await ui(e);
var htmlContent = fs.readFileSync(path.resolve(process.cwd(), './views/' + 'ui.ejs'), 'utf8');
var template = ejs.compile(htmlContent);
return {
statusCode: 200,
headers: { 'Content-type': 'text/html' },
body: JSON.stringify(template(params)),
};
};
答案 0 :(得分:0)
修复:
用 'body:template(params)' 替换 'body:JSON.stringify(template(params))' 摆脱了 '\r\n\r\n\n\r'。
但是 css 文件和图像仍然无法在网页中工作。
如何配置 CSS 和图像目录以加载到网页中?
handler.js
import {ui} from './index.js';
var ejs = require('ejs');
var fs = require('fs');
const path = require('path');
// Implementing the UI
export async function UserInterface(event, context, callback) {
// Capture data event
const e = event.queryStringParameters;
// Get UI parameters
let params = await ui(e);
var htmlContent = fs.readFileSync(path.resolve(process.cwd(), './views/' + 'ui.ejs'), 'utf8');
var template = ejs.compile(htmlContent);
return {
statusCode: 200,
headers: { 'Content-type': 'text/html' },
body: template(params),
};
};
ui.js 看起来像这样:
ui.js
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/public/assets/css/bootstrap.min.css"><!-- Link to bootstrap library-->
<link rel="stylesheet" href="/public/assets/css/materialize.min.css"><!-- Link to materialize library-->
<link rel="shortcut icon" type="image/svg" href="/public/assets/img/site/logo.svg"/><!-- Link to title icon logo-->
<title><%= title %></title>
</head>
<body>
还有这样的索引视图引擎:
index.js
app.use(express.static(path.join(__dirname, 'public'))); // configure express to use public folder
app.set('views', __dirname + '/views'); // set express to look in this folder to render our view
app.set('view engine', 'ejs'); // configure template engine