创建应用路由及 Layput 组件

  1. src
  2. ├─ components
  3. │  ├─ Routes.js ------------------- 路由组件
  4. │  ├─ admin ----------------------- 后台文件夹
  5. │  └─ core ------------------------ 前台文件夹
  6. │     ├─ Home.js ------------------ 首页
  7. │     ├─ Layout.js ---------------- 公共组件
  8. │     └─ Shop.js ------------------ 商品列表
  9. ├─ config.js ---------------------- 全局变量配置文件
  10. └─ index.js ----------------------- 入口文件

全局 store 初始化

  • src/store/reducers/test.js

    1. export default function testReducer(state = 0) {
    2. return state
    3. }

  • src/store/reducers/index.js ```javascript import { combineReducers } from “redux”; import testReducer from “./test”;

const rootReducer = combineReducers({ test: testReducer })

export default rootReducer

  2. - src/store/index.js
  3. ```javascript
  4. import { createStore } from "redux";
  5. import rootReducer from "./reducers";
  7. const store = createStore(rootReducer)
  9. export default store

将路由状态同步到全局 store

  • 安装插件 npm install --save connected-react-router

  • https://www.npmjs.com/package/connected-react-router

  • src/store/reducers/index.js ```javascript import { connectRouter } from “connected-react-router”; import { combineReducers } from “redux”; import testReducer from “./test”;

const createRootReducer = (history) => combineReducers({ test: testReducer, router: connectRouter(history) })

export default createRootReducer

  2. - src/store/index.js
  3. ```javascript
  4. import { applyMiddleware , createStore } from "redux";
  5. import { createBrowserHistory } from 'history'
  6. import { routerMiddleware } from 'connected-react-router'
  7. import createRootReducer from "./reducers";
  9. export const history = createBrowserHistory()
  11. const store = createStore(
  12.   createRootReducer(history),
  13.   applyMiddleware(routerMiddleware(history))
  14. )
  16. export default store
  • src/index.js ```jsx import React from ‘react’; import ReactDOM from ‘react-dom’; import Routes from ‘./components/Routes’; import { Provider } from ‘react-redux’ import store, {history} from ‘./store’; import { ConnectedRouter } from ‘connected-react-router’

ReactDOM.render( , document.getElementById(‘root’) );

  2. - src/components/Routers.js
  3. ```jsx
  5. function Routes() { 
  6.   return (
  7.     <Switch>
  8.       <Route path='/' component={Home} exact/>
  9.       <Route path='/shop' component={Shop} />
  10.     </Switch>
  11.   )
  12.  }
  14.  export default Routes

创建菜单栏

  • src/components/core/Navigation.js ```jsx import { Menu } from “antd” import { useSelector } from “react-redux” import { Link } from ‘react-router-dom’ function Navigation() { const router = useSelector(state => state.router) return ( 
    1. <Menu.Item key='/'>
    2.   <Link to='/'>首页</Link>
    3. </Menu.Item>
    4. <Menu.Item key='/shop'>
    5.   <Link to='/shop'>商城</Link>
    6. </Menu.Item>
     ) }

export default Navigation

  2. - src/components/core/Layout.js
  3. ```jsx
  4. import Navigation from "./Navigation";
  6. function Layout({children}) {
  7.   return (
  8.   <div>
  9.     <Navigation />
  10.     {children}
  11.   </div>
  12.   )
  13. }
  15. export default Layout

创建页头

  • src/components/core/Layout.js ```javascript import { PageHeader } from “antd”; import Navigation from “./Navigation”;

function Layout({children, title, subTitle}) { return (

{children}
) }

export default Layout

  2. - src/components/core/Home.js
  3. ```jsx
  4. import Layout from "./Layout"
  6. function Shop() {
  7.   return <Layout title="拉勾严选商城列表" subTitle="挑选你喜欢的商品吧">Shop</Layout>
  8.  }
  10.  export default Shop

构建注册和登陆表单

  • src/components/core/Signup.js ```jsx import {Button, Form, Input }from ‘antd’ import Layout from ‘./Layout’ function Signup() { return ( 
    1. <Form>
    2.   <Form.Item name='name' label='昵称'>
    3.     <Input />
    4.   </Form.Item>
    5.   <Form.Item name='password' label='密码'>
    6.     <Input.Password />
    7.   </Form.Item>
    8.   <Form.Item name='email' label='邮箱'>
    9.     <Input />
    10.   </Form.Item>
    11.   <Form.Item>
    12.     <Button type='primary' htmlType='submit'>注册</Button>
    13.   </Form.Item>
    14. </Form>
     ) }

export default Signup

  2. - src/components/core/Signim.js
  3. ```jsx
  4. import { Button, Form, Input } from 'antd'
  5. import Layout from './Layout'
  6. function Signin() {
  7.   return (
  8.     <Layout title='登陆' subTitle=''>
  9.       <Form>
  10.         <Form.Item name='email' label='邮箱'>
  11.           <Input />
  12.         </Form.Item>
  13.         <Form.Item name='password' label='密码'>
  14.           <Input.Password />
  15.         </Form.Item>
  16.         <Form.Item>
  17.           <Button type='primary' htmlType='submit'>登陆</Button>
  18.         </Form.Item>
  19.       </Form>
  20.     </Layout>
  21.   )
  22. }
  24. export default Signin
  • src/components/core/Layout.js ```jsx import { PageHeader } from “antd”; import Navigation from “./Navigation”;

function Layout({children, title, subTitle}) { return (

{children}
) }

export default Layout

  2. - src/components/Routes.js
  3. ```jsx
  4. import { Switch, Route} from 'react-router-dom'
  5. import Home from './core/Home'
  6. import Shop from './core/Shop'
  7. import Signin from './core/Signin'
  8. import Signup from './core/Signup'
  10. function Routes() { 
  11.   return (
  12.     <Switch>
  13.       <Route path='/' component={Home} exact/>
  14.       <Route path='/shop' component={Shop} />
  15.       <Route path='/signin' component={Signin} />
  16.       <Route path='/signup' component={Signup} />
  17.     </Switch>
  18.   )
  19.  }
  21.  export default Routes
  • src/components/core/Navigation.js ```jsx import { Menu } from “antd” import { useSelector } from “react-redux” import { Link } from ‘react-router-dom’ function Navigation() { const router = useSelector(state => state.router) return ( 
    1. <Menu.Item key='/'>
    2.   <Link to='/'>首页</Link>
    3. </Menu.Item>
    4. <Menu.Item key='/shop'>
    5.   <Link to='/shop'>商城</Link>
    6. </Menu.Item>
    7. <Menu.Item key='/signin'>
    8.   <Link to='/signin'>登陆</Link>
    9. </Menu.Item>
    10. <Menu.Item key='/signup'>
    11.   <Link to='/signup'>注册</Link>
    12. </Menu.Item>
     ) }

export default Navigation

  2. <a name="Fpled"></a>
  3. ## 实现注册 Redux工作流
  4. <a name="HdMA2"></a>
  5. ### 创建 Action和 Reducer
  7. - src/store/actions/signup.js
  8. ```javascript
  9. import { createAction } from 'redux-actions'
  11. // 发起注册请求
  12. export const signup = createAction('signup')
  13. // 注册成功
  14. export const signup_success = createAction('signup_success')
  15. // 注册失败
  16. export const signup_fail = createAction('signup_fail')
  17. // 重置注册状态
  18. export const signup_reset = createAction('signup_reset')
  • src/store/reducers/signup.js ```javascript import { handleActions } from “redux-actions” import { signup, signup_fail, signup_reset, signup_success } from “../actions/signup”

const initialState = { loading: false, loaded: false, success: false, message: “” }

const signupReducer = handleActions( { [signup]: () => ({ loading: true, loaded: false, success: false, message: “” }), [signup_success]: () => ({ loading: false, loaded: true, success: true, message: “” }), [signup_fail]: (state, action) => ({ loading: false, loaded: true, success: false, message: action.payload.message }), [signup_reset]: () => ({ loading: false, loaded: false, success: false, message: “” }) }, initialState )

export default signupReducer

  2. - src/store/reducers/index.js
  3. ```javascript
  5. import signupReducer from "./signup";
  8. const createRootReducer = (history) => 
  9.   combineReducers({
  11.     signup: signupReducer
  12. })
  14. export default createRootReducer

配置 sagaMiddleware

启动本地服务器

  1. # 进入本地服务器更目录
  2. cd server
  4. # 安装依赖
  5. npm install
  7. # 启动数据库
  8. npm run serve
  10. # 启动服务端引用程序
  11. npm start
  • src/store/sagas/signup.js ```javascript import axios from ‘axios’ import { takeEvery, put} from ‘redux-saga/effects’ import {signup, signup_fail, signup_success} from ‘../actions/signup’ import { API } from ‘../../config’

function * handleSignup(action) { try { yield axios.post(${API}/signup, action.payload) yield put(signup_success()) } catch(ex) { yield put(signup_fail({message: ex.response.data.error})) } }

export default function * signupSaga() { yield takeEvery(signup, handleSignup) }

  2. - src/store/sagas/rootSaga.js
  3. ```javascript
  4. import { all }  from 'redux-saga/effects'
  5. import signupSaga from './signup'
  8. export default function * rootSaga() {
  9.   yield all([
  10.     signupSaga()
  11.   ])
  12. }
  • src/store/index.js ```javascript import { applyMiddleware, createStore } from “redux” import { createBrowserHistory } from “history” import createRootReducer from “./reducers” import { routerMiddleware } from “connected-react-router” import createSagaMiddleware from “redux-saga” import rootSaga from “./sagas/rootSaga”

export const history = createBrowserHistory()

const sagaMiddleware = createSagaMiddleware()

const store = createStore( createRootReducer(history), applyMiddleware(routerMiddleware(history), sagaMiddleware)

)

sagaMiddleware.run(rootSaga)

export default store

  2. <a name="vsnBR"></a>
  3. ## 验证注册 Redux工作流是否可以跑通
  5. - src/components/core/signup.js
  6. ```jsx
  7. import {Button, Form, Input }from 'antd'
  8. import Layout from './Layout'
  9. import { useDispatch } from 'react-redux'
  10. import {signup} from '../../store/actions/signup'
  11. function Signup() {
  12.   const dispatch = useDispatch()
  13.   // 获取状态
  14.   // const {loading, loaded, sunccess, message} = useSelector(state => state.Signup)
  15.   // 表单提交
  16.   const handleOnFinish = value => {
  17.     dispatch(signup(value))
  18.   }
  20.   return (
  21.     <Layout title='注册' subTitle="">
  22.       <Form onFinish={handleOnFinish}>
  24.       </Form>
  25.     </Layout>
  26.   )
  27. }
  29. export default Signup
  • 添加 redux 调试工具所需代码 src/store/index.js ```javascript

import { composeWithDevTools } from ‘redux-devtools-extension’

const store = createStore(

composeWithDevTools( applyMiddleware(routerMiddleware(history), sagaMiddleware) ) )

  1. <a name="LOBT7"></a>
  2. ## 
  3. <a name="w2s9O"></a>
  4. ## 将状态与注册组件进行结合
  6. - src/components/core/Signup.js
  7. ```jsx
  8. import {Button, Form, Input, Result, Spin }from 'antd'
  9. import Layout from './Layout'
  10. import { useDispatch, useSelector } from 'react-redux'
  11. import {signup, signup_reset} from '../../store/actions/signup'
  12. import { useEffect } from 'react'
  13. import { Link } from 'react-router-dom'
  15. function Signup() {
  17.   const dispatch = useDispatch()
  18.   // 获取状态
  19.   const {loading, loaded, success, message} = useSelector(state => state.signup)
  21.   // 表单提交
  22.   const handleOnFinish = value => {
  23.     dispatch(signup(value))
  24.   }
  26.   // 获取表单实例对象
  27.   const [form] = Form.useForm()
  29.   // 正在发送注册请求，显示loading
  30.   const showLoading = () => {
  31.     if (loading) return <Spin />
  32.   }
  34.   //注册成功 显示提示信息
  35.   useEffect(() => {
  36.     if (loaded && success) form.resetFields()
  37.   }, [loaded, success])
  39.   // 注册成功 显示成功的提示信息
  40.   const showSuccess = () => {
  41.     if(loaded && success) {
  42.       return (
  43.         <Result
  44.           status='success'
  45.           title="注册成功"
  46.           subTitle=""
  47.           extra={[
  48.             <Button type='primary'>
  49.               <Link to='/singin'>登陆</Link>
  50.             </Button>
  51.             ]} 
  52.           />
  53.       )
  54.     }
  55.   }
  57.   // 注册失败 显示失败提示信息
  58.   const showError = () => {
  59.     if(loaded && !success) {
  60.       return <Result status='warning' title="注册失败" subTitle={message} />
  61.     }
  62.   }
  64.   // 离开页面 重置注册
  65.   useEffect(() => {
  66.     return () => {
  67.       dispatch(signup_reset())
  68.     }
  69.   }, [])
  71.   // 注册表单
  72.   const signupForm = () => (
  73.     <Form form={form} onFinish={handleOnFinish}>
  74.         <Form.Item name='name' label='昵称'>
  75.           <Input />
  76.         </Form.Item>
  77.         <Form.Item name='password' label='密码'>
  78.           <Input.Password />
  79.         </Form.Item>
  80.         <Form.Item name='email' label='邮箱'>
  81.           <Input />
  82.         </Form.Item>
  83.         <Form.Item>
  84.           <Button type='primary' htmlType='submit'>注册</Button>
  85.         </Form.Item>
  86.       </Form>
  87.   )
  88.   return (
  89.     <Layout title='注册' subTitle="">
  90.       {showLoading()}
  91.       {showSuccess()}
  92.       {showError()}
  93.       {signupForm()}
  94.     </Layout>
  95.   )
  96. }
  98. export default Signup

实现用户登陆功能

  • src/components/core/Signin.js ```jsx import { Button, Form, Input } from “antd”; import Layout from “./Layout”; import axios from “axios”; import { API } from “../../config”; import { useHistory } from “react-router-dom”;

function Signin() { const history = useHistory() // 用户登陆 const handleOnFinish = async (value) => { // 发送登陆请求 let response = await axios.post(${API}/signin, value); // 将服务器端返回的信息存储到本地 localStorage.setItem(“jwt”, JSON.stringify(response.data)); // 根据用户角色返回跳转地址 const url = response.data.user.role === 1 ? “/admin/dashboard” : “/user/dashboard”; // 跳转页面 history.push(url); };

return (

); }

export default Signin;

  2. <a name="N8CN4"></a>
  3. ## 根据用户登陆状态显示菜单栏选项
  5. - src/helpers/auth.js
  6. ```javascript
  7. export function isAuth() {
  8.   const jwt = localStorage.getItem('jwt')
  9.   if(jwt) return JSON.parse(jwt)
  10.   return false
  11. }

  • src/components/core/Navigation.js ```jsx import { Menu } from “antd” import { useSelector } from “react-redux” import { Link } from ‘react-router-dom’ import { isAuth } from ‘../../helpers/auth’ function Navigation() { const router = useSelector(state => state.router) const auth = isAuth() const showAuth = () => ( <>

    1. <Menu.Item key='/signin'>
    2.   <Link to='/signin'>登陆</Link>
    3. </Menu.Item>
    4. <Menu.Item key='/signup'>
    5.   <Link to='/signup'>注册</Link>
    6. </Menu.Item>

    </> )

    const showDashboard = () => { const url = auth.user.role === 1 ? ‘/admin/dashboard’ : ‘/user/dashboard’ return (

    1. <Menu.Item key={url}>
    2.   <Link to={url}>Dashboard</Link>
    3. </Menu.Item>

    ) }

    return ( 

    1. <Menu.Item key='/'>
    2.   <Link to='/'>首页</Link>
    3. </Menu.Item>
    4. <Menu.Item key='/shop'>
    5.   <Link to='/shop'>商城</Link>
    6. </Menu.Item>
    7. {auth ? showDashboard() : showAuth()}

     ) }

export default Navigation

  2. <a name="w0aYG"></a>
  3. ## 创建受保护的 Dashboad组件
  5. - src/components/admin/PrivateUser.js
  6. ```jsx
  7. import { Redirect, Route} from 'react-router'
  8. import { isAuth } from '../../helpers/auth'
  10. function PrivateUser({component: Component, ...rest}) {
  11.   return (
  12.     <Route
  13.       {...rest}
  14.       render={props => {
  15.         console.log(props)
  16.         if (isAuth()) return <Component {...props} />
  17.         return <Redirect to='/signin' />
  18.       }}
  19.     ></Route>
  20.   )
  21. }
  23. export default PrivateUser
  • src/components/admin/UserDashboard.js ```jsx import Layout from ‘../core/Layout’

function UserDashboard() { return }

export default UserDashboard

  2. - src/components/admin/PrivateAdmin.js
  3. ```jsx
  4. import { Redirect, Route } from "react-router"
  5. import { isAuth } from "../../helpers/auth"
  7. function PrivateAdmin({ component: Component, ...rest }) {
  8.   return (
  9.     <Route
  10.       {...rest}
  11.       render={props => {
  12.         const auth = isAuth()
  13.         if (auth && auth.user.role === 1) return <Component {...props} />
  14.         return <Redirect to="/signin" />
  15.       }}
  16.     ></Route>
  17.   )
  18. }
  20. export default PrivateAdmin
  • src/components/admin/AdminDashboard.js ```jsx import Layout from ‘../core/Layout’

function AdminDashboard() { return }

export default AdminDashboard

  2. - src/components/Routes.js
  3. ```jsx
  4. import { Switch, Route} from 'react-router-dom'
  5. import AdminDashboard from './admin/AdminDashboard'
  6. import PrivateAdmin from './admin/PrivateAdmin'
  7. import PrivateUser from './admin/PrivateUser'
  8. import UserDashboard from './admin/UserDashboard'
  9. import Home from './core/Home'
  10. import Shop from './core/Shop'
  11. import Signin from './core/Signin'
  12. import Signup from './core/Signup'
  14. function Routes() { 
  15.   return (
  16.     <Switch>
  17.       <Route path='/' component={Home} exact/>
  18.       <Route path='/shop' component={Shop} />
  19.       <Route path='/signin' component={Signin} />
  20.       <Route path='/signup' component={Signup} />
  21.       <PrivateUser path='/user/dashboard' component={UserDashboard} />
  22.       <PrivateAdmin path='/admin/dashboard' component={AdminDashboard} />
  23.     </Switch>
  24.   )
  25.  }
  27.  export default Routes

管理员 Dashboard 组件添加链接和管理员信息

  • src/components/admin/AdminDashboard.js ```jsx import { Col, Descriptions, Menu, Row, Typography } from ‘antd’ import { Link } from ‘react-router-dom’ import Layout from ‘../core/Layout’ import { OrderedListOutlined, ShoppingCartOutlined, UserOutlined } from ‘@ant-design/icons’ import { isAuth } from ‘../../helpers/auth’ const { Title } = Typography function AdminDashboard() {

    const {user: {name, email}} = isAuth() const adminLinks = () => ( <>

    1. <Title level={5}>管理员链接</Title>
    2. <Menu>
    3.   <Menu.Item>
    4.     <ShoppingCartOutlined />
    5.     <Link to='/create/category'>添加分类</Link>
    6.   </Menu.Item>
    7.   <Menu.Item>
    8.     <UserOutlined />
    9.     <Link to='/create/product'>添加商品</Link>
    10.   </Menu.Item>
    11.   <Menu.Item>
    12.     <OrderedListOutlined />
    13.     <Link to='/admin/order'>订单列表</Link>
    14.   </Menu.Item>
    15. </Menu>

    </> )

    const adminInfo = () => ( 

    1. <Descriptions.Item label='昵称'>{name}</Descriptions.Item>
    2. <Descriptions.Item label='邮箱'>{email}</Descriptions.Item>
    3. <Descriptions.Item label="角色">管理员</Descriptions.Item>

    )

    return 

    1. <Col span='4'>{adminLinks()}</Col>
    2. <Col span='20'>{adminInfo()}</Col>

    }

export default AdminDashboard

  2. <a name="dbIO0"></a>
  3. ## 创建添加分类组件
  5. - src/components/admin/AddCategory.js
  6. ```jsx
  7. import {Button, Form, Input} from 'antd'
  8. import Layout from '../core/Layout'
  10. function AddCategory() {
  11.   // 表单提交
  12.   const handleOnFinish = value => {
  13.     console.log(value)
  14.   }
  15.   return (
  16.   <Layout title="添加分类">
  17.     <Form onFinish={handleOnFinish}>
  18.       <Form.Item name="name" label="分类名称">
  19.         <Input />
  20.       </Form.Item>
  21.       <Form.Item>
  22.         <Button type="primary" htmlType="submit">添加分类</Button>
  23.       </Form.Item>
  24.     </Form>
  25.   </Layout>
  26.   )
  27. }
  29. export default AddCategory
  • src/components/Routes.js ```javascript

import AddCategory from ‘./admin/AddCategory’

function Routes() { return ( 

  1.   <PrivateAdmin path='/create/category' component={AddCategory} />
  2. </Switch>

) }

export default Routes

  2. <a name="dusfP"></a>
  3. ## 实现添加分类功能
  5. - src/components/admin/AddCategory.js
  6. ```jsx
  7. import {Button, Form, Input, message} from 'antd'
  8. import Layout from '../core/Layout'
  9. import axios from 'axios'
  10. import {API} from '../../config'
  11. import { isAuth } from '../../helpers/auth'
  12. import { Link } from 'react-router-dom'
  14. function AddCategory() {
  15.   const {user:{_id}, token} = isAuth()
  16.   // 表单提交
  17.   const handleOnFinish = value => {
  18.     if (value.name) {
  19.       axios.post(`${API}/category/create/${_id}`,value, {
  20.         headers: {
  21.           Authorization: `Bearer ${token}`
  22.         }
  23.       }).then(response => {
  24.         message.success(`${response.data.name} 添加成功`)
  25.       })
  26.     }
  27.   }
  28.   return (
  29.   <Layout title="添加分类">
  30.     <Form onFinish={handleOnFinish}>
  31.       <Form.Item name="name" label="分类名称">
  32.         <Input />
  33.       </Form.Item>
  34.       <Form.Item>
  35.         <Button type="primary" htmlType="submit">添加分类</Button>
  36.       </Form.Item>
  37.     </Form>
  38.     <Button>
  39.       <Link to="/admin/dashboard">返回 Dashboard</Link>
  40.     </Button>
  41.   </Layout>
  42.   )
  43. }
  45. export default AddCategory

创建添加商品组件

  • src/components/admin/AddProduct.js ```jsx import { UploadOutlined } from ‘@ant-design/icons’ import {Button, Form, Input, Select, Upload} from ‘antd’ import Layout from ‘../core/Layout’

function AddProduct() { return (

}>上传商品封面
) }

export default AddProduct

  2. - src/components/Router.js
  3. ```javascript
  5. import AddProduct from './admin/AddProduct'
  8. function Routes() { 
  9.   return (
  10.     <Switch>
  12.       <PrivateAdmin path='/create/product' component={AddProduct} />
  13.     </Switch>
  14.   )
  15.  }
  17.  export default Routes

获取分类列表

  • src/components/admin/AddProduct.js ```jsx import { UploadOutlined } from ‘@ant-design/icons’ import {Button, Form, Input, Select, Upload} from ‘antd’ import Layout from ‘../core/Layout’

import { useEffect, useState} from ‘react’ import axios from ‘axios’ import {API} from ‘../../config’

function AddProduct() { const [categories, setCategories ] = useState([]) useEffect(() => { async function getCategories() { let response = await axios.get(${API}/categories) setCategories(response.data) } getCategories() }, [])

return ( 

  1.   <Form.Item label="商品分类" name="category">
  2.     <Select defaultValue='-1'>
  3.       <Select.Option value='-1'>请选择分类</Select.Option>
  4.       {
  5.         categories.map(({name, _id}) => (
  6.           <Select.Option value={_id}>{name}</Select.Option>
  7.         ))
  8.       }
  9.     </Select>
  10.   </Form.Item>
  12. </Form>

) }

export default AddProduct

  2. <a name="jU15B"></a>
  3. ## 实现添加商品功能
  5. - src/components/admin/AddProduct.js
  6. ```jsx
  7. import { UploadOutlined } from '@ant-design/icons'
  8. import {Button, Form, Input, message, Select, Upload} from 'antd'
  9. import Layout from '../core/Layout'
  11. import { useEffect, useState} from 'react'
  12. import axios from 'axios'
  13. import {API} from '../../config'
  14. import { isAuth } from '../../helpers/auth'
  16. import { useHistory } from 'react-router-dom'
  18. function AddProduct() {
  19.   const [categories, setCategories ] = useState([])
  20.   const [file, setFile] = useState([])
  22.   const history = useHistory()
  23.   useEffect(() => {
  24.     async function getCategories() {
  25.       let response = await axios.get(`${API}/categories`)
  26.       setCategories(response.data)
  27.     }
  28.     getCategories()
  29.   }, [])
  30.   const props = {
  31.      beforeUpload (file) {
  32.        setFile(file)
  33.        return false
  34.       }
  35.     }
  37.   const {user, token} = isAuth()
  39.   const [form] = Form.useForm()
  41.   const onFinish = value => {
  42.     const formData = new FormData()
  43.     for (let attr in value) {
  44.       formData.append(attr, value[attr])
  45.     }
  46.     formData.append('photo', file)
  48.     axios.post(`${API}/product/create/${user._id}`,formData, {
  49.       headers: {
  50.         Authorization: `Bearer ${token}`
  51.       }
  52.     }).then(() => {
  53.       message.success('商品添加成功 ')
  54.       form.resetFields()
  55.       history.push("/admin/dashboard")
  56.     })
  57.   }
  58.   return (
  59.   <Layout title="添加商品">
  60.     <Form form = {form} onFinish={onFinish} initialValues={{category: '-1'}}>
  61.       <Form.Item>
  62.         <Upload {...props}>
  63.           <Button icon={<UploadOutlined />}>上传商品封面</Button>
  64.         </Upload>
  65.       </Form.Item>
  66.       <Form.Item label="商品名称" name="name">
  67.         <Input />
  68.       </Form.Item>
  69.       <Form.Item label="商品描述" name="description">
  70.         <Input />
  71.       </Form.Item>
  72.       <Form.Item label="商品价格" name="price">
  73.         <Input />
  74.       </Form.Item>
  75.       <Form.Item label="商品分类" name="category">
  76.         <Select>
  77.           <Select.Option value='-1'>请选择分类</Select.Option>
  78.           {
  79.             categories.map(({name, _id}) => (
  80.               <Select.Option value={_id} key={_id}>{name}</Select.Option>
  81.             ))
  82.           }
  83.         </Select>
  84.       </Form.Item>
  85.       <Form.Item label="商品数量" name="quantity">
  86.         <Input />
  87.       </Form.Item>
  88.       <Form.Item label="是否需要运输" name="shipping">
  89.         <Select>
  90.           <Select.Option value="1">是</Select.Option>
  91.           <Select.Option value="0">否</Select.Option>
  92.         </Select>
  93.       </Form.Item>
  94.       <Form.Item>
  95.         <Button type="primary" htmlType="submit">提交</Button>
  96.       </Form.Item>
  97.     </Form>
  98.   </Layout>
  99.   )
  100. }
  102. export default AddProduct

构建首页搜索框布局

  • src/components/core/Search.js ```jsx import { Button, Form, Input, Select } from ‘antd’

function Search() { return (

) }

export default Search

  2. - src/components/core/Home.js
  3. ```jsx
  4. import { useSelector } from "react-redux"
  5. import Layout from "./Layout"
  6. import Search from './Search'
  8. function Home() {
  10.   const state = useSelector(state => state)
  12.   return (
  13.     <Layout title="拉勾严选首页" subTitle="尽情享受吧">
  14.       <Search />
  15.     </Layout>
  16.   )
  17. }
  19. export default Home

构建搜索结果布局

  • src/components/core/ProductItem.js ```jsx import { Button, Card, Col, Row, Typography} from ‘antd’ import {Link} from ‘react-router-dom’

const {Title, Paragraph } = Typography

function ProductItem() { return ( 查看详情, ]} > 描述段落文本 价格： 销量： 所属分类: 上架时间： ) }

export default ProductItem

  2. - src/components/core/Search.js
  3. ```jsx
  4. import { Button, Col, Divider, Form, Input, Row, Select } from 'antd'
  5. import ProductItem from './ProductItem'
  7. function Search() {
  8.   return (
  9.     <>
  10.       <Form layout="inline" initialValues={{category: "All"}}>
  12.       </Form>
  13.       <Divider />
  14.       <Row gutter={[16, 16]}>
  15.         <Col span="6">
  16.           <ProductItem />
  17.         </Col>
  18.       </Row>
  19.     </>
  20.   )
  21. }
  23. export default Search
  • src/components/core/Home.js ```jsx import Layout from “./Layout” import Search from ‘./Search’ import { Col, Row, Typography } from ‘antd’ import ProductItem from ‘./ProductItem’

const {Title} = Typography

function Home() {

return ( ) }

export default Home

  2. <a name="kYxtA"></a>
  3. ## 完成首页获取商品列表的 redux 流程
  5. - src/store/actions/products.js
  6. ```javascript
  7. import { createAction } from 'redux-actions'
  9. export const get_products = createAction('get_products')
  10. export const get_products_success = createAction("get_products_success")
  • src/store/reducers/products.js ```javascript import { handleActions } from ‘redux-actions’ import { get_products_success } from ‘../actions/products’

const initialState = { sold: [], createdAt: [] } const productsReducer = handleActions( { [get_products_success]: (state, action) => ({ …state,

  1.   [action.payload.sortBy]: action.payload.products
  2. })

}, initialState )

export default productsReducer

  2. - src/store/reducers/index.js
  3. ```javascript
  5. import productsReducer from "./products";
  7. const createRootReducer = (history) => 
  8.   combineReducers({
  10.     products: productsReducer
  11. })
  13. export default createRootReducer
  • src/store/sagas/products.js ```javascript import axios from ‘axios’ import { takeEvery, put} from ‘redux-saga/effects’ import {API} from ‘../../config’ import { get_products, get_products_success } from ‘../actions/products’

function * handleGetProducts(action) { let response = yield axios.get(${API}/products, {params: action.payload})

yield put( get_products_success({ sortBy: action.payload.sortBy, products: response.data }) ) }

export default function * productsSaga() { yield takeEvery(get_products, handleGetProducts) }

  2. - src/store/sagas/rootsaga.js
  3. ```javascript
  4. import { all }  from 'redux-saga/effects'
  5. import productsSaga from './products'
  6. import signupSaga from './signup'
  9. export default function * rootSaga() {
  10.   yield all([
  11.     signupSaga(),
  12.     productsSaga()
  13.   ])
  14. }

商品列表数据展示

  • src/components/core/Home.js ```jsx

import Layout from “./Layout” import Search from ‘./Search’ import { Col, Row, Typography } from ‘antd’ import ProductItem from ‘./ProductItem’

import { useDispatch, useSelector} from ‘react-redux’ import { useEffect } from ‘react’ import { get_products } from “../../store/actions/products”

const {Title} = Typography

function Home() { const dispatch = useDispatch()

const {sold, createdAt} = useSelector(state => state.products)

useEffect(() => { dispatch(get_products({sortBy: ‘sold’, limit: 4, order: ‘desc’})) dispatch(get_products({sortBy: ‘createdAt’, limit: 4, order: ‘desc’})) }, [])

return ( {/ /} { createdAt.map(product => ( )) } { sold.map(product => ( )) } ) }

export default Home

  2. - src/components/core/ProductItem.js
  3. ```jsx
  4. import { Button, Card, Col, Row, Typography, Image} from 'antd'
  5. import {Link} from 'react-router-dom'
  6. import {API} from '../../config'
  7. import dateformat from 'dateformat'
  9. const {Title, Paragraph } = Typography
  11. function ProductItem({product}) {
  12.   const { name, description, price, sold, category, createdAt, _id } = product
  13.   return (
  14.     <Card 
  15.       cover={
  16.         <Image 
  17.           alt="example"
  18.           src={`${API}/product/photo/${_id}`}
  19.         />
  20.       }
  21.       actions={[
  22.         <Button type="link"><Link to="">查看详情</Link></Button>,
  23.         <Button type="link">加入购物车</Button>
  24.       ]}
  25.     >
  26.       <Title level={5}>{name}</Title>
  27.       <Paragraph ellipsis={{rows: 2}}>{description}</Paragraph>
  28.       <Row style={{fontSize: 12}}>
  29.         <Col span="12">价格：{price}</Col>
  30.         <Col span="12">销量：{sold}</Col>
  31.       </Row>
  32.       <Row>
  33.         <Col span="12">所属分类：{category.name}</Col>
  34.         <Col span="12">上架时间：{dateformat(createdAt, "yyyy-mm-dd")}</Col>
  35.       </Row>
  36.     </Card>
  37.   )
  38. }
  40. export default ProductItem

将获取商品分类列表抽离为公共逻辑

  • src/helpers/getCategories.js ```javascript import { useState, useEffect} from ‘react’ import axios from ‘axios’ import {API} from ‘../config’

export default function useGetCategories() { const [categories, setCategories] = useState([])

useEffect(() => { async function getCategories() { let response = await axios.get(${API}/categories) setCategories(response.data) } getCategories() }, [])

return categories }

  2. - src/components/admin/AddProduct.js
  3. ```jsx
  6. import useGetCategories from '../../helpers/getCategories'
  8. function AddProduct() {
  9.   const [file, setFile] = useState([])
  10.   const categories = useGetCategories()
  11.   const history = useHistory()
  13.   const props = {
  14.      beforeUpload (file) {
  15.        setFile(file)
  16.        return false
  17.       }
  18.     }
  20.   const {user, token} = isAuth()
  22.   const [form] = Form.useForm()
  24.   const onFinish = value => {
  26.   }
  27.   return (
  29.   )
  30. }
  32. export default AddProduct
  • src/components/core/Search.js ```jsx import { Button, Col, Divider, Form, Input, Row, Select } from ‘antd’ import useGetCategories from “../../helpers/getCategories” import ProductItem from ‘./ProductItem’

function Search() {

const categories = useGetCategories()

return ( <>

{/ /} </> ) }

export default Search

  2. <a name="pCNMT"></a>
  3. ## 实现搜索功能
  5. - src/store/actions/search.js
  6. ```javascript
  7. import { createAction } from 'redux-actions'
  9. export const search_products = createAction("search_products")
  10. export const search_products_success = createAction("search_products_success")
  • src/store/reducers/search.js ```javascript import { handleActions } from ‘redux-actions’ import { search_products_success } from ‘../actions/search’

const initialState = { results: [] }

const searchReducer = handleActions( { [search_products_success]: (state, action) => ({ results: action.payload.results }) }, initialState )

export default searchReducer

  2. - src/store/reducers/index.js
  3. ```javascript
  5. import searchReducer from "./search";
  8. const createRootReducer = (history) => 
  9.   combineReducers({
  11.     search: searchReducer
  12. })
  14. export default createRootReducer
  • src/store/sagas/search.js ```javascript import {takeEvery, put} from ‘redux-saga/effects’ import axios from ‘axios’ import {API} from ‘../../config’ import { search_products, search_products_success } from ‘../actions/search’

function * handleSearchProducts(action) { const response = yield axios.get(${API}/products/search, {params: action.payload})

yield put(search_products_success({results: response.data})) }

export default function * searchSaga() { yield takeEvery(search_products, handleSearchProducts) }

  2. - src/store/sagas/rootsaga.js
  3. ```javascript
  4. import { all }  from 'redux-saga/effects'
  5. import productsSaga from './products'
  6. import searchSaga from './search'
  7. import signupSaga from './signup'
  10. export default function * rootSaga() {
  11.   yield all([
  12.     signupSaga(),
  13.     productsSaga(),
  14.     searchSaga()
  15.   ])
  16. }
  • src/components/core/Search.js ```jsx import { Button, Col, Divider, Form, Input, Row, Select } from ‘antd’ import useGetCategories from “../../helpers/getCategories” import ProductItem from ‘./ProductItem’

import {useDispatch, useSelector} from ‘react-redux’ import { search_products } from ‘../../store/actions/search’

function Search() {

const dispatch = useDispatch() const { results } = useSelector(state => state.search) const categories = useGetCategories() const [form] = Form.useForm() const onFinish = value => { dispatch(search_products(value)) form.resetFields() }

return ( <>

{ results.map(product => ( )) } </> ) }

export default Search

  2. <a name="J3Hzw"></a>
  3. ## 构建商城页面布局
  5. - src/components/core/Shop.js
  6. ```jsx
  7. import Layout from "./Layout"
  8. import { Col, Row, Space } from 'antd'
  9. import FilterByCategory from "./FilterByCategory"
  10. import FilterByPrice from "./FilterByPrice"
  12. function Shop() {
  13.   return (
  14.     <Layout title="拉勾严选商城列表" subTitle="挑选你喜欢的商品吧">
  15.       <Row>
  16.         <Col span="4">
  17.           <Space size="middle" direction="vertical">
  18.             <FilterByCategory />
  19.             <FilterByPrice />
  20.           </Space>
  21.         </Col>
  22.         <Col span="20">right</Col>
  23.       </Row>
  24.     </Layout>
  25.   )
  26.  }
  28.  export default Shop
  • src/components/core/FilterByCategory.js ```jsx

import {Checkbox, Typography, List} from ‘antd’ import useGetCategories from ‘../../helpers/getCategories’

const { Title } = Typography

function FilterByCategory() { const categories = useGetCategories() return ( <> ( {item.name} )} /> </> ) }

export default FilterByCategory

  2. - src/components/core/FirlterByPrice.js
  3. ```jsx
  4. import {Radio, Typography, List} from 'antd'
  6. const { Title } = Typography
  8. function FilterByPrice() {
  9.   const prices = [{name: '0-20', id:1}, {name: '20-40', id:2}]
  10.   return (
  11.     <>
  12.       <Title level={5}>按照价格筛选</Title>
  13.       <Radio.Group>
  14.         <List
  15.           dataSource={prices}
  16.           renderItem={item => (
  17.             <List.Item>
  18.               <Radio value={item.id}>{item.name}</Radio>
  19.             </List.Item>
  20.           )}
  21.         />
  22.       </Radio.Group>
  23.     </>
  24.   )
  25. }
  27. export default FilterByPrice

收集用户选择的筛选条件

  • src/components/core/Shop.js ```jsx import Layout from “./Layout” import { Col, Row, Space } from ‘antd’ import FilterByCategory from “./FilterByCategory” import FilterByPrice from “./FilterByPrice” import { useEffect, useState } from “react”

function Shop() {

const [filters, setFilters] = useState({category: [], price: []})

useEffect(() => { console.log(filters) }, [filters]) return ( setFilters({…filters, category: filter})} /> setFilters({…filters, price: filter})} /> right ) }

export default Shop

  2. - src/components/core/FilterByCategory.js
  3. ```jsx
  5. import {Checkbox, Typography, List} from 'antd'
  6. import useGetCategories from '../../helpers/getCategories'
  8. const { Title } = Typography
  10. function FilterByCategory({ handleFilters }) {
  11.   const categories = useGetCategories()
  12.   const onChange = checkedValue => handleFilters(checkedValue)
  13.   return (
  14.     <>
  15.       <Title level={5}>按照分类筛选</Title>
  16.       <Checkbox.Group onChange={onChange}>
  17.         <List
  18.           dataSource={categories}
  19.           renderItem={item => (
  20.             <List.Item>
  21.               <Checkbox value={item._id}>{item.name}</Checkbox>
  22.             </List.Item>
  23.           )}
  24.         />
  25.       </Checkbox.Group>
  26.     </>
  27.   )
  28. }
  30. export default FilterByCategory
  • src/components/core/FirlterByPrice.js ```jsx import {Radio, Typography, List} from ‘antd’ import prices from ‘../../helpers/price’

const { Title } = Typography

function FilterByPrice({handleFilters}) { const onChange = event => handleFilters(event.target.value) return ( <> ( {item.name} )} /> </> ) }

export default FilterByPrice

  2. <a name="zfy5V"></a>
  3. ## 展示筛选结果
  5. - src/store/actions/filter.js
  6. ```javascript
  7. import { createAction } from 'redux-actions'
  9. export const filter_products = createAction("filter_products")
  10. export const filter_products_success = createAction("filter_products_success")
  • src/store/reducers/filter.js ```javascript import { handleActions } from ‘redux-actions’ import { filter_products_success } from ‘../actions/filter’

const initialState = { size: 0, data: [] }

const filterReducer = handleActions( { [filter_products_success]: (state, action) => ({ size: action.payload.size, data: action.payload.skip === 0 ? action.payload.data : […state.data, …action.payload.data] }) }, initialState )

export default filterReducer

  2. - src/store/reducers/index.js
  3. ```javascript
  5. import filterReducer from "./filter";
  8. const createRootReducer = (history) => 
  9.   combineReducers({
  11.     filter: filterReducer
  12. })
  14. export default createRootReducer
  • src/store/sagas/filter.js ```javascript import axios from ‘axios’ import {takeEvery, put} from ‘redux-saga/effects’ import {API} from ‘../../config’ import { filter_products, filter_products_success } from ‘../actions/filter’

function * handleFilterProducts(action) { const response = yield axios.post(${API}/products/filter, action.payload)

yield put(filter_products_success({skip: action.payload.skip, …response.data})) }

export default function * filterSaga() { yield takeEvery(filter_products, handleFilterProducts) }

  2. - src/store/sagas/rootsaga.js
  3. ```javascript
  4. import { all }  from 'redux-saga/effects'
  5. import filterSaga from './filter'
  6. import productsSaga from './products'
  7. import searchSaga from './search'
  8. import signupSaga from './signup'
  11. export default function * rootSaga() {
  12.   yield all([
  13.     signupSaga(),
  14.     productsSaga(),
  15.     searchSaga(),
  16.     filterSaga()
  17.   ])
  18. }
  • src/components/core/Shop.js ```jsx import Layout from “./Layout” import { Button, Col, Empty, Row, Space } from ‘antd’ import FilterByCategory from “./FilterByCategory” import FilterByPrice from “./FilterByPrice” import ProductItem from ‘./ProductItem’ import { useEffect, useState } from “react” import { useDispatch, useSelector} from ‘react-redux’ import { filter_products } from “../../store/actions/filter”

function Shop() { const [filters, setFilters] = useState({category: [], price: []}) const [skip, setSkip] = useState(0) const dispatch = useDispatch() const { data, size } = useSelector(state => state.filter)

useEffect(() => { setSkip(0) }, [filters])

useEffect(() => { dispatch(filter_products({filters, skip})) }, [filters, skip])

const loadMore = () => { setSkip(skip + 4) } return ( setFilters({…filters, category: filter})} /> setFilters({…filters, price: filter})} /> { data.map(product => ( )) } { size >= 4 ? () : } ) }

export default Shop

  2. <a name="WBHpt"></a>
  3. ## 构建商品详情组件布局
  5. - src/components/core/Product.js
  6. ```jsx
  7. import Layout from './Layout'
  8. import { Col, Row } from 'antd'
  9. import { useParams } from 'react-router-dom'
  11. function Product() {
  12.   const { productId } = useParams()
  13.   return (
  14.     <Layout title="商品名称" subTitle="商品描述">
  15.       <Row>
  16.         <Col span="18">{productId}</Col>
  17.         <Col span="6">right</Col>
  18.       </Row>
  19.     </Layout>
  20.   )
  21. }
  23. export default Product
  • src/components/Router.js ```jsx

import Product from ‘./core/Product’

function Routes() { return ( 

  1.   <PrivateAdmin path='/product/:productId' component={Product} />
  2. </Switch>

) }

export default Routes

  2. - src/components/core/ProductItem.js
  3. ```jsx
  4. <Button type="link"><Link to={`product/${_id}`}>查看详情</Link></Button>

根据产品 ID 获取产品详情 redux 流程

  • src/store/actions/product.js ```javascript import { createAction } from ‘redux-actions’

export const get_product_by_id = createAction(“get_product_by_id”) export const get_product_by_id_success = createAction(“get_product_by_id_success”)

  2. - src/store/reducers/product.js
  3. ```javascript
  4. import { handleActions } from 'redux-actions'
  5. import { get_product_by_id_success } from '../actions/product'
  7. const initialState = {}
  9. const productReducer = handleActions(
  10.   {
  11.     [get_product_by_id_success]: (state, action) => action.payload
  12.   },
  13.   initialState
  14. )
  16. export default productReducer
  • src/store/reducers/index.js ```javascript

import productReducer from “./product”;

const createRootReducer = (history) => combineReducers({

  1. product: productReducer

})

export default createRootReducer

  2. - src/store/sagas/product.js
  3. ```javascript
  4. import axios from 'axios'
  5. import { takeEvery, put } from 'redux-saga/effects'
  6. import { API } from '../../config'
  7. import { get_product_by_id, get_product_by_id_success } from '../actions/product'
  9. function * handleProductById(action) {
  10.   const response = yield axios.get(`${API}/product/${action.payload.productId}`)
  11.   yield put(get_product_by_id_success(response.data))
  12. }
  14. export default function * productSaga() {
  15.   yield takeEvery(get_product_by_id, handleProductById)
  16. }
  • src/store/sagas/rootsaga.js ```javascript import { all } from ‘redux-saga/effects’ import filterSaga from ‘./filter’ import productSaga from ‘./product’ import productsSaga from ‘./products’ import searchSaga from ‘./search’ import signupSaga from ‘./signup’

export default function * rootSaga() { yield all([ signupSaga(), productsSaga(), searchSaga(), filterSaga(), productSaga() ]) }

  1. <a name="SkLKw"></a>
  2. ## 展示商品详情
  4. - src/components/core/Product.js
  5. ```jsx
  6. import Layout from './Layout'
  7. import { Col, Row } from 'antd'
  8. import { useParams } from 'react-router-dom'
  9. import { useDispatch, useSelector } from 'react-redux'
  10. import { useEffect } from 'react'
  11. import { get_product_by_id } from '../../store/actions/product'
  12. import ProductItem from './ProductItem'
  14. function Product() {
  15.   const { productId } = useParams()
  16.   const dispatch = useDispatch()
  17.   const product = useSelector(state => state.product)
  19.   useEffect(() => {
  20.     dispatch(get_product_by_id({ productId }))
  21.   }, [])
  22.   return (
  23.     <Layout title="商品名称" subTitle="商品描述">
  24.       <Row>
  25.         <Col span="18">
  26.           {
  27.             Object.keys(product).length > 0 && (
  28.               <ProductItem product={product}
  29.               imgStyle={{width: '50%', margin: "0 auto"}}
  30.               showView={false}
  31.               />
  32.             )
  33.           }
  34.         </Col>
  35.         <Col span="6">right</Col>
  36.       </Row>
  37.     </Layout>
  38.   )
  39. }
  41. export default Product
  • src/components/core/ProductItem.js ```jsx

function ProductItem({product, imgStyle, showView=true, showChart=true}) { const { name, description, price, sold, category, createdAt, _id } = product

const showButtons = () => { const button = [] if(showView) { button.push() } if(showChart) { button.push() }

  1. return button

} return ( } actions={showButtons()} >

  1. </Card>

) }

export default ProductItem

  2. <a name="sPyZS"></a>
  3. ## 将商品添加到购物车中
  5. - src/helpers/cart.js
  6. ```javascript
  7. export function addItem(item, next) {
  8.   let cart = []
  9.   if(typeof window !== "undefined") {
  10.     if (localStorage.getItem("cart")) {
  11.       cart = JSON.parse(localStorage.getItem('cart'))
  12.     }
  14.     cart.push({...item, count: 1})
  16.     cart = Array.from(new Set(cart.map(product => product._id)))
  17.       .map(id => cart.find(product => product._id === id))
  19.     localStorage.setItem('cart', JSON.stringify(cart))
  20.     next && next()
  21.   }
  22. }
  • src/components/core/Productitem.js ```jsx

import { addItem } from ‘../../helpers/cart’ import { useDispatch } from ‘react-redux’ import { push } from ‘connected-react-router’

const {Title, Paragraph } = Typography

function ProductItem({product, imgStyle, showView=true, showChart=true}) { const { name, description, price, sold, category, createdAt, _id } = product

const dispatch = useDispatch() const addToCart = () => { addItem(product, () => dispatch(push(‘/cart’))) }

const showButtons = () => { const button = [] if(showView) { button.push() } if(showChart) { button.push() }

  1. return button

} return (

) }

export default ProductItem

  1. <a name="Mc57k"></a>
  2. ## 展示本地购物车中商品
  4. - src/helpers/cart.js
  5. ```javascript
  6. export function getCart() {
  7.   if (typeof window !== "undefined") {
  8.     if (localStorage.getItem("cart")) {
  9.       return JSON.parse(localStorage.getItem("cart"))
  10.     }
  11.   }
  12.   return []
  13. }
  • src/components/core/Cart.js ```jsx import { useEffect, useState } from ‘react’ import { getCart } from ‘../../helpers/cart’ import Layout from ‘./Layout’ import { Col, Row } from ‘antd’ import CartItem from ‘./CartItem’

function Cart() { const [cart, setCart] = useState([])

useEffect(() => { setCart(getCart()) }, [])

const cartTable = () => (

{cart.map(product => ( ))}
商品封面 商品名称 商品价格 商品分类 商品数量 操作
) return ( {cartTable()} ) }

export default Cart

  2. - src/components/Routers.js
  3. ```jsx
  5. import Cart from './core/Cart'
  8. function Routes() { 
  9.   return (
  10.     <Switch>
  12.       <Route path='/cart' component={Cart}></Route>
  14.     </Switch>
  15.   )
  16.  }
  18.  export default Routes
  • src/components/core/CartItem.js ```jsx import { Button, Image, Input } from ‘antd’ import {API} from ‘../../config’

function CartItem({product, setCart}) { return ( 实战开发 - 图1 {product.name} {product.price} {product.category.name} ) }

export default CartItem

  1. <a name="rLG2w"></a>
  2. ## 更改购物车中商品的数量
  4. - src/helpers/cart.js
  5. ```javascript
  6. export function updateItem(productId, count) {
  7.   let cart = []
  8.   if (typeof window !== "undefined") {
  9.     if (localStorage.getItem("cart")) {
  10.       cart = JSON.parse(localStorage.getItem("cart"))
  11.       const target = cart.find(product => product._id === productId)
  12.       target.count = count
  13.       localStorage.setItem("cart", JSON.stringify(cart))
  14.     }
  15.   }
  16.   return cart
  17. }
  • src/components/core/CartItem.js ```jsx import { Button, Image, Input } from ‘antd’ import { useState } from ‘react’ import {API} from ‘../../config’ import { updateItem } from ‘../../helpers/cart’

function CartItem({product, setCart}) { const [count, setCount] = useState(product.count)

const handleChange = event => { const count = parseInt(event.target.value) setCount(count) setCart(updateItem(product._id, count)) } return ( 实战开发 - 图2 {product.name} {product.price} {product.category.name} ) }

export default CartItem

  1. <a name="w0i0f"></a>
  2. ## 删除购物车中的商品
  4. - src/helpers/cart.js
  5. ```javascript
  6. export function deleteItem(productId) {
  7.   let cart = []
  8.   if (typeof window !== "undefined") {
  9.     if (localStorage.getItem("cart")) {
  10.       cart = JSON.parse(localStorage.getItem("cart"))
  11.       const index = cart.findIndex(product => product._id === productId)
  12.       cart.splice(index, 1)
  13.       localStorage.setItem("cart", JSON.stringify(cart))
  14.     }
  15.   }
  16.   return cart
  17. }
  • src/components/core/CartItem.js
    1. <Button danger type="primary" onClick={() => setCart(deleteItem(product._id))}>删除</Button>

构建购物车右侧布局

  • src/components/core/Cart.js ```jsx import { useEffect, useState } from ‘react’ import { getCart } from ‘../../helpers/cart’ import Layout from ‘./Layout’ import { Col, Input, Row, Typography, Form} from ‘antd’ import CartItem from ‘./CartItem’

const { Title } = Typography

function Cart() { const [cart, setCart] = useState([]) const [address, setAddress] = useState(“”) const [totalPrice, setTotalPrice] = useState(0)

useEffect(() => { setCart(getCart()) }, [])

useEffect(() => { let totalPrice = cart.reduce((currentValue, nextValue) => { return (currentValue += nextValue.count * nextValue.price) }, 0).toFixed(2) setTotalPrice(totalPrice) }, [cart])

return ( {cartTable()} setAddress(event.target.value)} placeholder=”请输入收货地址”> ) }

export default Cart

  1. <a name="hV6GZ"></a>
  2. ## 增加支付按钮或登陆按钮
  4. - src/components/core/PayButtom.js
  5. ```jsx
  6. import { Button } from 'antd'
  7. import { Link } from 'react-router-dom'
  8. import { isAuth } from '../../helpers/auth'
  10. function PayButton ({address, cart, totalPrice}) {
  11.   const showButton = () => {
  12.     return isAuth() ? (<Button>提交</Button>) : (<Button><Link to='/signin'>登陆</Link></Button>)
  13.   }
  14.   return <div>{showButton()}</div>
  15. }
  17. export default PayButton
  • src/components/core/Cart.js
    1. <Layout title='购物车' subTitle="付款吧，我就是你的了">
    2.     <Row gutter={16}>
    3.       <Col span="18">{cartTable()}</Col>
    4.       <Col span="6">
    5.         <Form.Item label="收获地址">
    6.           <Input
    7.             value={address}
    8.             onChange={event => setAddress(event.target.value)}
    9.             placeholder="请输入收货地址"></Input>
    10.         </Form.Item>
    11.         <Title level={5}>总价：{totalPrice}</Title>
    12.         <PayButton address={address} cart={cart} totalPrice={totalPrice} />
    13.       </Col>
    14.     </Row>
    15.   </Layout>

实现支付创建订单

  • src/components/core/PayButton.js ```jsx import { Button } from ‘antd’ import axios from ‘axios’ import { Link } from ‘react-router-dom’ import { isAuth } from ‘../../helpers/auth’ import {API} from ‘../../config’ function PayButton ({address, cart, totalPrice}) {

    const handlePay = () => { axios.post(${API}/alipay,{

    1. totalAmount: totalPrice,
    2. subject: '测试订单标题',
    3. body: '测试订单描述',
    4. products: cart.map(product => ({
    5.   product: product._id,
    6.   count: product.count
    7. })),
    8. address: address,
    9. userId: isAuth().user._id

    }).then(response => {

    1. window.location.href = response.data.result

    }) }

    const showButton = () => { return isAuth() ? () : () } return

    {showButton()}
    }

export default PayButton

  1. <a name="hHt6X"></a>
  2. ## 获取并展示订单列表数据
  4. - src/components/admin/Order.js
  5. ```jsx
  6. import Layout from "../core/Layout"
  7. import { useState, useEffect } from "react"
  8. import axios from "axios"
  9. import { API } from "../../config"
  10. import { isAuth } from "../../helpers/auth"
  11. import { Divider, Typography, Select } from "antd"
  12. import dateformat from "dateformat"
  14. const { Title } = Typography
  16. function Order() {
  17.   const [orders, setOrders] = useState([])
  18.   const { user, token } = isAuth()
  20.   async function loadOrders() {
  21.     let { data } = await axios.get(`${API}/order/list/${user._id}`, {
  22.       headers: {
  23.         Authorization: `Bearer ${token}`
  24.       }
  25.     })
  26.     setOrders(data)
  27.   }
  29.   useEffect(() => {
  30.     loadOrders()
  31.   }, [])
  33.   const getOrderNumber = () => {
  34.     return orders.length > 0
  35.       ? `您的订单数量是${orders.length}`
  36.       : "您还没有订单"
  37.   }
  39.   const showStatus = status => {
  40.     switch (status) {
  41.       case "Unpaid":
  42.         return "未付款"
  43.       case "Paid":
  44.         return "已付款"
  45.       case "Shipped":
  46.         return "运输中"
  47.       case "Completed":
  48.         return "已完成"
  49.       case "Cancelled":
  50.         return "已取消"
  51.     }
  52.   }
  54.   const handleStatus = orderId => status => {
  55.     axios
  56.       .put(
  57.         `${API}/order/status/${user._id}`,
  58.         { orderId, status },
  59.         {
  60.           headers: {
  61.             Authorization: `Bearer ${token}`
  62.           }
  63.         }
  64.       )
  65.       .then(() => loadOrders())
  66.   }
  68.   return (
  69.     <Layout title="订单列表" subTitle={getOrderNumber()}>
  70.       {orders.map(order => (
  71.         <>
  72.           <Title level={5}>订单ID: {order._id}</Title>
  73.           <table style={{ width: "100%" }}>
  74.             <thead className="ant-table-thead">
  75.               <tr>
  76.                 <th className="ant-table-cell">订单状态</th>
  77.                 <th className="ant-table-cell">订单号</th>
  78.                 <th className="ant-table-cell">总价</th>
  79.                 <th className="ant-table-cell">创建时间</th>
  80.                 <th className="ant-table-cell">邮寄地址</th>
  81.                 <th className="ant-table-cell">客户姓名</th>
  82.               </tr>
  83.             </thead>
  84.             <tbody className="ant-table-tbody">
  85.               <tr className="ant-table-row">
  86.                 <td className="ant-table-cell">
  87.                   {showStatus(order.status)}
  88.                   <Select
  89.                     defaultValue={order.status}
  90.                     onChange={handleStatus(order._id)}
  91.                   >
  92.                     <Select.Option value="Unpaid">未付款</Select.Option>
  93.                     <Select.Option value="Paid">已付款</Select.Option>
  94.                     <Select.Option value="Shipped">运输中</Select.Option>
  95.                     <Select.Option value="Completed">已完成</Select.Option>
  96.                     <Select.Option value="Cancelled">已取消</Select.Option>
  97.                   </Select>
  98.                 </td>
  99.                 <td className="ant-table-cell">{order.trade_no}</td>
  100.                 <td className="ant-table-cell">{order.amount}</td>
  101.                 <td className="ant-table-cell">
  102.                   {dateformat(order.createdAt, "yyyy-mm-dd")}
  103.                 </td>
  104.                 <td className="ant-table-cell">{order.address}</td>
  105.                 <td className="ant-table-cell">{order.user.name}</td>
  106.               </tr>
  107.             </tbody>
  108.           </table>
  109.           <table style={{ width: "100%" }}>
  110.             <thead className="ant-table-thead">
  111.               <tr>
  112.                 <th className="ant-table-cell">商品名称</th>
  113.                 <th className="ant-table-cell">商品价格</th>
  114.                 <th className="ant-table-cell">商品数量</th>
  115.                 <th className="ant-table-cell">商品ID</th>
  116.               </tr>
  117.             </thead>
  118.             <tbody className="ant-table-tbody">
  119.               {order.products.map(product => (
  120.                 <tr className="ant-table-row">
  121.                   <td className="ant-table-cell">{product.product.name}</td>
  122.                   <td className="ant-table-cell">{product.product.price}</td>
  123.                   <td className="ant-table-cell">{product.count}</td>
  124.                   <td className="ant-table-cell">{product.product._id}</td>
  125.                 </tr>
  126.               ))}
  127.             </tbody>
  128.           </table>
  129.           <Divider />
  130.         </>
  131.       ))}
  132.       <pre>{JSON.stringify(orders, null, 2)}</pre>
  133.     </Layout>
  134.   )
  135. }
  137. export default Order