From da50a1ac702cfd238fbbc34bbb7efc26787d3d5d Mon Sep 17 00:00:00 2001 From: zuiidea Date: Sun, 11 Sep 2016 01:31:53 +0800 Subject: [PATCH] signIn --- src/config.js | 8 +++---- src/utils/lib.js | 3 ++- src/view/index.js | 46 ++++++++++++++++++++++----------------- src/view/user/signIn.js | 27 +++++++++++++++++------ src/view/user/signIn.less | 7 +++++- 5 files changed, 58 insertions(+), 33 deletions(-) diff --git a/src/config.js b/src/config.js index e3da610..99a7dee 100644 --- a/src/config.js +++ b/src/config.js @@ -7,14 +7,14 @@ // 遵循统一的规范, 好维护, 交给其他人也比较简单 module.exports = { - name: 'Antd管理后台', // 项目的名字 - footer: 'Antd版权所有 © 2016', // footer中显示的字 + name: 'Ant Design管理后台', // 项目的名字 + footer: 'Ant Design版权所有 © 2016', // footer中显示的字 debug: true, // 是否开启debug模式, 不会请求后端接口, 使用mock的数据 - logLevel: 'info', // 日志级别, 目前支持debug/info/warn/error 4种级别 + logLevel: 'debug', // 日志级别, 目前支持debug/info/warn/error 4种级别 api: { // 对后端请求的相关配置 - host: 'http://remoteHost:8080', // 调用ajax接口的地址, 默认值空, 如果是跨域的, 服务端要支持CORS + host: 'http://localhost', // 调用ajax接口的地址, 默认值空, 如果是跨域的, 服务端要支持CORS path: '/api', // ajax请求的路径 timeout: 15000, // 请求的超时时间, 单位毫秒 }, diff --git a/src/utils/lib.js b/src/utils/lib.js index d0c7353..5038be0 100644 --- a/src/utils/lib.js +++ b/src/utils/lib.js @@ -1,6 +1,7 @@ import config from 'config'; import ajax from './ajax'; -import logger from './Logger'; +import Logger from './Logger'; import './lib.less'; +const logger = Logger.getLogger('mockAjax'); module.exports = {ajax,config,logger}; diff --git a/src/view/index.js b/src/view/index.js index af6b0bc..90c3b8a 100644 --- a/src/view/index.js +++ b/src/view/index.js @@ -1,19 +1,21 @@ import React from 'react' import ReactDOM from 'react-dom' -import Header from '../components/Header'; -import Footer from '../components/Footer'; -import Sidebar from '../components/Sidebar'; -import SignIn from './user/SignIn'; -// import SignIn from '../components/Login'; -import Breadcrumb from '../components/Breadcrumb'; +import Header from '../components/Header' +import Footer from '../components/Footer' +import Sidebar from '../components/Sidebar' +import SignIn from './user/SignIn' +// import SignIn from '../components/Login' +import Breadcrumb from '../components/Breadcrumb' import {ajax,config,logger} from '../utils/lib.js' import {Spin, message} from 'antd' const App = React.createClass({ getInitialState: function () { return { - loading: true, - login: false, + // loading: true, + // login: false, + loading: false, + login: true, userName: '未登录', } }, @@ -22,34 +24,38 @@ const App = React.createClass({ }, componentDidMount(){ if (!this.state.login) { - // const hide = message.loading('正在获取用户信息...', 0) + const hide = message.loading('正在获取用户信息...', 0) ajax.get(`${config.getAPIPath()}${config.login.getCurrentUser}`).end((err, res) => { if (ajax.isSuccess(res) && !config.debug) { - // hide() + hide() this.loginSuccess(res.body.data) } else { if (config.isSSO()) { - // hide() - // logger.debug('not login, redirect to SSO login page') + hide() + logger.debug('not login, redirect to SSO login page') const redirect = encodeURIComponent(window.location.href) window.location.href = `${config.login.sso}${redirect}` } else { - // hide() + hide() message.error('获取用户信息失败, 请重新登录') - // logger.debug('not login, redirect to Login component') + logger.debug('not login, redirect to Login component') this.setState({loading: false, login: false}) } } }) } }, + loginSuccess (name, showMsg){ + logger.debug('callback logingSuccess, name = %s', name) + if (showMsg) + message.success('登录成功') + this.setState({loading: false, login: true, userName: name}) + }, render(){ - // if (this.state.loading) { - // return ; - // } - - if (!this.state.login) { - return ; + if (this.state.loading) { + return + } else if (!this.state.login) { + return } return ( diff --git a/src/view/user/signIn.js b/src/view/user/signIn.js index d05c0a7..cf5c81e 100644 --- a/src/view/user/signIn.js +++ b/src/view/user/signIn.js @@ -4,7 +4,7 @@ import { ajax, config, logger } from '../../utils/lib' import { Icon, message, Button, Row, Col, Form, Input, Select} from 'antd' import './signIn.less' -const FormItem = Form.Item; +const FormItem = Form.Item let SignIn = React.createClass({ getInitialState(){ @@ -13,24 +13,36 @@ let SignIn = React.createClass({ } }, handleSubmit(e){ - var _this = this; - e.preventDefault(); + var _this = this + e.preventDefault() this.props.form.validateFieldsAndScroll((errors, values) => { - console.log(values); + if (!!errors) { + return + } + ajax.post(`${config.getAPIPath()}${config.login.validate}`).type('form').send(values).end((err, res) => { + if (ajax.isSuccess(res)) { + if (this.props.loginSuccess) + this.props.loginSuccess(res.body.data, true) + else + message.info(`登录成功, 用户名: ${res.body.data}`) + } else { + message.error(`登录失败: ${res.body.message}, 请联系管理员`) + } + }) }) }, render(){ - const { getFieldProps } = this.props.form; + const { getFieldProps } = this.props.form const username = getFieldProps('username', { rules: [ {required: true, message: '不能为空'} ] - }); + }) const password = getFieldProps('password', { rules: [ {required: true, message: '不能为空'} ] - }); + }) return (
@@ -50,6 +62,7 @@ let SignIn = React.createClass({ diff --git a/src/view/user/signIn.less b/src/view/user/signIn.less index b84b0a9..cdf36dc 100644 --- a/src/view/user/signIn.less +++ b/src/view/user/signIn.less @@ -7,7 +7,8 @@ height: 320px; padding: 36px; box-shadow: 0 0 100px rgba(0,0,0,.08); - button{ + + button { width: 100%; } } @@ -16,6 +17,7 @@ text-align: center; height: 40px; line-height: 40px; + cursor: pointer; img { width: 40px; @@ -29,3 +31,6 @@ display: inline-block; } } +.ant-spin-container,.ant-spin-nested-loading{ + height: 100%; +}