如何将Draftbit构建的React Native前端与Node.js（Express）后端进行API连接

我来给你一步步梳理怎么把你的Draftbit前端和Express后端连起来，你已经搞定了后端API的开发和Postman测试，这就成功了一半啦～

前置确认 #

先确保你已经准备好这些：

• 你的Express后端API已经在运行，且Postman测试所有端点（GET /users、POST /login等）都能正常返回数据
• 你已经在Draftbit里创建了对应的项目，且有基础的UI页面（比如登录页、用户列表页）

第一步：配置Draftbit的全局API基础URL #

为了方便切换开发/生产环境，我们先把后端地址存成环境变量：

1. 打开Draftbit项目，点击左侧菜单栏的Settings，选择Environment Variables
2. 点击Add Variable，变量名填API_BASE_URL，变量值填你的Express后端地址——如果是本地测试，记得用电脑的局域网IP（比如http://192.168.1.100:3000，别用localhost，因为手机预览APP访问不到电脑的localhost）；如果是已部署的后端，填对应的线上地址
3. 保存变量，这样后面所有API请求都能复用这个地址

第二步：创建API请求集合 #

Draftbit把相关的API请求归到集合里管理，操作如下：

1. 点击左侧菜单栏的Data，选择API Collections
2. 点击Add API Collection，给集合起个名字（比如“我的后端API”）
3. 在Base URL输入框里，选择刚才创建的环境变量{{API_BASE_URL}}，这样集合里的所有请求都会自动带上这个基础地址

第三步：添加具体的API请求 #

接下来把你已经写好的Express端点一个个加到Draftbit里：

例1：添加GET /users 请求（获取用户列表） #

1. 进入刚才创建的API集合，点击Add Request，命名为“获取用户列表”
2. 请求方法选择GET，路径填/users
3. 如果你的API需要身份验证（比如登录后才能获取用户列表），在Headers标签页里添加Authorization，值填Bearer {{authToken}}——这里的{{authToken}}是后面要存在全局状态里的登录令牌
4. 点击右上角的Test按钮，Draftbit会发送请求测试，如果成功，会自动解析返回的JSON结构，方便后面绑定到UI组件

例2：添加POST /login 请求（用户登录） #

1. 同样在API集合里点击Add Request，命名为“用户登录”
2. 请求方法选择POST，路径填/login
3. 切换到Body标签页，选择JSON格式，输入请求体模板：

{
  "email": "{{emailInput}}",
  "password": "{{passwordInput}}"
}

这里的{{emailInput}}和{{passwordInput}}是Draftbit里输入框组件的绑定值，后面会和UI组件关联
4. 可以在Headers里确认Content-Type: application/json是否存在（Draftbit通常会自动添加，保险起见可以手动加上）
5. 点击Test，输入你在Express里测试过的邮箱和密码，确认能返回登录成功的响应（比如包含token的JSON）

第四步：在UI组件里绑定请求并处理响应 #

现在把API请求和你的页面组件关联起来，实现交互：

登录页面的绑定 #

1. 打开登录页面，选中登录按钮
2. 在右侧的Actions面板里，点击Add Action，选择Trigger API Request，然后选择刚才创建的“用户登录”请求
3. 点击Add Action添加后续动作：选择Set App State，键名填authToken，值选择API请求返回的token字段（Draftbit会自动列出返回的字段）——这样登录成功后，令牌就存在全局状态里了
4. 再加一个动作：Navigate To，选择用户列表页面，实现登录成功后的跳转
5. 别忘了添加错误处理：点击Add Action，选择On Error，然后添加Show Toast，提示内容填“登录失败，请检查账号密码”

用户列表页面的绑定 #

1. 打开用户列表页面，点击页面空白处，在右侧Actions的On Load里添加Trigger API Request，选择“获取用户列表”请求
2. 确保这个请求的Headers里的Authorization值是Bearer {{authToken}}，Draftbit会自动从全局状态里读取authToken的值
3. 选中页面里的列表组件（比如FlatList），在右侧Data面板里，把Data Source选择为“获取用户列表”请求返回的数组字段（比如users，根据你的Express返回结构调整）
4. 然后在列表项里添加文本组件，把文本内容绑定到用户的name、email等字段，这样就能显示用户列表了

关键注意事项 #

• 跨域问题：本地测试时，一定要在你的Express后端里启用CORS中间件，不然Draftbit的预览APP会被浏览器拦截请求。安装并启用的代码如下：

const cors = require('cors');
app.use(cors());

• 本地测试的地址问题：不要用localhost作为后端地址，要用电脑的局域网IP（比如Windows用ipconfig、Mac用ifconfig查看），这样手机和电脑在同一WiFi下才能访问到后端
• 生产环境要求：如果要把APP发布到应用商店，你的Express后端必须使用HTTPS，Draftbit的生产构建不允许HTTP请求

内容来源于stack exchange