React+webpack从0到1开发一个todoMvc（五）

todoMvc-5step源码
todoMvc-5step演示

这一章主要将上一章已经成型的TodoMvc增加【注册】、【登陆】、【数据储存】的功能，这里我们把数据保存到leancloud。

1.创建 LeanCloud 账户

你需要去 https://leancloud.cn 创建一个账户。
创建成功后，你需要验证你的邮箱，否则无法创建应用。

2.创建TodoMVC应用

如下图操作：

创建应用

创建成功后就放在那里，因为接下来我们要按照 LeanCloud 的「 JavaScript SDK 文档」来开发登录、注册功能。

3.准备HTML页面

登陆和注册的页面同样也以组件的形式单独抽离出来，样式如图：

登录注册

组件 Login.js代码如下：

import React from 'react'
import { Form, Icon, Input, Button } from 'antd';

const FormItem = Form.Item;

const Login = Form.create()(React.createClass({
  handleSubmit(e) {  // 提交操作
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.loginOrSignUp(values)
      }
    });
  },
  render() {
    const { getFieldDecorator } = this.props.form;
    let text = this.props.value == 1 ?'注册':'登陆' // 判断“登陆”或者注册功能
    return (
        
 // antdUI的表单
          
            {getFieldDecorator('userName', {
              rules: [{ required: true, message: 'Please input your username!' }],
            })(
                } placeholder="Username" />
            )}
          
          
            {getFieldDecorator('password', {
              rules: [{ required: true, message: 'Please input your Password!' }], // 必须填写项
            })(
                } type="password" placeholder="Password" />
            )}
          
          
            
              {text}
            
          
        
    );
  },
}));
export default Login

在app.js中做判断，如果已登录，则显示ToDo应用界面，否则显示登陆界面：

render(){
  if (!this.state.currentUser){ // 判断是否已经登录
    const RadioGroup = Radio.Group;
    return (
        

          
React-Todos
          
            注册
            登入
          
          
        
    )
  } else {
    let info = {
      isAllChecked: this.state.isAllChecked,
      todoCount: this.state.todos.length || 0,
      todoDoneCount: (this.state.todos && this.state.todos.filter((todo) => todo.isDone)).length || 0
    }
    return (
        

          
          
          
        
    )
  }
}

4.注册&登陆

1.安装 LeanCloud SDK
https://leancloud.cn/docs/sdk_setup-js.html

$ npm install leancloud-storage --save

2.初始化
https://leancloud.cn/docs/sdk_setup-js.html#初始化
app.js:

import AV from 'leancloud-storage'

const appId = 'XXXXXXXXXXXXXXXXXXXXXX' //这里的appId就是刚才我们创建的应用的Id，每个人都不一样
const appKey = 'XXXXXXXXXXXXXXXXXXX';
AV.init({ appId, appKey });

3.写入注册登陆的方法
我们先要通读一下 LeanCloud 关于注册的文档，然后按照里面的demo去做修改。
app.js:

//登陆或者注册
loginOrSignUp(values){
  //判断是登陆还是注册
  if (this.state.value === 1){
    let user = new AV.User();
    user.setUsername(values.userName);
    user.setPassword(values.password);
    user.signUp().then((loginedUser) => {
      this.state.currentUser = this.getCurrentUser()
      this.setState({currentUser: this.state.currentUser})
    }, function (error) {
      alert("注册失败")
    })
  } else if (this.state.value === 2){
    console.log("执行登陆")
    AV.User.logIn(values.userName, values.password).then((loginedUser) => {
      this.state.currentUser = this.getCurrentUser()
      this.setState({currentUser: this.state.currentUser})
      this.fetchTodos()
    }, function (error) {
      alert("登陆失败")
    });
  }
}

下面还需要去做【登出】、【保存Todo】等功能。这里我就不贴出来代码了，可以直接去github上面去看我的app.js源码。
至此，我们React+Webpack+Antd 的一个TodoMVC就开发完毕了。希望能帮助小伙伴。

React+webpack从0到1开发一个todoMvc（一）
React+webpack从0到1开发一个todoMvc（二）
React+webpack从0到1开发一个todoMvc（三）
React+webpack从0到1开发一个todoMvc（四）