xplly'Blog

切换主题

标签
ReactJS
前端框架
字数
5090 字
阅读时间
24 分钟

一、简介 ​

是一个用于构建用户界面的JavaScript框架，是Facebook开发的 一款的JS框架。 ReactJS把复杂的页面，拆分成一个个的组件，将这些组件一个个的拼装起来，就会呈现多样的页面。ReactJS可以用于 MVC 架构，也可以用于 MVVM 架构，或者别的架构。 ReactJS圈内的一些框架简介：

  • Flux Flux是Facebook用户建立客户端Web应用的前端架构， 它通过利用一个单向的数据流补充了React的组合视图组件，这更是一种模式而非框架。
  • Redux Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux可以让React组件状态共享变得简单。
  • Ant Design of React 阿里开源的基于React的企业级后台产品，其中集成了多种框架，包含了上面提到的Flux、Redux。 Ant Design提供了丰富的组件，包括：按钮、表单、表格、布局、分页、树组件、日历等。

1.1 新建项目 ​

通过idea新建 static Web项目

在命令行输入 tyarn init -y会生成package.json文件

添加umi依赖 tyarn add umi --dev

目录结构

mulujiegou

1.2 编写入门程序 ​

第一步，在工程的根目录下创建config目录，在config目录下创建config.js文件。

在UmiJS的约定中，config/config.js将作为UmiJS的全局配置文件。

在config.js文件中导出，方便后边使用

javascript
//导出一个对象，暂时设置为空对象，后面再填充内容
export default {};

编写入门程序

在umi中，约定存放页面代码的文件夹是在src/pages，可以通过singular:false来设置单数的命名方式，我们采用默认即可。

javascript
//在src/pages下新建js文件
export default () => {
return <div>hello world</div>;
}
//在js文件中写html代码，是react自创的写法，叫JSX

启动服务

umi dev

1.3 添加umi-plugin-react插件 ​

tyarn add umi-plugin-react --dev

添加成功后会在package.json文件中的devDependencies中添加相关的依赖

在config.js中引入该插件

javascript
export default {
	plugins: [
		['umi-plugin-react', {
		//暂时不启用任何功能
		}]
	]
}

1.4 构建和部署 ​

umi build 命令执行后会在dist文件夹中生成相关的html页面和js文件

二、快速入门 ​

2.1 jsx语法 ​

JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。

JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。 使用JSX语法，需要注意：

  1. 所有的html标签必须是闭合的
  2. 在JSX语法中，只能有一个根标签，不能有多个，可以将多个标签外层再加个div

在JSX语法中，如果想要在html标签中插入js脚本，需要通过{}插入js脚本。

如：{test(data)} test为一个函数

2.2 组件 ​

组件是React中最重要也是最核心的概念，一个网页，可以被拆分成一个个的组件。

组件定义方式：

javascript
import React from 'react'; //第一步，导入React
class HelloWorld extends React.Component { //第二步，编写类并且继承 	React.Component
	render(){ //第三步，重写render()方法，用于渲染页面
		return <div>hello world!</div> //JSX语法
	}
}
export default HelloWorld; //第四步，导出该类

2.2.1 导入自定义组件 ​

javascript
import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件
class Show extends React.Component{
	render(){
		return <HelloWorld/>; //使用HelloWorld组件
	}
}
export default Show;

2.2.2 组件参数 ​

组件是可以通过两种方式传递参数，分别是属性和标签包裹的内容传递。

javascript
import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件
class Show extends React.Component{
	render(){
		return <HelloWorld name="zhangsan">shanghai</HelloWorld>; 
        //使用HelloWorld组件
	}
}
export default Show;
//name="zhangsan"就是属性传递，shanghai就是标签包裹的内容传递

接受方式

javascript
//属性：this.props.name 接收；标签内容：this.props.children 接收；
import React from 'react'; //第一步，导入React
class HelloWorld extends React.Component { //第二步，编写类并且继承 	React.Component
	render(){ //第三步，编写render()方法，用于渲染页面
		return <div>hello world! name={this.props.name}, address={this.props.children}</div> //JSX语法
    }
}
export default HelloWorld; //第四步，导出该类

2.2.3 组件状态 ​

每一个组件都有一个状态，其保存在this.state中，当状态值发生变化时，React框架会自动调用render()方法，重新渲染页面

注意：

  1. this.state值的设置要在构造参数中完成；
  2. 要修改this.state的值，需要调用this.setState()完成，不能直接对this.state进行修改
javascript
import React from 'react'
class List extends React.Component{
	constructor(props){ // 构造参数中必须要props参数
		super(props); // 调用父类的构造方法
		this.state = { // 初始化this.state
			dataList : [1,2,3],
			maxNum : 3
		};
	}
	render(){
		return (
			<div>
				<ul>
				{
                    // 遍历值
                    this.state.dataList.map((value,index) => {
                    return <li key={index}>{value}</li>
                    })
				}
				</ul>
				<button onClick={()=>{ //为按钮添加点击事件
					let maxNum = this.state.maxNum + 1;
					let list = [...this.state.dataList, maxNum];
					this.setState({ //更新状态值
						dataList : list,
						maxNum : maxNum
					});
				}}>
				添加
				</button>
			</div>
		);
	}
}
export default List;

2.2.4 生命周期 ​

组件的运行过程中，存在不同的阶段。React 为这些阶段提供了钩子方法，允许开发者自定义每个阶段自动执行的函数。这些方法统称为生命周期方法（lifecycle methods）。

shengmingzhouqi

javascript
import React from 'react'; //第一步，导入React
class LifeCycle extends React.Component {
	constructor(props) {
        super(props);
		//构造方法
		console.log("constructor()");
	}
	componentDidMount() {
	//组件挂载后调用
	console.log("componentDidMount()");
	}
    componentWillUnmount() {
        //在组件从 DOM 中移除之前立刻被调用。
        console.log("componentWillUnmount()");
    }
    componentDidUpdate() {
        //在组件完成更新后立即调用。在初始化时不会被调用。
        console.log("componentDidUpdate()");
    }
    shouldComponentUpdate(nextProps, nextState){
        // 每当this.props或this.state有变化，在render方法执行之前，就会调用这个方法。
        // 该方法返回一个布尔值，表示是否应该继续执行render方法，即如果返回false，UI 就不会更新，
        默认返回true。
        // 组件挂载时，render方法的第一次执行，不会调用这个方法。
        console.log("shouldComponentUpdate()");
    }
    render() {
        return (
            <div>
                <h1>React Life Cycle!</h1>
            </div>
        );
    }
}
export default lifeCycle;

2.3 Model ​

2.3.1 分层 ​

后端代码分层含义

  • Controller 层负责与用户直接打交道，渲染页面、提供接口等，侧重于展示型逻辑。
  • Service 层负责处理业务逻辑，供 Controller 层调用。
  • Data Access 层顾名思义，负责与数据源对接，进行纯粹的数据读写，供 Service 层调用。

前端分层：

  • Page 负责与用户直接打交道：渲染页面、接受用户的操作输入，侧重于展示型交互性逻辑。
  • Model 负责处理业务逻辑，为 Page 做数据、状态的读写、变换、暂存等。
  • Service 负责与 HTTP 接口对接，进行纯粹的数据读写。

2.3.2 使用DVA进行数据分层管理 ​

dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。官 网：https://dvajs.com/

将dva框架引入进来，由于umi对dva进行了整合，所以导入非常简单。

javascript
//config.js文件中进行配置
export default {
    plugins: [
        ['umi‐plugin‐react', {
        	dva: true // 开启dva功能
        }]
    ]
};

创建model文件，在umi中，约定在src/models文件夹中定义model，在该文件夹下创建ListData.js文件：

javascript
export default {
    namespace: 'list',
    state: {
    	data: [1, 2, 3],
    	maxNum: 3
    }
}

对之前的进行改造

javascript
import React from 'react';
import { connect } from 'dva';
const namespace = 'list';
const mapStateToProps = (state) => {
    const listData = state[namespace].data;
    return {
    	listData
    };
};
@connect(mapStateToProps)
class List extends React.Component{
	render(){
		return (
            <div>
            	<ul>
					{
                        // 遍历值
                        this.props.listData.map((value,index) => {
                        	return <li key={index}>{value}</li>
                    	})
					}
                </ul>
				<button onClick={()=>{this.props.addNewData()}}>
				添加
				</button>
			</div>
		);
	}
}
export default List;

说明：

  1. umi框架启动，会自动读取models目录下model文件，即ListData.js中的数据
  2. @connect修饰符的第一个参数，接收一个方法，该方法必须返回{}，将接收到model数据
  3. 在全局的数据中，会有很多，所以需要通过namespace进行区分，所以通过state[namespace]进行获取数据
  4. 拿到model数据中的data，也就是[1, 2, 3]数据，进行包裹{}后返回
  5. 返回的数据，将被封装到this.props中，所以通过this.props.listData即可获取到model中的数据

修改值：

在model中新增reducers方法，用于更新state中的数据：

javascript
export default {
	namespace: 'list',
    state: {
        data: [1, 2, 3],
        maxNum: 3
    },
    reducers : {
        addNewData(state){ //state是更新前的对象
            let maxNum = state.maxNum + 1;
            let list = [...state.data, maxNum];
            return { // 返回更新后的state对象
                data : list,
                maxNum : maxNum
            }
		}
	}
}

2.3.3 在model中请求数据 ​

异步加载数据：

创建src下创建util目录，并且创建request.js文件

javascript
// import fetch from 'dva/fetch';
function checkStatus(response) {
    if (response.status >= 200 && response.status < 300) {
    	return response;
    }
    const error = new Error(response.statusText);
    error.response = response;
    throw error;
}
/**
* Requests a URL, returning a promise.
*
* @param {string} url The URL we want to request
* @param {object} [options] The options we want to pass to "fetch"
* @return {object} An object containing either "data" or "err"
*/
export default async function request(url, options) {
    const response = await fetch(url, options);
    checkStatus(response);
    return await response.json();
}

model中新增请求方法

javascript
import request from '../util/request';
export default {
    namespace: 'list',
    state: {
        data: [],
        maxNum: 0
	},
    reducers: {
        addNewData(state, result) { //result就是拿到的结果数据
        if(result.data){ //判断result中的data是否存在，如果存在，说明是初始化数据，直接返回
            return result.data;
        }
        let maxNum = state.maxNum + 1;
        let list = [...state.data, maxNum];
        return { //更新状态值
            data: list,
            maxNum: maxNum
        }
    }
},
    effects: { //新增effects配置，用于异步加载数据
        *initData(params, sagaEffects) { //定义异步方法
            const {call, put} = sagaEffects; //获取到call、put方法
            const url = "/ds/list"; // 定义请求的url
            let data = yield call(request, url); //执行请求
            yield put({ // 调用reducers中的方法
                type : "addNewData", //指定方法名
                data : data //传递ajax回来的数据
            });
        }
    }
}

修改之前的代码逻辑

javascript
import React from 'react';
import { connect } from 'dva';
const namespace = 'list';
const mapStateToProps = (state) => {
    const listData = state[namespace].data;
    const maxNum = state[namespace].maxNum;
    return {
    	listData, maxNum
    };
};
const mapDispatchToProps = (dispatch) => {
	return {
		addNewData : () =>{
			dispatch({
				type: namespace + "/addNewData"
			});
		},
		initData : () => { //新增初始化方法的定义
			dispatch({
				type: namespace + "/initData"
			});
		}
	}
}
@connect(mapStateToProps, mapDispatchToProps)
class List extends React.Component{
    componentDidMount(){
    	this.props.initData(); //组件加载完后进行初始化操作
    }
	render(){
		return (
			<div>
				<ul>
					{
  					 // 遍历值
					this.props.listData.map((value,index) => {
						return <li key={index}>{value}</li>
					})
					}
				</ul>
				<button onClick={()=>{this.props.addNewData()}}>
				添加
				</button>
			</div>
		);
	}
}
export default List;

2.3.4 mock数据 ​

umi中支持对请求的模拟，由于在开发时没有真正的服务可以返回数据，所以需要模拟。 在项目根目录下创建mock目录，然后创建MockListData.js文件

javascript
export default {
    'get /ds/list': function (req, res) { //模拟请求返回数据
        res.json({
            data: [1, 2, 3, 4],
            maxNum: 4
        });
    }
}

三、Ant Design入门 ​

3.1 简介 ​

Ant Design是阿里蚂蚁金服团队基于React开发的ui组件，主要用于中后台系统的使用。官网：https://ant.design/index-cn

特性：

  • 提炼自企业级中后台产品的交互语言和视觉风格。
  • 开箱即用的高质量 React 组件。
  • 使用 TypeScript 构建，提供完整的类型定义文件。
  • 全链路开发和设计工具体系

3.2 使用 ​

3.2.1 引入 ​

Ant Design 是一个服务于企业级产品的设计体系，组件库是它的 React 实现，antd 被发布为一个 npm 包方便开发者安装并使用。 在 umi 中，你可以通过在插件集 umi-plugin-react 中配置 antd 打开 antd 插件，antd插件会帮你引入 antd 并实现按需编译。 在config.js文件中进行配置：

javascript
export default {
    plugins: [
        ['umi‐plugin‐react', {
            dva: true, // 开启dva功能
            antd: true // 开启Ant Design功能
        }]
    ]
};

3.2.2 组件使用 ​

https://ant.design/components/tabs-cn/

3.3 布局 ​

antd布局：https://ant.design/components/layout-cn/

3.3.1 布局组件概述 ​

  • Layout ：布局容器，其下可嵌套 Header Sider Content Footer 或 Layout 本身，可以放在任何父容器中。
  • Header ：顶部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。
  • Sider ：侧边栏，自带默认样式及基本功能，其下可嵌套任何元素，只能放在Layout 中。
  • Content ：内容部分，自带默认样式，其下可嵌套任何元素，只能放在 Layout中。
  • Footer ：底部布局，自带默认样式，其下可嵌套任何元素，只能放在 Layout 中。

3.3.2 搭建整体布局 ​

在src目录下创建layouts目录，并且在layouts目录下创建index.js文件

javascript
import React from 'react'
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{
    render(){
        return (
            <Layout>
                <Sider>Sider</Sider>
                <Layout>
                <Header>Header</Header>
                <Content>Content</Content>
                <Footer>Footer</Footer>
                </Layout>
            </Layout>
        );
    }
}
export default BasicLayout;

需要特别说明的是，在umi中约定的目录结构中，layouts/index.js文件将被作为全局的布局文件

接下来，配置路由：（非必须）

config.js文件：

javascript
export default {
    plugins: [
        ['umi‐plugin‐react', {
            dva: true, // 开启dva功能
            antd: true // 开启Ant Design功能
        }]
    ],
    routes: [{
        path: '/',
        component: '../layouts' //配置布局路由
    }]
};

3.3.3 子页面使用布局 ​

首先，需要在布局文件中，将Content内容替换成{this.props.children}，意思是引入传递的内容。

javascript
import React from 'react'
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{
    render(){
    	return (
    		<Layout>
    			<Sider>Sider</Sider>
    			<Layout>
   					 <Header>Header</Header>
    				<Content>{this.props.children}</Content>
    				<Footer>Footer</Footer>
    			</Layout>
    		</Layout>
    	);
    }
}
export default BasicLayout;

接下来配置路由（注意，在布局路由下面进行配置）：

说明：下面的路由配置，是表明你需要通过手动配置的方式上进行访问页面，而不
采用umi默认的路由方式。
javascript
export default {
    plugins: [
        ['umi‐plugin‐react', {
            dva: true, // 开启dva功能
            antd: true // 开启Ant Design功能
        }]
    ],
    routes: [{
        path: '/',
        component: '../layouts', //配置布局路由
        routes: [ //在这里进行配置子页面
            {
                path: '/myTabs',
                component: './myTabs'
            }
        ]
    }]
};

3.3.4 美化页面 ​

javascript
import React from 'react'
import { Layout } from 'antd';
const { Header, Footer, Sider, Content } = Layout;
class BasicLayout extends React.Component{
	render(){
		return (
			<Layout>
                <Sider width={256} style={{ minHeight: '100vh', color:'white' }}>
                Sider
                </Sider>
				<Layout>
					<Header style={{ background: '#fff', textAlign:'center', padding: 0 }}>Header</Header>
					<Content style={{ margin: '24px 16px 0' }}>
                        <div style={{ padding: 24, background: '#fff',minHeight: 360 }}>
                        {this.props.children}
                        </div>
					</Content>
					<Footer style={{ textAlign: 'center' }}>后台系统 ©2018 Created by 黑马程序员</Footer>
				</Layout>
			</Layout>
		);
	}
}
export default BasicLayout;

3.3.5 引入导航条 ​

使用Menu组件作为导航条：https://ant.design/components/menu-cn/

javascript
import React from 'react'
import {Layout, Menu, Icon} from 'antd';
const {Header, Footer, Sider, Content} = Layout;
const SubMenu = Menu.SubMenu;
class BasicLayout extends React.Component {
    constructor(props){
    super(props);
        this.state = {
        collapsed: false,
    }
}
	render() {
		return (
			<Layout>
				<Sider width={256} style={{minHeight: '100vh', color:'white'}}>
					<div style={{ height: '32px', background:'rgba(255,255,255,.2)', margin: '16px'}}/>
					<Menu defaultSelectedKeys={['2']} defaultOpenKeys={['sub1']} mode="inline" theme="dark" inlineCollapsed={this.state.collapsed}>
                        <Menu.Item key="1">
                            <Icon type="pie‐chart"/>
                            <span>Option 1</span>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <Icon type="desktop"/>
                            <span>Option 2</span>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Icon type="inbox"/>
                            <span>Option 3</span>
                        </Menu.Item>
                        <SubMenu key="sub1" title={<span><Icon type="mail"/><span>Navigation One</span></span>}>
                            <Menu.Item key="5">Option 5</Menu.Item>
                            <Menu.Item key="6">Option 6</Menu.Item>
                            <Menu.Item key="7">Option 7</Menu.Item>
                            <Menu.Item key="8">Option 8</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub2" title={<span><Icon 	type="appstore"/><span>Navigation Two</span></span>}>
                            <Menu.Item key="9">Option 9</Menu.Item>
                            <Menu.Item key="10">Option 10</Menu.Item>
                            <SubMenu key="sub3" title="Submenu">
                                <Menu.Item key="11">Option 11</Menu.Item>
                                <Menu.Item key="12">Option 12</Menu.Item>
                            </SubMenu>
                        </SubMenu>
					</Menu>
				</Sider>
			<Layout>
                <Header style={{background: '#fff', textAlign: 'center', padding: 0}}>Header</Header>
                <Content style={{margin: '24px 16px 0'}}>
                    <div style={{padding: 24, background: '#fff',minHeight: 360}}>{this.props.children}</div>
                </Content>
                <Footer style={{textAlign: 'center'}}>后台系统 ©2018
                Created by 黑马程序员</Footer>
			</Layout>
		</Layout>
	);
}
}
export default BasicLayout;

3.3.6 为导航条添加链接 ​

在src目录下创建user目录，并且在user目录下创建UserAdd.js和UserList.js文件，用于模拟实现新增用户和查询用户列表功能。

UserAdd.js：

import React from 'react'
class UserAdd extends React.Component{
    render(){
        return (
        	<div>新增用户</div>
        );
    }
}
export default UserAdd;

UserList.js：

import React from 'react'
class UserList extends React.Component{
    render(){
        return (
        	<div>用户列表</div>
        );
    }
}
export default UserList;

配置路由

javascript
export default {
    plugins: [
        ['umi‐plugin‐react', {
            dva: true, // 开启dva功能
            antd: true // 开启Ant Design功能
        }]
     ],
     routes: [{
        path: '/',
        component: '../layouts', //配置布局路由
        routes: [
            {
                path: '/myTabs',
                component: './myTabs'
            },
            {
                path: '/user',
                routes: [
                    {
                        path: '/user/list',
                        component: './user/UserList'
                    },
                    {
                        path: '/user/add',
                        component: './user/UserAdd'
                    }
                ]
        	}
        ]
    }]
};

为菜单添加链接

javascript
import React from 'react'
import {Layout, Menu, Icon} from 'antd';
import Link from 'umi/link';
const {Header, Footer, Sider, Content} = Layout;
const SubMenu = Menu.SubMenu;
class BasicLayout extends React.Component {
	constructor(props){
		super(props);
		this.state = {
			collapsed: false,
		}
    }
	render() {
		return (
			<Layout>
				<Sider width={256} style={{minHeight: '100vh', color:'white'}}>
					<div style={{ height: '32px', background:'rgba(255,255,255,.2)', margin: '16px'}}/>
					<Menu defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} mode="inline" theme="dark" inlineCollapsed={this.state.collapsed}>
					<SubMenu key="sub1" title={<span><Icon type="user"/><span>用户管理</span></span>}>
						<Menu.Item key="1">
							<Link to="/user/list">用户列表</Link>
						</Menu.Item>
                        <Menu.Item key="2">
                        	<Link to="/user/add">新增用户</Link>
                        </Menu.Item>
					</SubMenu>
				</Menu>
			</Sider>
			<Layout>
				<Header style={{background: '#fff', textAlign:'center', padding: 0}}>Header</Header>
				<Content style={{margin: '24px 16px 0'}}>
					<div style={{padding: 24, background: '#fff',minHeight: 360}}>{this.props.children}</div>
				</Content>
				<Footer style={{textAlign: 'center'}}>后台系统 ©2018 Created by 黑马程序员</Footer>
			</Layout>
		</Layout>
		);
	}
}
export default BasicLayout;

3.4 表格 ​

参考官方文档进行实现：https://ant.design/components/table-cn/

3.4.1 数据分离到model中 ​

UserListData.js

javascript
import request from "../util/request";
export default {
    namespace: 'userList',
    state: {
    	list: []
	},
	effects: {
        *initData(params, sagaEffects) {
            const {call, put} = sagaEffects;
            const url = "/ds/user/list";
            let data = yield call(request, url);
            yield put({
            type : "queryList",
            data : data
        });
      }
    },
    reducers: {
        queryList(state, result) {
            let data = [...result.data];
            return { //更新状态值
                list: data
            }
        }
    }
}

UserList.js

javascript
import React from 'react';
import { connect } from 'dva';
import {Table, Divider, Tag, Pagination } from 'antd';
const {Column} = Table;
const namespace = 'userList';
@connect((state)=>{
    return {
        data : state[namespace].list
    }
}, (dispatch) => {
    return {
        initData : () => {
            dispatch({
                type: namespace + "/initData"
            });
        }
    }
})
class UserList extends React.Component {
    componentDidMount(){
        this.props.initData();
    }
    render() {
        return (
            <div>
            <Table dataSource={this.props.data} pagination={{position:"bottom",total:500,pageSize:10, defaultCurrent:3}}>
            <Column title="姓名" dataIndex="name" key="name"/>
                <Column title="年龄" dataIndex="age" key="age"/>
                <Column title="地址" dataIndex="address" key="address"/>
				<Column title="标签" dataIndex="tags" key="tags" render={tags => (
					<span>
						{tags.map(tag => <Tag color="blue" key=
						{tag}>{tag}</Tag>)}
					</span>
				)}/>
				<Column title="操作" key="action" render={(text, record) => (
					<span>
						<a href="javascript:;">编辑</a>
						<Divider type="vertical"/>
						<a href="javascript:;">删除</a>
					</span>
				)}/>
			</Table>
		</div>
	);
	}
}
export default UserList;

MockListData.js

javascript
export default {
    'get /ds/list': function (req, res) {
        res.json({
            data: [1, 2, 3, 4],
            maxNum: 4
        });
    },
    'get /ds/user/list': function (req, res) {
        res.json([{
            key: '1',
            name: '张三1',
            age: 32,
            address: '上海市',
            tags: ['程序员', '帅气'],
        }, {
            key: '2',
            name: '李四',
            age: 42,
            address: '北京市',
            tags: ['屌丝'],
        }, {
            key: '3',
            name: '王五',
            age: 32,
            address: '杭州市',
            tags: ['高富帅', '富二代'],
        }]);
    }
}

四、Ant Design Pro入门 ​

4.1 简介 ​

Ant Design Pro 是基于Ant Design的一个开箱即用的，企业级中后台前端/设计解决方案。

源码地址：https://github.com/ant-design/ant-design-pro

4.2 入门程序 ​

第一步：将ant-design-pro-master.zip解压到任意目录

//目录结构
├── config # umi 配置，包含路由，构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.js # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json

导入项目并启动

tyarn install #安装相关依赖
tyarn start #启动服务

4.2.1 菜单和路由 ​

默认的菜单是不能直接投入到项目开发的

菜单和路由在router.config.js配置文件中进行管理

pro提供了有2套路由（布局），分别是/user和/

路由的文字信息实在国际化文件中进行配置的

locales/zh-CN.js中配置

4.2.2 新增页面 ​

页面依然是保存的src/pages中，在pages目录下，以功能为单元创建目录

import React from 'react';
class NewAnalysis extends React.Component {
    render() {
        return (
        	<div>NewAnalysis</div>
        );
    }
}
export default NewAnalysis;

修改路由中的路径：

添加路径对应的组件
path：***
组件：新家的组件名称 ./New/NewAnalysis