前端技术学习记录：react+dvajs+ant design实现暴走计算器的页面重构（一）

前言
现在的效果
安装 dva-cli
创建新应用
预览项目
文件结构简单介绍
使用 antd做页面
定义自己的页面
定义路由
开始编写导航栏
使用Layout等进行简单布局
LOGO和个人图标的加入
新增事件读取当前选择菜单

前言

生命不停，学习不止。
最近在业余时间看了些react的视频和文档，本文作为本次学习后练习的一个DEMO，以此文章做记录。
因为我是一个做后端的，对前端的知识并不是那么的熟悉，所以可能存在一些设计不合理，可优化的问题，欢迎指正。
本次Demo基于我一年前玩过的一款游戏，部分玩家对其开发的【暴走英雄坛计算器】，本次只练习前端，后端接口就仍然调用其原本的接口。

现在的效果

【暴走英雄坛计算器H5】

安装 dva-cli

默认你们电脑安装了node，打开cmd命令。
通过 npm 全局安装 dva-cli 并确保版本是 0.9.1 或以上。我的是0.10.1。

$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1

创建新应用

安装完 dva-cli 之后，就可以在命令行里访问到 dva 命令了。
首先我们新建一个文件夹作为工作空间。
然后通过 dva new 创建我们本次的应用，我就取名baozouApp吧。

$ dva new baozouApp

创建成功：

预览项目

创建好baozou爱趴趴之后，进入项目路径，通过npm启动项目

$ cd baozouApp
$ npm start

启动成功：
访问http://localhost:8000/#/可以看到默认页面：

文件结构简单介绍

我这里用的是WebStorm，也可以使用别的开发工具。打开项目初始化目录如下。

使用 antd做页面

在WebStorm中打开Terminal面板，在这里执行命令，为了方便不在cmd命令行执行了。

$ npm install antd babel-plugin-import --save

安装完成：
编辑 .webpackrc，使 babel-plugin-import 插件生效。

{"extraBabelPlugins": [["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]]
}

定义自己的页面

删除初始化项目时components、models、routes、services这几个文件夹下的文件，在routes文件夹下新建一个页面BzMain.js。

import React from 'react';const BzMain = (props) => (<h2>欢迎来到：BzMain</h2>
);export default BzMain;

定义路由

路由可以想象成是组成应用的不同页面。
编辑router.js，将项目的默认加载页面改成BzMain。

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import BzMain from './routes/BzMain';function RouterConfig({ history }) {return (<Router history={history}><Switch><Route path="/" exact component={BzMain} /></Switch></Router>);
}export default RouterConfig;

然后在浏览器里打开 http://localhost:8000/#/，看看页面是否加载成功。

开始编写导航栏

安装ant的图标库

npm install --save @ant-design/icons

在之前的暴走计算器页面可以看到，导航栏是页面跳转中一直存在的，所以我们可以把他做成无状态组件，而不是页面。
在components文件夹下，新建BzMenu.js。

import React from 'react';
import {Menu} from 'antd';
import {AppstoreOutlined} from '@ant-design/icons';const BzMenu = () => {return (<Menu  mode="horizontal"><Menu.Item key="1" icon={<AppstoreOutlined/>}>真元</Menu.Item><Menu.Item key="2" icon={<AppstoreOutlined/>}>基础</Menu.Item><Menu.Item key="3" icon={<AppstoreOutlined/>}>装备</Menu.Item><Menu.Item key="4" icon={<AppstoreOutlined/>}>藏经阁</Menu.Item><Menu.Item key="5" icon={<AppstoreOutlined/>}>NPC查找</Menu.Item></Menu>);
};export default BzMenu;

在BzMain.js中引入BzMenu.js。

import React from 'react';
import BzMenu from '../components/BzMenu';const BzMain = (props) => (<BzMenu/>
);export default BzMain;

此时效果如下：

优化BzMenu，现在是很多重复代码，每个导航的标签都是Menu.Item，我们改成从数据读取，循环生成导航菜单，代码如下：

import React from 'react';
import {Menu} from 'antd';
import {AppstoreOutlined} from '@ant-design/icons';const BzMenu = () => {const list = [{key: '1',data: '真元',},{key: '2',data: '基础',},{key: '3',data: '装备',},{key: '4',data: '藏经阁',},{key: '5',data: 'NPC查找',},];return (<Menu mode="horizontal" defaultSelectedKeys={['1']}>{list.map((item) => {return (<Menu.Item key={item.key} icon={<AppstoreOutlined/>}>{item.data}</Menu.Item>);})}</Menu>);
};export default BzMenu;

此时的效果：

看着代码好像是多了，其实不然，这样数据更容易管理，实际开发中也可以查询后台动态生成菜单，做到不同角色能按需加载，以便看到不同的菜单。

使用Layout等进行简单布局

ant design提供了一些布局供我们使用，这里使用Layout做布局，Header是头部：把我们的顶部导航菜单放进去，Content是主体内容：之后切换菜单的时候主要是修改此处的内容，Footer是底部：一般在这里注明一下版权之类的信息。
另外，在routes下新建BzMain.js的样式文件BzMain.less，简单的编写一下样式，在BzMain.js中引入。
BzMain.js代码如下：

import React from 'react';
import BzMenu from '../components/BzMenu';
import {Layout} from 'antd';
import style from './BzMain.less';const {Header, Content, Footer} = Layout;
const BzMain = (props) => {return (<Layout><Header className={style.header}><BzMenu/></Header><Content className={style.content}><div className={style.contentBackground}>Content</div></Content><Footer className={style.footer}>BaoZouApp ©2020 Created by 泡泡糖</Footer></Layout>)
};export default BzMain;

BzMain.less如下：

.header{padding: 0 calc(~"(100vm - 768px)/(2048 - 768) * 50");background: white;width: 100%;position: fixed;z-index: 1;
}
.content{padding: 0 calc(~"(100vm - 768px)/(2048   - 768) * 50");margin-top: 70px;
}.footer{text-align: center;
}
.contentBackground {min-height:calc(~"100vh - 140px");padding: 24px;background: white;
}

效果如下：

less文件预编译样式有个好处，可以用calc做自适应布局，在加上antd本身组件也有响应式设计，这样f12切换到手机页面预览，效果也还好，想用手机打开也不会乱:

LOGO和个人图标的加入

在导航栏的组件中加入暴走英雄坛官方网站的logo和个人信息的图片，同样分为三部分，为了使用响应式布局，引入Row和Col，lg用于大屏幕，sm用于中屏幕，xs用于小屏幕。
BzMenu.js代码如下：

import React from 'react';
import {Col, Menu, Row} from 'antd';
import {AppstoreOutlined, UserOutlined} from '@ant-design/icons';const BzMenu = () => {const list = [{key: '1',data: '真元',},{key: '2',data: '基础',},{key: '3',data: '装备',},{key: '4',data: '藏经阁',},{key: '5',data: 'NPC查找',},];return (<Row><Col sm={{ span: 4, offset: 2, order: 1 }} xs={{ span: 12, offset: 2, order: 1 }}><img src={"http://bz.fy-game.com/state/img/common/header/logo.png"} alt={""} style={{height: "45px"}}/></Col><Col sm={{ span: 16, order: 2 }} xs={{ span: 24, order: 3 }}><Menu mode="horizontal" defaultSelectedKeys={['1']}>{list.map((item) => {return (<Menu.Item key={item.key} icon={<AppstoreOutlined/>} style={item.style}>{item.data}</Menu.Item>);})}</Menu></Col><Col sm={{ span: 1, offset: 1, order: 3 }} xs={{ span: 2, offset: 6, order: 2 }}><UserOutlined/></Col></Row>);
};export default BzMenu;

电脑网页效果：

手机浏览器效果：

但是有一点，导航栏太长，后面的被隐藏了，我们想让他在手机上也能全部显示出来。
同样新建一个与BzMenu.js同级的BzMenu.less，用了写BzMenu.less的样式，然后在BzMenu.js中引入。同样用calc来写表达式，根据宽度计算每个导航栏相关的属性：
BzMenu.js：

import React from 'react';
import {Col, Menu, Row} from 'antd';
import {AppstoreOutlined, UserOutlined} from '@ant-design/icons';
import style from './BzMenu.less';const BzMenu = () => {const list = [{key: '1',data: '真元',},{key: '2',data: '基础',},{key: '3',data: '装备',},{key: '4',data: '藏经阁',},{key: '5',data: 'NPC查找',},];return (<Row><Col sm={{ span: 4, offset: 2, order: 1 }} xs={{ span: 12, offset: 2, order: 1 }}><img src={"http://bz.fy-game.com/state/img/common/header/logo.png"} alt={""} className={style.img}/></Col><Col sm={{ span: 16, order: 2 }} xs={{ span: 24, order: 3 }}><Menu mode="horizontal" defaultSelectedKeys={['1']} className={style.menu}>{list.map((item) => {return (<Menu.Item key={item.key} icon={<AppstoreOutlined/>} className={style.item}>{item.data}</Menu.Item>);})}</Menu></Col><Col sm={{ span: 1, offset: 1, order: 3 }} xs={{ span: 2, offset: 6, order: 2 }}><UserOutlined/></Col></Row>);
};export default BzMenu;

BzMenu.less：

:global {.ant-menu-item {.anticon-appstore {margin-right: calc(~"100vw / 50 - 6px");}}
}
.item {padding: 0 calc(~"100vw / 50 - 2px");
}
.menu {padding-left: calc(~"100vw / 5 - 60px");
}
.img {height: 40px;
}

因为:global中的样式不会被less文件生成哈希值，所以可以用来覆盖ant的默认样式。
电脑效果：

手机效果：

新增事件读取当前选择菜单

这里设及到父组件与子组件的相互传值，我们在父组件定义方法，传递到子组件中，子组件在切换菜单时调用父组件的方法，传值当前下标，父组件方法中打印当前下标。
父组件增加方法：

...function handleMenuSelect(id) {console.log(id);}
...

并传递至子组件

...
<BzMenu onMenuSelect={handleMenuSelect}/>
...

子组件接收参数

...
const BzMenu = ({onMenuSelect}) => {
...

并且调用

...
<Menu mode="horizontal" defaultSelectedKeys={['1']} className={style.menu} onSelect={(value) => onMenuSelect(value.key)}>
...

f12，观察console面板是否在导航切换时，正确打印，效果如下：

今天就练习到这吧，明天再写。