新增登录日志

哈德斯
414 阅读3分钟

1.理论上登录日志是不能新增的，应该是登录时由系统自动将登录信息存入到数据库中，这里我们只是简单演示下新增数据的效果。

2.先改造后台代码，在Controller中增加录入登录日志数据的方法，找到loginfo对应的Contoller在代码最后增加add方法 image.png 增加的JAVA代码如下

    @PostMapping(value="add")
    public AjaxResult add(@Validated @RequestBody SysLogininfor sysLogininfor)
    {
        try {
            sysLogininfor.setUserName(getUsername());
            sysLogininfor.setCreateBy(getUsername());
            sysLogininfor.setStatus("0");
            logininforService.insertLogininfor(sysLogininfor);
            return AjaxResult.success("录入成功");
        }
        catch(Exception ex)
        {
            return AjaxResult.error("录入失败"+ex.getMessage());
        }
    }

这是一个Post接口，传入参数为一个sysLoginfor实体对象的JSON数据。

3.后台新增登录日志接口完毕后，重启下后台，我们先看下查询表格（登录日志的组件最开始是完全复制的查询表格组件）中自带的新增的操作做了哪些事情？查询表格组件中是有个新建按钮的 image.png 新建按钮，调用了handleModalVisible(true);从字面上理解，应该是让组件中的某个对话框组件可见，用handleModalVisible做关键字搜索，我们找到了这个ModalForm组件， ​

image.png image.png ModalForm中就简单的两个组件，一个文本框，一个多行文本框，为了操作方便，我们复用现成的代码，基于ModalForm做改造（建议把表单组件单独拿出来做成组件复用，查询表格的修改操作其实是用一个文件单独来操作的，新增和修改操作其实可以共用一个组件）

4.ModalForm 之间这段代码整段替换，替换后的代码如下：

  <ModalForm
        layout="horizontal"
        labelCol={{ span: 4 }}
      
        title="新建登录日志"
        width="600px"
        visible={createModalVisible}
        onVisibleChange={handleModalVisible}
        onFinish={async (value) => {
          const success = await handleAdd(value);

          if (success) {
            handleModalVisible(false);

            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
      >
        <ProFormText
          rules={[
            {
              required: true,
              message: '登录IP地址不能为空',
            },
            {
              pattern: new RegExp(
                '^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$',
                'g',
              ),
              message: '登录IP地址格式错误',
            },
          ]}
          width="md"
          name="ipaddr"
          label="登录IP地址"
          placeholder="请输入登录IP地址"
        />

        <ProFormText
          rules={[
            {
              required: true,
              message: '登录地点为必填项',
            },
          ]}
          width="md"
          label="登录地点"
          placeholder="请输入登录地点"
          name="loginLocation"
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '浏览器类型为必填项',
            },
          ]}
          width="md"
          label="浏览器类型"
          placeholder="请输入浏览器类型"
          name="browser"
        />

        <ProFormDateTimePicker
          name="loginTime"
          label="访问时间"
          rules={[
            {
              required: true,
              message: '访问时间为必填项',
            },
          ]}
        />
        <ProFormText
          rules={[
            {
              required: true,
              message: '提示消息为必填项',
            },
          ]}
          width="md"
          label="提示消息"
          placeholder="请输入提示消息"
          name="msg"
        />
      </ModalForm>

我们替换的部分没太多好说的，就是一些基础表单组件，以及数据校验，唯一要说明的一点是登录IP地址做了一个正则表达式的格式验证，规定输入的数据必须符合IP地址的格式，在中的rules下进行设置，用pattern指定正则表达式，代码如下：

 rules={[
            {
              required: true,
              message: '登录IP地址不能为空',
            },
            {
              pattern: new RegExp(
                '^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$',
                'g',
              ),
              message: '登录IP地址格式错误',
            },
          ]}

5.前台保存编译后会报错，因为部分Antd组件未引入，我们把第6行引入Antd组件的代码

import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form';

替换成

import ProForm, { ModalForm, ProFormText, ProFormDateTimePicker } from '@ant-design/pro-form';

6.再次保存，等编译后，打开登录日志菜单后点击新建按钮，表单能正常展现了 image.png

7.点确定会触发中的onFinish方法，方法代码如下

 onFinish={async (value) => {
          const success = await handleAdd(value);

          if (success) {
            handleModalVisible(false);

            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}

主要逻辑是调用handleAdd方法，调用后台接口录入数据，value就是表单中输入的数据，如果后台接口调用录入成功，隐藏，表格刷新。

8.找到handleAdd方法，代码如下

const handleAdd = async (fields) => {
  const hide = message.loading('正在添加');

  try {
    await addRule({ ...fields });
    hide();
    message.success('添加成功');
    return true;
  } catch (error) {
    hide();
    message.error('添加失败请重试！');
    return false;
  }
};

这段代码是查询表格中已封装好的，异步调用，等待提示都封装好了，我们复用一下，只要改service中真正调用后台接口的addRule方法和Url地址即可。

9.找到addRule方法所在代码 src/pages/loginfo/service.js，原来的addRule方法代码如下：

export async function addRule(data, options) {
  return request('/api/rule', {
    data,
    method: 'POST',
    ...(options || {}),
  });
}

10.我们替换方法名和请求的后台url地址，修改完后代码如下：

export async function addLoginfo(data, options) {
  return request('/api/monitor/logininfor/add', {
    data,
    method: 'POST',
    ...(options || {}),
  });
}

11.回到src/pages/loginfo/index.jsx,把引入service的代码改一下，改成

import { loginfo, addLoginfo, updateRule, removeRule } from './service';

12.再把handleAdd中的addRule替换成addLoginfo

const handleAdd = async (fields) => {
  const hide = message.loading('正在添加');

  try {
    await addLoginfo({ ...fields });
    hide();
    message.success('添加成功');
    return true;
  } catch (error) {
    hide();
    message.error('添加失败请重试！');
    return false;
  }
};

13.保存编译后，新建一条数据测试下 image.png

14.如果出现了我们新增的数据，那么新增登录日志功能OK了，为了容易跟其他数据区分，特意未录入操作系统字段数据。image.png ​

最近做了个小API应用，希望大家关注支持下: www.yuque.com/docs/share/… 

avatar
文章
阅读
粉丝