一、前言

上一章节我们搭建了前端开发环境并启动了我们的第一个项目，这一章节我们将搭建前端开发框架，并结合登录接口来开发前端的登录页面。

实现效果如下：

在线演示地址：http://121.43.43.59/ （帐号：admin 密码：123456）

二、登录页面实现

看过上一章节的小伙伴会发现我们使用了umi框架，它是一个企业级的前端应用框架，也是react技术栈里比较成熟热门的框架（是一个很方便优秀的轮子）关于umi的介绍和使用可以阅读官网文档：https://umijs.org/zh-CN

1. 创建登录模块文件并配置路由

1）cmd进入我们的前端项目根目录后，执行下面的命令会在pages文件夹下创建一个login文件夹：
npx umi g page login/index --typescript

创建后的目录结构：

2）然后在 .umirc.ts 中配置路由，将routes项配置改成如下：

routes: [
    { path: '/', component: '@/pages/login' },
  ],

这个时候cmd使用yarn start启动项目，然后浏览器访问：http://localhost:8000/ 看到如下页面代表成功：

2. 开发登录静态页面

1）复制下面的代码到pages/login目录下的index.css文件中：

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: auto;
  background: #f0f2f5;
}
.login {
  width: 400px;
  padding: 20px;
  border-radius: 12px;
  background: white;
}

2）再复制下面的代码到pages/login目录下的index.tsx文件中：

import React from 'react';
import { Form, Input, Button } from 'antd';
import styles from './index.css';

const Login = () => {
  const onFinish = async (values: any) => {
    console.log('Success:', values);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <div className={styles.container}>
      <div className={styles.login}>
        <h1 style={{ fontWeight: 600, textAlign: 'center', marginBottom: 30 }}>
          曲鸟自动化测试平台
        </h1>
        <Form
          name="basic"
          wrapperCol={{ span: 24 }}
          layout="vertical"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            label="用户名"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </Form.Item>
          <Form.Item
            label="密码"
            name="password"
            rules={[{ required: true, message: 'Please input your password!' }]}
          >
            <Input.Password />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" style={{ width: '100%' }}>
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
};
export default React.memo(Login);

3）保存项目，不出意外的话，在刚刚的网页中你会看到如下页面：

这样我们就完成了前端静态页面的开发了。

三、搭建前端开发框架并对接接口

注：首先要启动我们之前开发的django接口项目

1. 创建服务（请求接口）层

我们在pages同目录下创建一个services文件夹，这个文件夹是用来放我们项目中涉及到接口请求的方法；

然后在services目录下，创建users文件夹，这个文件夹代表的是与用户相关的接口请求方法；

目录下的两个文件typings.d.ts和index.ts，分别代表请求参数的类型要求规定，和具体的请求方法：

2. 加入请求方法和请求参数规则代码

1）为services\users文件夹下的typings.d.ts加入如下代码：

// @ts-ignore
/* eslint-disable */

declare namespace API {

  type LoginParams = {
    username: string;
    password: string;
  };
}

上面的代码代表请求参数有两个：username、password，并且它们的类型都为string

2）为services\users文件夹下的index.ts加入如下代码：

import { request } from 'umi';

export function login(params: API.LoginParams) {
  
  return request<any>('/user/login', {
    method: 'POST', //请求方法
    data: params, //请求参数
  });
}

上面的代码是代表请求/user/login这个接口

3. 简单配置请求模块代码

1）将src目录下的app.tsx文件加入如下代码：

import { RequestConfig } from 'umi';

export const request: RequestConfig = {
  prefix: '/api',
  credentials: 'include',

  // 自定义错误规范
  errorConfig: {
    adaptor: (res) => {
      return {
        success: res.code,
        data: res.data,
        errorCode: res.code,
        errorMessage: res.msg,
      };
    },
  },
  middlewares: [],
};

2）将src目录下的.umirc.ts文件加入如下代码：

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  title: "曲鸟自动化测试平台", //改变浏览器title
  proxy: {
    '/api': {
      target: 'http://localhost:8001/',
      changeOrigin: true,
      pathRewrite: { '^/api': '' },
    },
  },

  routes: [
    { path: '/', component: '@/pages/login' },
  ],
  fastRefresh: {},
});

4. 加入请求登录接口代码

1）将登录页pages/login/index.tsx文件的onFinish方法代码：

const onFinish = async (values: any) => {
    console.log('Success:', values);
  };

替换为如下代码：

const onFinish = async (values: any) => {
    console.log('Success:', values);
    services.login({ username: values.username, password: values.password }).then(
      (res) => message.success(res.msg));
  };

2）在文件头部引入我们写好的服务层services：

import * as services from '@/services/users';

保存项目，这个时候在网页上点登录按钮就会发送请求与后端服务进行交互了：

四、总结

至此，我们已经完成了前端开发框架的搭建和登录功能的实现，从中熟悉了前后端的一些技术栈。

当然这个过程中会存在不少疑问，可以点击下方在线演示地址进行反馈。

在线演示地址：http://121.43.43.59/ （帐号：admin 密码：123456）

欢迎在文章头部右上角订阅本专栏，及时获取最新教程分享！

自动化测试平台(五)：搭建前端开发框架并实现前端登录功能