1.ReactJS

1.1.分层

上图中，左侧是服务端代码的层次结构，由Controller,Service,Data Access三层组成服务服务端系统。

右侧是前端代码的结构，同样需要进行必要的分层：

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

1.2.使用DVA进行数据分层管理

DVA是基于redux,redux-saga和react-router的轻量级前端框架，想要使用它，我们需要在config.js文件中进行配置：

export default {plugins: [['umi-plugin-react',{dva:true //开启dva功能}]]
};

接下来，创建model文件，约定在src/models文件夹中定义model

export default {//导出模型数据namespace: 'List',//通过namespace区分名称state: {dataList: [1, 2, 3],maxNum: 3},reducers: {//定义一些函数addNewData: function (state) {//这个state是更新之前的数据let maxNum = state.maxNum + 1;let newArr = [...state.dataList, maxNum];//通过return返回更新后的数据return {dataList: newArr,maxNum: maxNum}}}
}

import React from 'react';
import { connect } from 'dva';const namespace = 'List';
//说明第一个回调函数,将page层和model层进行链接,返回model中的数据;
//并且,将返回的数据绑定到this.props中// 接收第二个函数,这个函数的作用:将定义的函数绑定到this.props中,调用model层中定义的函数
@connect((state) => {return {dataList: state[namespace].dataList,maxNum: state[namespace].maxNum}
},(dispatch)=>{//dispatch的作用可以调用model定义的函数return {add : function () {dispatch({//通过dispatch调用model中定义的函数,通过type属性,指定函数名type: namespace+"/addNewData"});}}
})
class List extends React.Component {constructor(props) {super(props);}render() {return (<div><ul>{this.props.dataList.map((value, index) => {return <li key={index}>{value}</li>})}</ul><button onClick={() => {this.props.add();}}>点我试试</button></div>);}
}export default List;

具体流程如下：

1.3.在model层中请求数据

首先在src下创建utils目录，并且创建request.js文件

// 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中新增如下方法

import request from '../util/request';export default {//导出模型数据namespace: 'List',//通过namespace区分名称state: {dataList: [],maxNum: 1},reducers: {//定义一些函数addNewData: function (state, result) {//这个state是更新之前的数据 result是请求的结果数据if (result.data) {//如result中存在data数据,直接返回,在做初始化操作console.log('11111',result.data);return result.data;}let maxNum = state.maxNum + 1;let newArr = [...state.dataList, maxNum];//通过return返回更新后的数据return {dataList: newArr,maxNum: maxNum}}},effects: { //新增effects配置，用于异步加载数据*initData(params, sagaEffects) { //定义异步方法const { call, put } = sagaEffects; //获取到call、put方法const url = "/ds/list"; // 定义请求的urllet data = yield call(request, url); //执行请求console.log('----',data);yield put({ // 调用reducers中的方法type: "addNewData", //指定方法名data: data //传递ajax回来的数据});console.log('++++',data);}}
}

修改page层

import React from 'react';
import { connect } from 'dva';const namespace = 'List';
//说明第一个回调函数,将page层和model层进行链接,返回model中的数据;
//并且,将返回的数据绑定到this.props中//接收第二个函数,这个函数的作用:将定义的函数绑定到this.props中,调用model层中定义的函数
@connect((state) => {return {dataList: state[namespace].dataList,maxNum: state[namespace].maxNum}
},(dispatch) => {//dispatch的作用可以调用model定义的函数return {add: function () {dispatch({//通过dispatch调用model中定义的函数,通过type属性,指定函数名type: namespace + "/addNewData"});},init: () =>{dispatch({//通过dispatch调用model中定义的函数,通过type属性,指定函数名type: namespace + "/initData"});}}})
class List extends React.Component {componentDidMount() {//初始化操作this.props.init();}constructor(props) {super(props);}render() {return (<div><ul>{this.props.dataList.map((value, index) => {return <li key={index}>{value}</li>})}</ul><button onClick={() => {this.props.add();}}>点我试试</button></div>);}
}export default List;

1.4.mock数据

umi中支持对请求的模拟，由于我们现在没有真正的服务可以返回数据，所以才需要模拟，在项目根目录下创建mock目录，然后创建MockListData.js,并且输入如下内容

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

2.Ant Design

2.1.Ant Design介绍

Ant Design是阿里的蚂蚁金服团队基于React开发的UI组件，主要用于中后台系统的使用。

特性：

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

2.2.Ant Design使用

Ant Design是一个服务于企业级产品的设计体系，组件库是它的React实现，antd被发布为一个npm包方便开发者安装并且使用；

在umi中，可以通过在插件集umi-plugin-react中配置antd打开antd插件，antd插件会帮你引入antd并实现按需编译。

在config.js文件中进行配置：

export default {plugins: [['umi-plugin-react',{dva:true, //开启dva功能antd:true //开启AntDesign}]]
};

我们参考Ant Design的官网

import React from 'react';
import { Tabs } from 'antd';//第一步导入需要使用的组件function callback(key) {console.log(key);
}const TabPane = Tabs.TabPane;class MyTabs extends React.Component {render() {return (<Tabs defaultActiveKey="1" onChange={callback}><TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane><TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane><TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane></Tabs>);}
}export default MyTabs;

2.3.布局

在后台系统页面布局中，往往是经典的三部分布局.

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

在src目录下创建layouts目录，并且在layouts目录下创建index.js文件，写入内容。

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中约定的目录结构中，layouts/index.js文件将被作为全局的布局文件。

接下来，配置路由（非必须），在config.js文件中：

注意：下面的路由配置，是表明你需要通过手动配置的方式进行访问页面，而不是采用umi默认的路由方式。

export default {plugins: [['umi-plugin-react', {dva: true, //开启dva功能antd: true //开启AntDesign}]],//非必须routes: [{path: '/',component: '../layouts', //配置布局路由}]
};

之后我们需要对页面进行美化，并需要引入导航条。最后给导航条添加链接

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'}}/><MenudefaultSelectedKeys={['1']}defaultOpenKeys={['sub1']}mode="inline"theme="dark"inlineCollapsed={this.state.collapsed}><SubMenu key="sub1" title={<span><Icon type="user"/><span>用户管理</span></span>}>{/* 通过umi提供的Link来代理a标签就可以解决点击链接标签选中状态异常问题 */}<Menu.Item key="1"><Link to="/user/UserAdd">新增用户</Link></Menu.Item><Menu.Item key="2"><Link to="/user/UserList">新增列表</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;

2.4.表格

1.page层

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}}><Columntitle="姓名"dataIndex="name"key="name"/><Columntitle="年龄"dataIndex="age"key="age"/><Columntitle="地址"dataIndex="address"key="address"/><Columntitle="标签"dataIndex="tags"key="tags"render={tags => (<span>{tags.map(tag => <Tag color="blue" key={tag}>{tag}</Tag>)}</span>)}/><Columntitle="操作"key="action"render={(text, record) => (<span><a href="javascript:;">编辑</a><Divider type="vertical"/><a href="javascript:;">删除</a></span>)}/></Table></div>);}}export default UserList;

2.model层

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}}}}

3.添加mock数据

export default {'get /ds/list': function (req, res) {//模拟请求返回数据res.json({dataList: [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: '李四2',age: 42,address: '北京市',tags: ['屌丝'],}, {key: '3',name: '王五3',age: 32,address: '杭州市',tags: ['高富帅', '富二代'],}]);}
}

3.Ant Design Pro

Ant Design Pro是基于Ant Design的一个开箱即用的，企业级中后前端/设计解决方案。我们可以直接去github上下载文件。

源码地址：

Ant Design Pro提供的目录如下：

进行初始化以及启动：

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

3.1.菜单和路由

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

打开router.config.js后，可以看出，pro提供了2套路由布局。分别是/user和/

我们可以新增一个路由进行测试:

在这里插入图片描述

得到的结果如下图，显示的文字我们需要去国际化进行配置

下面我们将在国际化文件中进行配置

##3.2.新增页面

所有的页面是保存在src/pages中，在pages目录下，以功能为单元创建目录。创建文件MyTestAnalysis.js

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

修改路由中的路径

之后进行测试，就可以看到一个新的页面就建好了，并且已经加入到菜单中。

Ant Design 与 Ant Design Pro相关推荐

linux ant安装jar,ant打JAR、WAR包
1. ant安装上官网下载ANT:http://ant.apache.org/bindownload.cgi 解压出来,添加系统变量ANT_HOME,并把ANT路径加入系统变量Path中在命令行中 ...
Ant参考教程 ant教程
Ant参考教程 ant教程 1,什么是ant ant是构建工具 2,什么是构建概念到处可查到,形象来说,你要把代码从某个地方拿来,编译,再拷贝到某个地方去等等操作,当然不仅与此,但是主要用来干这 ...
[Ant自动打包]ant执行命令的详细参数和Ant自带的系统属性
转自:http://hi.baidu.com/yuanzhifeng/item/75d03d11e9b2010eb88a1a6d?qq-pf-to=pcqq.c2c ant学习笔记之(ant执行命令的 ...
ant安装和ant的环境配置
1.ant安装和ant的环境配置 2.'mode'.'explorer' 不是内部或外部命令,也不是可运行的程序或批处理文件.解决方法. 3.java.lang.OutOfMemoryError: r ...
【ant】Apache ant 开发
Apache ant 开发 Ant是Apache软件基金会JAKARTA目录中的一个子项目,它有以下的优点.跨平台性.Ant是纯Java语言编写的,所以具有很好的跨平台性.操作简单.Ant是由一个内置 ...
ant vue 语言_Ant Design Vue是什么
Ant Design Vue 是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库,组件的风格与Ant Design保持同步,组件的html结构和css样式也保持一致. Ant Desi ...
[Ant Design Vue]Ant Design Vue搭建项目
一.为什么要用Ant Design 1.因为它是蚂蚁金服产出的一套牛逼哄哄的产品 2. 丰富的组件化设计规范和组件化编码规范 3.它适用于企业级的中后台搭建二.快速创建项目 1.安装脚手架 npm ...
【ant】处理Ant Design 3.24.3版本Popover在父元素fixed的情况下跟随滚动条改变位置的问题
背景: 1.fixed定位的底部 2.点击按钮,Popover 的visible设置为true 解决方案: 使用 getPopupContainer={triggerNode => trigge ...
DataUml Design 教程6-DataUML Design 1.1版本号正式公布（支持PD数据模型）
从DataUML Design正式公布到如今有两个月了.因为近期比較忙,到如今才公布1.1版本号. 以后本人会一直坚持不断完好DataUML Design软件,希望广大程序员们多多支持. 一.1.1版 ...
apache ant 安装_Jmeter+ Ant+jenkins 接口自动化框架实现
一.文件配置 •编写jmeter脚本 •上传jmx脚本到jmeter目录下,新建一个Loadtest目录, •在Tomcat webapp 文件夹下面新建报告输出文件夹testReport: •将jm ...

Ant Design 与 Ant Design Pro