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 Cardcard组件下面的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={} 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={} 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>
</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:,
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:,
age:this.state.age,
sex:this.state.sex,
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(==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 = ;
return obj;
})
that.setState({
//把每一项目放到数组里
item: res.body,
//请求结束后loading为false
loading: false
})
})
}
})
export default AntTest;
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
