0

我正在尝试将名为“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)),
      };

};
4

1 回答 1

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
于 2021-07-19T09:41:14.760 回答