React+Express 搭建的电商 Web SPA 应用-JavaScript中文网-JavaScript教程资源分享门户

前言

现如今，电商已经成为了一个非常热门的领域，而 Web SPA 应用也是越来越受到人们的青睐。在本文中，我们将会介绍如何使用 React 和 Express 搭建一个电商 Web SPA 应用，并且会详细讲解其中的一些技术细节。

技术栈

React：用于构建前端界面
React Router：用于前端路由
Redux：用于状态管理
Express：用于构建后端 API
MongoDB：用于存储数据

基础环境搭建

首先，我们需要安装 Node.js 和 MongoDB。安装完成后，我们可以使用以下命令来创建一个新的项目：

$ mkdir ecommerce-web-spa && cd ecommerce-web-spa
$ npm init -y

然后，我们需要安装一些依赖：

$ npm install --save react react-dom
$ npm install --save react-router-dom
$ npm install --save redux react-redux redux-thunk
$ npm install --save express body-parser cors mongoose

前端部分

前端路由

我们使用 React Router 来实现前端路由。我们需要在 src 目录下创建一个 router.js 文件，并编写以下代码：

// javascriptcn.com 代码示例
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './pages/Home';
import ProductList from './pages/ProductList';
import ProductDetail from './pages/ProductDetail';
import Cart from './pages/Cart';
import Checkout from './pages/Checkout';

const Routes = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/products" component={ProductList} />
      <Route exact path="/products/:id" component={ProductDetail} />
      <Route exact path="/cart" component={Cart} />
      <Route exact path="/checkout" component={Checkout} />
    </Switch>
  </Router>
);

export default Routes;

状态管理

我们使用 Redux 来管理状态。我们需要在 src 目录下创建一个 store.js 文件，并编写以下代码：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

我们还需要在 src 目录下创建一个 reducers.js 文件，并编写以下代码：

// javascriptcn.com 代码示例
import { combineReducers } from 'redux';
import cartReducer from './cartReducer';
import productReducer from './productReducer';

const rootReducer = combineReducers({
  cart: cartReducer,
  products: productReducer,
});

export default rootReducer;

我们还需要在 src 目录下创建一个 cartReducer.js 文件，并编写以下代码：

// javascriptcn.com 代码示例
const initialState = {
  items: [],
};

const cartReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return {
        ...state,
        items: [...state.items, action.payload],
      };
    case 'REMOVE_ITEM':
      return {
        ...state,
        items: state.items.filter((item) => item.id !== action.payload),
      };
    default:
      return state;
  }
};

export default cartReducer;

我们还需要在 src 目录下创建一个 productReducer.js 文件，并编写以下代码：

// javascriptcn.com 代码示例
const initialState = {
  items: [],
};

const productReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_PRODUCTS':
      return {
        ...state,
        items: action.payload,
      };
    default:
      return state;
  }
};

export default productReducer;

页面组件

我们需要在 src 目录下创建以下页面组件：

Home.js
ProductList.js
ProductDetail.js
Cart.js
Checkout.js

在这里，我们只展示 Home.js 的代码：

// javascriptcn.com 代码示例
import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export default Home;

入口文件

我们需要在 src 目录下创建一个 index.js 文件，并编写以下代码：

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import Routes from './router';

ReactDOM.render(
  <Provider store={store}>
    <Routes />
  </Provider>,
  document.getElementById('root')
);

后端部分

数据库

我们需要在 MongoDB 中创建一个名为 ecommerce 的数据库，并创建以下两个集合：

products
orders

API

我们需要在 src 目录下创建一个名为 api.js 的文件，并编写以下代码：

// javascriptcn.com 代码示例
import express from 'express';
import cors from 'cors';
import bodyParser from 'body-parser';
import mongoose from 'mongoose';

const app = express();
const router = express.Router();

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

mongoose.connect('mongodb://localhost:27017/ecommerce', {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const Product = mongoose.model(
  'Product',
  new mongoose.Schema({
    name: String,
    price: Number,
    image: String,
    description: String,
  })
);

const Order = mongoose.model(
  'Order',
  new mongoose.Schema({
    name: String,
    email: String,
    phone: String,
    address: String,
    items: Array,
  })
);

router.get('/products', async (req, res) => {
  const products = await Product.find();
  res.send(products);
});

router.post('/orders', async (req, res) => {
  const { name, email, phone, address, items } = req.body;

  const order = new Order({
    name,
    email,
    phone,
    address,
    items,
  });

  await order.save();

  res.send(order);
});

app.use('/api', router);

app.listen(4000, () => {
  console.log('Server is listening on port 4000');
});

数据模型

我们需要在 src 目录下创建一个名为 models.js 的文件，并编写以下代码：

// javascriptcn.com 代码示例
import axios from 'axios';

const API_URL = 'http://localhost:4000/api';

export const fetchProducts = () => async (dispatch) => {
  const res = await axios.get(`${API_URL}/products`);
  dispatch({
    type: 'FETCH_PRODUCTS',
    payload: res.data,
  });
};

export const createOrder = (data) => async (dispatch) => {
  const res = await axios.post(`${API_URL}/orders`, data);
  dispatch({
    type: 'CREATE_ORDER',
    payload: res.data,
  });
};

总结

通过这篇文章，我们学习了如何使用 React 和 Express 搭建一个电商 Web SPA 应用，以及如何使用 React Router、Redux、MongoDB 等技术来实现这个应用。希望本文对你有所帮助，也希望你能够在实践中不断探索和学习。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6507aa8b95b1f8cacd2ed948