如何从不可编辑的stocks.js文件导入数组到HTML页面中使用

问题原因 #

require()是Node.js专属的CommonJS模块导入语法，浏览器原生运行环境不支持，所以直接打开静态HTML文件无法读取stocks.js内的数组。结合package.json给出的Express依赖、server.js入口配置，这个作业需要你搭建本地Express服务实现数据传递。

解决步骤 #

第一步：编写服务端代码server.js #

在项目根目录新建server.js文件，代码如下：

const express = require('express');
const app = express();
const port = 3000;
// 导入不可编辑的stocks数据
const { stocks } = require('./stocks.js');

// 托管项目静态文件，允许访问stocklist.html
app.use(express.static(__dirname));

// 提供返回股票数据的接口
app.get('/api/stocks', (req, res) => {
  res.json(stocks);
});

// 启动服务
app.listen(port, () => {
  console.log(`服务运行在 http://localhost:${port}`);
})

第二步：修改stocklist.html的JS逻辑 #

删除原有的require导入代码，改用你已经引入的jQuery请求接口获取数据，修改后的script标签内容如下：

<script>
// 页面加载完成后请求股票数据
$(function() {
  $.get('/api/stocks', function(stocks) {
    buildTable(stocks);
  })
})

function buildTable(data) {
    var table = document.getElementById("stockTable")
    for (var i = 0; i < data.length; i++) {
        var row = 
            `<tr>
                <td>${data[i].company}</td>
                <td>${data[i].symbol}</td>
                <td>${data[i].price}</td>
            </tr>`
        table.innerHTML += row;
    }
}
</script>

第三步：启动服务访问页面 #

• 在项目根目录执行npm install安装依赖
• 执行npm start启动本地服务
• 打开浏览器访问http://localhost:3000/stocklist.html即可看到正常渲染的股票表格

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