Node.js 尝试将项目添加到购物车时，项目数组为空

因此，我试图将项目添加到购物车，但数组为空，我找不到问题。我认为后端node.js工作正常，因为当我通过在浏览器中键入url向购物车添加商品时，它正在增加购物车数量并重定向到，但当我导航到时，浏览器中没有显示任何内容，并且当我使用chrome developers工具检查时，项目数组为空。我认为前端和后端没有正确链接。为了进一步澄清，我添加了它的图片，这是我申请的代码。 Server.js

const express = require("express");
const app = express();
const bodyParser = require("body-parser");
const cors = require("cors");
const cookieParser = require("cookie-parser");
const mongoose = require("mongoose");
let Book = require("./models/bookModel");
var session = require("express-session");
var MongoStore = require("connect-mongo")(session);
var flash = require("connect-flash");

const port = 4000;

app.use(cors());
app.use(bodyParser.json());

app.use(cookieParser());

app.use(
  session({
    secret: "keyboard cat",
    resave: false,
    saveUninitialized: true,
    store: new MongoStore({ mongooseConnection: mongoose.connection }),
    cookie: { maxAge: 180 * 60 * 1000 }
  })
);


app.use(flash());

mongoose.connect("mongodb://127.0.0.1:27017/books", { useNewUrlParser: true });
const connection = mongoose.connection;

connection.once("open", function() {
  console.log("MongoDB database connection established successfully..");
});

const bookRoutes = express.Router();
app.use("/books", bookRoutes);
const cartRoutes = express.Router();
app.use("/cart", cartRoutes);

bookRoutes.route("/").get(function(req, res) {
  Book.find(function(err, books) {
    if (err) {
      console.log(err);
    } else {
      res.json(books);
    }
  });
});

bookRoutes.route("/:id").get(function(req, res) {
  let id = req.params.id;
  Book.findById(id, function(err, book) {
    res.json(book);
  });
});

cartRoutes.route("/").get(function(req, res) {
  var cart = req.session.cart;
  var displayCart = { items: [], total: 0 };
  var total = 0;

  for (var item in cart) {
    displayCart.items.push(cart[item]);
    total += cart[item].qty * cart[item].price;
  }
  displayCart.total = total;

  return res.json(displayCart);
});

cartRoutes.route("/:id").get(function(req, res) {
  req.session.cart = req.session.cart || {};
  var cart = req.session.cart;
  let id = req.params.id;
  Book.findById(id, function(err, book) {
    if (err) {
      console.log(err);
    }
    if (cart[id]) {
      cart[id].qty++;
    } else {
      cart[id] = {
        item: book._id,
        title: book.title,
        price: book.price,
        qty: 1
      };
    }
    console.log(req.session.cart);
    res.redirect("/cart");
  });
});
app.listen(port, function() {
  console.log("Server is running on Port: " + port);
});

App.js

import React, { Component } from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import BooksList from "./components/book-list.component.js";
import BookDetails from "./components/book-details.component.js";
import "bootstrap/dist/css/bootstrap.min.css";
import Navigation from "./components/navigation.component";
import Cart from "./components/cart1.component";

class App extends Component {
  render() {
    return (
      <Router>
        <Navigation></Navigation>

        <Route
          path="/"
          exact
          render={() => (
            <div className="container">
              <BooksList></BooksList>
            </div>
          )}
        ></Route>
        <Route path="/books/:id" exact component={BookDetails}></Route>
        <Route path="/cart" exact component={Cart}></Route>
      </Router>
    );
  }
}

export default App;

import React，{Component}来自“React”；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“/components/book list.component.js”导入BooksList；
从“/components/book details.component.js”导入BookDetails；
导入“bootstrap/dist/css/bootstrap.min.css”；
从“/components/Navigation.component”导入导航；
从“/components/cart1.component”导入购物车；
类应用程序扩展组件{
render（）{
返回(
(
)}
>
);
}
}
导出默认应用程序；

book-details.componentjs

import React, { Component } from "react";
import "../css/styles.css";
import axios from "axios";

export default class BookDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      book: [],
      items: []
    };
  }

  componentDidMount() {
    axios
      .get("http://localhost:4000/books/" + this.props.match.params.id)
      .then(response => {
        this.setState({ book: response.data });
      })
      .catch(function(err) {
        console.log(err);
      });
  }

  AddToCart = e => {
    let id = e.currentTarget.getAttribute("id");
    axios.get(`http://localhost:4000/cart/${id}`).then(() => {
      window.location.href = "http://localhost:3000/cart";
    });
  };

  render() {
    const { book, quantity } = this.state;
    return (
      <div className="container">
        <div className="row">
          <div className="col sm-4">
            <img src={`./images/${book.cover}`}></img>
          </div>
          <div className="col sm-8">
            <h2>{book.title}</h2>
            <ul>
              <li>Category: {book.category}</li>
              <li>Author: {book.author}</li>
            </ul>
            <p className="button blue">${book.price}</p>
            <p>{book.description}</p>
            <button id={book._id} onClick={this.AddToCart}>
              Add to Cart
            </button>
          </div>
        </div>
      </div>
    );
  }
}

import React，{Component}来自“React”；
导入“./css/styles.css”；
从“axios”导入axios；
导出默认类BookDetails扩展组件{
建造师（道具）{
超级（道具）；
此.state={
账簿：[]，
项目：[]
};
}
componentDidMount（）{
axios
.get（“http://localhost:4000/books/“+this.props.match.params.id）
。然后（响应=>{
this.setState（{book:response.data}）；
})
.catch（函数（err）{
控制台日志（err）；
});
}
AddToCart=e=>{
设id=e.currentTarget.getAttribute（“id”）；
axios.get(`http://localhost:4000/cart/${id}`）。然后（（）=>{
window.location.href=”http://localhost:3000/cart";
});
};
render（）{
const{book，quantity}=this.state；
返回(
{书名}

类别：{book.Category}
作者：{book.Author}

${book.price}
{book.description}

添加到购物车
);
}
}

cart1.component.js

import React, { Component } from "react";
import axios from "axios";
import CartItem from "./cart1-item.component.js";
import "bootstrap/dist/css/bootstrap.min.css";
import { throws } from "assert";

export default class Cart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }
  componentDidMount() {
    axios
      .get("http://localhost:4000/cart/")
      .then(response => {
        this.setState({
          items: response.data.items
        });
      })
      .catch(function(err) {
        console.log(err);
      });
  }

  checkItems() {
    return this.state.items.map((currItem, i) => {
      return <CartItem book={currItem} key={i}></CartItem>;
    });
  }

  Calculate = item => {
    return item.qty * item.price;
  };

  render() {
    return (
      <div className="container">
        <div className="row">{this.checkItems()}</div>
      </div>
    );
  }
}

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

const CartItem = props => {
  return (
    <div className="container">
      <h2>{props.book.title}</h2>
    </div>
  );
};

export default CartItem;

import React，{Component}来自“React”；
从“axios”导入axios；
从“/cart1 item.component.js”导入CartItem；
导入“bootstrap/dist/css/bootstrap.min.css”；
从“断言”导入{throws}；
导出默认类Cart扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：[]
};
}
componentDidMount（）{
axios
.get（“http://localhost:4000/cart/")
。然后（响应=>{
这是我的国家({
项目：response.data.items
});
})
.catch（函数（err）{
控制台日志（err）；
});
}
检查项目（）{
返回此.state.items.map（（currItem，i）=>{
返回；
});
}
计算=项目=>{
退货项目数量*项目价格；
};
render（）{
返回(
{this.checkItems（）}
);
}
}

cart-tem1.component.js

import React, { Component } from "react";
import axios from "axios";
import CartItem from "./cart1-item.component.js";
import "bootstrap/dist/css/bootstrap.min.css";
import { throws } from "assert";

export default class Cart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    };
  }
  componentDidMount() {
    axios
      .get("http://localhost:4000/cart/")
      .then(response => {
        this.setState({
          items: response.data.items
        });
      })
      .catch(function(err) {
        console.log(err);
      });
  }

  checkItems() {
    return this.state.items.map((currItem, i) => {
      return <CartItem book={currItem} key={i}></CartItem>;
    });
  }

  Calculate = item => {
    return item.qty * item.price;
  };

  render() {
    return (
      <div className="container">
        <div className="row">{this.checkItems()}</div>
      </div>
    );
  }
}

import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.min.css";

const CartItem = props => {
  return (
    <div className="container">
      <h2>{props.book.title}</h2>
    </div>
  );
};

export default CartItem;

import React，{Component}来自“React”；
导入“bootstrap/dist/css/bootstrap.min.css”；
const CartItem=props=>{
返回(
{props.book.title}
);
};
导出默认项目；

我已经坚持了将近一个星期了，并尽我所能使它工作，但没有结果，任何帮助都将不胜感激

---

[chromedevelopertools

不尝试就很难调试所有东西，但我很确定您在会话中遇到了问题

会话是通过cookie（浏览器在每次请求时发送的内容）实现的，出于安全原因，它们依赖于域。它们不能很好地与单页应用程序配合使用

当您转到端口：4000时，浏览器会为您发送cookie，但在端口：3000时，axios会从该其他域发送cookie。请尝试在您的呼叫中添加此配置：

get（'xxx'，{withCredentials:true}）

它可能会起作用，不过我觉得您首先需要在其他地方做一些额外的工作来初始化cookie

---

如果你选择SPA（这是当今流行的选择），我建议不要使用会话，并尝试使你的服务器“无状态”。这也有其他好处。与cookie不同，你需要实现Oauth或JWT之类的东西（如果你刚开始的话，我建议使用JWT）。这有足够的关键词供你搜索！：）

嘿，你能指导我了解jwt吗。我对表达和反应相对较新。这将非常有帮助。这不是一个短的过程，试着找一些好的教程（我不知道你的背景，所以向你推荐一个）.可能是这样的吗？这是后端，然后您需要在前端的每个请求中发送生成的令牌