初识Umi.js框架

2023-09-10 10:26:13

准备工作

环境要求

Node.js 12+
npm 6+
Yarn 1.22+
Git

安装Umi.js

npm install -g umi

项目创建

创建一个名为“my-umi-app”的新项目：

umi create my-umi-app

文件结构

Umi.js项目的文件结构通常如下：

|- my-umi-app
  |- .gitignore
  |- node_modules
  |- package-lock.json
  |- package.json
  |- README.md
  |- src
    |- assets
    |- components
    |- pages
    |- models
    |- request
    |- services
    |- utils
    |- App.tsx
    |- index.css
    |- index.tsx

pages文件夹

pages文件夹用于存放路由组件。每个路由组件对应一个.tsx或.jsx文件。

request文件夹

request文件夹用于存放请求逻辑。每个请求对应一个.ts或.js文件。

services文件夹

services文件夹用于存放服务逻辑。每个服务对应一个.ts或.js文件。

添加登录页面

创建login.tsx

在pages文件夹中创建一个login.tsx文件，内容如下：

import React from "react";

const Login = () => {
  return (
    <div>
      <h1>登录</h1>
      <form>
        <input type="text" placeholder="用户名" />
        <input type="password" placeholder="密码" />
        <button type="submit">登录</button>
      </form>
    </div>
  );
};

export default Login;

添加路由

Umi.js使用约定式路由，即根据pages文件夹中的文件自动生成路由。因此，无需手动配置路由。

请求与状态管理

安装axios

npm install axios

创建request文件

在request文件夹中创建一个login.ts文件，内容如下：

import axios from "axios";

export async function login(data) {
  return axios.post("/api/login", data);
}

创建service文件

在services文件夹中创建一个login.ts文件，内容如下：

import { login } from "../request";

export async function doLogin(data) {
  const res = await login(data);
  return res.data;
}

使用service文件

在login.tsx文件中，使用doLogin函数进行登录：

import { doLogin } from "../services/login";

const Login = () => {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();

    setLoading(true);

    const data = {
      username: e.target.username.value,
      password: e.target.password.value,
    };

    const res = await doLogin(data);

    if (res.code === 0) {
      // 登录成功
    } else {
      // 登录失败
    }

    setLoading(false);
  };

  return (
    <div>
      <h1>登录</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" placeholder="用户名" name="username" />
        <input type="password" placeholder="密码" name="password" />
        <button type="submit" disabled={loading}>登录</button>
      </form>
    </div>
  );
};

export default Login;