一、react项目描述、技术选择、路由设计

1. 项目描述

  1. 项目为一个前后端分离后台管理的SPA,包括前端PC应用和后端应用
  2. 包括用户管理、角色管理(权限管理)、商品分类管理、商品管理等功能模块
  3. 前端:使用React全家桶+Antd+Axios+ES6+Webpack等技术
  4. 后端:使用Node+Express+Mongodb等技术
  5. 采用模块化、组件化、工程化的模块开发

2. 技术选型

  1. 前台数据展现/交互:

    • react
    • react-router-dom 路由开发单页面应用
    • antd UI组件库构建界面
    • redux 状态管理
  2. 后台应用

    • node
    • express
    • mongodb
    • mongoose
    • multer
    • bluemp-md5
  3. 前后端交互

    • ajax请求
      • axios
      • jsonp
      • promise/async…await
    • 接口测试工具 postman
  4. 模块化

    • ES6
    • CommonJS
  5. 项目构建工程化

    • webpack
    • create-react-app 脚手架初始化react项目
    • eslint
  6. 其他

    • 富文本编辑器
      • react-draft-wysiwyg 实现富文本编辑器
      • draft-js
      • drafjs-to-html
    • 图表库
      • echarts 实现数据可视化展示
      • echarts-for-react

3. 前端路由

  1. 登录 /login (login.jsx)
  2. 主界面 / (index.jsx)
    • Home首页 /home (home.jsx)
    • 商品分类管理 /category (category.jsx)
    • 商品管理 /product (product.jsx)
      • /product/index (index.jsx)商品列表页
      • /product/saveupdate (add-update.jsx) 增删改
      • /product/detail (detail.jsx) 商品详情
    • 用户管理 /user (user.jsx)
    • 角色管理(权限管理) /role (role.jsx)
    • 图表界面

你可能感兴趣的:(react项目实战,react.js,javascript,前端)