React16+React-Router4 后台管理系统项目----慕课React项目实战
架构模式: 前后端完全分离 分层架构 模块化开发
运行: yarn run dev
或者 yarn run node_modules/.bin/webpack-dev-server //打包启动
环境搭建:
1、安装node.js(下载node安装包直接安装)
2、安装yarn(包的管理工具,替代npm) npm install yarn -g
3、安装文本webpack(一个前端资源加载、打包工具) yarn add webpack@3.10.0 --dev
4、安装HtmlWebpackPlugin插件 yarn add html-webpack-plugin@2.30.1 --dev 或者 npm install --save-dev html-webpack-plugin
5、安装babel-loader yarn add babel-core@6.26.0 babel-preset-env@1.6.1 babel-loader@7.1.2 --dev yarn add babel-preset-react@6.24.1 --dev 或者npm install "babel-loader@^8.0.0-beta" @babel/core @babel/preset-env webpack
6、安装react-dom yarn add react@16.2.0 react-dom@16.2.0
7、安装css-loader yarn add style-loader@0.19.1 css-loader@0.28.8 --dev
8、安装ExtractTextWebpackPlugin yarn add extract-text-webpack-plugin@3.0.2 --dev 或者 npm install --save-dev extract-text-webpack-plugin
9、安装sass-loader yarn add sass-loader@6.0.6 --dev yarn add node-sass@4.7.2 --dev 或者 npm install sass-loader node-sass webpack --save-dev
10、安装url-loader yarn add file-loader@1.1.6 url-loader@0.6.2 --dev 或者 npm install --save-dev url-loader
11、安装font-awesome yarn add font-awesome
12、安装webpack-dev-server yarn add webpack-dev-server --dev 或者 npm install --save-dev webpack-dev-server
13、安装react-router-dom yarn add react-router-dom@4.2.2
项目页面及功能介绍:
管理员登录页面:
管理员登录的账号是admin
管理员登录的密码是admin
首页:
商品管理页:
1、商品列表
2、查看商品详情
3、编辑商品信息
4、对商品进行上下架操作
5、添加商品
6、按商品ID或商品名搜索
7、分页浏览
品类管理页:
1、品类列表
2、添加品类
3、查看子品类
4、修改品类名称
订单管理页:
1、订单列表
2、查看订单详情
3、根据订单号搜索
4、分页浏览
用户管理页:
1、用户列表
2、分页浏览
项目接口地址:https://www.imooc.com/article/19088 项目效果图: