全栈电子商务应用开发（含8小时免费教程）
大家好，我是Safak。我是一名全栈Web开发者，并在我的YouTube频道上分享开源Web项目。我想免费分享我时长超过8小时的“MERN栈电子商务应用及后台管理”教程。您可以点击这里访问播放列表。
使用了哪些技术？
后端服务器：Node.js Express 框架，JWT
数据库：MongoDB
支付方式：Stripe API
前端框架：React.js 与 hooks
UI库：Styled Components
状态管理库：Redux
电子商务应用程序的设计部分
在本节中，我们将使用 React.js 函数式组件、Hooks 和 Styled Components 设计一个电子商务应用程序。目前，我们将使用虚拟数据来展示产品，但在最后一部分，我们将使用 REST API 从 MongoDB 获取所有数据。
电子商务应用程序的后端部分
在本节中，我们将使用 Express 服务器和 MongoDB 连接创建一个 REST API，并创建必要的模型和路由来处理 CRUD 操作。我们将使用 JWT 提供安全性，并对用户进行身份验证和授权。此外，您还将看到如何使用 Stripe API 轻松收款。
const router = require("express").Router();
const stripe = require("stripe")(process.env.STRIPE_KEY);
router.post("/payment", (req, res) => {
stripe.charges.create(
{
source: req.body.tokenId,
amount: req.body.amount,
currency: "usd",
},
(stripeErr, stripeRes) => {
if (stripeErr) {
res.status(500).json(stripeErr);
} else {
res.status(200).json(stripeRes);
}
}
);
});
module.exports = router;
MERN Stack 是电子商务应用程序的一部分
在本节中，我们将把 API 与 UI 设计结合起来，使我们的应用程序更具动态性。我们将使用axios获取数据并发送 POST 请求。此外，我们还将深入讲解Redux Toolkit。
import { createSlice } from "@reduxjs/toolkit";
export const productSlice = createSlice({
name: "product",
initialState: {
products: [],
isFetching: false,
error: false,
},
reducers: {
//GET ALL
getProductStart: (state) => {
state.isFetching = true;
state.error = false;
},
getProductSuccess: (state, action) => {
state.isFetching = false;
state.products = action.payload;
},
//DELETE
deleteProductStart: (state) => {
state.isFetching = true;
state.error = false;
},
deleteProductSuccess: (state, action) => {
state.isFetching = false;
state.products.splice(
state.products.findIndex((item) => item._id === action.payload),
1
);
},
//UPDATE
updateProductStart: (state) => {
state.isFetching = true;
state.error = false;
},
updateProductSuccess: (state, action) => {
state.isFetching = false;
state.products[
state.products.findIndex((item) => item._id === action.payload.id)
] = action.payload.product;
},
//ADD
addProductStart: (state) => {
state.isFetching = true;
state.error = false;
},
addProductSuccess: (state, action) => {
state.isFetching = false;
state.products.push(action.payload);
},
failure: (state) => {
state.isFetching = false;
state.error = true;
},
},
});
希望对您有所帮助。如果您想了解更多关于Web开发的知识，并通过实际项目进行实践，可以查看我的频道和其他帖子。
📹全栈 YouTube 克隆应用（5 小时免费教程）
📺全栈 Netflix 应用（7 小时免费教程）
🧑🤝🧑全栈社交媒体应用（7 小时免费教程）
🔥 Lama Dev YouTube 频道
⚡️ Lama Dev Facebook
👾源代码