基于 umi 构建中后台前端项目入门

• 前端三剑客：
  • ES6/ES7： ECMAScript 7 入门，把前几章看完就行了，掌握基本语法。大约需要 1 小时
  • CSS： MDN 的文档 CSS（层叠样式表）很不错，有时间通读；CSS权威指南（第三版） 这本书很好
  • HTML：MDN 的文章 HTML（超文本标记语言）很不错，有时间通读
• React：Facebook 开源的、时下最热的前端框架，官方文档，一定要通读一遍，但是例子没必要全部实现。跟学 JavaScript 一样，有那些东西，基本的语法是要有的
• LESS：LESS 是对 CSS 的一层抽象，使用的时候最终还是会转换成 CSS，官方文档，建议了解其基本语法
• npm/yarn：包管理和构建工具

说明：

• ECMAScript 和 JavaScript 的关系：ES 一种规范，而 JS 是实现（其他实现还有 ActionScript），很多时候 ES 和 JS 是混用的，等价成一个东西。 ES6 和 ES2015 也是同一个东西，只是叫法不一样。
• HTML/CSS 是前端基础中的基础，*必须* 要了解其基本语法，但是他们真的简单，不要有心理压力。HTML 没有太多可说的，对于 CSS 要掌握的有：
  • 基础：颜色、字体、文字样式、对齐、阴影 简单，1 个小时足够
  • 选择器：类选择器、ID 选择器、属性选择器、伪类和伪元素 简单，两个小时学习足够
  • HTML 结构和样式层叠关系 会有点绕，但都是些语法
  • 盒模型： margin padding border 这是布局的基础 简单，一个小时足够
  • 布局：常用的几种定位方式， float 布局难，flex 布局很好理解很好操作。/整体有点难度，但是可以跳过/

• 了解 CSS 之后，LESS 只要看一遍就不用再看了，给你一个例子立马就明白了：

  .main-menu {
    padding: 20px 0;
    background: #e2e2e2;
  }
  
  .main-menu > .navigation {
    display: inline-block;
    padding: 20px 0;
    width: 30%;
    font-style: 15px;
    color: #333;
  }
  
  .main-menu > .navigation:hover {
    text-decoration: none;
    color: #0a6c9f;
    background: #e2e2e2;
  }
  

  这是 CSS 写法，下面 LESS 的写法：

  @background-color: #e2e2e2;
  @padding: 20px 0;
  
  .main-menu {
    & {
      padding: @padding;
      background: @background-color;
    }
  
    > .navigation {
      display: inline-block;
      padding: @padding;
      width: 30%;
      font-style: 15px;
      color: #333;
      &:hover {
        text-decoration: none;
        color: #0a6c9f;
        background: @background-color;
      }
    }
  }
  

  可以理解成 LESS 是 CSS 的预编译语言，最后都会转成 CSS 来运行，而且在 LESS 中写 CSS 的语法也一点问题都没有。

这前提是 React 技术栈，不然那可就多了。

• node.js 是一个基于 Chrome V8 引擎 的 JavaScript 运行时
• react-router URL 路由器：负责把一个 URL 路径绑定到一个 React 组件上 好理解
• redux JavaScript 可预测的状态容器，react-redux 是 React 的实现 难理解
• redux-saga 他是 redux 的中间件 难理解

说明：

• 早期 JavaScript 离开浏览器是不能运行的，node 使得在他可以像 Python 一样在命令行也可以运行，可以写 server 端；这使得 JavaScript 更加的工程化

• 可预测的状态容器不好理解，但是我理解的是他解决的是组件之间数据通信、状态的问题：

  • store 用来存储状态（数据）
  • action 改变状态的动作（向后端请求、或者 A 组件的变化影响 B 组件）
  • reducer action 的结果处理，修改 store ，生成新的 store

  redux 语法很晦涩，redux-saga 目的是更优雅的管理 Side Effects （比如异步请求）

• redux + redux-saga 还是很难理解，dva 整合了 redux 和 redux-saga 用起来就很舒服了

刚开始学不用深入了解每一个关联技术的工作原理，只要知道他的存在目的是什么，是为了解决什么问题。

其实我一开始是不知道 umi 的，只知道 Ant Design Pro。从 Pro 0.x/1.0 到 Pro 4.0（umi） 只不过短短的两年多时间，只能感叹发展太快了，我恰好在挖财做云平台完整的经历了从 Pro 到 umi 的蜕变。

这期间躺了很多坑，也在 issue 上吐槽了。然而，最终的结果还是比较令人满意的。大体的发展图是这样的：

安装脚手架：

npm install umi -g

新建项目：

=> mkdir umi-demo && cd umi-demo
=> npm create umi
? Select the boilerplate type
  ant-design-pro  - Create project with a layout-only ant-design-pro boilerplate, use together with umi block.
> app             - Create project with a simple boilerplate, support typescript.
  block           - Create a umi block.
  library         - Create a library with umi.
  plugin          - Create a umi plugin.

这里选择 app 不要选择 ant-design-pro ，否则会增加很多的 pro template 代码，不够纯粹（不方便演示）；实际中后台项目如果为了省事可是使用 pro。

? Do you want to use typescript? (y/N)

N ，如果想使用 typescript，可以输入 y 。

? What functionality do you want to enable? (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ antd
 ◯ dva
 ◯ code splitting
 ◯ dll
 ◯ internationalization

a 全选即可，如果你想使用其他的 react UI 组件库，这里可以不用 antd 换成别的。

安装依赖包：

npm install

默认情况下 umi 使用 配置式路由，即 URL 对应的相应组件由配置文件中指定。你也可以 约定式路由，即 URL 由 pages 目录下的路径所对应的文件自动处理， 根 / 自动找 index.js 文件。对于初学者理解起来有点困难，建议用 配置式路由。 配置式路由文件在 .umirc.js 。

运行 npm start 。

.
├── .umirc.js
├── mock
│   └── .gitkeep
├── package.json
├── src
│   ├── app.js
│   ├── assets
│   │   └── yay.jpg
│   ├── global.css
│   ├── layouts
│   │   ├── index.css
│   │   └── index.js
│   ├── locales
│   │   └── en-US.js
│   ├── models
│   └── pages
│       ├── index.css
│       └── index.js
└── webpack.config.js

• mock API mock
• src 业务源代码都在这里，其中：
  • global.css 全局 css 文件，约定每个 pages 下面的 css 文件只能作用于对应的 js 文件，避免 css 污染
  • layout 页面布局组件
  • models 全局 models
  • pages 所有的 URL handler 都在这里，一个 pages 中一般会包含属于自己的 jsx，样式 css，model.js，组件等；
  • locales 用于国际化，可在 .umirc.js 中开启关闭，使用时 import { formatMessage } from 'umi-plugin-locale'; 然后使用 formatMessage 转换
  • components 用于存放全局组件
• dist npm build 之后，会将静态文件输出到 dist 中

1. 页面路由

本示例将说明，从 URL 访问到组件生命周期开始，请求数据，然后渲染。

所有的路由配置都在 .umirc.js 的 routes 下面，在 routes/routes 中新增：

{ path: '/hello', component: './hello' }

将 hello 映射到 hello 组件中，默认会在 pages 下寻找 hello/index.js 文件。所以需要在 pages 下面新建 hello/index.js 文件：

export default () => "hello, world";

然后访问 http://localhost:8000/hello 即可看到 hello, world 页面。

2. 异步请求数据

React 中的每一个组件，都有生命周期。 /hello 这个页面对应的组件也是；在 React 组件生命周期 中有说明，里面列举了常用的和不常用的部分，生命周期是 React 的组件基础，最好认真看看文档。这里只说实现：

假设 hello 页面需要从后端获取一批用户信息，然后展示出来。从哪里发出请求呢？一般是从 componentDidMount ，他是页面首次渲染之后，第一次调用的方法，而且只会调用一次。

import axios from 'axios';
import { Component } from 'react';
import { message } from 'antd';

export default class Hello extends Component {
  state = {
    userList: [],
  }

  componentDidMount() {
    this.queryUsers();
  }

  queryUsers = async () => {
    const resp = await axios.get('/api/users');
    if (resp.status === 200) {
      this.setState({
        userList: resp.data,
      })
    } else {
      message.error(`请求出错：code={resp.statusText}`);
    }
  }

  render() {
    console.log(this.state.userList);
    return "Hello, World";
  }
}

页面逻辑复杂了，要加生命周期函数，所以改成了 class 组件（之前是函数组件），另外，需要后端请求，所以安装了 axios npm install axios --save ，他是一个 http 请求库，类似的还有 fetch，umi 官方提供的是 umi-request，都可以。

代码里我们干了这几个事情，在 componentDidMount 中发起后端调用 queryUsers ，他是异步的（async…await 了解一下），最终正确返回时将数据设置到 state 中，错误提示（message 是 antd 提供的一个消息提示组件）。

因为我们没有实际的后端服务，所以需要 mock 一个。在 mock 目录下新建 user.js 文件，然后写入：

export default {
  'GET /api/users': [
    {
      name: '张三',
      gender: '男',
      age: '22',
      addr: '中国，北京',
    },
    {
      name: '李四',
      gender: '男',
      age: '23',
      addr: '中国，上海',
    },
    {
      name: '王五',
      gender: '女',
      age: '23',
      addr: '中国，广州',
    },
  ],
};

它 mock 了一个 /api/users 的 GET 请求，并返回了一些数据。

最后，刷新页面即可看到 console 显示了我们获得到的数据。

3. 数据渲染

得到后端返回的数据之后，需要将数据显示到渲染， render ：

render() {
  const { userList } = this.state;
  return (
    <table>
      <tbody>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>年龄</th>
          <th>地址</th>
        </tr>
        {userList.map(item => (
          <tr key={item.name}>
            <td>{item.name}</td>
            <td>{item.gender}</td>
            <td>{item.age}</td>
            <td>{item.addr}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

刷新页面即可看到数据已经显示在页面上了。

4. 美化一下

原生的表格样式比较「丑陋」，可以手动改 css 文件。umi 引入了 antd ，antd 提供了 表格组件：

render() {
  const { userList } = this.state;

  const columns = [
    { title: '姓名', dataIndex: 'name' },
    { title: '性别', dataIndex: 'gender' },
    { title: '年龄', dataIndex: 'age' },
    { title: '地址', dataIndex: 'addr' },
  ];

  return <Table dataSource={userList} columns={columns} bordered />;
}

再刷新，就发现表格显示就美观多了。

【可选】使用 dva 请求数据

大部分时候请求数据直接 request 即可，但有组件需要通信的情况用 redux 能方便很多。所以我们将上面的例子改写成 dva 的方式。 流程如下图：

需要 hello 目录下新建两个文件：

• model.js （子页面的 model 只能被子页面引用）
• api.js 异步发起 API 调用

看起来有些麻烦（实际上已经比原生的 Redux 写法简单多了），逻辑还是很清晰的。 这么做的好处是，model 可以被多个组件绑定一份数据变更会触发多个组件渲染，也就达到了组件数据通信的目的。

为了演示更加纯粹，所以 umi 创建项目的时候，选择了 app ，实际中后台项目建议勾选 ant design pro 。使用 pro 之后自动增加了几个刚需的模板：

• 登录范例
• 菜单自动生成
• 菜单前端鉴权
• 常用的 layout

npm build 打包之后，在 dist 目录下生成了类似如下的文件（我希望文件带 hash 值，所以配置中添加了 hash: true ）：

.
├── index.html
├── layouts__index.993844f1.chunk.css
├── layouts__index.d5b2fbe6.async.js
├── p__hello.aaf350ae.async.js
├── p__hello__model.js.bc91bd32.async.js
├── p__index.29672b36.async.js
├── p__index.fc500c15.chunk.css
├── static
│   └── yay.44dd3333.jpg
├── umi.5e4f0268.js
├── umi.efbd33bc.css
├── vendors.4391d77a.async.js
└── vendors.5f8d95ca.chunk.css

1 directory, 12 files

一个前端渲染的（CSR）的前端应用，只需要一个 nginx 服务，将 root 指向静态文件所在目录即可。