fastadmin 接口写法，与前端 js 调用该接口，代码例子

最新推荐文章于 2025-03-01 15:51:55 发布

m0_74824823

最新推荐文章于 2025-03-01 15:51:55 发布

阅读量1.3k

点赞数 8

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_74824823/article/details/144432795

版权

FastAdmin 是一个基于 ThinkPHP5 和 Bootstrap 的后台管理系统，可以方便地用于开发管理系统。在 FastAdmin 中，接口可以通过创建控制器（Controller）来编写，并通过前端 JavaScript 进行调用。

下面是一个 FastAdmin 接口编写的示例，以及前端 JavaScript 如何调用该接口的代码。

1. FastAdmin 后端接口编写

首先，你需要在 FastAdmin 后台创建一个控制器（Controller），然后定义一个接口方法。在这里，我们以获取用户列表的接口为例。

步骤 1: 创建一个控制器

假设你要创建一个 User 控制器，可以在 application/admin/controller 目录下创建一个 User.php 文件，内容如下：

<?php

namespace appadmincontroller;

use appcommoncontrollerBackend;
use thinkDb;
use thinkexceptionDbException;

class User extends Backend
{
    // 这个方法是我们要提供给前端调用的接口
    public function getUserList()
    {
        // 这里通过 Db 查询用户数据，可以根据实际情况修改
        try {
            $users = Db::name('user')->field('id, username, email')->select();
            return json(['code' => 1, 'msg' => 'Success', 'data' => $users]);
        } catch (DbException $e) {
            return json(['code' => 0, 'msg' => 'Database error: ' . $e->getMessage()]);
        }
    }
}

步骤 2: 配置路由

接下来，在 FastAdmin 中，你需要在 route.php 中配置路由，使前端能够访问这个接口。你可以在 application/admin/route.php 文件中添加类似的路由规则：

// 配置路由，访问接口时，指向 User 控制器的 getUserList 方法
Route::get('admin/user/getUserList', 'admin/user/getUserList');

2. 前端 JavaScript 调用接口

接下来，在前端页面使用 JavaScript 来调用这个接口，可以使用 fetch 或者 axios 等方法。

步骤 3: 使用 `fetch` 调用接口

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FastAdmin API Test</title>
</head>
<body>
    <h1>用户列表</h1>
    <button id="loadUsers">加载用户列表</button>
    <ul id="userList"></ul>

    <script>
        // 监听按钮点击事件，加载用户列表
        document.getElementById('loadUsers').addEventListener('click', function() {
            // 调用 FastAdmin 后端接口
            fetch('http://yourdomain.com/admin/user/getUserList')  // 请替换为你的实际接口地址
                .then(response => response.json())
                .then(data => {
                    if (data.code === 1) {
                        // 成功返回数据
                        const users = data.data;
                        const userList = document.getElementById('userList');
                        userList.innerHTML = ''; // 清空列表
                        users.forEach(user => {
                            const li = document.createElement('li');
                            li.textContent = `ID: ${user.id}, 用户名: ${user.username}, 邮箱: ${user.email}`;
                            userList.appendChild(li);
                        });
                    } else {
                        alert('获取用户列表失败: ' + data.msg);
                    }
                })
                .catch(error => {
                    console.error('请求失败', error);
                    alert('请求失败，请稍后再试。');
                });
        });
    </script>
</body>
</html>

步骤 4: 使用 `axios` 调用接口

如果你使用 axios，可以先引入 axios 库，然后进行相同的操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FastAdmin API Test</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>用户列表</h1>
    <button id="loadUsers">加载用户列表</button>
    <ul id="userList"></ul>

    <script>
        document.getElementById('loadUsers').addEventListener('click', function() {
            // 使用 axios 调用接口
            axios.get('http://yourdomain.com/admin/user/getUserList')  // 请替换为你的实际接口地址
                .then(response => {
                    const data = response.data;
                    if (data.code === 1) {
                        const users = data.data;
                        const userList = document.getElementById('userList');
                        userList.innerHTML = ''; // 清空列表
                        users.forEach(user => {
                            const li = document.createElement('li');
                            li.textContent = `ID: ${user.id}, 用户名: ${user.username}, 邮箱: ${user.email}`;
                            userList.appendChild(li);
                        });
                    } else {
                        alert('获取用户列表失败: ' + data.msg);
                    }
                })
                .catch(error => {
                    console.error('请求失败', error);
                    alert('请求失败，请稍后再试。');
                });
        });
    </script>
</body>
</html>

3. 总结

FastAdmin 后端：
- 在控制器中定义接口方法，如 getUserList()，并返回 JSON 格式的数据。
- 在路由文件中配置相应的路由规则。
前端 JavaScript：
- 使用 fetch 或 axios 等方法发送请求到 FastAdmin 后端的接口。
- 处理接口返回的数据并在页面上展示。