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

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

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

1. FastAdmin 后端接口编写

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

步骤 1: 创建一个控制器

假设你要创建一个

User

控制器，可以在

application/admin/controller

目录下创建一个

User.php

文件，内容如下：

<?phpnamespaceapp\admin\controller;useapp\common\controller\Backend;usethink\Db;usethink\exception\DbException;classUserextendsBackend{// 这个方法是我们要提供给前端调用的接口publicfunctiongetUserList(){// 这里通过 Db 查询用户数据，可以根据实际情况修改try{$users=Db::name('user')->field('id, username, email')->select();returnjson(['code'=>1,'msg'=>'Success','data'=>$users]);}catch(DbException$e){returnjson(['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

调用接口

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>FastAdmin API Test</title></head><body><h1>用户列表</h1><buttonid="loadUsers">加载用户列表</button><ulid="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

库，然后进行相同的操作：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>FastAdmin API Test</title><scriptsrc="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script></head><body><h1>用户列表</h1><buttonid="loadUsers">加载用户列表</button><ulid="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 后端的接口。- 处理接口返回的数据并在页面上展示。

注意事项：

确保 FastAdmin 后端接口可以访问到。根据部署环境，可能需要处理跨域问题（CORS）。
你可以在接口返回的数据中包含更多的状态信息和错误消息，以便前端更好地处理错误。

这样，你就可以通过 FastAdmin 提供的 API 与前端进行数据交互了。

标签：前端 javascript 开发语言

本文转载自: https://blog.csdn.net/guoruijun_2012_4/article/details/143806812
版权归原作者 guoruijun_2012_4 所有，如有侵权，请联系我们删除。