diff --git a/README.md b/README.md
index e54308ef2bcf27d55825c834da5da147933c3b1a..0327e717c3ea54b968d20bbd0c2153a45b130982 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,7 @@
# admin-react-ec
#### 项目介绍
-react 电商系统的搭建
+react 电商系统的搭建
#### 软件架构
@@ -16,9 +16,31 @@ react 电商系统的搭建
#### 使用说明
-1. xxxx
-2. xxxx
-3. xxxx
+1. 整个网站的所有的东西 样式啊图片的都是可以根据配置来显示的
+ 比如 一个网站title旁的小图标，favicon
+ 之前 接触的多是cms 系统的网站，用iis搭建的 title旁的小图标
+ 只要改名为指定的图片名 就可以自动设置了，
+ 但是在react里要在webpack.config 里配置一下。
+ # new HtmlWebpackPlugin({
+ # template: './src/index.html' ,// 新建了一个模板 和模板的位置
+ # favicon : './favicon.ico' //处理 网站title旁边的图片的
+ # }),
+2.接口请求问题
+ 接口请求 用的是 promise 来处理的
+ 但是提交的数据 有跨域问题 用的是webpack自带的devServer里的功能
+ #proxy : {
+ # '/manage' :{ //这是接口所在的文件夹 url: '/manage/user/login.do',
+ # target: '跨域的链接',
+ # changeOrigin : true
+ # }
+ # }
+
+ 这块对promise的使用 要求对异步回调函数的结构要非常的清楚 才能在层层嵌套里返回出自己想要的数据
+
+
+3.翻页模块的引用
+
+
#### 参与贡献
diff --git a/favicon.ico b/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..a8d3317951f2143b09f8782ddec1a1117a4295d5
Binary files /dev/null and b/favicon.ico differ
diff --git a/package.json b/package.json
index 54761cad80fcf4447fadc7f844e77664031780cd..8660b8f62ecfe99edc6124b46d3fa1206edc07a8 100644
--- a/package.json
+++ b/package.json
@@ -5,10 +5,10 @@
"repository": "git@gitee.com:React_code/admin-react-ec.git",
"author": "tom <820027697@qq.com>",
"license": "MIT",
- // 命令行里的一些快捷键的设置
"scripts": {
- "dev" : "node_modules/.bin/webpack-dev-server", //运行服务启动项目
- "dist" : "node_modules/.bin/webpack -p" //线上环境的打包
+ "dev": "node_modules/.bin/webpack-dev-server",
+ "dist": "node_modules/.bin/webpack -p",
+ "dist_win": "set WEBPACK_ENV=online&& node_modules/.bin/webpack -p"
},
"devDependencies": {
"babel-core": "6.26.0",
@@ -26,9 +26,12 @@
"webpack-dev-server": "2.9.7"
},
"dependencies": {
- "font-awesome": "^4.7.0",
"node-sass": "^4.9.2",
+ "prop-types": "15.6.0",
+ "rc-pagination": "^1.16.5",
"react": "16.2.0",
- "react-dom": "16.2.0"
+ "react-dom": "16.2.0",
+ "react-router-dom": "4.2.2",
+ "simditor": "^2.3.6"
}
}
diff --git a/src/app.js b/src/app.js
index cbb0b1680b0f08d2014fa81cd393f5b5a6e0467b..1ea8adf278e8acf81808752632e29fe1edc2d025 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1,15 +1,59 @@
import React from 'react';
import ReactDOM from 'react-dom';
+import { BrowserRouter as Router, Route, Redirect, Switch, Link }
+ from "react-router-dom";
-import 'font-awesome/css/font-awesome.min.css';
-import './index.css';
-import './index.scss';
+// 这是页面 做集成用的
+import Layout from 'component/layout/index.js';
+import Home from 'page/Home/index.js';
+import ProductRouter from 'page/product/router.js';
+
+
+import Login from 'page/login/index.js';
+import UserList from 'page/user/index.js';
+
+import ErrorPage from 'page/error/index.js';
+
+class App extends React.Component{
+ render(){
+ let LayoutRouter=(
+
+
+
+
+
+
+
+ {/* 实际链接为 user 跳转链接为 user/index */}
+
+
+
+
+
+
+ );
+
+ return(
+
+
+
+
+ {/* 这一块 原版是直接上首页 展示 但是添加了个登陆页 所以路由模块要有所改变 */}
+ {/* 这里了解了一下 route 的render 属性 这也算是在子路由里添加链接的方式了 */}
+ {/* 回头看 项目 的话 多多了解一下 路由的问题 */}
+
+ LayoutRouter} />
+
+
+
+
+
+ );
+ }
+}
ReactDOM.render(
-
-
-
Hello world
- ,
-document.getElementById("app")
-);
\ No newline at end of file
+ ,
+ document.getElementById("app")
+);
\ No newline at end of file
diff --git a/src/component/layout/index.js b/src/component/layout/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..47935da62616a2242ab974b64b779bfcbf5966d7
--- /dev/null
+++ b/src/component/layout/index.js
@@ -0,0 +1,26 @@
+import React from 'react';
+
+
+import SideNav from 'component/sidenav/index.js';
+import TopNav from 'component/topnav/index.js';
+import './theme.css';
+import './index.scss';
+
+
+
+class Layout extends React.Component{
+ constructor(props){
+ super(props);
+ }
+ render(){
+ return(
+
+
+
+ {this.props.children}
+
+ )
+ }
+}
+
+export default Layout;
\ No newline at end of file
diff --git a/src/component/layout/index.scss b/src/component/layout/index.scss
new file mode 100644
index 0000000000000000000000000000000000000000..b1a3e6918ce9cc42d12abb4fe025e0e2c068e201
--- /dev/null
+++ b/src/component/layout/index.scss
@@ -0,0 +1,5 @@
+.page-header-right{
+ position: absolute;
+ right:15px;
+ top:12px;
+}
\ No newline at end of file
diff --git a/src/component/layout/theme.css b/src/component/layout/theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..2b06118ee3e368daa644374065d263f06e24fae6
--- /dev/null
+++ b/src/component/layout/theme.css
@@ -0,0 +1,622 @@
+/*----------------------------------------------
+Author : www.webthemez.com
+License: Commons Attribution 3.0
+http://creativecommons.org/licenses/by/3.0/
+------------------------------------------------*/
+
+
+/*----------------------------------------------
+ COMMON STYLES
+------------------------------------------------*/
+body {
+ font-family: 'Open Sans', sans-serif;
+ background: #f3f3f3;
+}
+
+#wrapper {
+ width: 100%;
+}
+
+#page-wrapper {
+ margin: 0 0 0 260px;
+ padding: 15px 30px;
+}
+
+.text-center {
+ text-align: center;
+}
+
+
+h1, .h1, h2, .h2, h3, .h3 {
+ margin-top: 7px;
+ margin-bottom: -5px;
+}
+
+h2 {
+ color: #000;
+}
+
+h4 {
+ padding-top: 10px;
+}
+
+.square-btn-adjust {
+ border: 0px solid transparent;
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ border-radius: 0px;
+}
+
+p {
+ font-size: 16px;
+ line-height: 25px;
+}
+
+.panel {
+ border-radius: 0px;
+}
+
+.navbar-side .nav > li > a > i {
+ color: #B5B5B5;
+ padding: 8px;
+ width: 30px;
+ text-align: center;
+}
+
+.top-navbar {
+ position: fixed;
+ width: 100%;
+ z-index: 300;
+ -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
+ box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05);
+}
+
+.navbar-side {
+ z-index: 1;
+ position: fixed;
+ width: 260px;
+ top: 60px;
+ bottom: 0;
+ overflow-y : auto;
+ background: #2b2e33;
+}
+
+#page-wrapper {
+ position: relative;
+ top: 55px;
+}
+
+.top-navbar .nav > li > a:hover, .top-navbar .nav > li > a:focus {
+ text-decoration: none;
+ background-color: #2497BA;
+ color: #fff;
+}
+
+.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
+ background-color: #2497BA;
+ border-color: #428bca;
+}
+
+.breadcrumb {
+ padding: 0;
+ margin-bottom: 20px;
+ list-style: none;
+/* background-color: #FAFAFA; */
+ border-radius: 0;
+}
+/*----------------------------------------------
+ DASHBOARD STYLES
+------------------------------------------------*/
+.page-header {
+ padding-bottom: 9px;
+ margin: 10px 0 20px;
+ border-bottom: 1px solid transparent;
+}
+
+.panel-left {
+ width: 35%;
+ height: 158px;
+ background: #5CB85C;
+}
+
+.panel-left .fa-5x {
+ font-size: 11em;
+ color: rgba(255, 255, 255, 0.15);
+ padding: 40px 0;
+ margin-bottom: 30px;
+}
+
+.panel-right {
+ width: 65%;
+ height: 158px;
+ background: transparent;
+ margin-bottom: 0;
+ color: #fff;
+}
+
+.panel-right h3 {
+ font-size: 50px;
+ padding: 31px 10px 13px;
+ color: rgba(255, 255, 255, 0.96);
+}
+
+.panel-back {
+ background-color: #fff;
+}
+
+.panel-default {
+ border-color: #ECECEC;
+}
+
+.panel-default > .panel-heading {
+ color: #000;
+ border-color: #FFF;
+ font-weight: bold;
+ background: #FFFFFF;
+ font-size: 16px;
+}
+
+.panel-heading {
+ padding: 15px 15px 0px;
+ border-bottom: 1px solid transparent;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
+}
+
+.jumbotron, .well {
+ background: #fff;
+}
+
+.noti-box {
+ min-height: 100px;
+ padding: 20px;
+}
+
+.noti-box .icon-box {
+ display: block;
+ float: left;
+ margin: 0 15px 10px 0;
+ width: 70px;
+ height: 70px;
+ line-height: 75px;
+ vertical-align: middle;
+ text-align: center;
+ font-size: 40px;
+}
+
+.text-box p {
+ margin: 0 0 3px;
+}
+
+.main-text {
+ font-size: 25px;
+ font-weight: 600;
+}
+
+.set-icon {
+ -webkit-border-radius: 50px;
+ -moz-border-radius: 50px;
+ border-radius: 50px;
+}
+
+.panel-primary {
+ display: inline-block;
+ margin-bottom: 30px;
+ width: 100%;
+}
+
+.green {
+ background-color: #5cb85c;
+ color: #fff;
+}
+
+.blue {
+ background-color: #4CB1CF;
+ color: #fff
+}
+
+.red {
+ background-color: #F0433D;
+ color: #fff;
+}
+
+.brown {
+ background-color: #f0ad4e;
+ color: #fff;
+}
+
+.back-footer-red {
+ background-color: #F0433D;
+ color: #fff;
+ border-top: 0px solid #fff;
+}
+
+.icon-box-right {
+ display: block;
+ float: right;
+ margin: 0 15px 10px 0;
+ width: 70px;
+ height: 70px;
+ line-height: 75px;
+ vertical-align: middle;
+ text-align: center;
+ font-size: 40px;
+}
+
+.main-temp-back {
+ background: #8702A8;
+ color: #FFFFFF;
+ font-size: 16px;
+ font-weight: 300;
+ text-align: center;
+}
+
+.main-temp-back .text-temp {
+ font-size: 40px;
+}
+
+.back-dash {
+ padding: 20px;
+ font-size: 20px;
+ font-weight: 500;
+ -webkit-border-radius: 0px;
+ -moz-border-radius: 0px;
+ border-radius: 0px;
+ background-color: #2EA7EB;
+ color: #fff;
+}
+
+.back-dash p {
+ padding-top: 16px;
+ font-size: 13px;
+ color: #fff;
+ line-height: 25px;
+ text-align: justify;
+}
+
+.color-bottom-txt {
+ color: #000;
+ font-size: 16px;
+ line-height: 30px;
+}
+ /*CHAT PANEL*/
+/*Charts*/
+
+.main-chart {
+ background: #fff;
+}
+
+.easypiechart-panel {
+ text-align: center;
+ padding: 1px 0;
+ margin-bottom: 20px;
+}
+
+.placeholder h2 {
+ margin-bottom: 0px;
+}
+
+.donut {
+ width: 100%;
+}
+
+.easypiechart {
+ position: relative;
+ text-align: center;
+ width: 120px;
+ height: 120px;
+ margin: 20px auto 10px auto;
+}
+
+.easypiechart .percent {
+ display: block;
+ position: absolute;
+ font-size: 26px;
+ top: 38px;
+ width: 120px;
+}
+
+#easypiechart-blue .percent {
+ color: #30a5ff;
+}
+
+#easypiechart-teal .percent {
+ color: #1ebfae;
+}
+
+#easypiechart-orange .percent {
+ color: #ffb53e;
+}
+
+#easypiechart-red .percent {
+ color: #ef4040;
+}
+
+.chat-panel .panel-body {
+ height: 450px;
+ overflow-y: scroll;
+}
+
+.chat-box {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.chat-box li {
+ margin-bottom: 15px;
+ padding-bottom: 5px;
+ border-bottom: 1px dotted #808080;
+}
+
+.chat-box li.left .chat-body {
+ margin-left: 90px;
+}
+
+.chat-box li .chat-body p {
+ margin: 0;
+ color: #8d8888;
+}
+
+.chat-img>img {
+ margin-left: 20px;
+}
+
+footer p {
+ font-size: 14px;
+}
+/*----------------------------------------------
+ MENU STYLES
+------------------------------------------------*/
+
+
+.user-image {
+ margin: 25px auto;
+ -webkit-border-radius: 10px;
+ -moz-border-radius: 10px;
+ border-radius: 10px;
+ max-height: 170px;
+ max-width: 170px;
+}
+
+.top-navbar {
+ margin: 0px;
+}
+
+.top-navbar .navbar-brand {
+ color: #fff;
+ width: 260px;
+ text-align: left;
+ height: 60px;
+ font-size: 30px;
+ font-weight: 700;
+ text-transform: uppercase;
+ line-height: 30px;
+ background: #32323a;
+}
+
+.navbar-brand b {
+ margin-right:5px;
+ color: #2DAFCB;
+}
+
+.top-navbar .nav > li {
+ position: relative;
+ display: inline-block;
+ margin: 0px;
+ padding: 0px 10px;
+}
+
+.top-navbar .nav > li > a {
+ position: relative;
+ display: block;
+ padding: 20px;
+ color: #FFFFFF;
+ margin: 0px;
+}
+
+.top-navbar .nav > li > a:hover, .top-navbar .nav > li > a:focus {
+ text-decoration: none;
+ color: #319DB5 !important;
+ background: transparent;
+}
+
+.top-navbar .nav > li:hover .dropdown-menu{
+ display: block;
+}
+.top-navbar .dropdown-menu {
+ min-width: 230px;
+ top: 98%;
+ border-radius: 0 0 4px 4px;
+}
+.dropdown-menu > li > a{
+ cursor: pointer;
+}
+.top-navbar .dropdown-menu > li > a:hover, .top-navbar .dropdown-menu > li > a:focus {
+ color: #225081;
+ background: none;
+}
+
+.dropdown-tasks {
+ width: 255px;
+}
+
+.dropdown-tasks .progress {
+ height: 8px;
+ margin-bottom: 8px;
+ overflow: hidden;
+ background-color: #f5f5f5;
+ border-radius: 0px;
+}
+
+.dropdown-tasks > li > a {
+ padding: 0px 15px;
+}
+
+.dropdown-tasks p {
+ font-size: 13px;
+ line-height: 21px;
+ padding-top: 4px;
+}
+
+.active-menu {
+ background-color: #2DAFCB !important;
+ color: #fff !important;
+}
+
+.active-menu i {
+ color: #fff !important;
+}
+
+.arrow {
+ float: right;
+ margin-top: 8px;
+}
+
+.fa.arrow:before {
+ content: "\f104";
+}
+
+.active > a > .fa.arrow:before {
+ content: "\f107";
+}
+
+.nav-second-level li,
+.nav-third-level li {
+ border-bottom: none !important;
+}
+
+.nav-second-level li a {
+ padding-left: 37px;
+}
+
+.nav-third-level li a {
+ padding-left: 55px;
+}
+
+.sidebar-collapse , .sidebar-collapse .nav {
+ background: none;
+}
+
+.sidebar-collapse .nav {
+ padding: 0;
+}
+
+.sidebar-collapse .nav > li > a {
+ color: #B5B5B5;
+ background: transparent;
+ text-shadow: none;
+}
+
+.sidebar-collapse > .nav > li > a {
+ padding: 12px 10px;
+}
+
+.sidebar-collapse > .nav > li {
+ border-bottom: 1px solid rgba(107, 108, 109, 0.19);
+}
+
+ul.nav.nav-second-level.collapse.in {
+ background: #17191B;
+}
+
+.sidebar-collapse .nav > li > a:hover,
+.sidebar-collapse .nav > li > a:focus {
+ outline: 0;
+}
+
+.navbar-side {
+ border: none;
+}
+
+.top-navbar {
+ background: #fff;
+ border-bottom: none;
+}
+
+.top-navbar .nav > li > a > i {
+ margin-right: 2px;
+}
+.top-navbar .nav > li > a > span {
+ color: #666;
+ margin-right: 5px;
+}
+.top-navbar .navbar-brand:hover {
+ color: #2DAFCB;
+ background-color: rgb(43, 46, 51);
+}
+
+.dropdown-user li {
+ margin: 8px 0;
+}
+
+.navbar-default {
+ border: 0px solid black;
+}
+
+.navbar-header {
+ background: transparent;
+ display: flex;
+ background-color: rgb(43, 46, 51);
+}
+
+.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
+ background-color: #B40101;
+}
+
+.navbar-default .navbar-toggle {
+ border-color: #fff;
+}
+
+.navbar-default .navbar-toggle .icon-bar {
+ background-color: #FFF;
+}
+
+.nav > li > a > i {
+ margin-right: 10px;
+ color: #666;
+}
+/*----------------------------------------------
+ UI ELEMENTS STYLES
+------------------------------------------------*/
+.btn-circle {
+ width: 50px;
+ height: 50px;
+ padding: 6px 0;
+ -webkit-border-radius: 25px;
+ -moz-border-radius: 25px;
+ border-radius: 25px;
+ text-align: center;
+ font-size: 12px;
+ line-height: 1.428571429;
+}
+
+/*----------------------------------------------
+ MEDIA QUERIES
+------------------------------------------------*/
+
+@media(max-width:768px) {
+
+ .top-navbar{
+ position: relative;
+ }
+ .top-navbar .navbar-brand{
+ width: 100%;
+ }
+
+
+ .navbar-side {
+ z-index: 1;
+ width: 100%;
+ position: relative;
+ top: 0;
+ }
+ #page-wrapper {
+ margin: 0;
+ padding: 15px 30px;
+ top: 0;
+ }
+}
+
+
diff --git a/src/component/page-title/index.js b/src/component/page-title/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..483072f4c57b4571584e9cc213073c8e50a8142d
--- /dev/null
+++ b/src/component/page-title/index.js
@@ -0,0 +1,30 @@
+import React from 'react';
+
+
+class PageTitle extends React.Component{
+ constructor(props){
+ super(props)
+ }
+ //在这里 我们使用一下 生命周期
+ componentWillMount(){
+ document.title = this.props.title + '- HAPPY MMALL';
+ }
+ render(){
+ return(
+
+
+
+ {this.props.title}
+
+ {/* 下面这块的意思是
+ 首页的右边可以有 一些其他的东西
+ 我们用包含组件的形式来展示
+ */}
+ {this.props.children}
+
+
+
+
+ -
+
+ 首页
+
+
+
+ -
+
+
+ 商品
+
+
+
+ -
+ 商品管理
+
+
+ -
+ 品类分类
+
+
+
+ -
+
+
+ 订单
+
+
+
+
+ -
+
+
+ 用户
+
+
+
+
+
+
+
+
+
+
+
+ HAPPYMMALL
+
+
+
+
+
case
+
+