login

mock/app.js

@@ -0,0 +1,36 @@
+const qs = require('qs')
+const Mock = require('mockjs')
+const Watch = require("watchjs")
+
+let adminUsersData = {}
+if (!global.adminUsersData) {
+  const data = !!localStorage.getItem("antdAdminUsersData")
+    ? JSON.parse(localStorage.getItem("antdAdminUsersData"))
+    : [
+      {
+        username: 'guest',
+        password: 'guest'
+      }
+    ]
+  adminUsersData = data
+  global.adminUsersData = adminUsersData
+  if (!localStorage.getItem("antdAdminUsersData")) {
+    localStorage.setItem("antdAdminUsersData", JSON.stringify(adminUsersData))
+  }
+} else {
+  adminUsersData = global.adminUsersData
+}
+
+Watch.watch(adminUsersData, function () {
+  localStorage.setItem("antdAdminUsersData", JSON.stringify(adminUsersData))
+})
+
+
+module.exports = {
+  'POST /api/login'  (req, res) {
+    console.log(req);
+    console.log(res);
+    console.log("858484");
+    res.json({success: true})
+  },
+}

src/index.js

@@ -5,6 +5,7 @@ import dva from 'dva'
 const app = dva()
 
 // 2. Model
+app.model(require('./models/app'))
 app.model(require('./models/users'))
 
 // 3. Router

src/models/app.js

@@ -0,0 +1,36 @@
+import {login} from '../services/app'
+import {parse} from 'qs'
+
+export default {
+  namespace : 'app',
+  state : {
+    login: false,
+    loading: false,
+    loginButtonLoading: false
+  },
+  effects : {
+    *login({
+      payload
+    }, {call, put}) {
+      yield put({ type: 'showButtonLoading' })
+      const data = yield call(login, parse(payload))
+      if (data) {
+        yield put({type: 'loginSuccess', payload: {
+            data
+          }})
+      }
+    }
+  },
+  reducers : {
+    loginSuccess(state) {
+      return {
+        login: true,
+        loading: false,
+        loginButtonLoading: false
+      }
+    },
+    showLoading(state) {
+      return { ...state, loginButtonLoading: true }
+    }
+  }
+}

src/models/login.js

@@ -1,15 +0,0 @@
-// export default {
-//   namespace: 'login',
-//   state: {
-//     list: [],
-//     total: null,
-//   },
-//     effects: {
-//         *query(){},
-//     },
-//     reducers: {
-//         loginSuccess(){
-//
-//         }
-//     }
-// }

src/routes/app.js

@@ -1,5 +1,7 @@
-import React, { PropTypes } from 'react'
+import React, {PropTypes} from 'react'
+import {connect} from 'dva'
 import classnames from 'classnames'
+import Login from './login'
 import Header from '../components/layout/header'
 import Bread from '../components/layout/bread'
 import Footer from '../components/layout/footer'
@@ -7,29 +9,51 @@ import Sider from '../components/layout/sider'
 import styles from '../components/layout/main.less'
 import '../components/layout/common.less'
 
-function App({ children, location }) {
+function App({children, location, dispatch,app}) {
+  const {login, loading,loginButtonLoading} = app
+  const loginProps = {
+    loading,
+    loginButtonLoading,
+    onOk(data) {
+      dispatch({
+        type: 'app/login',
+        payload: data,
+      })
+    },
+  }
+
   return (
-    <div className={styles.layout}>
-      <aside className={styles.sider}>
-        <Sider />
-      </aside>
-      <div className={styles.main}>
-        <Header location={location} />
-        <Bread location={location} />
-        <div className={styles.container}>
-          <div className={styles.content}>
-            { children }
+    <div>{login
+        ? <div className={styles.layout}>
+            <aside className={styles.sider}>
+              <Sider/>
+            </aside>
+            <div className={styles.main}>
+              <Header location={location}/>
+              <Bread location={location}/>
+              <div className={styles.container}>
+                <div className={styles.content}>
+                  {children}
+                </div>
+              </div>
+              <Footer/>
+            </div>
           </div>
-        </div>
-        <Footer />
-      </div>
-    </div>
+        : <Login {...loginProps}/>}</div>
   )
 }
 
 App.propTypes = {
   children: PropTypes.element.isRequired,
   location: PropTypes.object,
+  dispatch: PropTypes.func,
+  loading: PropTypes.object,
+  loginButtonLoading:PropTypes.object,
+  login: PropTypes.object,
 }
 
-export default App
+function mapStateToProps({app}) {
+  return {app}
+}
+
+export default connect(mapStateToProps)(App)

src/routes/login.js

@@ -1,8 +1,83 @@
-import React from 'react'
+import React, {PropTypes} from 'react'
+import {
+  Icon,
+  message,
+  Button,
+  Row,
+  Col,
+  Form,
+  Input,
+  Select
+} from 'antd'
+import {config} from '../utils'
 import styles from './login.less'
 
-const Login = () => <div>
-  <h1>404 Not Found</h1>
-</div>
+const FormItem = Form.Item
 
-export default Login
+const login = ({
+  loginButtonLoading,
+  onOk,
+  form: {
+    getFieldDecorator,
+    validateFieldsAndScroll
+  }
+}) => {
+  console.log(loginButtonLoading);
+
+  function handleOk() {
+    validateFieldsAndScroll((errors, values) => {
+      if (errors) {
+        return
+      }
+      onOk(values)
+    })
+  }
+
+  return (
+    <div className={styles.form}>
+      <div className={styles.logo}>
+        <img src={config.logoSrc}/>
+        <span>Ant Design</span>
+      </div>
+      <form>
+        <FormItem hasFeedback>
+          {getFieldDecorator('username', {
+            rules: [
+              {
+                required: true,
+                message: '姓名未填写'
+              }
+            ]
+          })(<Input size="large" placeholder="账户"/>)}
+        </FormItem>
+        <FormItem hasFeedback>
+          {getFieldDecorator('password', {
+            rules: [
+              {
+                required: true,
+                message: '姓名未填写'
+              }
+            ]
+          })(<Input size="large" placeholder="密码"/>)}
+        </FormItem>
+        <Row>
+          <Button type="primary" size="large" onClick={handleOk} loading={loginButtonLoading}>
+            登录
+          </Button>
+        </Row>
+        <p>
+          <span>账号：guest</span>
+          <span>密码：guest</span>
+        </p>
+      </form>
+    </div>
+  )
+}
+
+login.propTypes = {
+  form: PropTypes.object,
+  loginButtonLoading:PropTypes.object,
+  onOk: PropTypes.func
+}
+
+export default Form.create()(login)

src/routes/login.less

@@ -0,0 +1,51 @@
+.form {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -160px 0 0 -160px;
+  width: 320px;
+  height: 320px;
+  padding: 36px;
+  box-shadow: 0 0 100px rgba(0,0,0,.08);
+
+  button {
+    width: 100%;
+  }
+
+  p {
+    color: rgb(204, 204, 204);
+    text-align: center;
+    margin-top: 16px;
+
+    span {
+      &:first-child {
+        margin-right: 16px;
+      }
+    }
+  }
+}
+
+.logo {
+  text-align: center;
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  margin-bottom: 24px;
+
+  img {
+    width: 40px;
+    margin-right: 8px;
+  }
+
+  span {
+    vertical-align: text-bottom;
+    font-size: 16px;
+    text-transform: uppercase;
+    display: inline-block;
+  }
+}
+
+.ant-spin-container,
+.ant-spin-nested-loading {
+  height: 100%;
+}

src/services/app.js

@@ -0,0 +1,10 @@
+import { request } from '../utils'
+import qs from 'qs'
+
+export async function login(params) {
+  console.log("48646");
+  return request('/api/login', {
+    method: 'post',
+    data:params,
+  })
+}

src/utils/mock.js

@@ -1,6 +1,5 @@
 const Mock = require('mockjs')
-const mockUser = require("../../mock/users")
-const mockData = [require("../../mock/users")]
+const mockData = [require("../../mock/users"),require("../../mock/app")]
 
 function serialize(str) {
   let paramArray = str.split("&")
@@ -22,7 +21,7 @@ for (let i in mockData) {
       res.json = function (data) {
         result = data
       }
-      mockUser[key](options, res)
+      mockData[i][key](options, res)
       return result
     })
   }