(一)简单的登录注册

本教程旨在帮助想学习react的前端新手快速入门使用，共分为三步，带领大家完成登录注册功能的同时学习并完善框架。

文章有描述不当或者有错误时请提醒我，能力有限，不喜勿喷！！！

第一篇：带领大家完成登录注册

第二篇：加入redux

第三篇：框架持续优化

安装 create-react-app并生成项目，进入命令行输入：

yarn global add create-react-app
create-react-app react-demo

create-react-app 是官方提供快速生成react项目的命令行工具，可以帮助我们节省配置开发环境的时间。

使用 yarn 替代 npm，yarn对比npm具体优势百度上可以查到，相关命令请参考<<从npm迁移到yarn>>

create-react-app生成的项目结构如下：

node_modules
public
src
    App.css
    App.js
    App.test.js
    index.js
    index.css
    logo.svg
    registerServiceWorker.js
package.json
README.md
yarn.lock

registerServiceWorker.js 主要是用于在生产环境中为用户在本地创建一个service worker 来缓存资源到本地，提升应用的访问速度。

启动服务：

npm start

服务启动成功，浏览器会自动打开主页，修改代码则会自动编绎，快动手试下吧！！！

书写注册页面结构：

修改App.js为Reg.js，App.css为Reg.css，记得更改页面引用：

// Reg.js
import './App.css';    =>    import './Reg.css';

// index.js
import App from './App';    =>    import Reg from './Reg';
ReactDOM.render(<App />, document.getElementById('root'))     =>      ReactDOM.render(<Reg />, document.getElementById('root'));

Reg.js 提供用户输入用户名密码以及确认注册按钮，结构如下:

import React, { Component } from 'react';
import './Reg.css';

class Reg extends Component {
  constructor(props){
      super(props);
      this.state = { // 初始化state
          username: '',
          password: ''
      }
  }
　stateChange(e){
　　   const target = e.target;
       this.setState({
           [target.name]: target.value
       })
　}
  render() {
    return (
      <div onChange={(e)=>this.stateChange(e)}>
          <input name="username" value={this.state.username} placeholder="请输入用户名"/>
          <input name="password" value={this.state.password} placeholder="请输入密码"/>
          <button>立即注册</button>
      </div>
    );
  }
}

export default Reg;

我们在constructor()中做state初始化工作，在constructor中使用this，必须在之前执行super()，不然无法正确访问this。

react 绑定值语法是 { 变量名 }。

react 中无法直接在input输入，必须通过监听input onChange事件修改对应的state来达到输入的效果，如果页面input过多，可以在父级监听onChange事件修改对应的state，修改state使用setSate()，该方法是异步的，则在该方法之后立即访问state可能还是老数据。如果想在state改变时立即获取新state：

// 回调方式 
this.setState({ username : 123}, ()=> {
   console.log(this.state) // 新的 
})

// 或者
this.state.username = 123;
console.log(this.state.username)

为button按钮增加点击事件:

<button onClick={()=>this.saveUser()}>立即注册</button>
// 或者
<button onClick={this.saveUser.bind(this)}>立即注册</button>

// 不可以这样，会出现this指向问题
<button onClick={this.saveUser}>立即注册</button>

()=>{} 是es6箭头函数，参考阮一峰<<es6入门>>

我们在saveUser()里加入用户名密码不能为空的验证：

saveUser() {
	const {
		username,
		password
	} = this.state;
	if(!username) return alert('用户名不能为空');
	if(!password) return alert('密码不能为空');
}

const { username, password } = this.state es6的解构赋值语法。

用户填写用户名以及密码，调用服务器注册接口，这里采用fetch.js，当然也可以使用$.ajax：

安装

yarn add isomorphic-fetch --save-dev

saveUser()新增代码：

......
fetch('http://123.206.99.172:3005/reg', {
    method: 'GET',
    mode: "cors",
    headers: {
	"Content-Type": "application/json"
    },
    body: { username,password }
}).then( res => res.json() ).then( res => {
    // 成功, 处理逻辑
    alert('恭喜您注册成功了');
})

别忘在头部引用:

import fetch from 'isomorphic-fetch';

可以动手尝试在ajax请求时加入简单的loading。

注册页面已完成，我们现在复制一份Res.js 命名为 Login.js 做为登录页面

index.js 引用

import Login from './Login';

接下来集成route，完成路由跳转

安装

yarn add react-router-dom --dev-save

index.js :

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Reg from './Reg';
import Login from './Login';
import registerServiceWorker from './registerServiceWorker';
import { HashRouter, Route } from 'react-router-dom';

const getConfirmation = (message, callback) => {
    const allowTransition = window.confirm(message)
    callback(allowTransition)
}

const supportsHistory = 'pushState' in window.history;

ReactDOM.render(
    <HashRouter
            basename='/'
            forceRefresh={supportsHistory}
            getUserConfirmation={getConfirmation}
            keyLength={6}>
            <div>
              <Route exact path='/' component={Reg}></Route>
               <Route exact path='/login' component={Login}></Route>
            </div>
      </HashRouter>, document.getElementById('root'));
registerServiceWorker();

forceRefresh 如果为true，则路由器将在页面导航中使用全页刷新。您可能只希望在不支持HTML5历史记录API的浏览器中使用此功能；

keyLength location.key的长度。默认为6；

basename 为所有位置添加一个基准URL；

getUserConfirmation 导航到此页面前执行的函数，默认使用 window.confirm

具体配置参数以及用法请移步<<初探 React Router 4.0>>

路由集成完毕，接下来我们加入注册成功时自动跳转至登录页面

Reg.js 注册成功回调里增加:

this.props.history.push('Login')

至此登录与注册功能已全部完成，由于此处只做演示用，服务端并没有区分登录与注册。

posted @ 2017-09-01 15:06 木易宗龙阅读(457) 评论(0) 收藏举报

刷新页面返回顶部

<<react入门三步曲>>(一)简单的登录注册

公告