意外的标记“<”（returns 404 html 页面而不是 .js 文件）

Question

我目前正在开发一个 node express 待办事项列表应用程序（也使用 ejs）。我有一个过滤器 url: "/filter/query" 并使用它，我 select 从类别数组中指定一个：（filter/?category=lists 或 filter/?category=lastupdated）然后类别=类别[...] 这是代码：

const categories = ["lists", "journals", "name", "lastmodified"];
app.get('/dashboard/filter', async (req, res) =>
{
    let category = req.query.category;
    if (category === categories[2])
    {
        res.redirect('/dashboard');

    }
    else if (category === categories[0] || category === categories[1] )
    {
        let objs = new Array();
        const journals = await Journal.find({})
        const lists = await List.find({})

        if (category === categories[1])
        {

            for (let obj of journals)
            {
                objs.push(obj);
            }
        }
        else if (category === categories[0])
        {

            for (let obj of lists)
            {

                objs.push(obj);
            }
        }
        res.render('Dashboard', { category, objs, categories })
    }
    else if (category === categories[3])
    {
        const objs = new Array();
        const journals = await Journal.find({});
        for (let obj of journals)
        {
            objs.push(obj);
        }
        const lists = await List.find({});
        for (let obj of lists)
        {
            objs.push(obj);
        }

        objs.sort(function (a, b)
        {
            var indexA = a.lastmodified, indexB = b.lastmodified
            if (indexA < indexB) //sort string ascending
                return -1
            if (indexA > indexB)
                return 1
            return 0 //default return value (no sorting)
        })
        res.render('Dashboard', { category, objs, categories })
        //res.render('Home')
    }

})

和

app.get('/dashboard', async (req, res) =>
{
    console.log("no query")
    category = categories[2];
    let objs = new Array();
    const journals = await Journal.find({})
    const lists = await List.find({})
    for (let obj of journals)
    {
        objs.push(obj);
    }
    for (let obj of lists)
    {
        objs.push(obj);
    }
    objs.sort(function (a, b)
    {
        var nameA = a.name.toLowerCase(), nameB = b.name.toLowerCase()
        if (nameA < nameB) //sort string ascending
            return -1
        if (nameA > nameB)
            return 1
        return 0 //default return value (no sorting)
    })
    res.render('Dashboard', { category, objs, categories })

})

因此，同时使用它们将使用 { category, objs, categories } 呈现 Dashboard.ejs 文件。如您所见，selecting 类别[2] 或“名称”将重定向到没有任何查询字符串的默认路由。这是 ejs 文件：

<%- include('partials/head') %>
    <h1>Dashboard</h1>
    <h2>FilterBy:</h2>
    <% if(category) { %>
        <form action="/dashboard/filter/?category=<%=category%>" method="GET">
            <select name="category" id="category">
                <% for(let cat of categories) {%>
                    <option value="<%=cat%>" <%=category===cat ? 'selected' : '' %>><%=cat%>
                    </option>
                    <% } %>
            </select>
            <button>Enter</button>
        </form>
        <% } %>
            <% for(let obj of objs) {%>
                <li>
                    <a href="/dashboard/details/<%=obj.id%>">
                        <%= obj.name %>
                    </a>
                    <form action="/dashboard/details/<%=obj.id%>?_method=DELETE" method="POST">
                        <button>Delete</button>
                    </form>
                </li>
                <% } %>
                    <button class="togglebtn">+</button>
                    <div class="hiddennew">
                        <a href="/dashboard/newjournal">NewJournal</a>
                        <br>
                        <a href="/dashboard/newlist">NewList</a>
                    </div>

                    <script src="togglenew.js"></script>
                    <%- include('partials/footer') %>

如您所见，我附加了一个名为“togglenew.js”的脚本：

const Button = document.querySelector('.togglebtn');
const Hidden = document.querySelector('.hiddennew');

Hidden.style.display = "none";

const ClickEvent = function ()
{
    Hidden.style.display = "block";
}

const DisableClick = function ()
{
    setTimeout(() => { Hidden.style.display = "none"; }, 100);
}



Button.addEventListener('focus', ClickEvent);
Button.addEventListener('blur', DisableClick);

使用它，我可以轻松地使用“togglebutton”按钮操纵“hiddennew”div。问题是：当我加载时.. 只是没有任何查询的仪表板，一切正常，按钮的行为符合您的预期，但是当我使用类别 [] 中列出的任何查询加载仪表板时，它看起来像脚本

<button class="togglebtn">+</button>
                    <div class="hiddennew">
                        <a href="/dashboard/newjournal">NewJournal</a>
                        <br>
                        <a href="/dashboard/newlist">NewList</a>
                    </div>

                    <script src="togglenew.js"></script>

Doeasn't work and insted 我在 console:togglenew.js:1 Uncaught SyntaxError: Unexpected token '<' ..... 这就是我得到的而不是 togglenew.js 文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OnJournal</title>
    <link rel="stylesheet" href="/bootstrap/bootstrap.min.css ">
    <script src="/bootstrap/jquery.js"></script>
    <script src="/bootstrap/bootstrap.min.js"></script>
    
</head>
<body>
    <h1>404</h1>
</body>
</html>

我尝试了一切 - 没有任何效果有谁知道如何解决这个问题？？？

Answer 1

我发现通过替换这部分代码

<script src="togglenew.js"></script>

这个：


 <script>
   const Button = document.querySelector('.togglebtn');
   const Hidden = document.querySelector('.hiddennew');

   Hidden.style.display = "none";

   const ClickEvent = function() {
     Hidden.style.display = "block";
   }

   const DisableClick = function() {
     setTimeout(() => {
       Hidden.style.display = "none";
     }, 100);
   }

   Button.addEventListener('focus', ClickEvent);
   Button.addEventListener('blur', DisableClick);
 </script>

工作正常。那么，这是否意味着问题与加载文件有关？？

意外的标记“<”（returns 404 html 页面而不是 .js 文件）

Unexpected token '<' (returns 404 html page instead of .js file)

html

javascript

ejs

node.js

express