【商城后台管理系统】项目初始化（UmiJS）

小张快跑。

已于 2023-05-31 17:00:21 修改

阅读量1.1k

点赞数

分类专栏：项目开发实战——React+Antd Pro 文章标签：前端 react antd pro

于 2023-05-10 02:40:30 首次发布

本文链接：https://blog.csdn.net/io_123io_123/article/details/130156072

版权

项目开发实战——React+Antd Pro 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了UmiJS框架下如何操作HTML模板，包括默认模板的修改和配置。接着讲解了Mock数据的使用，如创建Mock文件、编写和关闭Mock数据。最后，阐述了如何在UmiJS中整合dva进行数据管理。

摘要由CSDN通过智能技术生成

一、HTML模板

1.1什么是HTML模板

简单来说HTML模板就是页面的初始结构。众所周知，我们所使用的React框架只是为了提高我们的开发效率，我们的代码最终都是要被编译成.html文件才会被页面所识别，所以页面的基础结构，比如<html><title><body>等这些都是必须的，这也就是我们所说的HTML模板。

在UmiJS中，HTML模板的路径是：umijs\node_modules\@umijs\core\lib\Html\document.ejs，很显然，这是在node_modules中的，所以当遇到定制化的HTML模板时，在这里操作显然是不现实的。

1.2修改默认模板

新建 src/pages/document.ejs，umi 约定如果这个文件存在，会作为默认模板，比如：

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Your App</title>
</head>
<body>
  <div id="root"></div>  // 必须有一个id为root的<div>  因为react是挂载在上面的
</body>
</html>

1.3配置模板

模板里可通过 context 来获取到 umi 提供的变量，context 包含：

route，路由信息，需要打包出多个静态 HTML 时（即配置了 exportStatic 时）有效
config，用户配置信息

比如：

<link rel="icon" type="image/x-icon" href="<%= context.config.publicPath %>favicon.png" />

二、Mock数据

Mock数据是UmiJS提供的一种在前端根据数据格式。模拟后端数据传递的仿制数据，让前端的开发不在受后端数据的影响，让前后端分离更加方便。

2.1 约定式Mock文件

Umi约定/mock文件为mock文件，/mock下的.js/.ts文件将会被解析成mock文件。

2.2 编写Mock文件

export default {
  // 支持值为 Object 和 Array
  'GET /api/users': { users: [1, 2] },

  // GET 可忽略
  '/api/users/1': { id: 1 },

  // 支持自定义函数，API 参考 express@4
  'POST /api/users/create': (req, res) => {
    // 添加跨域请求头
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.end('ok');
  },
}

2.3 使用Mock数据

由于UmiJS使用了@umijs/preset-react插件，其中集成了基于 umi-request 和 umi-hooks 的请求方案，因此我们不需要再单独引入Axios之类的库，可以直接使用request发送请求。

@umijs/plugin-requesthttps://v3.umijs.org/zh-CN/plugins/plugin-request

// 引入 request
import { request } from 'umi';

export default function IndexPage() {
  const getData = () => {
    // 请求Mock数据  GET请求可以省略
    request.get('/api/users').then(res => {
      console.log('res', res)
    })

    // 使用POST请求获取数据
    const getPostData = async () => {
      const postData = await request('/api/postUser', { method: 'post' })
      console.log('postData', postData)
    }
  }
  return (
    <div>
      {/* 点击按钮获取数据 */}
      <button onClick={getData}>获取数据</button>
      <button onClick={getPostData}>获取POST数据</button>
    </div>
  );
}

2.4 生成模拟Mock数据

由于我们在开发过程中有可能需要用到比较多的Mock数据，但是我们不可能去靠我们自己生成足够的数据，所以我们可以采用引入mock.js的这种第三方库，帮我们批量生成大量模拟数据。

Mock.jshttp://mockjs.com/（1）安装mock.js依赖

yarn add mockjs

（2）引入mockjs

import mockjs from 'mockjs';

（3）按照数据模板生成随机数据

export default {
  // 使用 mockjs 等三方库
  'GET /api/tags': mockjs.mock({
    'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
  }),
};

2.5 关闭Mock数据

当我们在开发过程中，后端接口开发完成后，可以通过全局配置手动关闭我们本地的Mock数据。

方法一：永久关闭

文件：/.umirc.ts

export default {
  mock: false,
};

方法二：临时关闭

MOCK=none umi dev

方法三：配置特定文件不使用Moclk数据

文件：/.umirc.ts

 mock: {
    exclude: ["./index.ts"]
  }

三、整合dva

3.1 dva简介

dva是一个基于redux和redux-saga的数据流方案，是为了简化开发体验。简单来说就是方便我们更简便地使用redux。

@umijs/plugin-dvahttps://v3.umijs.org/zh-CN/plugins/plugin-dva3.2 如何在UmiJS中使用dva

（1）创建ui组件

import React from "react";

const Dva = () => {
  return (
    <div>
      <h3>Dva的使用</h3>
    </div>
  )
}
export default Dva;

（2）创建model

由于UmiJS使用的是约定式model，所以我们直接创建/src/model文件即可。

export default {
  namespace: '', //调用model的时候，通过匿名空间调用，不要和其他的model重名
  state: {}, //状态；跟react中的state类似，和redux中保存的state一样
  effects: {}, //调用服务端的接口，获取数据
  reducers: {}, //更新state
}

（3）将ui组件和model连接

/**/注意：

dva的依赖是包含在@umijs/preset-react集中的，所以默认是可以使用的，但是，dva在使用时需要手动配置，开启dva。

文件：/.umirc.ts
export default {
  dva: {
    immer: true,
    hmr: false,
  },
};