Express应用执行npm start启动报错SyntaxError崩溃如何解决

问题根因 #

你当前的启动报错是因为server.js文件被意外混入了HTML代码，Node.js将server.js作为JS文件解析执行时，遇到了不属于JS语法的<!DOCTYPE html>，直接抛出语法错误。同时你的代码还存在其他几处语法、依赖引入错误，按以下步骤修复即可正常启动：

修复步骤 #

1. 清理server.js中的冗余内容 #

打开你本地的server.js文件，把文件末尾所有不属于JS代码的内容全部删掉，包括所有HTML代码、最后那段重复的错误的app.listen代码。

2. 引入缺失的path模块 #

你在代码中使用了path.join读取静态页面，但没有引入path模块，在server.js开头添加引入语句：

const path = require('path');

3. 删除重复的监听代码 #

你在server.js中写了两次app.listen，最后那段带注释的监听代码语法错误且重复，直接删除即可。

修正后的完整server.js代码 #

const PORT = 3000;
const path = require('path'); // 新增引入

// 变量stocks的值与'stocks.js'文件中的stocks变量一致
const stocks = require('./stocks.js').stocks;

const express = require("express");
const app = express();


app.use(express.urlencoded({
    extended: true
}));

app.use(express.static('public'));
// 注意：不要添加或修改本行以上的内容。

// 在此处添加你的代码
app.get('/',function(req,res) {
    res.sendFile(path.join(__dirname,'/index.html'));
});

app.get('/listing', function(req, res){
    res.sendFile(path.join(__dirname, '/stocklist.html'))
})

app.get('/sort', function(req, res){
    res.sendFile(path.join(__dirname, '/listingorder.html'))
})

app.post('/placeorder', (req, res) => {
    console.log(req.body)
    res.status(200).send("Placed")
})

app.get('/asc', function(req, res){
    let sorted = stocks.sort(function(a, b) {
        return parseFloat(a.price) - parseFloat(b.price);
    });
    res.status(200).send({stock: sorted})
 })

app.get('/dsc', function(req, res){
   let sorted = stocks.sort(function(a, b) {
       return parseFloat(b.price) - parseFloat(a.price);
   });
   res.status(200).send({stock: sorted})
})

app.get('/stocks', function(req, res) {
    res.status(200).send({stock: stocks});
})

app.listen(PORT, () => {
    console.log(`Server listening on port ${PORT}...`);
});

后续页面正常渲染需补充修复的问题 #

启动服务后如果页面无法正常展示股票列表，还需要修正以下HTML和前端JS错误：

• index.html修正标签错误：把第二行的<> 改成<html>，末尾的<html>改成</html>
• stocklist.html和listingorder.html修正前端JS语法错误：
  • for循环语法错误：for (var i = 0; i <data.stock.length />; i++)改成for (var i = 0; i <data.stock.length; i++)
  • 对象语法错误：let body = {symbol}: document.getElementById("symbol").value改成let body = {symbol: document.getElementById("symbol").value, qty: document.getElementById("qty").value}
  • fetch配置语法错误：method}: "POST"改成method: "POST"，同时POST请求发送表单数据需要转成JSON或者FormData格式，否则后台拿不到参数

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