23.登录页面布局及功能实现19-07-09

代码见https://gitee.com/XiaoKunErGe/JianShu.git历史版本第24次提交。

1页面

1.在pages目录下创建login文件夹，文件夹下添加index.js和style.js
2.到App.js中配置路由
import Login from './pages/login';
<Route path='/login' exact component={Login}></Route>
index.js

import React, { PureComponent } from 'react';
import { LoginWrapper,LoginBox,Input,Button} from './style'

class Login extends PureComponent {
  render(){
   return(
      <LoginWrapper>
        <LoginBox>
          <Input placeholder='账号' />
          <Input placeholder='密码' type='password' />
          <Button>登录</Button>
        </LoginBox>
      </LoginWrapper>
    )
  }
}

style.js

import styled from 'styled-components';

export const LoginWrapper = styled.div`
  z-index: 0;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 56px;
  background: #eee;
`;
export const LoginBox = styled.div`
  width: 400px;
  height: 180px;
  margin: 100px auto;
  padding-top: 20px;
  background: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,1)
`;
export const Input = styled.input`
  display: block;
  width: 200px;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  margin: 10px auto;
  color: #777;
`;
export const Button = styled.div`
  width: 220px;
  height: 30px;
  line-height: 30px;
  color: #fff;
  background: #3194d0
  border-radius: 15px;
  margin: 10px auto;
  text-align: center;
`;

页面配置完成。

2登录功能实现

1.在login页面下添加store文件夹，创建actionCreators, constants,index,reducer文件
2.到该store下的index中将reducer,actionCreators,constants导出

import reducer from './reducer';
import * as actionCreators from './actionCreators';
import * as constants from './constants';

export { reducer,actionCreators,constants };

3.到最外层的store下的reducer中接收login的reducer，合并统一管理

import {reducer as loginReducer } from '../pages/login/store';

const reducer = combineReducers({
  header: headerReducer,
  home: homeReducer,
  detail: detailReducer,
  login: loginReducer
});

4.接下来到login下的reducer中添加数据 login 以判断是否登录

import * as constants from './constants';
import { fromJS } from 'immutable';

const defaultState = fromJS({
  login: false
});
export default (state = defaultState, action) => {
  switch(action.type) {
    default:
      return state;
  }
};

5.然后到commen文件夹下找到header的index文件夹下添加接收login数据代码，

const mapStateToProps= (state)=>{
  return{
    focused:state.getIn(['header','focused']),
    list: state.getIn(['header','list']),
    page: state.getIn(['header','page']),
    totalPage: state.getIn(['header','totalPage']),
    mouseIn: state.getIn(['header','mouseIn']),
    login: state.getIn(['login','login'])
  }
}

找到判断登录状态的UI组件,实现登录状态和未登录状态的平判断,如果没有登录就跳转到登录界面。

const { login } = this.props;

<NavItem className='left'>下载App</NavItem>
  {
     login ?
           <NavItem>退出</NavItem> :
      <Link to='/login'>
            <NavItem className='right'>登录</NavItem>
      </Link>
  }
<NavItem className='right'>

6.未登录时跳转到登录页面进行登录过程编写
到login的index中接收 login状态数据

const mapStateToProps = (state) => ({
  loginStates: state.getIn(['login','login'])
});

然后判断是否登录，登录状态跳转到首页，未登录状态进行登录

class Login extends PureComponent {
  render(){
    const{ loginStates }=this.props;
    if (!loginStates){
    return(
      <LoginWrapper>
        <LoginBox>
          <Input placeholder='账号' ref={(input) => {this.account = input}}/>
          <Input placeholder='密码' type='password' ref={(input) => {this.password=input}}/>
          <Button onClick={() => this.props.login(this.account,this.password)}>登录</Button>
        </LoginBox>
      </LoginWrapper>
    )}else {
      return <Redirect to='/'/>
    }
  }
}

const mapDispatchToProps = (dispatch) => ({
  login(accountElem, passwordElem){
    // console.log(accountElem.value, passwordElem.value);
    //到actionCreators中处理数据再把数据
    dispatch(actionCreators.login(accountElem.value, passwordElem.value))
  }});

7.制作模拟数据-->在public下的api目录下添加login.json文件,
到login目录下的actionCreator中处理数据,如果成功就将value: true传给reducer

login.json

{
  "success": true,
  "data": true
}

actionCreator.js

export const login = (account, password) => {
  return (dispatch) => {
    axios.get('/api/login.json?account=' + account + '&password' + password)
      .then((res)=>{
        // console.log(res);
        const result = res.data.data;
        if (result) {
          dispatch(changeLogin())
        }else {
          alert('登录失败')
        }
      });
  }
};
const changeLogin = () => ({
  type: constants.CHANGE_LOGIN,
  value:true
});

8.在login下的reducer中将改变login的值从而改变登录状态

export default (state = defaultState, action) => {
  switch(action.type) {
    case constants.CHANGE_LOGIN:
      return state.set('login', action.value);
    default:
      return state;
  }
};

退出登录

点击 “退出” 退出登录状态
1.到comment目录下header的index中找到退出UI组件，添加logout方法
const { logout } = this.props;

{
     login ?
        <NavItem onClick={logout} className='right'>退出 
     </NavItem> :
     <Link to='/login'>
          <NavItem className='right'>登录</NavItem>
      </Link>
 }

2.这里要到login目录下的index中处理数据，所以要引入login的actionCreators
import { actionCreators as loginActionCreators } from '../../pages/login/store'

const mapDispatchToProps=(dispatch)=>{
  return{
     logout() {
      dispatch(loginActionCreators.logout())
    }
}}

3.到login的actionCreators中处理数据

export const logout =() => ({
  type: constants.LOGOUT,
  value: false
});

4.在login下的reducer中将改变login的值,从而t退出登录状态

case constants.LOGOUT:
      return state.set('login', action.value);