react飞冰ice框架请求接口时必须带有api名称才行否则会报错

飞冰ice框架请求接口时必须带有api名称才行否则会报错

import {
  ActionType,
  ProCard,
  ProForm,
  ProFormDateRangePicker,
  ProFormText,
  ProTable,
} from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { message, Progress, Tag } from 'antd';
import { request } from 'ice';
import { useRef } from 'react';

const Index = () => {
  const actionRef = useRef();
  const handleFormFinish = async (values) => {
    const response = await request({
      url: 'http://laravel1048.com/api/news/add', // 这里必须包含api名称，否则不会通过。
      method: 'POST',
      data: values,
    });
    if (response.success) {
      message.success('提交成功');
      actionRef.current.reload();
    } else {
      message.error('提交失败');
    }
    return response;
  };

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      width: 100,
    },
    {
      title: '标题',
      dataIndex: 'title',
      key: 'title',
      width: 600,
    },
    {
      title: '创建时间',
      dataIndex: 'created_at_new',
      key: 'created_at_new',
    },
  ];

  const refreshTableData = async (params = {}) => {
    console.log('params', params);
    try {
      const response = await request({
        url: 'http://laravel1048.com/api/news/index',
        method: 'GET',
        params: {
          ...params,
          page: params.current,
          pageSize: params.pageSize,
        },
      });

      return {
        data: response.data.data,
        success: true,
        total: response.data.total || 0,
      };
    } catch (error) {
      console.error('请求失败:', error);
      return {
        data: [],
        success: false,
        total: 0,
      };
    }
  };

  return (
    <PageContainer title='ProLayout标题33' content='描述啧啧啧'>
      <ProCard>
        <ProForm onFinish={handleFormFinish}>
          <ProForm.Group>
            <ProFormText
              name='title'
              label='新闻标题'
              tooltip='最长为 24 位'
              placeholder='请输入新闻标题'
            />

            <ProFormDateRangePicker
              transform={(values) => {
                return {
                  startTime: values ? values[0] : undefined,
                  endTime: values ? values[1] : undefined,
                };
              }}
              width='md'
              name='createTimeRanger'
              label='创建时间'
            />
          </ProForm.Group>
        </ProForm>
      </ProCard>

      <ProCard>
        <ProTable
          columns={columns}
          request={refreshTableData}
          rowKey='id'
          actionRef={actionRef}
          search={{
            labelWidth: 120,
          }}
          pagination={{
            pageSize: 10,
          }}
        />
      </ProCard>
    </PageContainer>
  );
};

export default Index;

安装示例：

pnpm create ice ice-app --template @ice/lite-scaffold
cd ice-app
pnpm install 
pnpm start

安装request插件（npm换成pnpm）

HTTP 请求 | 飞冰 ICE

附接口代码：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Routing\Controller as BaseController;
use Illuminate\Support\Facades\Redis;

class MytestController extends BaseController
{
    public function index(Request $request)
    {
        $data = [
            'message' => 'hello world',
            'GET' => $request->query(),
            'POST' => $request->post(),
        ];

        return response()->json(['data' => $data]); // 移除了重复的 'message' 键
    }

    public function redis()
    {
        Redis::set('key2', date('Y-m-d H:i:s'), 'EX', 20);

        $value = Redis::get('key2');

        return response()->json([
            'key2' => 'key',
            'value' => $value, // 返回获取到的值
        ]);
    }
}

接口路由配置：

<?php

use App\Http\Controllers\MytestController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::match(['get', 'post'], '/api/mytest/index', [MytestController::class, 'index']);