用React给XXL-JOB开发一个新皮肤（三）：实现登录页和Layout骨架

[一. 简述](#一. 简述)
[二. 接口服务调整](#二. 接口服务调整)
- [2.1. 登录接口](#2.1. 登录接口)
- [2.2. 登出接口](#2.2. 登出接口)
- [2.3. 修改密码接口](#2.3. 修改密码接口)
- [2.4. 修改配置文件](#2.4. 修改配置文件)
[三. 前端HTTP 请求](#三. 前端HTTP 请求)
[四. 登录页面](#四. 登录页面)
- [4.1. 搭建登录页面](#4.1. 搭建登录页面)
- [4.2. 对接登录接口](#4.2. 对接登录接口)
[五. Layout 骨架](#五. Layout 骨架)
- [5.1. 搭建骨架](#5.1. 搭建骨架)
- [5.2. Header](#5.2. Header)
- [5.3. 修改密码](#5.3. 修改密码)
- [5.4. 退出登录](#5.4. 退出登录)
[六. 其他](#六. 其他)

一. 简述

上一篇文章我们介绍了项目的目录规划、修改vite 配置并且创建了项目的路由信息。此篇文章我们会先实现登录页面和管理页面的 Layout 骨架。

二. 接口服务调整

在xxl-job-admin 的IndexController 中有我们需要的登录和登出接口；但是从接口输出方式可以看出来，并不符合前后端分离的模式，所有我们这里需要做兼容。另外还需考虑的是在不修改 xxl-job-admin 中的代码（不然我们后面对照功能的时候不方便）的前提下，如何可以给我们现在的项目提供接口呢？

所有我这里创建了一个新的项目 xxl-job-admin-new，此时我们项目目录结构如下：

在这个项目中，maven 依赖相较 xxl-job-admin添加 lombok 和validation这两个，其他的不变；另外我添加全局异常处理和一些必要class，结构如下：

2.1. 登录接口

对于登录接口也无大的改动，仅将之前的POST表单接口改为 POST JSON 方法提交，并添加了表单验证。代码如下：

java 复制代码

@Slf4j
@RestController
@RequestMapping("user")
public class UserController {

  private final XxlJobService xxlJobService;

  private final LoginService loginService;

  public UserController(XxlJobService xxlJobService, LoginService loginService) {
    this.xxlJobService = xxlJobService;
    this.loginService = loginService;
  }

  @PostMapping("login")
  @PermissionLimit(limit=false)
  public ReturnT<UserLoginResponseDto> loginDo(@RequestBody @Validated UserLoginRequestDto param, HttpServletRequest request, HttpServletResponse response){
    return new ReturnT<>(loginService.login(param, request, response));
  }
}

这里的@PermissionLimit是做鉴权的，具体可以看PermissionInterceptor拦截器。

这里的登录逻辑也很简单，先校验登录表单，然后通过用户名称获取用户实体XxlJobUser，密码比对；接着将XxlJobUser转为十六进制的字符串；最后将登录信息写入 Cookie 并返回。

这里不做详细的 Java 代码分析，后面有时间在写一个专门把 xxl-job 源码分析的专栏吧。

2.2. 登出接口

登出接口也不变，就是清除 Cookie。

java 复制代码

@Slf4j
@RestController
@RequestMapping("user")
public class UserController {

  private final XxlJobService xxlJobService;

  private final LoginService loginService;

  public UserController(XxlJobService xxlJobService, LoginService loginService) {
    this.xxlJobService = xxlJobService;
    this.loginService = loginService;
  }

  @GetMapping("logout")
  @PermissionLimit(limit=false)
  public ReturnT<String> logout(HttpServletRequest request, HttpServletResponse response){
    return new ReturnT<>(loginService.logout(request, response));
  }
}

2.3. 修改密码接口

修改密码的接口，改为 Get 请求，代码如下：

java 复制代码

@Slf4j
@RestController
@RequestMapping("user")
public class UserController {

  private final XxlJobService xxlJobService;

  private final LoginService loginService;

  public UserController(XxlJobService xxlJobService, LoginService loginService) {
    this.xxlJobService = xxlJobService;
    this.loginService = loginService;
  }

  @GetMapping("updatePwd")
  public ReturnT<String> updatePwd(HttpServletRequest request, @RequestParam("password") String password){
    password = password.trim();
    if (!(password.length()>=4 && password.length()<=20)) {
      return new ReturnT<String>(PASSWORD_LEN_ERROR, PASSWORD_LEN_ERROR.getMsg());
    }

    // md5 password
    String md5Password = DigestUtils.md5DigestAsHex(password.getBytes());

    // update pwd
    XxlJobUser loginUser = (XxlJobUser) request.getAttribute(LoginServiceImpl.LOGIN_IDENTITY_KEY);

    // 修改
    loginService.updateUser(loginUser.getId(), md5Password);
    return new ReturnT<>("密码修改成功");
  }
}

这里的代码，仅修改了loginService.updateUser(loginUser.getId(), md5Password);将修改的逻辑下放到了 service 层。

2.4. 修改配置文件

最后我们需要将application.properties 中关于 freemarker和 resources 的配置移除，并将启动端口改为 9090；另外还需要将 logback.xml 中的日志文件修改一个其他的名字。

此时我们启动项目是无法启动，因为报一个i18n 的错误，此时需要我们在 XxlJobScheduler.java 中将 iniI8n()的初始化方法注释就可以了。

好了，现在我们可以启动 xxl-job-admin-new 的服务了。

上面的部分是关于后端接口修改，不太理解的前端同学可以直接访问项目启动后端服务就可以了！

三. 前端HTTP 请求

这里我们是用的是 axios 请求接口，一般来说大家都会封装下，我在 naive 的开源项目naive-ui-admin 中看到一个封装很不错的 axios 请求工具，我在此基础上修改了下封装到了 utils 中的 request.ts工具类。

这里封装比较麻烦，但是很好用，有时间可以开一篇文章详细介绍下，如何封装的。

在之前文章中，我们在 src 目录中有一个 api 的目录，就是专门存放，我们调用后端接口的 api 函数，这里我们将用户相关的操作都放到 user.ts中。

typescript 复制代码

import {User} from "@/types";
import {https} from "@/utils/request.ts";

namespace UserApi {

  /**
   * 登录
   * @param param
   * @constructor
   */
  export const UserLogin = (param: User.UserLoginFormProp): Promise<User.UserLoginResultProp> => {
    return https.request({
      url: '/user/login',
      method: 'post',
      data: param
    })
  }

  /**
   * 退出登录
   * @constructor
   */
  export const UserLogout = (): Promise<string> => {
    return https.request({
      url: '/user/logout',
      method: 'get'
    })
  }

  /**
   * 修改密码
   * @param pwd
   * @constructor
   */
  export const UpdatePassword = (pwd: string): Promise<string> => {
    return https.request({
      url: '/user/updatePwd',
      method: 'get',
      params: {password: pwd}
    })
  }
}

export default UserApi

这里面的User.UserLoginFormProp和User.UserLoginResultProp是登录的输入和输出模型定义（文章后面会有定义的具体属性）。

这里我们还需要在vite.config.ts中开启代理：

typescript 复制代码

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  
  server: {
    port: 9091,
    proxy: {
      "/api": {
        target: "http://localhost:9090/xxl-job-admin",
        changeOrigin: true, // 跨域设置
        rewrite: (path) => path.replace(/^\/api/, ""), // 将 api 前缀去掉
      },
    },
  },
})

四. 登录页面

这里的登录页面我们这里借鉴 Ant Design Pro的登录页面，略作修改就可以了。

4.1. 搭建登录页面

这里登录页面就是一个 form 表单，直接使用https://ant-design.antgroup.com/components/form-cn的表单组件。代码如下：

ts 复制代码

import styled from "@emotion/styled";
import {Button, Card, Checkbox, Form, Input, message, Typography} from "antd";
import {LockOutlined, UserOutlined} from "@ant-design/icons";
import {User} from "@/types";
import {useNavigate} from "react-router-dom";
import {DEFAULT_HOME_PATH} from "@/config/constant.ts"; // 定义的一些静态常量

const LoginPage = () => {

  const navigate = useNavigate(); // 路由切换 hooks
  const [form] = Form.useForm<User.UserLoginFormProp>();

  const onSubmit = () => {
    form.validateFields().then(value => {
      console.log("value => ", value);
      // TODO 调用登录接口
    })
  }


  return <Container>
    <Card className="login-card" style={{width: 400}}>
      <Typography.Title level={3} style={{textAlign: 'center', marginBottom: 40}}>任务调度中心</Typography.Title>
      <Form
        name="normal_login"
        className="login-form"
        initialValues={{ remember: true }}
        form={form}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入账号名称!' }]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入登录账号" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入账号密码!' }]}
        >
          <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="请输入登录密码"/>
        </Form.Item>
        <Form.Item className="form-login-btn">
          <Form.Item name="ifRemember" valuePropName="unchecked" noStyle>
            <Checkbox>记住密码</Checkbox>
          </Form.Item>
          <Button type="primary" className="login-form-button" onClick={onSubmit}>登录</Button>
        </Form.Item>
      </Form>
    </Card>
  </Container>
}

这里的<Container>标签是通过@emotion/styled创建样式化组件。

css 复制代码

const Container = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    overflow: auto;
    background-image: url('https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/V-_oS6r-i7wAAAAAAAAAAAAAFl94AQBr');
    background-size: 100% 100%;
    .login-card {
      position: absolute;
      top: 20%;
      .ant-card-body {
          padding-top: 8px;
          .form-login-btn {
              .ant-form-item-control-input-content {
                  display: flex;
                  flex-direction: row;
                  justify-content: space-between;
                  align-items: center;
              }
          }
      }
  }
`

运行项目，效果如下：

4.2. 对接登录接口

我们在 types目录添加一个 user.type.ts 文件，存放用户相关的接口模型（这个模型就是上面定义的）。

java 复制代码

namespace User {
  // UserLoginFormProp 用户登录表单属性
  export interface UserLoginFormProp {
    username: string; // 用户名
    password: string; // 密码
    ifRemember: boolean; // 记住密码
  }
  
  // UserLoginResultProp 用户登录返回属性
  export interface UserLoginResultProp {
    userId: number; // 用户名
    username: string; // 密码
    role: number;
    token: string;
    permission: string[];
  }
}

export default User;

最后使用 index.ts导出

java 复制代码

import User from "@/types/user.type.ts";

export type {
  User
}

这里对接登录接口，我们使用了 ahooks 中的 useRequest ，具体使用就是官方文档中有详细的介绍。https://ahooks.gitee.io/zh-CN/hooks/use-request/index

下面看一下如何借助 useRequest 轻松的调用我们的接口：

typescript 复制代码

const loginRequest = useRequest(UserApi.UserLogin, {
  manual: true, // 表示手动触发
  onSuccess: (result) => {
    console.log(result);
    message.success('登录成功');
    navigate(DEFAULT_HOME_PATH); // 跳转到首页
  }
})

const onSubmit = () => {
  form.validateFields().then(value => {
    loginRequest.run(value) // 手动调用登录接口
  })
}

最后我们看一下浏览器的Cookie。

五. Layout 骨架

整个 Layout 骨架主要分为左侧菜单、Header 和内容三部分，这里我们直接使用 antd 实现骨架。

5.1. 搭建骨架

直接上代码：

typescript 复制代码

<Container>
  {/* 菜单 */}
  <Layout.Sider trigger={null} collapsible collapsed={collapsed}>
    <div className="xxl-logo-vertical" />
    <Menu
      theme="dark"
      mode="inline"
      selectedKeys={selectedKeys}
      onClick={({key}) => clickMenu(key)}
      items={[
        {
          key: '/xxl-job/report',
          icon: <BarChartOutlined />,
          label: '运行报表',
        },
        {
          key: '/xxl-job/task',
          icon: <SnippetsOutlined />,
          label: '任务管理',
        },
        {
          key: '/xxl-job/dispatch',
          icon: <CalendarOutlined />,
          label: '调度日志',
        },
        {
          key: '/xxl-job/executor',
          icon: <MenuOutlined />,
          label: '执行器管理',
        },
        {
          key: '/xxl-job/user',
          icon: <UserOutlined />,
          label: '用户管理',
        },
        {
          key: '/xxl-job/course',
          icon: <BulbOutlined />,
          label: '使用教程',
        },
      ]}
    />
  </Layout.Sider>
  {/* 内容 */}
  <Layout>
    {/* 头 */}
    <Layout.Header style={{ padding: 0, background: colorBgContainer, display: "flex" }}>
      <Button
        type="text"
        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
        onClick={() => setCollapsed(!collapsed)}
        style={{
          fontSize: '16px',
          width: 64,
          height: 64,
        }}
      />
      <div style={{flex: '1 1 0%'}} />
      <div className="header-right-content">
        <div style={{height: '100%'}}>
          <div className="header-right-content-inner">
            <Dropdown key="translate" menu={{ items: translates}} placement="bottom" arrow={{ pointAtCenter: true }}>
              <div className="ant-dropdown-trigger-str">
                <TranslationOutlined />
              </div>
            </Dropdown>
            <Dropdown key="items" menu={{ items, onClick: logoutClick}} placement="bottom" arrow={{ pointAtCenter: true }}>
              <div className="ant-dropdown-trigger-logout">
                <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
                <span>管理员</span>
              </div>
            </Dropdown>
          </div>
        </div>
      </div>
    </Layout.Header>
    {/* 内容 */}
    <Layout.Content style={{
      margin: '16px 16px',
      padding: 24,
      minHeight: 280,
      background: colorBgContainer,
      borderRadius: borderRadiusLG,
    }}>
      <Outlet />
    </Layout.Content>
  </Layout>
  <Modal title="修改密码" open={showModel} onOk={okUpdatePassword} onCancel={closeUpdatePassword}>
    <Input placeholder="请输入新密码" value={password} onChange={e => setPassword(e.target.value)}/>
  </Modal>
</Container>

这里的 Menu 菜单涉及到一个点击菜单切换路由的功能，代码如下：

typescript 复制代码

const navigate = useNavigate(); // 路由切换 hooks
const [selectedKeys, setSelectedKeys] = useState<string[]>([DEFAULT_MENU_KEY]); // 默认路由

const clickMenu = (data: string) => {
  setSelectedKeys([data]) // 选中菜单
  navigate(data) // 切换路由
}

路由切换提现为组件切换，主要是通过<Outlet />，前面的文章已经介绍过了。

接着我们这个需要在介绍下，Header 部分的代码，这里包含一个菜单的收缩按钮，另一个是就是一个用户头像（包含修改密码和退出登录）；还有一个切换语言的下拉组件，后续还会添加一个主题切换的下拉按组件。这两个大同小异，代码如下：

typescript 复制代码

const translates: MenuProps['items'] = [
    {
      key: 'chine',
      label: (
        <span>
          <span role="img" aria-label="English" style={{marginRight: 8}}>🇨🇳</span>
          中文
        </span>
      )
    },
    {
      key: 'english',
      label: (
        <span>
          <span role="img" aria-label="English" style={{marginRight: 8}}>🇺🇸</span>
          English
        </span>
      )
    }
  ];

  const items: MenuProps['items'] = [
    {
      key: '1',
      label: '修改密码',
      icon: <EditOutlined />
    },
    {
      key: '2',
      label: '退出登录',
      icon: <LogoutOutlined />,
      danger: true
    }
  ];
  
  // 用户头像下拉组件的点击事件
  const logoutClick: MenuProps['onClick'] = (e) => {
    if (e.key === '2') {
      logoutRequest.run(); // 退出登录
    } else if (e.key === '1') {
      setShowModel(true); // 修改密码的 model 弹窗控制事件
    }
  };

5.3. 修改密码

修改密码这里是通过模态框弹出一个Input 组件，用户输出新的密码，调用修改密码接口执行操作的。

typescript 复制代码

<Modal title="修改密码" open={showModel} onOk={okUpdatePassword} onCancel={closeUpdatePassword}>
  <Input placeholder="请输入新密码" value={password} onChange={e => setPassword(e.target.value)}/>
</Modal>

对应的点击事件代码如下：

typescript 复制代码

const [showModel, setShowModel] = useState(false);
const [password, setPassword] = useState<string>("");

// 更新密码
const updatePasswordRequest = useRequest(UpdatePassword, {
  manual: true,
  onSuccess: (res) => {
    message.success(res);
    setShowModel(false);
  }
})

// 模态框 确定按钮事件
const okUpdatePassword = () => {
  updatePasswordRequest.run(password);
}

// 模态框 取消按钮事件
const closeUpdatePassword = () => {
  setShowModel(false);
  setPassword(''); // 这里需要清空 input 框内容
}

5.4. 退出登录

退出登录，后端接口会将当前的 cookie清除，前端只需要调用退出登录的接口，并将返回登录页面，代码如下：

typescript 复制代码

const logoutRequest = useRequest(UserLogout, {
  manual: true,
  onSuccess: (res) => {
    message.success(res);
    navigate(LOGIN_PAGE);
  }
})

好了，这个部分的代码就搞定了，最后我们启动运行，预览如下：

六. 其他

上面代码并没有全不展示出来，仅展示重要的代码。需要查看完整代码可以查看仓库：https://gitee.com/molonglove/xxl-job/tree/2.4.0.1/。

下一篇文章，我们将实现用户管理部分的代码页面和接口。

用React给XXL-JOB开发一个新皮肤（三）：实现登录页和Layout骨架

目录

一. 简述

二. 接口服务调整

2.1. 登录接口

2.2. 登出接口

2.3. 修改密码接口

2.4. 修改配置文件

三. 前端HTTP 请求

四. 登录页面

4.1. 搭建登录页面

4.2. 对接登录接口

五. Layout 骨架

5.1. 搭建骨架

5.2. Header

5.3. 修改密码

5.4. 退出登录

六. 其他