前端(八):react基础上海时时乐走势图官网

把Route改成AuthRoute

npm start

  1.安装npm、cnpm

# 安装node.js 从而安装npm,它会在当前用户家目录下生成node_moudules文件夹,来对npm安装的全局第三方包进行管理
brew install node

# npm安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org

# 测试
cnpm install express -g

会员登录在我们的好多项目中都有用到,比如在后台管理系统,它的第一步就需要你进行登录,还有在我们常见的京东、淘宝、网易云音乐等一系列的软件上面都需要进行登录。

删掉 src目录下面所有文件并新建index.js

  5.动态数据交互--state

  state用于负责处理动态数据。数据需要在构造函数中通过this.state事先声明,并在事件中通过this.setSate完成数据更新。

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            nameList:["Sun", "Li", "Zhao", "Qian"]
        }
    }
    addPerson(){
        this.setState({
            nameList: [...this.state.nameList, "zhou"]
        })
    }
    render (){
        return (
            <div>
                <button onClick={()=>this.addPerson()}>加入周先生</button>
                <ul>
                    {this.state.nameList.map((name, index) => <li key={index 1}>{name}</li>)}
                </ul>
            </div>

        )
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

接下来说一下重点,验证它是否登录,我们专门建一个js文件

在src目录新建一下文件和文件夹

  8、组件的生命周期

  组件的声明周期可分成三个状态:Mounting,已插入真实 DOM;Updating,正在被重新渲染;Unmounting:已移出真实 DOM。如下图所示(本图根据Rosen老师示例改写)。

  上海时时乐走势图官网 1

  各个函数的释义(摘自菜鸟教程):

  componentWillMount 在渲染前调用,在客户端也在服务端。

  componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

  componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

  shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。

shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps, nextState);
    console.log(this.props, this.state);
    if(this.state.update === true){
        // 只有在给定条件发生的时候返回true,也就是可以重新渲染
        return true
    }
   // 只有在给定条件发生的时候返回true,也就是可以重新渲染
   if(nextState.update === true){
        // 在下一个状态达到条件时重新渲染
        return true
    }
    return false // 其它条件返回false,不重新渲染
}

  componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

  componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

  componentWillUnmount在组件从 DOM 中移除的时候立刻被调用。

1 import {AuthRoute} from '../assets/common/function'
 "plugins": [
      "transform-decorators-legacy", // 配合react-redux 的connent 支持装饰器写法
      [
          "import",
          {
            "libraryName": "antd-mobile",
            "style": "css"
          }
      ] // antd-mobile 按需加载
  ]

  4.静态数据传递--props

  组件间数据通过this.props属性来进行数据传递。父组件在标签化时通过属性的方式传递数据,子组件通过this.props来获取所有的数据。

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    render (){
        return <h2>App: { this.props.name }, { this.props.age }</h2>
    }
}
class App2 extends React.Component{
    render (){
        const name = "Sun", age=5000;

        return (
            <div>
                <h2>App2: { this.props.name }, { this.props.age }</h2>
                <App name={name} age={age} />
            </div>
        )
    }
}
ReactDOM.render(<App2 name="Li" age="20" />, document.getElementById('root'));

  注意:1.props只能传递静态数据,无法与用户交互;2.{}不是Object对象,如果想写<App2 obj={name: "Li", age: 20} />,就必须提前声明。3.style样式作为数据传递是无效且荒谬的。

const obj = {name: "Li",age: 20};
<App2 obj={obj}/>   

现在我们可以看到,我使用的post方法向服务器端发送数据,当请求成功的时候,我们暂时把它存储在本地,这里也可以结合redux来做,有兴趣的可以参考我的另一篇博客初步了解redux来完成,然后进行跳转,如果请求没有成功我们可以直接返回它失败的原因,

const express = require('express')

// 生成express路由中间件
const Router = express.Router();

// CheckLogin.js 用户查询用户是否登录的接口
Router.get('/info', (req, res) => {
    return res.json({code: 1,msg: '未登录'})
})

module.exports = Router

  3.组件间与状态机、状态机与状态机

  内层的组件调用dispatch,那么它的父组件一直到最外层组件都需要使用store属性一层一层地传递状态机。

  状态机与状态机之间需要使用redux中的combineReducers合并成一个对象。并由dispatch调用的action来查找其对应的reducer一级返回的state。

  举个例子:

  在src目录下新建index.redux.js文件,建立两个reducer以及各自的action。

// src/index.redux.js
const Add = "add", Dec="dec";
export function reducerOne(state={name: "monkey", age: 5000}, action){
    switch (action.type){
        case Add:
            state.age   ;
            if (state.age > 5005){
                state.name = "old monkey";
            }
            return state;
        case Dec:
            if (state.age <= 4995){
                state.name = "small monkey";
            }
            state.age --;
            return state;
        default:
            return state;
    }
}
export function add() {
    return {type: Add}
}
export function dec() {
    return {type: Dec}
}

export function reducerTwo(state="孙悟空", action){
    if(action.type >= 5005){
        state = "斗战胜佛";
    }else if(action.type <= 4995){
        state = "小猕猴";
    }
    return state;
}
export function monkey(number) {
    return {type: number}
}

  在src/index.js中写入如下代码:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, combineReducers } from "redux";
import thunk from 'redux-thunk';

import { reducerOne, reducerTwo, add, dec, monkey } from "./index.redux";

const reducer = combineReducers({reducerOne, reducerTwo});
const store = createStore(reducer, applyMiddleware(thunk));

class Nick extends React.Component{
    render(){
        const store = this.props.store;
        const state = store.getState();
        return <h2 >Now this monkey is so-called { state.reducerTwo }</h2>
    }
}
class Monkey extends React.Component{
    render (){
        const style={
            display: "inline-block",
            width: "150px",
            height: "40px",
            backgroundColor: "rgb(173, 173, 173)",
            color: "white",
            marginRight: "20px"
        };
        const store = this.props.store;
        const state = store.getState();
        const name = state.reducerOne.name, age = state.reducerOne.age;
        return (
            <div>
                <h2>this { name } is { age } years old.</h2>
                <button style={style} onClick={()=>{store.dispatch(add()); store.dispatch(monkey(age))}}>增加一岁</button>
                <button style={style} onClick={()=>{store.dispatch(dec()); store.dispatch(monkey(age))}}>减少一岁</button>
                <Nick store={store} />
            </div>
        )
    }
}
function render() {
    ReactDOM.render(<Monkey store={store} add={ add } dec={ dec } />, document.getElementById('root'));
}
render();
store.subscribe(render);

  在Monkey组件中,onClick同时触发两个状态机reducerOne,reducerTwo。Nick组件接收点击事件触发的状态修改之后的store,并从中获取相应的字段进行渲染。在这里需要注意:

  1.使用combineReducers将Monkey复合组件涉及到的状态机进行合并。

  2.多个reducer时,store.getState()获取的是一个对象。可以通过reducer名来获取对应reducer的state。

  3.store和action必须一级一级的往下传递。

最后我们到主路由页面引入我们的这个验证登录

下一步,就是搭建数据库,之前安装的MongoDB,mongoose, express派上了用场

一、环境搭建

现在我们的会员登录就完成了。

components 新建 checkLogin 判断用户是否登录

  4.使用react-redux

   react-redux简化了redux在组件的依次传递问题。这里对上面的代码进行修改:

  - src/index.redux.js文件内容如下:reducer中的state此时必须重新定义,不能直接再返回原来的state。然后微调了一下显示的数据。

// src/index.redux.js
const Add = "add", Dec="dec";
export function reducerOne(state={name: "monkey", age: 5000}, action){
    switch (action.type){
        case Add:
            if (state.age >= 5004){
                state.name = "old monkey";
            }else if(state.age > 4994 && state.age < 5004){
                state.name = "monkey";
            }
            return {...state, age: state.age 1};
        case Dec:
            if (state.age <= 4996){
                state.name = "small monkey";
            }else if(state.age > 4996 && state.age <= 5005){
                state.name = "monkey";
            }
            return {...state, age: state.age-1};
        default:
            return state;
    }
}
export function add() {
    return {type: Add}
}
export function dec() {
    return {type: Dec}
}
export function reducerTwo(state="孙悟空", action){
    if(action.type >= 5004){
        return "斗战胜佛";
    }else if(action.type <= 4996){
        return "小猕猴";
    }
    return state;
}
export function monkey(number) {
    return {type: number}
}

  - src/index.js内容如下:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, combineReducers } from "redux";
import thunk from 'redux-thunk';
import { Provider, connect } from 'react-redux';

import { reducerOne, reducerTwo, add, dec, monkey } from "./index.redux";

const reducer = combineReducers({reducerOne, reducerTwo});
const store = createStore(reducer, applyMiddleware(thunk));

class Nick extends React.Component{
    render(){
        return <h2 >Now this monkey is so-called { this.props.nick }</h2>
    }
}
class Monkey extends React.Component{
    render (){
        const style={
            display: "inline-block",
            width: "150px",
            height: "40px",
            backgroundColor: "rgb(173, 173, 173)",
            color: "white",
            marginRight: "20px"
        };
        return (
            <div>
                <h2>this { this.props.reducerOne.name } is { this.props.reducerOne.age } years old.</h2>
                <button style={style} onClick={()=>{this.props.add(); this.props.monkey(this.props.reducerOne.age)}}>增加一岁</button>
                <button style={style} onClick={()=>{this.props.dec();this.props.monkey(this.props.reducerOne.age)}}>减少一岁</button>
                <Nick nick={ this.props.reducerTwo } />
            </div>
        )
    }
}
const mapStateProps = state=>{
    return { reducerOne: state.reducerOne, reducerTwo: state.reducerTwo }
};
const actionCreator = { add, dec, monkey };
Monkey = connect(mapStateProps, actionCreator)(Monkey);  // 其实是加了一层装饰器


function render() {
    ReactDOM.render(
        <Provider store={store}>
            <Monkey/>
        </Provider>
        , document.getElementById('root'));
}
render();

  首先,从react-redux中引入Provider,用来包装app Monkey,然后将store传递给Provider即可。

  其次,用装饰器对app Monkey进行装饰,并传递进去两个参数,第一个参数是组件所需要的reducer中的状态(这里把两个reducer的状态全部写了进来),第二个参数是action指令。connect函数会根据将reducer和action一一对应起来,所以后面直接用action函数即可。

  再次,onClick绑定action只需要写成onClick={this.props.action}即可,这里需要变更两个状态,所以用箭头函数包裹了一下。

  connect的这种写法看起来不爽,可以用装饰器的形式写。但是需要做一下babel配置:

# 1.生成配置文件
cnpm run eject
# 2.安装插件
cnpm install babel-plugin-transform-decorators-legacy --save
# 3.在package.json中的"babel"中做如下配置:
src/package.json

"babel": {
  "presets": [
    "react-app"
  ],
  "plugins":[
    "transform-decorators-legacy"
  ]
},

  此时将装饰器的那三行代码改为一行,写在Monkey类上面即可。

@connect(state=>({ reducerOne: state.reducerOne, reducerTwo: state.reducerTwo }), { add, dec, monkey })
class Monkey extends React.Component{
  ...
}

下面我们直接上代码

  npm install antd-mobile -S  // UI框架
  npm install redux -S  // redux
  npm install react-redux -S  // react-redux
  npm install react-router-dom -S  // react路由
  npm install axios -S // react请求交互
  npm install redux-thunk -S // redux中间件 配合redux解决异步问题
  npm install babel-plugin-transform-decorators-legacy -D // 配合react-redux 支持@装饰器
  npm install mongoose -D // 安装mondoose MongoDB数据库插件
  npm install express -S // 基于node开发,搭建请求环境
  npm install babel-plugin-import -S antd-mobile按需加载babel插件
  npm install body-parser -S  后台数据接口用户传进来的参数解析插件
  npm install cookie-parser -S 通过cookie存储用户登录状态
  PS: 合并安装飞起来~

  npm run eject // 释放react关于webpack的封装配置
  sudo brew install mongodb(我这里是mac安装方式,其他平台可百度下)

  2.React.Component

  React.Component是自定义组件的父类,必须重写render方法来完成组件的声明和返回。所谓组件,就是用js类定义的一组html标签、样式、数据、事件等的整合,该类可以用<类名 />的方式进行标签化(实例化),实例化时自动调用render方法,并最终交由React.render完成渲染。

 1 import React from 'react';
 2 import {Route,Redirect} from 'react-router-dom'
 3 const AuthRoute = ({ component: Component, ...rest }) => (
 4     <Route {...rest} render={props => (
 5         localStorage.getItem("uid") ? (//如果本地存储里面有我们就进行跳转,没有就进行重定向返回登录页面
 6             <Component {...props}/>
 7         ) : (
 8             <Redirect to={{
 9                 pathname: '/news', //重定向的页面
10                 state: { from: props.location }
11             }}/>
12         )
13     )}/>
14 );
15 export {
16     AuthRoute
17 }

在checkLogin.js里面请求user/info 来判断是否登录
继续完善 checkLogin

  以前只使用django和jquery做小项目开发,所以决定搞一搞react框架。React 特点:声明式设计、虚拟DOM、JSX、组件、数据驱动。

 1 fetch(url,{
 2     method: 'post', //使用post方法
 3     mode: 'cors', //跨域
 4     headers:{
 5         'Content-Type': 'application/x-www-form-urlencoded'
 6     },  //请求头
 7     body:'cellphone=' this.state.username '&password=' this.state.password //方式数据
 8 }).then(res=>res.json())
 9     .then(json=>{if(json.code === 200){
10         localStorage['uid']=json.data.uid; //本地存储
11         this.props.history.replace("/detail")
12     }else {
13         console.log(json.data)
14     }})

上海时时乐走势图官网 2

二、react一些概念

<!--public/index.html简化如下-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div id="root"></div>
</body>
</html>

  react简单示例只保留简化后的public/index.html和src/index.js。

image.png

  1.react基本用法

  redux是独立的用于状态管理的第三方包,它建立状态机来对单项数据进行管理。

上海时时乐走势图官网 3

  上图是个人粗浅的理解。用代码验证一下:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from "redux";

function reducer(state={name: "monkey", age: 5000}, action){
    switch (action.type){
        case "add":
            state.age   ;
            return state;
        case "dec":
            if (state.age <= 4995){
                state.name = "small monkey";
            }
            state.age --;
            return state;
        default:
            return state;
    }
}
const store = createStore(reducer);
const add = {type: "add"}, dec={type: "dec"};


class App extends React.Component{
    render (){
        const style={
            display: "inline-block",
            width: "150px",
            height: "40px",
            backgroundColor: "rgb(173, 173, 173)",
            color: "white",
            marginRight: "20px"
        };
        const store = this.props.store;
        // console.log(store.getState());
        const obj = store.getState();
        // console.log(obj);
        return (
            <div>
                <h2>this { obj.name } is { obj.age } years old.</h2>
                <button style={style} onClick={()=>store.dispatch(this.props.add)}>增加一岁</button>
                <button style={style} onClick={()=>store.dispatch(this.props.dec)}>减少一岁</button>
            </div>
        )
    }
}
function render() {
    ReactDOM.render(<App store={store} add={ add } dec={ dec } />, document.getElementById('root'));
}
render();
store.subscribe(render);

  因为action必须是个对象,所以只能写成add = {type: "add"}的形式,而不能直接写参数"add"。同样地,在reducer中写switch时将action.type作为参数。

  action和state一一对应,要使用action必须要在reducer里声明。

  redux没有用state来实现动态数据更新,而是通过props来传递数据,因此在组件内部只能通过props获取store,以及store.getState()获取state。

  redux将ReactDOM.render进行了一次封装来设置监听。

  redux对数据和组件进行了解耦,因而可以进行文件拆分。

  把action写成函数的形式:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from "redux";

const Add = "add", Dec="dec";
function reducer(state={name: "monkey", age: 5000}, action){
    switch (action.type){
        case Add:
            state.age   ;
            if (state.age > 5005){
                state.name = "old monkey";
            }
            return state;
        case Dec:
            if (state.age <= 4995){
                state.name = "small monkey";
            }
            state.age --;
            return state;
        default:
            return state;
    }
}
const store = createStore(reducer);
class App extends React.Component{
    render (){
        const style={
            display: "inline-block",
            width: "150px",
            height: "40px",
            backgroundColor: "rgb(173, 173, 173)",
            color: "white",
            marginRight: "20px"
        };
        const store = this.props.store;
        const state = store.getState();
        return (
            <div>
                <h2>this { state.name } is { state.age } years old.</h2>
                <button style={style} onClick={()=>store.dispatch(add())}>增加一岁</button>
                <button style={style} onClick={()=>store.dispatch(dec())}>减少一岁</button>
            </div>
        )
    }
}
function render() {
    ReactDOM.render(<App store={store} add={ add } dec={ dec } />, document.getElementById('root'));
}
render();
store.subscribe(render);

redux 新建user.redux.js

  3.组件内部参数声明和使用

  组件内部可以声明参数,无论是textNode还是其它Node,都是以 { 参数 } 的形式被组件调用。组件react虚拟DOM的具体实现方式,它来完成对页面和业务逻辑的划分。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    render (){
        const string = "hello, react!";
        const style1 = {
            color: "white"
        };
        const style2 = {
            textAlign:"center",
            fontStyle: "border",
            backgroundColor: "green"
        };
        return (
            <div style={style1}>
                {/*这是一段注释*/}
                <h2 style={style2}>{ string }</h2>
            </div>
        )
    }
}

ReactDOM.render(<div>
    <h2>hello, react!</h2>
    <App />
</div>, document.getElementById('root'));

  组件间可以实现嵌套。

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    render (){
        return <h2>这是子组件</h2>
    }
}
class App2 extends React.Component{
    render (){
        const style = {
            backgroundColor: "blue"
        };
        return (
            <div style={style}>
                <h2>这是父组件</h2>
                <App />
            </div>
        )
    }
}

ReactDOM.render(<App2 />, document.getElementById('root'));

注册页面

三、redux、redux-thunk与react-redux

  react本身能够完成动态数据的监听和更新,如果不是必要可以不适用redux。

  安装redux: cnpm install redux --save。

user.js

   2.react异步

  当一个父组件中有多个子组件时,如果每一个组件发生状态变化,store都要重新渲染一遍。使用异步可以只重新渲染发生状态变化的组件。

  安装redux和thunk的中间件redux-thunk:cnpm install redux-thunk。引入两个函数,并修改createStore如下,其余代码保持不变:

import { createStore, applyMiddleware } from "redux";
import thunk from 'redux-thunk';

const store = createStore(reducer, applyMiddleware(thunk));

  当然还可以使用compose在控制台添加调试功能,前提是这需要在浏览器中安装redux插件。

import { createStore, applyMiddleware, compose } from "redux";
const store = createStore(
    reducer,
    compose(
        applyMiddleware(thunk),
        window.devToolsExtension?window.devToolsExtension():f=>f
    )
);

全局安装react官方推荐脚手架 create-react-app

  1.ReactDOM.render

  index.js中的ReactDOM.render函数用于将标签或者组件渲染到public下的页面中。第一个参数可以是任意的单个标签、div包裹的多个标签,以及自定义的组件Component。

import React from 'react'
import ReactDOM from 'react-dom'

// 配合applyMiddleware解决redux异步问题
import thunk from 'redux-thunk'

// createStore接受reducer生成stote compose合并生成store其他数据 applyMiddleware接受thunk解决redux异步问题
import {createStore, compose, applyMiddleware} from 'redux'

// Provider负责传递store
import {Provider} from 'react-redux'

// 引入react-router-dom各种路由元素
import {BrowserRouter as Router, Route} from 'react-router-dom'

// 引入判断是否登录组件
import CheckLogin from './components/checkLogin/CheckLogin'

// 引入页面路由组件
import Login from './containers/login/login'
import Register from './containers/register/register'

// 生成store
import reducer from './reducer'

const store = createStore(reducer, compose(
    applyMiddleware(thunk), //解决redux异步问题
    window.devToolsExtension ? window.devToolsExtension() : f => f // chrome控制台redux工具
))

// 页面渲染
ReactDOM.render(
    <Provider store={store}>
        <Router>
            <div className="react-login-register">
                    <CheckLogin></CheckLogin>
                    <Route path='/login' component={Login}></Route>
                    <Route path='/register' component={Register}></Route>
            </div>
        </Router>
    </Provider>,
    document.getElementById('root')
)

  6.事件绑定

  在react中,事件以属性的方式直接在标签中使用,其调用函数要用一层函数包裹。调用函数可以直接写在对象内部,并且要用bind进行监听和更新。

  在上面的示例中,我们通过这一行代码代替了bind的过程:

<button onClick={()=>this.addPerson()}>加入周先生</button>

  鉴于js中没有局部作用域只有函数作用域,所以如果直接写onClick={this.addPerson}时,this指的就是windo对象。用一层函数包裹时,this对象指的就是这个函数。

  其它的做法有两种:

  首先,在事件绑定时直接使用this.function:

<button onClick={this.addPerson}>加入周先生</button>

  其次可以用箭头函数来声明addPerson函数,本质上和上面使用的方法一样:

addPerson = ()=>{
    this.setState({
        nameList: [...this.state.nameList, "zhou"]
    })
};

  或者可以不改addPersonn函数,而是在构造器中添加上这么一句话:

this.addPerson = this.addPerson.bind(this)
const express = require('express');
const userRouter = require('./user')

// 新建app
const app = express();

app.use('/user',userRouter)

app.listen(8000, () => {
    `server is running at port 8000 success~~~`
})

四、react-router-dom

  react-router-dom是专门用于处理路由的组件。

  BrowserRouter用以包裹app,它会在this.props添加一些环境参数,这非常用。

  Route用于将路由和组件绑定,一个路由对应一个页面(组件),或者Link。其重要的两个属性为path和component,path可以接收对象,也可以接收一个url字符串。

  Link用于将链接和Route进行绑定。

  Switch用于当前路由下的所有子路由,一般和Redirect配合使用,用于重定向那些未定义的子路由。

  Redirect:重定向。其重要的属性为to,只能指向一个url字符串。

  用例一: Route Componnet Redirect

  1.建立两个路由指向两个组件:Login和Home, 以及一个用户登录状态的reducer。

  2.进入时首先重定向到Home页面.Home组件判断用户登录状态,登录则打印登录信息并提供注销按钮,点击按钮会重定向到Login页面;未登录则直接重定向到Login页面。

  3.用户登录则重定向到Home页面,未登录则打印登录提示并提供登录按钮,点击按钮会重定向到Home页面。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from "redux";
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
import {BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

import { reducer } from "./reducer";
import { Login } from "./Login";
import { Home } from "./Home";

const store = createStore(reducer, applyMiddleware(thunk));
ReactDOM.render(
    (<Provider store={store}>
        <BrowserRouter>
           <Switch>
               <Route path="/login" component={ Login } />
               <Route path="/monkey" component={ Home } />
               <Redirect to={{ pathname: "/monkey" }}/>
           </Switch>
        </BrowserRouter>

    </Provider>),
    document.getElementById('root')
);

// src/Home.js
import React from "react";
import {connect} from 'react-redux';
import { Redirect } from 'react-router-dom';
import {logout} from "./reducer";

@connect(state=>state, {logout})
class Home extends React.Component{
    render(){
        const app = (
            <div>
                <h2>这是home界面</h2>
                <button onClick={this.props.logout}>点击注销</button>
            </div>
        );
        return this.props.isLogin ? app : <Redirect to={{ pathname: "/login"}} />
    }
}
export { Home }

// src/Login.js
import React from 'react';
import {connect} from 'react-redux';
import {Redirect} from 'react-router-dom';
import {login} from "./reducer";

@connect(state=>state, {login})
class Login extends React.Component{
    render(){
        console.log(this.props);
        const app = (
            <div>
                <h2>请先登录!</h2>
                <button onClick={this.props.login}>点击登录</button>
            </div>
        );
        return this.props.isLogin ? <Redirect to={{pathname: "/home"}} /> : app
    }
}
export { Login }

// src/reducer.js
// 用户登录状态
const LOGIN = "login";
const LOGOUT = "logout";

export function reducer(state={isLogin: false, user: "Li"}, action) {
    switch (action.type){
        case LOGIN:
            return {...state, isLogin:true};
        case LOGOUT:
            return {...state, isLogin:false};
        default:
            return state
    }
}

export function login() {
    return {type: LOGIN}
}
export function logout() {
    return {type: LOGOUT}
}

  用例二:Route Component Link

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch, Redirect, Link } from 'react-router-dom';


function LinkOne(){
    return <h2>我是LineOne组件,被Route绑定给了一个Link链接</h2>
}
function LinkTwo() {
    return <h2>我是LineThree组件,被Route绑定给了一个Link链接</h2>
}
function LinkThree(){
    return <h2>我是LineThree组件,被Route绑定给了一个Link链接</h2>
}
function Test(){
    return <h2>这是无效的路由,你不要搞事情!</h2>
}

ReactDOM.render(
    (<BrowserRouter>
        <div>
            <ul>
                <li><Link to="/">LinkOne</Link></li>
                <li><Link to="/two">LinkTwo</Link></li>
                <li><Link to="/three">LinkThree</Link></li>
            </ul>
            <Switch>
                <Route path="/" exact component={ LinkOne } />
                <Route path="/two" component={ LinkTwo } />
                <Route path="/three" component={ LinkThree } />
                <Route path='/:location' component={ Test } />
            </Switch>
        </div>
    </BrowserRouter>),
    document.getElementById('root')
);

 

  

 

创建react项目

  7.条件渲染

  render本身是一个实例方法,支持js中的各种代码逻辑。可以用if-else来控制返回结果。条件渲染在用户登录和重定向中使用的比较频繁。

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {isLogIn: false}

    }
    login (){
        this.setState({isLogIn: true})
    };
    logout(){
        this.setState({isLogIn: false})
    }
    render (){
        let button=null;
        if (this.state.isLogIn){
            button = <button onClick={()=>this.logout()}>注销</button>
        }else {
            button = <button onClick={()=>this.login()}>登录</button>
        }
        return button
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

  也可以用三元表达式简写:

render (){
    return (
        <div>
            {this.state.isLogIn ? <button onClick={()=>this.logout()}>注销</button> : <button onClick={()=>this.login()}>登录</button>}
        </div>
    )
}

  注意:由于{}传递的数据可以是任意值,所以需要用div包裹。

reducer.js 引入user.redux.js 并合并

  2.安装react全家桶

# 安装create-react-app
cnpm install create-react-app -g
# 利用create-react-app 来创建一个项目
create-react-app 项目名称     # 假设这里的项目名称是my-app
# 进入项目文件夹
cd my-app
# 生成配置文件
# cnpm run eject       # 生成scripts文件夹和config文件夹,cnpm
# 启动服务
cnpm start           # 它相当于执行 scrpits/starts.js,这个已经在package.json中配置好了命

此时可以看到请求地址已经可以访问
这里抛出一个问题,
项目地址是http://localhost:3001/,
请求地址是http://localhost:8000/user/info
由于浏览器同源策略限制,直接请求会存在着跨域问题(协议,域名,端口任何一个不一致,即视为跨域),所以这里可以通过代理请求的方式解决跨域问题
在package.json 添加 "proxy": "http://localhost:8000"

  9、综合:使用component请求后台数据并交给组件

  在my-app下建立server/server.js文件,启动一个后端服务:

const express = require('express');

const app = express();
app.get("/data", function (req, res) {
    res.json({"name": "old monkey", "age": 5000})
});
app.listen(3002, function () {
    console.log("Node app start at port 3002.")
});

  Terminal启动该服务: node server/server.js。此时可以访问 

  安装axios: cnpm install axios --save。并在package.json的配置文件中添加"proxy"配置,让它转换端口到3002:

// package.json
{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-scripts": "1.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:3002"
}

  在src/index.js中写组件:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class App extends React.Component{
    constructor(props){
        super(props);
        this.state = {name: "monkey", age: 100}

    }
  // 在component内部使用ajax请求数据,并通过setState传递给App。
    componentDidMount(){
        axios.get("/data").then(res=>{
            if(res.status === 200){
                console.log(res);
                this.setState({name: res.data.name, age: res.data.age});
            }
        }, err=>{
            console.log(err);
        })
    }
    addAge(){
        this.setState({age: this.state.age   1})
    };
    decAge(){
        this.setState({age: this.state.age - 1})
    }
    render (){
        const style={
            display: "inline-block",
            width: "150px",
            height: "40px",
            backgroundColor: "rgb(173, 173, 173)",
            color: "white",
            marginRight: "20px"
        };
        return (
            <div>
                <h2>this {this.state.name } is { this.state.age } years old.</h2>
                <button style={style} onClick={()=>this.addAge()}>增加一岁</button>
                <button style={style} onClick={()=>this.decAge()}>减少一岁</button>
            </div>
        )
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

image.png

  3.文件目录结构

my-app
    - config                        # 项目默认配置文件,由npm run eject生成
    - .gitignore                    # git配置
    - node_modules                  # 本地第三方安装包
    - package.json                  # npm项目配置,里面记录了项目的名字、版本、依赖包、和自定义配置 
    - package-lock.json
    -  public                       # 公共资源
       - index.html             # 静态页面
    - README.md            
    -  scripts                      # 配置pacakage.json中的"scripts"定义的命令
        - build.js                  # build命令,可由npm build执行,生成静态文件用于迁移到生产环境
        - start.js                  # start命令
        - test.js                
    -  src
        - App.css                   # 创建项目时自动生成的css样式,没用
        - App.js                    # react组件
        - App.test.js
        - index.css                 # 入口文件的样式
        - index.js                  # 入口文件
        - log.svg
        - registerServiceWorker.js

  项目启动时,会加载public下的index.html文件,并进而执行index.js,从而完成整个页面的渲染。

继续

接下来完成登录部分

大致思路是绑定事件

// login.js
/*
 *  登录
 * */
handleLogin() {
    this.props.login(this.state)
}

定义执行调用actions creator

// login.js
import {connect} from 'react-redux'

@connect (
    state => state,
    {login}
)

编写login actions creator

// user.redux.js
// 登录时候调用
export function login({username,pwd}) {
    if(!username || !pwd) {
        return toDoFail('账号密码不能为空')
    }
    return dispatch => {
        axios.post('/user/login',{username,pwd})
            .then(res => {
                if(res.status === 200 && res.data.code === 0) {
                    dispatch(loginSuccess(res.data.data))
                }else {
                    dispatch(toDoFail(res.data.msg))
                }
            })
    }
}

编写user/login这个接口

 // user.js
 Router.post('/login', (req, res) => {
    const {username, pwd} = req.body;
    console.log(username);
    User.findOne({username, pwd: my_md5(pwd)}, _filter, (err, doc) => {
        if (!doc) {
            return res.json({code: 1, msg: '账号密码不正确'})
        }
        if (err) {
            return res.json({code: 1, msg: '服务器异常'})
        }
        res.cookie('userId',doc._id) // 登录成功保存cookie
        return res.json({code: 0, msg: '登录成功', data: doc})
    })
})

登录的步骤和注册部分很多相似之处
接下来,完善判断用户是否登录的接口,'/user/info'

// user.js
Router.get('/info', (req, res) => {
    const {userId} = req.cookies
    if (!userId) {
        res.json({code: 1, msg: '用户未登录'})
    }
    User.findOne({_id: userId}, _filter, (err, doc) => {
        if (err) {
            return res.json({code: 1, msg: '服务器异常'})
        }
        if (doc) {
            return res.json({code: 0, msg: '用户已登录',data: doc})
        }
    })
})
PS: server.js 记得使用cookie插件
const cookieParser = require('cookie-parser')
app.use(cookieParser())

最后,我们在登录完成之后所进入的页面展示用户的基本信息

// checkLogin.js
axios.get('/user/info')
  .then(res => {
      console.log(res);
      if(res.status === 200) {
          if(res.data.code === 0) {
              this.props.getUserInfo(res.data.data)
          }else {
              this.props.history.push('/login')
          }
      }
  })


// user.redux.js
// 登录之后获取用户信息
export function getUserInfo(userInfo) {
    return {
        type: GET_USER_INFO,
        payload: userInfo
    }    
}

对此次demo完善退出登录
跳转到login页面,清空cookies

// workerInfo.js
import React, {Component} from 'react';
import {connect} from 'react-redux'
import {Button,WingBlank} from 'antd-mobile'
import {Redirect} from 'react-router-dom'
import {loginOut} from '../../redux/user.redux'

@connect(
    state => state,
    {loginOut}
)

class WorkerInfo extends Component {
    render() {
        return (
            <div>
                {this.props.user.redirectTo ? <Redirect to={this.props.user.redirectTo}></Redirect>:null}
                <h3>worker信息页面</h3>
                <p>用户名称:{this.props.user.username} </p>
                <p>用户类型:{this.props.user.type} </p>
                <WingBlank>
                    <Button onClick={this.handleLoginOut.bind(this)} type="primary">退出登录</Button>
                </WingBlank>
            </div>
        );
    }
    /*
    *   退出登录
    * */
    handleLoginOut() {
        this.props.loginOut();
    }
}

export default WorkerInfo;

编写退出登录action creator

// 退出登录调用
export function loginOut() {
    return dispatch => {
        axios.get('/user/loginOut')
                .then(res => {
                if (res.status === 200 && res.data.code === 0) {
                    dispatch(loginOutSuccess(res.data.data))
                } else {
                    dispatch(toDoFail(res.data.msg))
                }
            })
    }
}

编写退出登录接口

// user.js
// 退出登录
Router.get('/loginOut', (req, res) => {
    const {userId} = req.cookies;
    if(!userId) {
        res.json({code: 1, msg: '服务器异常'})
    }
    res.cookie('userId','');
    return res.json({code: 0, msg:'退出成功'})
})

到此整个demo写完

留下一个报错信息,但是对功能没有影响

登录或退出成功或注册成功进行页面跳转后,会报错
Warning: You tried to redirect to the same route you're currently on: "/workerInfo"
Warning: You tried to redirect to the same route you're currently on: "/bossInfo"
Warning: You tried to redirect to the same route you're currently on: "/login"
后续解决~~ 带理解~

import {Component} from 'react';
import {withRouter} from 'react-router-dom'  // 由于checkLogin 不是路由,要想用跳转的话得引入withRouter

@withRouter
class CheckLogin extends Component {
    componentDidMount() {
        // 登录注册两个页面不需要判断
        if(filterCheck.indexOf(this.props.location.pathname) > -1) {
            return;
        }
         // 在这里请求相关接口判断用户是否完成登录
        axios.get('/user/info')
            .then(res => {
                if(res.status === 200) {
                    if(res.data.code === 0) {

                    }else {
                        this.props.history.push('/login')
                    }
                }
            })
    }
    render() {
        return null;
    }
}

export default CheckLogin;

containers 新建登录注册两个页面基本内容

上海时时乐走势图官网 4

image.png

import {Component} from 'react';
import {withRouter} from 'react-router-dom'

@withRouter
class CheckLogin extends Component {
    componentDidMount() {
         // 在这里请求相关接口判断用户是否完成登录
        axios.get('xxxxx')
            .then(res => {
                if(res.status === 200) {
                    if(res.data.code === 0) {

                    }else {
                        this.props.history.push('/login')
                    }
                }
            })
    }
    render() {
        return null;
    }
}

export default CheckLogin;
   // login.js
  import React, {Component} from 'react'
  import {List,InputItem,WingBlank,WhiteSpace, Button} from 'antd-mobile'
  import Logo from '../../components/logo/logo'

  class Login extends Component {
      render() {
          return (
              <div className="page-login">
                  <Logo />
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <List>
                      <InputItem>lbj-账号</InputItem>
                      <InputItem>lbj-密码</InputItem>
                  </List>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WingBlank>
                      <Button type="primary">登录</Button>
                      <WhiteSpace></WhiteSpace>
                      <Button onClick={this.handleGoRegister.bind(this)} type="primary">去注册</Button>
                  </WingBlank>
              </div>
          )
      }
      /*
      *     去注册
      * */
      handleGoRegister() {
          this.props.history.push('/register');
      }
  }

  export default Login

components 放置组件
containers 放置页面
redux 放置redux元素集合文件(定义各种常量,reducers, create actions)
reducer.js 集合redux里面各种文件

  import React, {Component} from 'react'
  import {List, InputItem, WingBlank, WhiteSpace, Button, Radio} from 'antd-mobile'
  import Logo from '../../components/logo/logo'

  class Register extends Component {
      constructor(props) {
          super(props);
          this.state = {
              username: '', //账号
              pwd: '', // 密码
              pwdConfirm: '', // 确认密码
              type: 'worker', // 用户类型 默认求职者
          }
      }

      render() {
          const RadioItem = Radio.RadioItem
          return (
              <div className="page-register">
                  <Logo/>
                  <List>
                      <InputItem onChange={value => this.handleChange('username', value)}>lbj-账号</InputItem>
                      <InputItem onChange={value => this.handleChange('pwd', value)}>lbj-密码</InputItem>
                      <InputItem onChange={value => this.handleChange('pwdConfirm', value)}>lbj-确认</InputItem>
                  </List>
                  <WhiteSpace></WhiteSpace>
                  <List>
                      <RadioItem
                          onClick={() => this.handleChange('type', 'worker')}
                          checked={this.state.type === 'worker'}>牛人    </RadioItem>
                      <RadioItem
                          onClick={() => this.handleChange('type', 'boss')}
                          checked={this.state.type === 'boss'}>BOSS</RadioItem>
                  </List>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WhiteSpace></WhiteSpace>
                  <WingBlank>
                      <Button type="primary">登录</Button>
                      <WhiteSpace></WhiteSpace>
                      <Button onClick={this.handleGoLogin.bind(this)} type="primary">已有账号,去登录</Button>
                  </WingBlank>
              </div>
          )
      }

      /*
      *     去登录
      * */
      handleGoLogin() {
          this.props.history.push('/login')
      }

      /*
      *     绑定表单值
      * */
      handleChange(key, val) {
          this.setState({
              [key]: val
          })
      }
  }

  export default Register

中场休息完继续

通过上面的checkLogin,访问其他页面在没有登录的情况下,自动跳转到登录页面。

从注册页面开始完善
因为项目是结合redux来操作,所以登录注册都是生成各种action,通过之前写好的user这个reducer来改变state的初始值

在注册页面写好register方法并导出给注册按钮调用,从而生成action,给reducer使用

// user.redux.js
import axios from 'axios'  // 用axios做请求

// 定义常量
const REGISTER_SUCCESS = 'REGISTER_SUCCESS'; // 注册成功
const TODO_ERRSHOW = 'TODO_ERRSHOW'; // 操作失败

// state初始值
let initState = {
    redirectTo: '', // 完成之后跳到哪里
    username: '', // 账号
    pwd: '', // 密码
    pwdConfirm: '', // 确认密码
    type: '', // 用户类型
    msg: '', // 错误消息
    isLogin: false // 是否登录
}

export function user(state=initState,action) {
    switch (action.type) {
       case REGISTER_SUCCESS:
            return {...state,...action.data, msg: '', redirectTo: '/login'}
       case TODO_ERRSHOW:
            return {...state,msg: action.msg}
       default:
            return state;
    }
}

function registerFail(msg) {
    return {
        msg,
        type: TODO_ERRSHOW
    }
}

function registerSuccess(data) {
    return {
        data,
        type: REGISTER_SUCCESS
    }
}

// register是一个action creator ,返回的action供user这个reducer使用,从而改变state
export function register({username,pwd,pwdConfirm,type}) {
    if(!username || !pwd) {
        registerFail('账号密码不能为空')
    }
    if(pwd !== pwdConfirm) {
        registerFail('两次密码不一致')
    }
    return dispatch => {
        axios.post('/user/register',{username,pwd,type})
            .then(res => {
                if(res.status === 200 && res.data.code === 0) {
                    dispatch(registerSuccess(res.data.data))
                }else {
                    dispatch(registerFail(res.data.msg))
                }
            })
    }
}

接下来在register.js里面的注册按钮绑定的事件调用register这个方法

// register.js
import {connect} from 'react-redux'
import {register} from '../../redux/user.redux'
import Logo from '../../components/logo/logo'

@connect(
    state=> state,
    {register}
)

注意上面几行代码,之前在package.json提到的plugins transform-decorators-legacy是为上面的connect装饰器支持@写法准备的。

装饰器connnect接受两个参数,给props定义的数据和函数

// 注册按钮绑定的事件
/*
*   注册
* */
handleRegister() {
    this.props.register(this.state)
}

因为在register这个函数里面,做了表单验证判断后开始请求“/user/register”这个接口,那么接下来完善这个接口

登录注册的接口设计到数据库,这里选用了mongoDB这种类型的数据库最为后台数据支撑

新建数据模型

// server/model.js
const mongoose = require('mongoose')

// mongoose 连接这个数据库并生成"react-login-register"这个集合
mongoose.connect('mongodb://127.0.0.1:27017/react-login-register')

// 连接成功后的打印
mongoose.connection.on('connected',() => {
    console.log('mongo connect success');
})

// 创建数据模型
const models = {
    user: {
        'username': {type:String, require: true}, // 账号
        'pwd': {type:String, require: true}, // 密码
        'type': {type:String, require: true} // 用户类型
    }
}

// 遍历生成数据模型
for (let m in models) {
    mongoose.model(m, new mongoose.Schema(models[m]))
}

// 导出供其他地方获取
module.exports = {
    getModel: function (m) {
        return mongoose.model(m)
    }
}

// server/user.js
// 获取注册用户列表
Router.get('/list',(req,res) => {
    //清空所有用户
    // User.remove({},(err,doc) => {
    //  if(!err) {
    //      console.log(`用户清空成功`);
    //  }
    // })
    // 在user这个数据模型中查询所有用户
    User.find({},(err,doc) => {
        if(!err) {
            return res.json({code: 0, data: doc,msg: '用户列表获取成功'})
        }
    })
})

完成注册接口

// user.js
const express = require('express')
const model = require('./model')
const User = model.getModel('user')
// md5加密
const utils = require('utility')

// 生成express路由中间件
const Router = express.Router();

// 封装MD5加密规则
function my_md5(pwd) {
    const xiao = 'akdf352FHhjfFHI34=123-`.WRL23K23fhKJFHkhFJ@1231!*@%!^';
    return utils.md5(utils.md5(xiao   pwd))
}

//过滤调不想暴露的数据
const _filter = {"__v": 0, "pwd": 0}

// CheckLogin.js 用户查询用户是否登录的接口
Router.get('/info', (req, res) => {
    return res.json({code: 1, msg: '未登录'})
})

// 获取注册用户列表
Router.get('/list', (req, res) => {
    //清空所有用户
    // User.remove({}, (err, doc) => {
    //  if (!err) {
    //      console.log(`用户清空成功`);
    //  }
    // })

    // 在user这个数据模型中查询所有用户
    User.find({}, (err, doc) => {
        if (!err) {
            return res.json({code: 0, data: doc, msg: '用户列表获取成功'})
        }
    })
})

// 注册接口
Router.post('/register', (req, res) => {
    const {username, pwd, type} = req.body;
    // 在user这个数据模型中查询用户注册的账号是否存在
    User.findOne({username}, (err, doc) => {
        //
        if (doc) {
            return res.json({code: 1, msg: '用户已存在'})
        }
        if (err) {
            return res.json({code: 1, msg: '服务器异常'})
        }
        User.create({username, pwd: my_md5(pwd), type}, (err, doc) => {
            if (err) {
                return res.json({code: 1, msg: '服务器异常'})
            }
            return res.json({code: 0, data: doc})
        })
    })
})


module.exports = Router
// 这里注意,因为要接受参数,所以在server.js安装body-parser并app.use(bodyParser.json())

register.js

{this.props.user.redirectTo ? <Redirect to={this.props.user.redirectTo}></Redirect>:null} //注册完成后跳转到登录页面
<div className="err-show">{this.props.user.msg ? this.props.user.msg : ''}</div> //显示错误信息

至此注册部分基本完成


export function user(state=0,action) {
    switch (action.type) {
        default:
            return state;
    }
}

接下来完善登录注册页面的UI 和基本交互逻辑

安装此demo中各种依赖

上海时时乐走势图官网 5

在package.json的babel里添加一下插件

登录页面

上海时时乐走势图官网 6

上海时时乐走势图官网 7

image.png

从控制台,可以看到redux相关信息(user: 定义的reducer user 值是返回state的初始值0)
PS:前提是chrome安装redux插件Redux DevTools

项目根目录下面新建server文件夹
文件夹下面新建server.js和user.js
server.js

image.png

create-react-app react-login-register
import {combineReducers} from 'redux'

import {user} from './redux/user.redux'

export default combineReducers({user})
npm install create-react-app -g

react项目中实现登录注册简单粗暴感悟

 // index.js
import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(
    <div>Demo</div>,
    document.getElementById('root')
)

上海时时乐走势图官网 8

npm install nodemon -g   // nodemon 是基于node的实时监听的工具
nodemon server.js

进入项目并运行

image.png

进入server文件夹 运行


import React, {Component} from 'react'

class Login extends Component {
    render() {
        return (
            <div>登录页面</div>
        )
    }
}

export default Login

index.js完成登录注册准备工作

本文由上海时时乐走势图发布于web前端,转载请注明出处:前端(八):react基础上海时时乐走势图官网

您可能还会对下面的文章感兴趣: