前端那些事之react篇---Ant Design后台管理系统

react + Ant Design后台管理系统

• 下载命令：npm install antd --save
• 官网：https://ant.design

Step 1：安装脚手架工具 （Node.js 需要 v4.x 或以上）

$ npm install antd-init -g

step 2：创建项目&初始化

$ mkdir ant-design-demo && cd ant-design-demo

运行 $ antd-init

这时候会出现下面的提示

? Please select boilerplate type (Use arrow keys) ❯ plain react - for simple project redux - for complex project 这里可以手动选择 plain-react 。

或者在刚才初始化时候直接加上类型

$ antd-init --type plain-react

通过以上的命令，antd-init 就开始自动安装 npm 依赖了。耐心等待装完 ~ ~

安装完之后，整个项目的基本框架就搭建起来了。

脚手架会生成一个 Todo 应用实例。

运行 $ npm start 后访问 http://127.0.0.1:8989 查看效果。

模仿 ant design 表格的实现

• 目录结构app下的 js引用ant-study组件：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import AntStudy from './ant-study/index'
ReactDOM.render(
    <AntStudy />,document.getElementById('root')
);

• ant-study组件文件下的index

import React from 'react';
import Button from './button/index';
import Table from './table/index';
import Input from './input/input';
import Cards from './card/index';
const dataSource = [{
   key: '1',name: '胡彦斌',age: 32,address: '西湖区湖底公园1号'
},{
   key: '2',name: '胡彦祖',age: 42,address: '西湖区湖底公园1号'
}];

const columns = [{
   title: '姓名',dataIndex: 'name',key: 'name',},{
   title: '年龄',dataIndex: 'age',key: 'age',{
   title: '住址',dataIndex: 'address',key: 'address',}];
var AntStudy=React.createClass({
   getInitialState:function () {
      return{
          value:'小样',error:'亲，错了'
      }
   },render:function () {
       return(
          <div>
              <h3>jsx</h3>
              <Button>dkdkd</Button>
              <h3>表格</h3>
              {/*把表头和要传输的数据传到子组件*/}
              <Table dataSource={dataSource} columns={columns}/>
              <h3>输入框</h3>
              <Input
                  value={this.state.value}
                  onChange={(e)=>this.setState({value:e.target.value})}
                  onPressEnter={this.enter}
              />
              <h3>选项卡</h3>
              <Cards></Cards>
          </div>
       )
   }
})
export default AntStudy;

ant-study文件下的table组件

import React from 'react';

var Table=React.createClass({
    render:function () {
        var that=this;
        //接收父组件传进来的参数
        var header=this.props.columns,data=this.props.dataSource;
        var arr=[];
        var headerNodes=header.map(function (obj,i) {
            arr.push(obj.dataIndex);
            return(
                <td key={obj.key}>{obj.title}</td>
            )
        })
        var nodes=data.map(function (obj,i) {
            var tr=arr.map(function(h,j){
                return(
                    <td key={'td-'+obj[h]+'-'+j}>{obj[h]}</td>
                )
            })
            return(
                <tr>{tr}</tr>
            )
        })
        return(
            <div>
                <table>
                    <thead>
                        <tr>{headerNodes}</tr>
                    </thead>
                    <tbody>
                    {nodes}
                    </tbody>
                </table>
            </div>
        )
    }
})
export default Table;

模仿ant design实现tab栏切换

• 需求：得到最外层的组件的数据？

// 1
// card
//设置子组件的上下文
// getChildContext(){
//     return {
//         current:this.props.current
//     }
// },//子组件的上下文类型
// childContextTypes:{
//     current:React.PropTypes.number
// }


//2
//启用上下文
// contextTypes:{
//     current:React.PropTypes.number
// },

完整代码演示

• ant study组件下的index.js

import React from 'react';
import Card from './card';
const TitleBar=Card.TitleBar;
const Title=Card.Title;
const ContentBar=Card.ContentBar;
const Content=Card.Content;
var AntStudy=React.createClass({
    getInitialState:function(){
      return{
          current:2
      }
    },render:function () {
        return(
           <div>
               <h3>tab栏切换</h3>
               <Card current={this.state.current}>
                   <TitleBar>
                        {/*Title组件如何拿到Card组件传递的值*/}
                       <Title index={1} onClick={(e)=>this.setState({current:1})}>title-111</Title>
                       <Title index={2} onClick={(e)=>this.setState({current:2})}>title-222</Title>
                       <Title index={3} onClick={(e)=>this.setState({current:3})}>title-333</Title>
                   </TitleBar>
                   <ContentBar>
                       <Content index={1}>content-111</Content>
                       <Content index={2}>content-222</Content>
                       <Content index={3}>content-333</Content>
                   </ContentBar>
               </Card>
           </div>
        )
    },handClick:function (index) {
        this.setState({
            current:index
        })
    }
})
export default AntStudy;

card组件下的index.js

import React from 'react'
import './index.css'
var Card = React.createClass({
    render(){
        return (
            <div>
                {this.props.children}
            </div>
        )
    },//设置子组件的上下文
    getChildContext(){
        return {
            current:this.props.current
        }
    },//子组件的上下文类型
    childContextTypes:{
        current:React.PropTypes.number
    }
})

var Title = React.createClass({
    //启用上下文
    contextTypes:{
        current:React.PropTypes.number
    },render(){
        var active = ''
        if(this.props.index === this.context.current){
            active = 'active'
        }

        return (
            <div className={active} onClick={this.props.onClick}>{this.props.children}</div>
        )
    }
})
var TitleBar = React.createClass({
    render(){
        return (
            <div className="title-bar">
                {this.props.children}
            </div>
        )
    }
})
var ContentBar = React.createClass({
    render(){
        return (
            <div className="content-bar">
                {this.props.children}
            </div>
        )
    }
})
var Content = React.createClass({
    contextTypes:{
        current:React.PropTypes.number
    },render(){
        var display = ''
        if(this.props.index === this.context.current){
            display = 'block'
        }else {
            display = 'none'
        }
        return (
            <div style={{display:display}}>{this.props.children}</div>
        )
    }
})

Card.Title=Title
Card.TitleBar = TitleBar
Card.ContentBar= ContentBar
Card.Content =Content


export default Card

card组件下面的index.css

.title-bar .active{
    color: red;
}

.content-bar .active{
    color: red;
}

/***********************************************************************************/

react+ant design 实现表格渲染

• ajax请求用插件superagent来实现

• 简介：SuperAgent 是一个轻量的Ajax API，服务器端（Node.js）客户端（浏览器端）均可使用,SuperAgent具有学习曲线低、使用简单、可读性好的特点,可作为客户端请求代理模块使用，当你想处理get,post,put,delete,head请求时，可以考虑使用SuperAgent。

• 下载命令：npm install superagent --save

i/**
 * Created by Auser on 2017/4/6.
 */
import React from 'react';
import  './index.css';
import {Button,Row,Col,Table,Modal,Form,Input,Radio,message} from 'antd';
import 'antd/dist/antd.css';
import request from 'superagent';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
const head = [
    {title: 'id',dataIndex: 'id'},{title: 'name',dataIndex: 'name'},{title: 'age',dataIndex: 'age'},{title: 'sex',dataIndex: 'sex'},//设置表头时，除了设置title,dataIndex属性，还可以设置render方法
    /***第一种方法**/
    // {
    //     title: 'single',//     dataIndex: 'single',//singe是一个布尔值
    //     render: function (single,obj) {
    //         return (
    //             <div>{ single ? '小样还好吗' : '不好'}</div>
    //         )
    //     }
    // }
    /******第二种方法箭头涵数*************/
    {
        title: 'single',dataIndex: 'single',render: (single,obj) => (
            <div>
                {obj.name} 这只 {single ? '单身狗' : '恩爱狗'}
                是个{obj.sex} 他今年{obj.age}岁了
            </div>
        )
    }
]
const url = "http://101.200.129.112:9527"
const Api = {
    //渲染表格的接口
    listApi: '' + url + '/react1/student/'
}
var AntTest = React.createClass({
    getInitialState(){
        return {
            loading: false,//默认放一个空数组
            item: [],//    判断是否要显示弹出层
            showAdd: false,name:'',age:'',sex:'',single:true,selectedRowKeys: [],}
    },//选中的时候获取到的值
    onSelectChange (selectedRowKeys) {
        var id=selectedRowKeys[0];
        if(!id){
            this.setState({ selectedRowKeys:selectedRowKeys });
            return;
        }
        var items=this.state.item;
        var obj;
        for (var i = 0; i < items.length; i++) {
            if (items[i].id==id){
                obj=items[i];
            };
        }
        this.setState({
            selectedRowKeys:selectedRowKeys,name:obj.name,age:obj.age,sex:obj.sex,single:obj.single
        })
    },render: function () {
        const { loading,selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,onChange: this.onSelectChange,};
        const hasSelected = selectedRowKeys.length != 1;
        return (
            <div >
                <h3 className="center">react+ant design后台系统</h3>
                {/*设置loading效果*/}
                <Button icon="plus" type="primary" className="move"
                        onClick={(e) => this.setState({showAdd: true})}>增加</Button>
                <Button icon='edit' disabled={hasSelected} type=""
                        onClick={(e)=>this.setState({showAdd: true})}
                        className="move">编辑</Button>
                <Button icon='delete' disabled={hasSelected} type="danger" className="move" onClick={this.handDelete}>删除</Button>
                <Table  rowSelection={rowSelection} className='table' loading={this.state.loading} columns={head} dataSource={this.state.item}/>
                {/*点击出现弹出层组件Modal*/}
                <Modal
                    // 是否显示弹出层，true显示,false为不显示
                    visible={this.state.showAdd}
                    //标题名
                    title='新增'
                    //是否要关闭
                    onCancel={() => this.setState({showAdd: false})}
                    //点击确定的时候执行的涵数
                    onOk={this.handSave}
                >
                    {/*在弹出层中增加表单*/}
                    <Form>
                        <FormItem
                            label="姓名："
                            //一共可以分为24
                            labelCol={{span: 4}}//label占的份数

                            wrapperCol={{span: 18}}//label下面占的份数
                        >
                            <Input value={this.state.name} onChange={(e)=>this.handChange(e,'name')}/>
                        </FormItem>
                        <FormItem
                            label="年龄："
                            labelCol={{span: 4}}
                            wrapperCol={{span: 18}}
                        >
                            <Input value={this.state.age} onChange={(e)=>this.handChange(e,'age')} />
                        </FormItem>
                        <FormItem
                            label="性别："
                            labelCol={{span: 4}}
                            wrapperCol={{span: 20}}
                        >
                            <RadioGroup value={this.state.sex} onChange={(e)=>this.handChange(e,'sex')}>
                                <Radio key='boy' value={'boy'}>男</Radio>
                                <Radio key='girl' value={'girl'}>女</Radio>
                            </RadioGroup>
                        </FormItem>
                        <FormItem
                            label="单身狗："
                            labelCol={{span: 4}}
                            wrapperCol={{span: 20}}
                        >
                            <RadioGroup value={this.state.single} onChange={(e)=>this.handChange(e,'single')}>
                                <RadioButton key='true' value={true}>单身狗</RadioButton>
                                <RadioButton key='false' value={false}>恩爱狗</RadioButton>
                            </RadioGroup>
                        </FormItem>
                    </Form>
                </Modal>


                <Modal
                    // 是否显示弹出层，true显示,false为不显示
                    visible={this.state.showAdd}
                    //标题名
                    title='编辑'
                    //是否要关闭
                    onCancel={() => this.setState({showAdd: false})}
                    //点击确定的时候执行的涵数
                    onOk={this.handEdit}
                >
                    {/*在弹出层中增加表单*/}
                    <Form>
                        <FormItem
                            label="姓名："
                            //一共可以分为24
                            labelCol={{span: 4}}//label占的份数

                            wrapperCol={{span: 18}}//label下面占的份数
                        >
                            <Input value={this.state.name} onChange={(e)=>this.handChange(e,'single')}>
                                <RadioButton key='true' value={true}>单身狗</RadioButton>
                                <RadioButton key='false' value={false}>恩爱狗</RadioButton>
                            </RadioGroup>
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        )
    },//es6的语法
    handChange(e,type) {
        var value=e.target.value;
        var obj={};
        //把type加入到obj中，并设置值
        obj[type]=value;
        this.setState(obj);
        // console.log(type);
        // console.log(obj);
    },//    点击确定的时候执行的涵数,发送ajax请求
    handSave(){
        var that=this;
        var data={
            name:this.state.name,age:this.state.age,sex:this.state.sex,single:this.state.single
        }
      request
          .post(Api.listApi)
          .send(data)
          .end(function(err,res){
              // console.log(res.body);
              if (err) {
                  return console.log(err)
              }
              var item=res.body;
              item.key=res.id;
              var items=that.state.item;
              items.unshift(res.body);//把新增的数据加到最前面
              that.setState({
                  item:items,showAdd:false
              })
              //新增成功以后给一个提示信息
              message.success('新增成功！'+item.name);
          })
    },//编辑以后点击确定发送ajax请求
    handEdit(){
        var that=this;
        var data={
            name:this.state.name,single:this.state.single
        }
        var id=that.state.selectedRowKeys[0];
        var ApiEdit=Api.listApi+id+'/';
        request
            .patch(ApiEdit)
            .send(data)
            .end(function(err,res){
                // console.log(res.body);
                if (err) {
                    return console.log(err)
                }
                var items=that.state.item;
              items=items.map(function(o){
                  if(o.id==id){
                      o=data;
                  }
                  return o;
              })
                that.setState({
                    item:items,showAdd:false
                })
                //新增成功以后给一个提示信息
                message.success('编辑成功！'+id);
            })
    },// 点击删除的时候执行的涵数
    handDelete(){
        var that=this;
        Modal.confirm({
            title: '你确定要删除吗?',content: '是的',onOk:function () {
                var id=that.state.selectedRowKeys[0];
                var ApiDele=Api.listApi+id+'/';
                request
                    .delete(ApiDele)
                    .end(function(err,res){
                        if(err){
                            console.log(err);
                        }
                        console.log(id);
                        var items=[];
                        //在state里拿到所有的项目
                         var student=that.state.item;
                        for (var i = 0; i < student.length; i++) {
                            //如果所有项目里的Id,不等于传进来的id，重新放到一个数组中
                            if(student[i].id!=id){
                                items.push(student[i]);
                            }
                        }
                        that.setState({
                            item:items
                        })

                        message.success('删除成功！'+id);
                    })

            },// okText: 'OK',// cancelText: 'Cancel',});
    },//    当组件渲染完以后用请求ajax
    componentDidMount () {
        var that = this;
        //刚开始发请求的时候，loading为true
        this.setState({
            loading: true
        })
        request
        //get请求方式
            .get(Api.listApi)
            .end(function (err,res) {
                if (err) {
                    return console.log(err)
                }
                console.log(res.body);
                res.body = res.body.map(function (obj,i) {
                    //必须要加一个key值
                    //用map方法循环，返回一个新的数组
                    obj.key = obj.id;
                    return obj;
                })
                that.setState({
                    //把每一项目放到数组里
                    item: res.body,//请求结束后loading为false
                    loading: false
                })
            })

    }
})
export  default  AntTest;