Skip to content

CristinaGuan/React_happymmall

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React_happymmal

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  项目效果图: