javascript - Node.js, ajax - 前端路由

Question

我正在使用 node.js、jQuery、mongoose 和 MongoDB 为购物网站开发 SPA 网站。 从 index.html 文件开始时，ajax 请求和响应可以完美地工作。因此，例如从 http://localhost:3000 开始有人点击了一个名为“产品”的链接，我向服务器发送了一个ajax请求，服务器异步发送回必要的产品信息，这导致http://localhost:3000/products。 .但问题是，如果有人输入 http://localhost:3000/products直接在搜索栏中，它将显示产品的 json 表示形式。

这是我的代码:

script.js

function redirect (link) {
    $.ajax({
        type: 'GET',
        url: 'http://localhost:3000/' + link,
        contentType: 'application/json',
        data: {
            link
        },
        success: function (res) {
            let container = $('#contentToSwap');
            container.html('');
            res.products.forEach(function (products_) {
              ...
            });
        }
    });
}

app.js

var Product = require('./models/product');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');
var path = require('path');
var express = require('express');

var app = express();

mongoose.connect('mongodb://localhost:27017/shopping');

var PORT = process.env.PORT || 3000;

app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json());

app.get('*', function(req, res) {
    Product.find(function(err, docs) {
        let productChunks = [];
        let chunksize = 4;
        let display = [];
        for (var i = 0; i < docs.length; i++) {
            if (docs[i].productType == req.query.link) display.push(docs[i]);
        }
        for (var i = 0; i < display.length; i += chunksize) {
            productChunks.push(display.slice(i, i + chunksize));
        }
        res.send({ products: productChunks });
    });
});

app.listen(PORT, function () {
    console.log('Listening on port ' + PORT);
});

所以如果用户不从 index.html 文件开始，我需要某种前端路由。我知道我可以编写自己的路由器来正确路由 url，并且我可以将所有请求路由回 index.html，如

app.get('*', function(req, res) {
    res.sendFile(__dirname + '/public/index.html');
});

但是当有人点击链接时，我无法从服务器加载所有必要的产品信息。所以我对如何解决这个问题有点困惑。感谢任何帮助

Answer 1

这通常是通过为所有返回 json 数据的路由添加特定的 url 前缀(例如 /api)将 api 路由与普通路由分开来实现的。您可以做的是指定 /api/whatever-you-want，将其作为您的 ajax 调用的目标并将其放在 app.get('*' ....

由于路由和中间件功能是自上而下解析的，因此它只会与您的 ajax 调用匹配，而 /products 不受影响。

问题的答案——如果请求不是由 ajax 生成的，是否可以将用户从/api/products 重定向到/product？

是的，可以通过将请求查询参数添加到 ajax 调用中，这在正常调用中不会出现，然后在服务器端检查这些参数并决定如果它(特定查询参数)丢失或不丢失该怎么做。

让我们假设一些生成 ajax 调用的客户端 JS。

fetch('/api/products?api=true')
  .then((data) => data.json())
  .then((json) => console.log(json));

注意请求 url - /api/products?api=true

现在假设来自 html 文件的正常调用。

<a href="/products">products</a>

这两个调用的不同之处在于 api 查询参数(ajax 调用有它，另一个没有)。

对于任务的服务器端部分——可以通过请求对象 (req.query) 的 query 属性访问请求查询参数对象。

app.get('/api/products', (req, res) => {
    if (!req.query.api) {
        // if get request doesn't contain api param. then
        // handle it accordingly, e.g. do redirect
        return res.redirect('/products');
    }

    // request comming from ajax call, send JSON data back
    res.json({ randomStuff: 'abcd' });
});