如何从EJS文件中获取一个值并将其发送到NodeJS中的app.js？

Question

我目前正在学习nodejs，并且已经使用EJS作为模板引擎。我现在正在尝试将一个简单的联系应用程序作为我自己的练习。联系人列表是从Contacts.json文件加载的。我已经成功加载了所有文件，现在我正在尝试获取每个联系人的详细信息。我想根据联系人名称作为其参数显示细节。这是我的代码：

app.js

app.get('/contact', (request, response) => {
    const contacts = loadContact();
    response.render('contact', {
        title: 'Contact Page',
        layout: 'layouts/main',
        contacts
    });
});

app.get('/contact/:name', (request, response) => {
    const contact = findContact(request.params.name);
    response.render('contact', {
        layout: 'layouts/main',
        contact
    });
});

contact.js

const { error } = require('console');
const fs = require('fs');

const dirPath = './data';
if (!fs.existsSync(dirPath)) {
    fs.mkdirSync(dirPath);
}

const dataPath = './data/contacts.json';
if (!fs.existsSync(dataPath)) {
    fs.writeFileSync(dataPath, '[]', 'utf-8');
}

const loadContact = () => {
    const file = fs.readFileSync('data/contacts.json', 'utf-8');
    const contacts = JSON.parse(file);
    return contacts;
};

const findContact = (name) => {
    const contacts = loadContact();
    const contact = contacts.find((contact) => contact.name === name);
    return contact;
};

module.exports = { loadContact, findContact };

contact.ejs。

<div class="container">
    <div class="row">
        <div class="col-md-8">
            <h2>My Contact List</h2>
            <table class="table table-striped table-hover my-3">
                <thead>
                  <tr>
                    <th scope="col">#</th>
                    <th scope="col">Name</th>
                    <th scope="col">Phone Number</th>
                    <th scope="col">Actions</th>
                  </tr>
                </thead>
                <tbody>
                  <% if (contacts.length === 0) { %>
                    <div class="alert alert-danger fw-bold" role="alert">
                      Contact Data is Empty
                    </div>
                  <% } %>
                  <% contacts.forEach((c, i) => { i++ %>
                    <tr>
                      <th scope="row"><%= i++ %> </th>
                      <td><%= c.name %> </td>
                      <td><%= c.phoneNumber %> </td>
                      <td><a href="/contact/<%= c.name %> " class="badge bg-primary rounded-pill text-decoration-none" data-bs-toggle="modal" data-bs-target="#contactModal"><i class="bi bi-info-circle"></i> Details</a></td>
                    </tr>
                    <% }) %>
                </tbody>
            </table>
            <!-- Modal -->
            <div class="container mt3">
              <div class="row">
                  <div class="col-md8">

                      <div class="modal fade" id="contactModal" tabindex="-1" aria-labelledby="contactModalLabel" aria-hidden="true">
                          <div class="modal-dialog modal-dialog-centered modal-lg">
                          <div class="modal-content">
                              <div class="modal-header">
                              <h5 class="modal-title" id="contactModalLabel"> </h5>
                              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                              </div>
                              <div class="modal-body">
                              <div class="container-fluid">
                                  <div class="row">
                                  <div class="col-md-3">
                                      <ul class="list-group">
                                      <li class="list-group-item"><strong>Name</strong></li>
                                      <li class="list-group-item"><strong>Phone Number</strong></li>
                                      <li class="list-group-item"><strong>Email</strong></li>
                                      </ul>
                                  </div>
                                  <div class="col-md">
                                      <ul class="list-group">
                                      <li class="list-group-item"><%= contact.name %> </li>
                                      <li class="list-group-item"><%= contact.phoneNumber %> </li>
                                      <li class="list-group-item"><%= contact.email %> </li>
                                      </ul>
                                  </div>
                                  </div>
                              </div>
                              </div>
                              <div class="modal-footer">
                              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                              </div>
                          </div>
                          </div>
                      </div>
                  </div>
              </div>
            </div>
        </div>
    </div>
</div>

问题是我想要此锚＆lt; a href =“/contact/＆lt;％= c.name％＆gt;“ class =” badge bg - 主要的圆形电池文本编写编写“ data-bs-toggle =”模式“ data-bs-target =”＃contactmodal“ i＆gt;详细信息＆lt;/a＆gt;触发模式，模态内容填充了我从此处传递的任何值href =“/contact/contact/＆lt;％= c.name％＆gt; gt; “到app.js这里，

app.get('/contact/:name', (request, response) => {
    const contact = findContact(request.params.name);
    response.render('contact', {
        layout: 'layouts/main',
        contact
    });
});

我无法以这种方式传递我想要的值。谁能告诉我正确执行吗？谢谢你的帮助