From dcb72d6a90f71e6ee3d4b6f17756d8223acbe437 Mon Sep 17 00:00:00 2001 From: tom <820027697@qq.com> Date: Tue, 24 Jul 2018 20:02:14 +0800 Subject: [PATCH 01/21] initial --- package.json | 9 +- src/1.html | 574 ++++++++++++++++++++++++++++++ src/2.html | 234 ++++++++++++ src/app.js | 38 +- src/component/layout/index.js | 24 ++ src/component/layout/theme.css | 633 +++++++++++++++++++++++++++++++++ src/component/sidenav/index.js | 86 +++++ src/component/topnav/index.js | 249 +++++++++++++ src/index.css | 4 - src/index.html | 5 +- src/index.scss | 6 - src/page/Home/index.css | 0 src/page/Home/index.js | 14 + webpack.config.js | 13 +- yarn.lock | 73 +++- 15 files changed, 1928 insertions(+), 34 deletions(-) create mode 100644 src/1.html create mode 100644 src/2.html create mode 100644 src/component/layout/index.js create mode 100644 src/component/layout/theme.css create mode 100644 src/component/sidenav/index.js create mode 100644 src/component/topnav/index.js create mode 100644 src/page/Home/index.css create mode 100644 src/page/Home/index.js diff --git a/package.json b/package.json index 54761ca..8894f01 100644 --- a/package.json +++ b/package.json @@ -5,10 +5,9 @@ "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" }, "devDependencies": { "babel-core": "6.26.0", @@ -26,9 +25,9 @@ "webpack-dev-server": "2.9.7" }, "dependencies": { - "font-awesome": "^4.7.0", "node-sass": "^4.9.2", "react": "16.2.0", - "react-dom": "16.2.0" + "react-dom": "16.2.0", + "react-router-dom": "4.2.2" } } diff --git a/src/1.html b/src/1.html new file mode 100644 index 0000000..b378d84 --- /dev/null +++ b/src/1.html @@ -0,0 +1,574 @@ +
+
+
+
+

+ UI Elements + This is your UI elements section +

+
+
+
+ +
+
+
+ Messages +
+ +
+
+ Well done! You successfully read this important alert message. +
+
+ Heads up! This alert needs your attention, but it's not super important. +
+
+ Warning! Best check yo self, you're not looking too good. +
+
+ Oh snap! Change a few things up and try submitting again. +
+
+
+
+
+ +
+
+
+
+ Simple Progress Bars +
+ +
+
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete +
+
+
+
+
+
+
+
+ Progress Bars +
+ +
+
+
+ 40% Complete (success) +
+
+
+
+ 20% Complete +
+
+
+
+ 60% Complete (warning) +
+
+
+
+ 80% Complete +
+
+
+
+
+
+ +
+
+
+
+ Animated Progress Bars +
+ +
+
+
+ 40% Complete (success) +
+
+
+
+
+
+
+
+ Stacked Progress Bars +
+ +
+
+
+ 35% Complete (success) +
+
+ 20% Complete (warning) +
+
+ 10% Complete (danger) +
+
+
+
+
+
+
+ +
+
+
+ Simple Buttons Examples +
+ +
+ +

Default Button

+ default + primary + danger + success + info + warning + + +

Small Button

+ default + primary + danger + success + info + warning + + +

Large Button

+ + default + primary + danger + success + info + + +
+
+
+
+
+
+ Button Dropdowns +
+ +
+

Simple Button Dropdown Examples

+
+ +
+ + +
+
+ + +
+
+ + +
+ + +
+ + +
+
+ + +
+
+ + +
+
+ +

Split Button Dropdown Examples

+ +
+ +
+ + + +
+
+ + + +
+
+ + + +
+ +
+ + + +
+
+ + + +
+ +
+ + +

Buttons With Icons

+ + + + + + + + +
+
+
+
+ +
+
+
+
+ Circle Icon Buttons +
+ +
+
+
+ + + + + + +
+

+ Get more components at official bootstrap website i.e getbootstrap.com or + click here . +

+
+ +
+
+
+
+
+ Icons Examples : +
+ +
+
+ + + + + + +
+

+ Get more Icons at official fortawesome website + Click here . +

+
+ +
+
+
+ + +
+
+ + +
+
+ Modals Example +
+
+ + +
+
+ + +
+
+
+
+ Sample Text +
+
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et doloreullamco laboris + nisi ut aliquip ex ea commodo + +
+
+
+
+ + +
+ +
\ No newline at end of file diff --git a/src/2.html b/src/2.html new file mode 100644 index 0000000..c38f2e5 --- /dev/null +++ b/src/2.html @@ -0,0 +1,234 @@ + \ No newline at end of file diff --git a/src/app.js b/src/app.js index cbb0b16..cb02b65 100644 --- a/src/app.js +++ b/src/app.js @@ -1,15 +1,35 @@ 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'; + + + +class App extends React.Component{ + render(){ + return( +
+ + + + + + + + + + +
+ ); + } +} 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 0000000..e893f24 --- /dev/null +++ b/src/component/layout/index.js @@ -0,0 +1,24 @@ +import React from 'react'; + + +import SideNav from 'component/sidenav/index.js'; +import TopNav from 'component/topnav/index.js'; +import 'component/layout/theme.css'; + + +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/theme.css b/src/component/layout/theme.css new file mode 100644 index 0000000..c3fdcd2 --- /dev/null +++ b/src/component/layout/theme.css @@ -0,0 +1,633 @@ +/*---------------------------------------------- +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%; + /* background: #2b2e33; */ +} + +#page-wrapper { + padding: 15px 15px; + /* min-height: 600px; */ + +} + +#page-inner { + width: 100%; + margin: 10px 20px 10px 0px; + background-color: transparent; + padding: 10px; + min-height: 1200px; +} + +.text-center { + text-align: center; +} + +.no-boder { + border: 1px solid #f3f3f3; +} + +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; + padding-top: 20px; +} + +.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; + 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 { + color: #2DAFCB; +} + +.top-navbar .nav > li { + position: relative; + display: inline-block; + margin: 0px; + padding: 0px; +} + +.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 .dropdown-menu { + min-width: 230px; + border-radius: 0 0 4px 4px; +} + +.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; + /* background-color: transparent; */ +} + +.top-navbar { + background: #fff; + border-bottom: none; +} + +.top-navbar .nav > li > a > i { + margin-right: 2px; +} + +.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; + /* background:rgba(0, 0, 0, 0.774); */ +} + +.navbar-header { + background: transparent; +} + +.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) { + #page-wrapper { + margin: 0 0 0 260px; + padding: 15px 30px; + /* min-height: 1200px; */ + } + .navbar-header{ + height:60px; + width:100%; + display: flex; + justify-content: space-between; + background: #32323a; + } + .navbar-header .navbar-brand{ + width:100%; + } + + .navbar-side { + z-index: 1; + width: 100%; + position: fixed; + top: 120px; + } + + .navbar { + border-radius: 0px; + } +} + + diff --git a/src/component/sidenav/index.js b/src/component/sidenav/index.js new file mode 100644 index 0000000..21ebc66 --- /dev/null +++ b/src/component/sidenav/index.js @@ -0,0 +1,86 @@ +import React from 'react'; + + +class SideNav extends React.Component{ + constructor(props){ + super(props); + } + render(){ + return( +
+
+ + +
+ +
+ ) + } +} + +export default SideNav; \ No newline at end of file diff --git a/src/component/topnav/index.js b/src/component/topnav/index.js new file mode 100644 index 0000000..a57a6c7 --- /dev/null +++ b/src/component/topnav/index.js @@ -0,0 +1,249 @@ +import React from 'react'; + + +class TopNav extends React.Component{ + constructor(props){ + super(props); + } + render(){ + return( +
+
+ + + Insight + +
+ + +
+ ) + } +} + +export default TopNav; \ No newline at end of file diff --git a/src/index.css b/src/index.css index c664250..e69de29 100644 --- a/src/index.css +++ b/src/index.css @@ -1,4 +0,0 @@ -#app{ - color:red; - background:url(./image/hc.jpg); -} diff --git a/src/index.html b/src/index.html index 5330fc6..8ba8423 100644 --- a/src/index.html +++ b/src/index.html @@ -5,9 +5,12 @@ + + + happy mall admin -
case
+
\ No newline at end of file diff --git a/src/index.scss b/src/index.scss index 684bf96..e69de29 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,6 +0,0 @@ -body{ - background: #ccc; - #app{ - font-size:100px; - } -} \ No newline at end of file diff --git a/src/page/Home/index.css b/src/page/Home/index.css new file mode 100644 index 0000000..e69de29 diff --git a/src/page/Home/index.js b/src/page/Home/index.js new file mode 100644 index 0000000..0b6d22f --- /dev/null +++ b/src/page/Home/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import './index.css' + +class Home extends React.Component{ + render(){ + return ( +
+
Home
+
+ ) + } +} + +export default Home; diff --git a/webpack.config.js b/webpack.config.js index eb0d144..bee625f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -14,7 +14,13 @@ module.exports = { publicPath:'/dist/', //配置访问文件的路径 filename: 'js/app.js' }, - + resolve:{ + alias:{ + page : path.resolve(__dirname, 'src/page'), + component: path.resolve(__dirname, 'src/component') + + } + }, module: { rules: [ // react(jsx) 语法的处理 @@ -90,6 +96,9 @@ module.exports = { }) ], devServer: { - port:8086 //修改启动的端口号 + port:8086 , //修改启动的端口号 + historyApiFallback:{ + index:'/dist/index.html' + } } }; diff --git a/yarn.lock b/yarn.lock index 1643960..c974c7e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2167,10 +2167,6 @@ follow-redirects@^1.0.0: dependencies: debug "^3.1.0" -font-awesome@^4.7.0: - version "4.7.0" - resolved "https://registry.yarnpkg.com/font-awesome/-/font-awesome-4.7.0.tgz#8fa8cf0411a1a31afd07b06d2902bb9fc815a133" - for-in@^0.1.3: version "0.1.8" resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1" @@ -2475,6 +2471,16 @@ he@1.1.x: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" +history@^4.7.2: + version "4.7.2" + resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b" + dependencies: + invariant "^2.2.1" + loose-envify "^1.2.0" + resolve-pathname "^2.2.0" + value-equal "^0.4.0" + warning "^3.0.0" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -2487,6 +2493,10 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" +hoist-non-react-statics@^2.5.0: + version "2.5.5" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47" + home-or-tmp@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/home-or-tmp/-/home-or-tmp-2.0.0.tgz#e36c3f2d2cae7d746a857e38d18d5f32a7882db8" @@ -2694,7 +2704,7 @@ interpret@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" -invariant@^2.2.2: +invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4: version "2.2.4" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6" dependencies: @@ -3174,7 +3184,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" dependencies: @@ -3835,6 +3845,12 @@ path-to-regexp@0.1.7: version "0.1.7" resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c" +path-to-regexp@^1.7.0: + version "1.7.0" + resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.7.0.tgz#59fde0f435badacba103a84e9d3bc64e96b9937d" + dependencies: + isarray "0.0.1" + path-type@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441" @@ -4181,7 +4197,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.6.0: +prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1: version "15.6.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102" dependencies: @@ -4308,6 +4324,29 @@ react-dom@16.2.0: object-assign "^4.1.1" prop-types "^15.6.0" +react-router-dom@4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d" + dependencies: + history "^4.7.2" + invariant "^2.2.2" + loose-envify "^1.3.1" + prop-types "^15.5.4" + react-router "^4.2.0" + warning "^3.0.0" + +react-router@^4.2.0: + version "4.3.1" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.3.1.tgz#aada4aef14c809cb2e686b05cee4742234506c4e" + dependencies: + history "^4.7.2" + hoist-non-react-statics "^2.5.0" + invariant "^2.2.4" + loose-envify "^1.3.1" + path-to-regexp "^1.7.0" + prop-types "^15.6.1" + warning "^4.0.1" + react@16.2.0: version "16.2.0" resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba" @@ -4559,6 +4598,10 @@ resolve-from@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748" +resolve-pathname@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" + resolve-url@^0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -5336,6 +5379,10 @@ validate-npm-package-license@^3.0.1: spdx-correct "^3.0.0" spdx-expression-parse "^3.0.0" +value-equal@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" + vary@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" @@ -5358,6 +5405,18 @@ vm-browserify@0.0.4: dependencies: indexof "0.0.1" +warning@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" + dependencies: + loose-envify "^1.0.0" + +warning@^4.0.1: + version "4.0.1" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.1.tgz#66ce376b7fbfe8a887c22bdf0e7349d73d397745" + dependencies: + loose-envify "^1.0.0" + watchpack@^1.4.0: version "1.6.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00" -- Gitee From 1760cd38c22a72b43fd9038bb2135f8739456608 Mon Sep 17 00:00:00 2001 From: tom <820027697@qq.com> Date: Wed, 25 Jul 2018 18:43:01 +0800 Subject: [PATCH 02/21] initial --- src/1.html | 572 +-------------------------------- src/app.js | 5 +- src/component/layout/theme.css | 569 ++++++++++++++++---------------- src/component/sidenav/index.js | 89 +++-- src/component/topnav/index.js | 33 +- src/page/Home/index.js | 4 +- 6 files changed, 344 insertions(+), 928 deletions(-) diff --git a/src/1.html b/src/1.html index b378d84..24431ad 100644 --- a/src/1.html +++ b/src/1.html @@ -1,574 +1,18 @@ -
-
-
-
-

- UI Elements - This is your UI elements section -

-
-
-
-
-
-
- Messages -
-
-
- Well done! You successfully read this important alert message. -
-
- Heads up! This alert needs your attention, but it's not super important. -
-
- Warning! Best check yo self, you're not looking too good. -
-
- Oh snap! Change a few things up and try submitting again. -
-
-
-
-
+首页 -
-
-
-
- Simple Progress Bars -
+商品 +--商品管理 +--品类管理 -
-
-
- 40% Complete (success) -
-
-
-
- 20% Complete -
-
-
-
- 60% Complete (warning) -
-
-
-
- 80% Complete -
-
-
-
-
-
-
-
- Progress Bars -
-
-
-
- 40% Complete (success) -
-
-
-
- 20% Complete -
-
-
-
- 60% Complete (warning) -
-
-
-
- 80% Complete -
-
-
-
-
-
+订单 +--订单管理 -
-
-
-
- Animated Progress Bars -
-
-
-
- 40% Complete (success) -
-
-
-
-
-
-
-
- Stacked Progress Bars -
+用户 +--用户管理 -
-
-
- 35% Complete (success) -
-
- 20% Complete (warning) -
-
- 10% Complete (danger) -
-
-
-
-
-
-
-
-
-
- Simple Buttons Examples -
-
- -

Default Button

- default - primary - danger - success - info - warning - - -

Small Button

- default - primary - danger - success - info - warning - - -

Large Button

- - default - primary - danger - success - info - - -
-
-
-
-
-
- Button Dropdowns -
- -
-

Simple Button Dropdown Examples

-
- -
- - -
-
- - -
-
- - -
- - -
- - -
-
- - -
-
- - -
-
- -

Split Button Dropdown Examples

- -
- -
- - - -
-
- - - -
-
- - - -
- -
- - - -
-
- - - -
- -
- - -

Buttons With Icons

- - - - - - - - -
-
-
-
- -
-
-
-
- Circle Icon Buttons -
- -
-
-
- - - - - - -
-

- Get more components at official bootstrap website i.e getbootstrap.com or - click here . -

-
- -
-
-
-
-
- Icons Examples : -
- -
-
- - - - - - -
-

- Get more Icons at official fortawesome website - Click here . -

-
- -
-
-
- - -
-
- - -
-
- Modals Example -
-
- - -
-
- - -
-
-
-
- Sample Text -
-
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et doloreullamco laboris - nisi ut aliquip ex ea commodo - -
-
-
-
- -
-

All right reserved. Template by: - WebThemez -

-
-
- -
\ No newline at end of file diff --git a/src/app.js b/src/app.js index cb02b65..5a8d252 100644 --- a/src/app.js +++ b/src/app.js @@ -17,7 +17,10 @@ class App extends React.Component{ - + + + + diff --git a/src/component/layout/theme.css b/src/component/layout/theme.css index c3fdcd2..2b06118 100644 --- a/src/component/layout/theme.css +++ b/src/component/layout/theme.css @@ -14,370 +14,357 @@ body { } #wrapper { - width: 100%; - /* background: #2b2e33; */ + width: 100%; } #page-wrapper { - padding: 15px 15px; - /* min-height: 600px; */ - -} - -#page-inner { - width: 100%; - margin: 10px 20px 10px 0px; - background-color: transparent; - padding: 10px; - min-height: 1200px; + margin: 0 0 0 260px; + padding: 15px 30px; } .text-center { - text-align: center; + text-align: center; } -.no-boder { - border: 1px solid #f3f3f3; -} h1, .h1, h2, .h2, h3, .h3 { - margin-top: 7px; - margin-bottom: -5px; + margin-top: 7px; + margin-bottom: -5px; } h2 { - color: #000; + color: #000; } h4 { - padding-top: 10px; + padding-top: 10px; } .square-btn-adjust { - border: 0px solid transparent; - -webkit-border-radius: 0px; - -moz-border-radius: 0px; - border-radius: 0px; + border: 0px solid transparent; + -webkit-border-radius: 0px; + -moz-border-radius: 0px; + border-radius: 0px; } p { - font-size: 16px; - line-height: 25px; - padding-top: 20px; + font-size: 16px; + line-height: 25px; } .panel { - border-radius: 0px; + border-radius: 0px; } .navbar-side .nav > li > a > i { - color: #B5B5B5; - padding: 8px; - width: 30px; - text-align: center; + 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); + 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; + z-index: 1; + position: fixed; + width: 260px; top: 60px; - overflow-y: auto; + bottom: 0; + overflow-y : auto; background: #2b2e33; } #page-wrapper { - position: relative; - top: 55px; + position: relative; + top: 55px; } .top-navbar .nav > li > a:hover, .top-navbar .nav > li > a:focus { - text-decoration: none; - background-color: #2497BA; - color: #fff; + 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; + background-color: #2497BA; + border-color: #428bca; } .breadcrumb { - padding: 0; - margin-bottom: 20px; - list-style: none; + padding: 0; + margin-bottom: 20px; + list-style: none; /* background-color: #FAFAFA; */ - border-radius: 0; + border-radius: 0; } /*---------------------------------------------- DASHBOARD STYLES ------------------------------------------------*/ .page-header { - padding-bottom: 9px; - margin: 10px 0 20px; - border-bottom: 1px solid transparent; + padding-bottom: 9px; + margin: 10px 0 20px; + border-bottom: 1px solid transparent; } .panel-left { - width: 35%; - height: 158px; - background: #5CB85C; + 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; + 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; + 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); + font-size: 50px; + padding: 31px 10px 13px; + color: rgba(255, 255, 255, 0.96); } .panel-back { - background-color: #fff; + background-color: #fff; } .panel-default { - border-color: #ECECEC; + border-color: #ECECEC; } .panel-default > .panel-heading { - color: #000; - border-color: #FFF; - font-weight: bold; - background: #FFFFFF; - font-size: 16px; + 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; + padding: 15px 15px 0px; + border-bottom: 1px solid transparent; + border-top-left-radius: 3px; + border-top-right-radius: 3px; } .jumbotron, .well { - background: #fff; + background: #fff; } .noti-box { - min-height: 100px; - padding: 20px; + 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; + 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; + margin: 0 0 3px; } .main-text { - font-size: 25px; - font-weight: 600; + font-size: 25px; + font-weight: 600; } .set-icon { - -webkit-border-radius: 50px; - -moz-border-radius: 50px; - border-radius: 50px; + -webkit-border-radius: 50px; + -moz-border-radius: 50px; + border-radius: 50px; } .panel-primary { - display: inline-block; - margin-bottom: 30px; - width: 100%; + display: inline-block; + margin-bottom: 30px; + width: 100%; } .green { - background-color: #5cb85c; - color: #fff; + background-color: #5cb85c; + color: #fff; } .blue { - background-color: #4CB1CF; - color: #fff + background-color: #4CB1CF; + color: #fff } .red { - background-color: #F0433D; - color: #fff; + background-color: #F0433D; + color: #fff; } .brown { - background-color: #f0ad4e; - color: #fff; + background-color: #f0ad4e; + color: #fff; } .back-footer-red { - background-color: #F0433D; - color: #fff; - border-top: 0px solid #fff; + 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; + 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; + background: #8702A8; + color: #FFFFFF; + font-size: 16px; + font-weight: 300; + text-align: center; } .main-temp-back .text-temp { - font-size: 40px; + 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; + 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; + 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; + color: #000; + font-size: 16px; + line-height: 30px; } /*CHAT PANEL*/ /*Charts*/ .main-chart { - background: #fff; + background: #fff; } .easypiechart-panel { - text-align: center; - padding: 1px 0; - margin-bottom: 20px; + text-align: center; + padding: 1px 0; + margin-bottom: 20px; } .placeholder h2 { - margin-bottom: 0px; + margin-bottom: 0px; } .donut { - width: 100%; + width: 100%; } .easypiechart { - position: relative; - text-align: center; - width: 120px; - height: 120px; - margin: 20px auto 10px auto; + 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; + display: block; + position: absolute; + font-size: 26px; + top: 38px; + width: 120px; } #easypiechart-blue .percent { - color: #30a5ff; + color: #30a5ff; } #easypiechart-teal .percent { - color: #1ebfae; + color: #1ebfae; } #easypiechart-orange .percent { - color: #ffb53e; + color: #ffb53e; } #easypiechart-red .percent { - color: #ef4040; + color: #ef4040; } .chat-panel .panel-body { - height: 450px; - overflow-y: scroll; + height: 450px; + overflow-y: scroll; } .chat-box { - margin: 0; - padding: 0; - list-style: none; + margin: 0; + padding: 0; + list-style: none; } .chat-box li { - margin-bottom: 15px; - padding-bottom: 5px; - border-bottom: 1px dotted #808080; + margin-bottom: 15px; + padding-bottom: 5px; + border-bottom: 1px dotted #808080; } .chat-box li.left .chat-body { - margin-left: 90px; + margin-left: 90px; } .chat-box li .chat-body p { - margin: 0; - color: #8d8888; + margin: 0; + color: #8d8888; } .chat-img>img { - margin-left: 20px; + margin-left: 20px; } footer p { - font-size: 14px; + font-size: 14px; } /*---------------------------------------------- MENU STYLES @@ -385,249 +372,251 @@ footer p { .user-image { - margin: 25px auto; - -webkit-border-radius: 10px; - -moz-border-radius: 10px; - border-radius: 10px; - max-height: 170px; - max-width: 170px; + margin: 25px auto; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + max-height: 170px; + max-width: 170px; } .top-navbar { - margin: 0px; + 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; + 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 { - color: #2DAFCB; + margin-right:5px; + color: #2DAFCB; } .top-navbar .nav > li { - position: relative; - display: inline-block; - margin: 0px; - padding: 0px; + 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; + 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; + text-decoration: none; + color: #319DB5 !important; + background: transparent; } +.top-navbar .nav > li:hover .dropdown-menu{ + display: block; +} .top-navbar .dropdown-menu { - min-width: 230px; - border-radius: 0 0 4px 4px; + 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; + color: #225081; + background: none; } .dropdown-tasks { - width: 255px; + width: 255px; } .dropdown-tasks .progress { - height: 8px; - margin-bottom: 8px; - overflow: hidden; - background-color: #f5f5f5; - border-radius: 0px; + height: 8px; + margin-bottom: 8px; + overflow: hidden; + background-color: #f5f5f5; + border-radius: 0px; } .dropdown-tasks > li > a { - padding: 0px 15px; + padding: 0px 15px; } .dropdown-tasks p { - font-size: 13px; - line-height: 21px; - padding-top: 4px; + font-size: 13px; + line-height: 21px; + padding-top: 4px; } .active-menu { - background-color: #2DAFCB !important; - color: #fff !important; + background-color: #2DAFCB !important; + color: #fff !important; } .active-menu i { - color: #fff !important; + color: #fff !important; } .arrow { - float: right; - margin-top: 8px; + float: right; + margin-top: 8px; } .fa.arrow:before { - content: "\f104"; + content: "\f104"; } .active > a > .fa.arrow:before { - content: "\f107"; + content: "\f107"; } .nav-second-level li, .nav-third-level li { - border-bottom: none !important; + border-bottom: none !important; } .nav-second-level li a { - padding-left: 37px; + padding-left: 37px; } .nav-third-level li a { - padding-left: 55px; + padding-left: 55px; } .sidebar-collapse , .sidebar-collapse .nav { - background: none; + background: none; } .sidebar-collapse .nav { - padding: 0; + padding: 0; } .sidebar-collapse .nav > li > a { - color: #B5B5B5; - background: transparent; - text-shadow: none; + color: #B5B5B5; + background: transparent; + text-shadow: none; } .sidebar-collapse > .nav > li > a { - padding: 12px 10px; + padding: 12px 10px; } .sidebar-collapse > .nav > li { - border-bottom: 1px solid rgba(107, 108, 109, 0.19); + border-bottom: 1px solid rgba(107, 108, 109, 0.19); } ul.nav.nav-second-level.collapse.in { - background: #17191B; + background: #17191B; } .sidebar-collapse .nav > li > a:hover, .sidebar-collapse .nav > li > a:focus { - outline: 0; + outline: 0; } .navbar-side { - border: none; - /* background-color: transparent; */ + border: none; } .top-navbar { - background: #fff; - border-bottom: none; + background: #fff; + border-bottom: none; } .top-navbar .nav > li > a > i { - margin-right: 2px; + 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); + color: #2DAFCB; + background-color: rgb(43, 46, 51); } .dropdown-user li { - margin: 8px 0; + margin: 8px 0; } .navbar-default { border: 0px solid black; - /* background:rgba(0, 0, 0, 0.774); */ } .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; + background-color: #B40101; } .navbar-default .navbar-toggle { - border-color: #fff; + border-color: #fff; } .navbar-default .navbar-toggle .icon-bar { - background-color: #FFF; + background-color: #FFF; } .nav > li > a > i { - margin-right: 10px; - color: #666; + 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; + 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) { - #page-wrapper { - margin: 0 0 0 260px; - padding: 15px 30px; - /* min-height: 1200px; */ - } - .navbar-header{ - height:60px; - width:100%; - display: flex; - justify-content: space-between; - background: #32323a; + + .top-navbar{ + position: relative; } - .navbar-header .navbar-brand{ - width:100%; + .top-navbar .navbar-brand{ + width: 100%; } + - .navbar-side { - z-index: 1; + .navbar-side { + z-index: 1; width: 100%; - position: fixed; - top: 120px; - } - - .navbar { - border-radius: 0px; - } + position: relative; + top: 0; + } + #page-wrapper { + margin: 0; + padding: 15px 30px; + top: 0; + } } diff --git a/src/component/sidenav/index.js b/src/component/sidenav/index.js index 21ebc66..e6a7712 100644 --- a/src/component/sidenav/index.js +++ b/src/component/sidenav/index.js @@ -1,4 +1,5 @@ import React from 'react'; +import { Link,NavLink} from 'react-router-dom'; class SideNav extends React.Component{ @@ -10,73 +11,55 @@ class SideNav extends React.Component{
+
) diff --git a/src/component/topnav/index.js b/src/component/topnav/index.js index a57a6c7..94a4ab5 100644 --- a/src/component/topnav/index.js +++ b/src/component/topnav/index.js @@ -1,17 +1,20 @@ import React from 'react'; - +import { Link} from 'react-router-dom'; class TopNav extends React.Component{ constructor(props){ super(props); + } + // 退出登录 + onLogout(){ + } render(){ return(
- - - Insight + + HAPPYMMALL
+ + ) + } +} +export default PageTitle; diff --git a/src/image/favicon.ico b/src/image/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..a8d3317951f2143b09f8782ddec1a1117a4295d5 GIT binary patch literal 882 zcmeAS@N?(olHy`uVBq!ia0vp^DImyZNVc%($1R&GhkF88WHD=3m|2w9OMQW~i*bs&&C)XN=#x`Sbg)E2Q)%8O`+A z7{SA`DQKm~_S;jNXB>X6@aXAN*S5on3kr`t-YCMw+A_!Pir^y=y5Pdq)DurDQc{_I~I=M<~L)FyHm9$e$!Bw(vO*`sAf!Zmfrj(Jz(Cq6BT - happy mall admin + HAPPY MMALL
diff --git a/src/page/Home/index.js b/src/page/Home/index.js index edc3bb5..7e6455d 100644 --- a/src/page/Home/index.js +++ b/src/page/Home/index.js @@ -1,13 +1,21 @@ import React from 'react'; -import './index.css' +import './index.css'; +import PageTitle from 'component/page-title/index.js'; class Home extends React.Component{ render(){ return (
-

- Dashboard Summary of your App -

+ {/* 因为在 PageTitle 组件页 + 我们用的是 this.props.children + 包含组件 所以 这里就要用双标签 + */} + +
+
+ body +
+
) } diff --git a/src/util/mm.js b/src/util/mm.js new file mode 100644 index 0000000..b4c6f73 --- /dev/null +++ b/src/util/mm.js @@ -0,0 +1,16 @@ + + +// 这块 是通用工具 这里我们把它 建成 类 + +// 类 和 对象 的区别是 +// 类可以做隔离的作用域 + +// 假如这块用对象的话 几个模块 同时使用这一个模块 +// 如果有一个模块把对象里的变量改了 其他模块就都会受影响 +// 使用 类 有 单独的作用域 每个模块的使用 重新的New 一下就好了、 + +class MUtil{ + +} + +export default MUtil \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index bee625f..13fa3bf 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -84,7 +84,8 @@ module.exports = { plugins: [ //这是plugins引入文件 // 这是处理HTML文件 new HtmlWebpackPlugin({ - template: './src/index.html' // 新建了一个模板 和模板的位置 + template: './src/index.html' ,// 新建了一个模板 和模板的位置 + favicon : './favicon.ico' //处理 网站title旁边的图片的 }), // 独立处理css文件 new ExtractTextPlugin("css/[name].css"), -- Gitee From 9e9a9dd1ddb0ec438ec4fc89ff9688aa8d38bdef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=8C=E9=87=8C=E9=BB=91?= <820027697@qq.com> Date: Sun, 29 Jul 2018 23:37:31 +0800 Subject: [PATCH 04/21] =?UTF-8?q?=E9=80=9A=E7=94=A8=E5=BC=80=E5=8F=912?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 17 +++++++++++++---- src/index.html | 1 + 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index e54308e..815048a 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # admin-react-ec #### 项目介绍 -react 电商系统的搭建 +react 电商系统的搭建 #### 软件架构 @@ -16,9 +16,18 @@ 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旁边的图片的 + # }), + + + #### 参与贡献 diff --git a/src/index.html b/src/index.html index 84cc086..93c9fe7 100644 --- a/src/index.html +++ b/src/index.html @@ -11,6 +11,7 @@ HAPPY MMALL +
\ No newline at end of file -- Gitee From 1f438aaf588b885fd7622395469e5b7bb3e7fb18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=87=8C=E9=87=8C=E9=BB=91?= <820027697@qq.com> Date: Mon, 30 Jul 2018 02:28:12 +0800 Subject: [PATCH 05/21] =?UTF-8?q?=E9=80=9A=E7=94=A8=E9=83=A8=E5=88=862?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 + src/app.js | 31 +++++++++------ src/index.html | 3 +- src/page/login/index.js | 81 +++++++++++++++++++++++++++++++++++++++ src/page/login/login.scss | 3 ++ src/util/mm.js | 23 +++++++++++ 6 files changed, 130 insertions(+), 13 deletions(-) create mode 100644 src/page/login/index.js create mode 100644 src/page/login/login.scss diff --git a/README.md b/README.md index 815048a..a9d2bc5 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,9 @@ react 电商系统的搭建 # template: './src/index.html' ,// 新建了一个模板 和模板的位置 # favicon : './favicon.ico' //处理 网站title旁边的图片的 # }), +2.本地的存储功能 +3.翻页模块的引用 diff --git a/src/app.js b/src/app.js index 5a8d252..5bfa386 100644 --- a/src/app.js +++ b/src/app.js @@ -6,24 +6,31 @@ import { BrowserRouter as Router, Route, Redirect, Switch, Link } // 这是页面 做集成用的 import Layout from 'component/layout/index.js'; import Home from 'page/Home/index.js'; - - +import Login from 'page/login/index.js'; class App extends React.Component{ render(){ return(
- - - - - - - - - - + + + {/* 这一块 原版是直接上首页 展示 但是添加了个登陆页 所以路由模块要有所改变 */} + {/* 这里了解了一下 route 的render 属性 这也算是在子路由里添加链接的方式了 */} + {/* 回头看 项目 的话 多多了解一下 路由的问题 */} + { + + + + + + + + + + }} /> + +
diff --git a/src/index.html b/src/index.html index 93c9fe7..c156d24 100644 --- a/src/index.html +++ b/src/index.html @@ -7,11 +7,12 @@ + HAPPY MMALL -
+ \ No newline at end of file diff --git a/src/page/login/index.js b/src/page/login/index.js new file mode 100644 index 0000000..cae97ae --- /dev/null +++ b/src/page/login/index.js @@ -0,0 +1,81 @@ +import React from 'react'; +import './login.scss'; + +class Login extends React.Component{ + constructor(props){ + super(props); + this.state={ + username:"", + password:"", + } + } + // 当用户名 发生 改变 + // onUsernameChange(e){ + // console.log(e.target.value); + // this.setState({ + // username: e.target.value + // }) + // } + // onPasswordChange(e){ + // console.log(e.target.value); + // this.setState({ + // password: e.target.value + // }) + // } +// 代码 重构 + + onInputChange(e){ + + let inputname=e.target.name, + inputvalue= e.target.value; + + this.setState({ + [inputname]:inputvalue + }) + } + onSubmit(e){ + + } + render(){ + return ( +
+
+
+

欢迎登陆 --MMmal 管理系统

+
+
+
+
+ + {this.onInputChange(e)}} + /> +
+
+ + {this.onInputChange(e)}} + /> +
+ + +
+
+
+
+ ) + } +} + +export default Login; \ No newline at end of file diff --git a/src/page/login/login.scss b/src/page/login/login.scss new file mode 100644 index 0000000..8d4a8ac --- /dev/null +++ b/src/page/login/login.scss @@ -0,0 +1,3 @@ +.login-panel{ + margin-top: 30%; +} \ No newline at end of file diff --git a/src/util/mm.js b/src/util/mm.js index b4c6f73..5c85ff4 100644 --- a/src/util/mm.js +++ b/src/util/mm.js @@ -11,6 +11,29 @@ class MUtil{ + // 先写个 通用的请求接口的方法 + request(param){ + // 在请求的时候 可以引用一些组件 jquery 的 Ajax 的请求 也可以的 + //在 后面会引用Ajax的插件 所以一定会引用jquery的 + $.ajax({ + // 1 请求格式 自定义的请求格式 param.type 没有的话 就是get 默认的请求 + type : parm.type ||'get', + // 2 请求地址 + url : param.url || '', + // 指定我们 传输的类型 + dataType : param.dataType || 'json', + // 这是我要传给后端的数据 + data : param.data || null, + //后面的是对数据传输后的回掉的处理 + success(res){ + + }, + error(err){ + + } + }); + + } } export default MUtil \ No newline at end of file -- Gitee From 9d1e7a231bfb1e69fe094c4e922b67bd5c10ed97 Mon Sep 17 00:00:00 2001 From: tom <820027697@qq.com> Date: Mon, 30 Jul 2018 19:38:41 +0800 Subject: [PATCH 06/21] =?UTF-8?q?=E6=9C=AA=E5=AE=8C=E6=88=901?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/2.html | 316 +++++++++++----------------------------- src/page/login/index.js | 9 ++ src/util/mm.js | 65 ++++++--- webpack.config.js | 3 +- 4 files changed, 148 insertions(+), 245 deletions(-) diff --git a/src/2.html b/src/2.html index c38f2e5..6fd1ced 100644 --- a/src/2.html +++ b/src/2.html @@ -1,234 +1,96 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/page/login/index.js b/src/page/login/index.js index cae97ae..938de25 100644 --- a/src/page/login/index.js +++ b/src/page/login/index.js @@ -1,5 +1,8 @@ import React from 'react'; import './login.scss'; +import MUtil from 'util/mm.js' + +const _mm = new MUtil(); class Login extends React.Component{ constructor(props){ @@ -34,7 +37,13 @@ class Login extends React.Component{ }) } onSubmit(e){ + _mm.request({ + url:'http://www.baidu.com' + }).then((res)=>{ + + }, (err)=>{ + }); } render(){ return ( diff --git a/src/util/mm.js b/src/util/mm.js index 5c85ff4..696710b 100644 --- a/src/util/mm.js +++ b/src/util/mm.js @@ -13,25 +13,56 @@ class MUtil{ // 先写个 通用的请求接口的方法 request(param){ + return new Promise((resolve,reject)=>{ + $.ajax({ + // 1 请求格式 自定义的请求格式 param.type 没有的话 就是get 默认的请求 + type: param.type || 'get', + // 2 请求地址 + url: param.url || '', + // 指定我们 传输的类型 + dataType: param.dataType || 'json', + // 这是我要传给后端的数据 + data: param.data || null, + //后面的是对数据传输后的回掉的处理 + success(res) { + // 数据请求成功 + if(0 ===res.status){ + + } + else if(10 ===res.status){ + // 做登录 + } + else{ + + } + }, + error(err) { + console.log(err); + } + }); + }) + + + // 在请求的时候 可以引用一些组件 jquery 的 Ajax 的请求 也可以的 //在 后面会引用Ajax的插件 所以一定会引用jquery的 - $.ajax({ - // 1 请求格式 自定义的请求格式 param.type 没有的话 就是get 默认的请求 - type : parm.type ||'get', - // 2 请求地址 - url : param.url || '', - // 指定我们 传输的类型 - dataType : param.dataType || 'json', - // 这是我要传给后端的数据 - data : param.data || null, - //后面的是对数据传输后的回掉的处理 - success(res){ - - }, - error(err){ - - } - }); + // $.ajax({ + // // 1 请求格式 自定义的请求格式 param.type 没有的话 就是get 默认的请求 + // type : parm.type ||'get', + // // 2 请求地址 + // url : param.url || '', + // // 指定我们 传输的类型 + // dataType : param.dataType || 'json', + // // 这是我要传给后端的数据 + // data : param.data || null, + // //后面的是对数据传输后的回掉的处理 + // success(res){ + + // }, + // error(err){ + + // } + // }); } } diff --git a/webpack.config.js b/webpack.config.js index 13fa3bf..ff9da5f 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -17,7 +17,8 @@ module.exports = { resolve:{ alias:{ page : path.resolve(__dirname, 'src/page'), - component: path.resolve(__dirname, 'src/component') + component: path.resolve(__dirname, 'src/component'), + util: path.resolve(__dirname, 'src/util') } }, -- Gitee From 35186b4fc76db42ad33b7c7b93d9c30a697d3202 Mon Sep 17 00:00:00 2001 From: tom <820027697@qq.com> Date: Tue, 31 Jul 2018 19:13:08 +0800 Subject: [PATCH 07/21] =?UTF-8?q?=E7=99=BB=E5=BD=95=E9=A1=B5=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E6=9B=B4=E6=96=B01?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 13 +++++++++++- src/page/login/index.js | 34 ++++++++++++++++++++---------- src/servers/user-server.js | 17 +++++++++++++++ src/util/mm.js | 42 +++++++++++++++++++++++++++++++------- webpack.config.js | 9 +++++++- 5 files changed, 95 insertions(+), 20 deletions(-) create mode 100644 src/servers/user-server.js diff --git a/README.md b/README.md index a9d2bc5..0327e71 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,18 @@ react 电商系统的搭建 # template: './src/index.html' ,// 新建了一个模板 和模板的位置 # favicon : './favicon.ico' //处理 网站title旁边的图片的 # }), -2.本地的存储功能 +2.接口请求问题 + 接口请求 用的是 promise 来处理的 + 但是提交的数据 有跨域问题 用的是webpack自带的devServer里的功能 + #proxy : { + # '/manage' :{ //这是接口所在的文件夹 url: '/manage/user/login.do', + # target: '跨域的链接', + # changeOrigin : true + # } + # } + + 这块对promise的使用 要求对异步回调函数的结构要非常的清楚 才能在层层嵌套里返回出自己想要的数据 + 3.翻页模块的引用 diff --git a/src/page/login/index.js b/src/page/login/index.js index 938de25..4e30ded 100644 --- a/src/page/login/index.js +++ b/src/page/login/index.js @@ -1,15 +1,21 @@ import React from 'react'; -import './login.scss'; -import MUtil from 'util/mm.js' +import MUtil from 'util/mm.js' ; +import User from 'servers/user-server.js'; + +const _user = new User(); const _mm = new MUtil(); +import './login.scss'; class Login extends React.Component{ constructor(props){ super(props); this.state={ username:"", password:"", + // redirect是我们在URL参数里取的一个东西 + redirect:_mm.getUrlParam('redirect') ||'/' + // 然后需要我们 去在 _mm 定义一个取参数的工具 } } // 当用户名 发生 改变 @@ -37,12 +43,18 @@ class Login extends React.Component{ }) } onSubmit(e){ - _mm.request({ - url:'http://www.baidu.com' - }).then((res)=>{ - - }, (err)=>{ - + // __mm.request() 这里用的是一个函数 + // __mm.request({}) 用{} 来包含 函数里 的一些参数 要传送的参数 + _user.login({ + username:this.state.username, + password:this.state.password + }).then((res)=>{ + //请求成功的话 就要他返回到首页页面 + console.log(this.state.redirect); + // this.props.history.push(this.state.redirect) + // history 是react的提供的 然后 push 压入一个新的页面 这就是来时候的页面 + }, (errMsg)=>{ + _mm.errorTips(errMsg); }); } render(){ @@ -53,7 +65,7 @@ class Login extends React.Component{

欢迎登陆 --MMmal 管理系统

-
+
- - +
diff --git a/src/servers/user-server.js b/src/servers/user-server.js new file mode 100644 index 0000000..e6b3c50 --- /dev/null +++ b/src/servers/user-server.js @@ -0,0 +1,17 @@ +import MUtil from 'util/mm.js' ; +const _mm = new MUtil(); + +class User{ + login(loginInfo){ + // 这里 为了后面可以使用then方法 所以返回值必须是promise 结构所以直接把request整个返回 + return _mm.request({ + type: 'post', + // url 的地址 有跨域问题 需要用 请求劫持 来做 + url: '/manage/user/login.do', + data: loginInfo + + }) + } + } + + export default User; \ No newline at end of file diff --git a/src/util/mm.js b/src/util/mm.js index 696710b..65dbbb2 100644 --- a/src/util/mm.js +++ b/src/util/mm.js @@ -27,20 +27,29 @@ class MUtil{ success(res) { // 数据请求成功 if(0 ===res.status){ - - } + // 这是Promise函数里的then的resolve方法 + // then函数是在login页面里 + // onSubmit()这个方法调用MUtil里的request这个方法 + // 而request里又有 Promise这个处理异步回调函数的方法 + // so 这个resolve方法将会在login页面里执行 + // 这里的参数就会传到login页面里执行 + typeof resolve === 'function' && resolve(res.data,res.msg); + // 这里用来 typeof 是用来判断resolve 是不是function + } + // 没有登录强制登录 else if(10 ===res.status){ - // 做登录 + this.doLogin(); + } else{ - + typeof reject === 'function' && reject(res.msg || res.data); } }, error(err) { - console.log(err); + typeof reject === 'function' && reject(err.statusText); } }); - }) + }); @@ -61,10 +70,29 @@ class MUtil{ // }, // error(err){ - // } + // } // }); } + // 跳转登录 + doLogin(){ + window.location.herf= '/login?redirect='+ encodeURIComponent(window.location.pathname); + } + // 获取url参数的 + getUrlParam(name){ + //xxx.com?param=123¶m1=456 + let queryString = window.location.search.split('?')[1]||'', + reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"), + result = queryString.match(reg) ; + // result :['param=123','','123','&'] + // so 在result里我们想取到name对应的值 就要取下标为2的元素 + return result ? decodeURIComponent(result[2]) : null + } + // 错误信息 + errorTips(errMsg){ + alert(errMsg || "好像哪里不对~~~") + } + } export default MUtil \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index ff9da5f..e85ed8b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -18,7 +18,8 @@ module.exports = { alias:{ page : path.resolve(__dirname, 'src/page'), component: path.resolve(__dirname, 'src/component'), - util: path.resolve(__dirname, 'src/util') + util : path.resolve(__dirname, 'src/util'), + servers : path.resolve(__dirname, 'src/servers') } }, @@ -101,6 +102,12 @@ module.exports = { port:8086 , //修改启动的端口号 historyApiFallback:{ index:'/dist/index.html' + }, + proxy : { + '/manage' :{ + target: 'http://admintest.happymmall.com', + changeOrigin : true + } } } }; -- Gitee From 0c556134d984736668aa708ef789dc71eb83c7d3 Mon Sep 17 00:00:00 2001 From: tom <820027697@qq.com> Date: Wed, 1 Aug 2018 18:56:08 +0800 Subject: [PATCH 08/21] =?UTF-8?q?=E7=94=A8=E6=88=B7=E7=99=BB=E5=BD=95?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/1.html | 69 +++++++++++++++++------- src/2.html | 48 ++++++++++++++++- src/app.js | 13 +++-- src/page/login/index.js | 105 +++++++++++++++++++++++-------------- src/servers/user-server.js | 27 +++++++++- 5 files changed, 195 insertions(+), 67 deletions(-) diff --git a/src/1.html b/src/1.html index 24431ad..e387e4c 100644 --- a/src/1.html +++ b/src/1.html @@ -1,18 +1,51 @@ - - -首页 - -商品 ---商品管理 ---品类管理 - - -订单 ---订单管理 - - -用户 ---用户管理 - - - + $(function () { + $("#frmInput_{InputID}").submit(function () { + return false; + }); + }) + +//留言表单 + function send_footer_message(el) { + var $btn = $(el); + var name = document.getElementById("footer-userName").value; + var country =""; + var telphone = ""; + var company = ""; + var mail = document.getElementById("footer-userEMail").value; + var messages = document.getElementById("footer-Message").value; + var source = window.location.href; + if (name == '') { + alert('Please input your name!'); + return; + } + if (mail == '') { + alert('Please input a valid email address!'); + return; + } + if (messages == '') { + alert('Please input a valid content!'); + return; + } + var data = "source=" + source + "&company=" + company + "&country=" + country + "&telephone=" + telphone + "&message=" + messages + "&name=" + name + "&email=" + mail + "&toemail=vip@zkcorp.com&callback=?"; + $.ajax({ + type: "post", + url: "http://api.inczk.com/mail.ashx", + dataType: "jsonp", + jsonp: "callback", + data: data, + beforeSend: function () { + window.open("/success.html?5641"); + //$("#tip_message").html("the infos is submitting. Please wait a moment!"); + $btn.attr("disabled", "disabled"); + }, + success: function (json) { + //$("#tip_message").html(json.info); + if (json.status == true) { + $("#frmInput_{InputID}").get(0).reset(); + } + }, + complete: function () { + $btn.removeAttr("disabled"); + } + }); + } diff --git a/src/2.html b/src/2.html index 6fd1ced..cc66736 100644 --- a/src/2.html +++ b/src/2.html @@ -93,4 +93,50 @@ {/dede:channel} - \ No newline at end of file + + + + + \ No newline at end of file diff --git a/src/app.js b/src/app.js index 5bfa386..daba725 100644 --- a/src/app.js +++ b/src/app.js @@ -8,27 +8,26 @@ import Layout from 'component/layout/index.js'; import Home from 'page/Home/index.js'; import Login from 'page/login/index.js'; -class App extends React.Component{ +class App extends React.Component{ render(){ return(
- + {/* 这一块 原版是直接上首页 展示 但是添加了个登陆页 所以路由模块要有所改变 */} {/* 这里了解了一下 route 的render 属性 这也算是在子路由里添加链接的方式了 */} {/* 回头看 项目 的话 多多了解一下 路由的问题 */} - { - + ( + - - + - }} /> + )} /> diff --git a/src/page/login/index.js b/src/page/login/index.js index 4e30ded..ec059c0 100644 --- a/src/page/login/index.js +++ b/src/page/login/index.js @@ -14,10 +14,13 @@ class Login extends React.Component{ username:"", password:"", // redirect是我们在URL参数里取的一个东西 - redirect:_mm.getUrlParam('redirect') ||'/' + redirect:_mm.getUrlParam('redirect') || '/' // 然后需要我们 去在 _mm 定义一个取参数的工具 } } + componentWillMount(){ + document.title="登录 --HAPPY SUPER 系统"; + } // 当用户名 发生 改变 // onUsernameChange(e){ // console.log(e.target.value); @@ -39,62 +42,84 @@ class Login extends React.Component{ inputvalue= e.target.value; this.setState({ + // 这里 很好的用到了同名 [inputname]:inputvalue }) } + onInputKeyUp(e){ + // console.log('调用oninputkeyUp 事件'); + if(e.KeyCode === 13){ + console.log('onSubmit 事件'); + this.onSubmit(); + } + } onSubmit(e){ // __mm.request() 这里用的是一个函数 // __mm.request({}) 用{} 来包含 函数里 的一些参数 要传送的参数 - _user.login({ - username:this.state.username, - password:this.state.password - }).then((res)=>{ - //请求成功的话 就要他返回到首页页面 - console.log(this.state.redirect); - // this.props.history.push(this.state.redirect) - // history 是react的提供的 然后 push 压入一个新的页面 这就是来时候的页面 - }, (errMsg)=>{ - _mm.errorTips(errMsg); - }); + let loginInfo={ + username : this.state.username, + password : this.state.password + } + let checkResult = _user.checkLonginInfo(loginInfo); + // 验证通过 + if (checkResult.status){ + _user.login(loginInfo).then((res) => { + //这块是本地存储的功能 在登录完成后 + localStorage.setItem("userInfo",JSON.stringify(res)); + //请求成功的话 就要他返回到首页页面 + // console.log(this.state.redirect); + this.props.history.push(this.state.redirect) + // history 是reac t的提供的 然后 push 压入一个新的页面 这就是来时候的页面 + }, (errMsg) => { + _mm.errorTips(errMsg); + }); + } + // 验证没通过 + else { + _mm.errorTips(checkResult.msg); + } + } render(){ return (
-

欢迎登陆 --MMmal 管理系统

+

欢迎登陆 --SUPER 管理系统

-
-
- - {this.onInputChange(e)}} - /> +
+
+ + { this.onInputKeyUp(e)}} + onChange={(e)=>{this.onInputChange(e)}} + /> +
+
+ + { this.onInputKeyUp(e) }} + onChange={(e)=>{this.onInputChange(e)}} + /> +
+ +
-
- - {this.onInputChange(e)}} - /> -
- - -
-
+
) } } diff --git a/src/servers/user-server.js b/src/servers/user-server.js index e6b3c50..eb09b75 100644 --- a/src/servers/user-server.js +++ b/src/servers/user-server.js @@ -2,6 +2,7 @@ import MUtil from 'util/mm.js' ; const _mm = new MUtil(); class User{ + // 用户登录 login(loginInfo){ // 这里 为了后面可以使用then方法 所以返回值必须是promise 结构所以直接把request整个返回 return _mm.request({ @@ -12,6 +13,30 @@ class User{ }) } +// 检查登录接口的数据是不是合法 +// $.trim 用于去除字符串两端的空白字符 + checkLonginInfo(loginInfo){ + let username = $.trim(loginInfo.username), + password = $.trim(loginInfo.password); + //判断用户名为空 + if(typeof username !=='string' || username.length === 0){ + return { + status: false, + msg: '用户名不能为空' + } + } + // 判断密码为空 + if (typeof password !== 'string' || password.length === 0) { + return { + status: false, + msg: '用户密码不能为空' + } + } + return { + status:true, + msg:'验证通过' + } + } } - + export default User; \ No newline at end of file -- Gitee From 6053ce826c42bf9a8626a190fed39fea75918bcb Mon Sep 17 00:00:00 2001 From: tom <820027697@qq.com> Date: Thu, 2 Aug 2018 19:42:14 +0800 Subject: [PATCH 09/21] =?UTF-8?q?=E9=80=80=E5=87=BA=E5=8A=9F=E8=83=BD?= =?UTF-8?q?=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/1.html | 171 +++++++++++++++------ src/2.html | 281 ++++++++++++++++++---------------- src/component/topnav/index.js | 27 +++- src/page/login/index.js | 8 +- src/servers/user-server.js | 10 ++ src/util/mm.js | 37 ++++- webpack.config.js | 7 + 7 files changed, 357 insertions(+), 184 deletions(-) diff --git a/src/1.html b/src/1.html index e387e4c..82de4f3 100644 --- a/src/1.html +++ b/src/1.html @@ -1,51 +1,132 @@ - $(function () { - $("#frmInput_{InputID}").submit(function () { - return false; - }); - }) - -//留言表单 - function send_footer_message(el) { - var $btn = $(el); - var name = document.getElementById("footer-userName").value; - var country =""; - var telphone = ""; - var company = ""; - var mail = document.getElementById("footer-userEMail").value; - var messages = document.getElementById("footer-Message").value; + + + + + + + + + + + + + + + {channel.title} + + + + + + + + + + +
+
+
+ 在线客服 + 请点击这里 +
+
+
+
+ QQ咨询 + {stl:value type=zk_qq} +
+
+
+
+ 电话咨询 + {stl:value type=zk_tel} +
+
+
+
+ 微信关注 + {stl:value type=zk_wx} +
+
+ +
+
+ 公司地址 +
+

郑州办公区:{stl:value type=zk_add}

+

工业园区:{stl:value type=zk_adds}

+
+
+ + + +
+

给我留言

+
+

您的称呼 + * +

+ +

联系方式 + * +

+ +

留言 + * +

+ +

+ +
+
+ + + + + + + + +​ \ No newline at end of file diff --git a/src/2.html b/src/2.html index cc66736..6bee84f 100644 --- a/src/2.html +++ b/src/2.html @@ -1,142 +1,151 @@ - -
- -
- -
-
-
- {dede:list pagesize=20 titlelen="35"} - - [field:typename/] -

[field:title/]

-
- {/dede:list} + +
- - -
- -
- - - +
+ + + + \ No newline at end of file + }); + } + + + + + + + \ No newline at end of file diff --git a/src/component/topnav/index.js b/src/component/topnav/index.js index 94a4ab5..5baa930 100644 --- a/src/component/topnav/index.js +++ b/src/component/topnav/index.js @@ -1,13 +1,31 @@ import React from 'react'; import { Link} from 'react-router-dom'; +import MUtil from 'util/mm.js'; +import User from 'servers/user-server.js'; + +const _user = new User(); +const _mm = new MUtil(); + class TopNav extends React.Component{ constructor(props){ super(props); + this.state={ + username: _mm.getStorage('userInfo').username || '' + } } // 退出登录 onLogout(){ + _user.logout().then(res=>{ + _mm.removeStorage('userInfo'); + // 因为topNav 这个组件 没有history对象 没有 跳转链接 + // so 直接用window.location.href 来跳转 + // this.props.history.push('/login'); + window.location.href='/login'; + }, errMsg =>{ + _mm.errorTips(errMsg); + }); } render(){ return( @@ -222,7 +240,14 @@ class TopNav extends React.Component{
  • + + { + this.state.username + ? 欢迎 {this.state.username} + : 欢迎 您· + } + +