无法实现电影详情HTML页面跳转渲染：仅返回JSON数据

问题根源 #

1. 链接指向错误：列表页的链接直接指向后端返回JSON的API路由（/movie/:id），导致浏览器打开后直接显示JSON数据，而非加载详情HTML页面。
2. 详情页接口请求错误：viewMovie.js中硬编码了请求路径/movie/:id，未替换为实际电影ID，无法获取对应数据。
3. 前后端路由职责混淆：后端/:id GET接口负责返回数据，详情页HTML需通过静态文件服务加载，再由前端JS调用接口渲染数据。

具体修复步骤 #

1. 修改列表页的链接（viewAllMovies.js） #

将原API链接改为指向详情HTML页面，并携带电影ID作为查询参数：

// 原代码
<td><a href="${baseURL}/movie/${item._id}">LINK</a></td>

// 修改后（假设详情页HTML名为movie-detail.html，与列表页同目录）
<td><a href="movie-detail.html?id=${item._id}">查看详情</a></td>

2. 修正详情页的请求逻辑（viewMovie.js） #

从URL查询参数中获取电影ID，再请求对应API接口：

const resultDOM = document.getElementById("resultID");
const baseURL = "http://localhost:5000"

window.addEventListener("load", viewMovie)

async function viewMovie(e){
    try {
        // 从URL中提取电影ID参数
        const urlParams = new URLSearchParams(window.location.search);
        const movieId = urlParams.get('id');
        if(!movieId) throw new Error("未获取到电影ID");

        // 请求对应ID的电影数据
        let data = await fetch(`${baseURL}/movie/${movieId}`)
        data = await data.json();
        console.log(data);
        
        // 将数据渲染到页面
        resultDOM.innerHTML = `<tr>
        <td>${data.title}</td>
        <td>${data.genre}</td>
        <td>${data.publishDate}</td>
    </tr>`
    } catch (error) {
        console.log(error);
        resultDOM.innerHTML = `<tr><td colspan="3">加载失败：${error.message}</td></tr>`;
    }
}

3. 确保详情HTML页面（HTML2）的配置 #

• 确认movie-detail.html放在assets/html目录下（与列表页HTML同目录），可被后端静态文件服务访问。
• 在movie-detail.html中正确引入viewMovie.js，并存在ID为resultID的容器：

<!-- 示例页面结构 -->
<table>
  <tbody id="resultID"></tbody>
</table>
<script src="viewMovie.js"></script>

4. 验证后端路由配置 #

当前后端movie-router.js中的/:id GET接口逻辑正确，无需修改：

router.route("/:id").patch(updateMovie).get(viewMovie);

验证流程 #

1. 重启后端服务，刷新列表页。
2. 点击电影条目旁的“查看详情”链接，将打开movie-detail.html页面。
3. 页面加载时，JS会自动获取URL中的ID，请求API并渲染对应电影数据。

内容的提问来源于stack exchange，提问作者IHateCoding