正文

外部API如何实现 手机App连接服务器的完整开发教程 新手从零搭建接口流程

/0 浏览量
0907

外部API如何实现 手机App连接服务器的完整开发教程 新手从零搭建接口流程

让我带你一起把这件事从头到尾搞清楚，就像邻家哥哥手把手教你搭积木一样。

先弄清楚我们到底在说什么

你有没有想过，每次你在App里登录、发一条朋友圈、或者下单买件东西，手机背后到底发生了什么？

其实很简单——你的手机就像一个小信使，它会跑去问服务器：”嘿，这个用户的资料是什么？”服务器收到问题后，翻翻自己的小本本（数据库），然后把答案打包发回来。这个”问题”和”答案”的传递过程，就是通过API接口来完成的。

你可以把API想象成餐厅里的服务员：

  • 你（手机App）点菜 → 服务员（API）→ 厨师（服务器）→ 服务员把菜端给你
  • 你不需要自己去厨房炒菜的，你只需要和服务员沟通就好了

这就是API最核心的价值——隐藏复杂，提供简单的入口。

先学会”说话”：理解HTTP协议

在我们写任何代码之前，得先学会”说人话”。服务器和手机之间用的是HTTP协议，它只有四种最常用的说法：

动词 名字 你想干嘛
GET 查询 我想要某样东西（比如用户的资料）
POST 创建 我要创建个新东西（比如注册新用户）
PUT/PATCH 更新 我要改一下已有的东西
DELETE 删除 我不需要这个东西了

每次你用手机App做什么操作，底层都是在这四种动作里选一个。

第一步：选一个服务器技术栈（新手友好版）

别被这些名词吓到，我们选最简单的组合来开始：

  • 后端语言：Node.js（JavaScript，前端学过就懂）
  • 框架：Express（最简单好用的）
  • 数据库：MongoDB（存数据用，像Excel表格）

如果你完全没接触过编程，也别怕。我会把每一步都拆碎给你看。

第二步：搭建后端API服务器

先打开你的电脑终端（Mac叫Terminal，Windows叫CMD或PowerShell），跟着我一步步来：

# 1. 先创建一个新的项目文件夹
mkdir my-api-project
cd my-api-project

# 2. 初始化项目
npm init -y

# 3. 安装需要的工具
npm install express cors body-parser mongoose

安装完之后，创建一个新的文件叫 server.js，这就是我们服务器的主文件：

// server.js - 我们的服务器入口文件
const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');

// 创建Express应用
const app = express();

// 中间件：让服务器能理解跨域请求（手机App访问服务器）
app.use(cors());
// 中间件：让服务器能解析JSON格式的请求体
app.use(bodyParser.json());

// ====== 接口实现区 ======

// 接口1：获取所有用户信息（GET请求）
// 手机App发："GET /api/users"
app.get('/api/users', (req, res) => {
    // 这里模拟从数据库取数据，先返回假的测试数据
    const users = [
        { id: 1, name: '小明', age: 25, email: 'xiaoming@example.com' },
        { id: 2, name: '小红', age: 22, email: 'xiaohong@example.com' },
        { id: 3, name: '小刚', age: 30, email: 'xiaogang@example.com' }
    ];
    // 把数据以JSON格式返回给手机
    res.json({
        success: true,
        data: users
    });
});

// 接口2：根据ID获取单个用户（GET请求带参数）
// 手机App发："GET /api/users/1"
app.get('/api/users/:id', (req, res) => {
    const userId = req.params.id; // 从URL里拿到id参数
    
    // 模拟数据库查询
    const user = {
        id: userId,
        name: '小明',
        age: 25,
        email: 'xiaoming@example.com'
    };
    
    if (user) {
        res.json({ success: true, data: user });
    } else {
        res.status(404).json({ success: false, message: '用户不存在' });
    }
});

// 接口3：注册新用户（POST请求）
// 手机App发："POST /api/users/register"
app.post('/api/users/register', (req, res) => {
    // 从请求体里拿到用户提交的资料
    const { name, age, email, password } = req.body;
    
    // 简单的验证：看看必填项有没有填
    if (!name || !email || !password) {
        return res.status(400).json({
            success: false,
            message: '名字、邮箱和密码是必填的哦'
        });
    }
    
    // 这里假装把用户存进数据库了
    const newUser = {
        id: Date.now(), // 用当前时间戳当ID
        name,
        age,
        email,
        createdAt: new Date()
    };
    
    console.log('新用户注册成功：', newUser);
    
    res.status(201).json({
        success: true,
        message: '注册成功！欢迎' + name,
        data: newUser
    });
});

// 接口4：用户登录（POST请求）
app.post('/api/users/login', (req, res) => {
    const { email, password } = req.body;
    
    // 模拟登录验证
    if (email === 'xiaoming@example.com' && password === '123456') {
        // 登录成功，生成一个"通行证"（Token）
        const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.mock_token';
        
        res.json({
            success: true,
            message: '登录成功！',
            data: {
                token,
                user: { email, name: '小明' }
            }
        });
    } else {
        res.status(401).json({
            success: false,
            message: '邮箱或密码错误'
        });
    }
});

// ====== 服务器启动 ======
const PORT = 3000;
app.listen(PORT, () => {
    console.log(`🎉 服务器启动成功！`);
    console.log(`📍 访问地址：http://localhost:${PORT}`);
    console.log(`📱 测试接口：http://localhost:${PORT}/api/users`);
});

保存好这个文件后，在终端运行：

node server.js

你会看到：

🎉 服务器启动成功！
📍 访问地址：http://localhost:3000
📱 测试接口：http://localhost:3000/api/users

打开浏览器访问 http://localhost:3000/api/users，你应该能看到返回的JSON数据——恭喜你，你的第一个API接口已经跑起来了！

第三步：测试接口（用Postman或curl）

在你把App连接上之前，得先验证接口是不是正常工作。有两种方法：

方法一：浏览器直接访问GET接口 直接在浏览器打开 http://localhost:3000/api/users，你会看到JSON数据返回。

方法二：用Postman软件测试（强烈推荐）

Postman是一个专门用来测试API接口的工具，界面像聊天窗口一样直观。下载后用Postman做这些测试：

  1. 新建一个请求，选择POST方法
  2. URL填 http://localhost:3000/api/users/register
  3. 点Body标签，选raw，格式选JSON
  4. 输入测试数据：
{
    "name": "测试用户",
    "age": 28,
    "email": "test@example.com",
    "password": "password123"
}
  1. 点Send，看看返回什么

你会收到类似这样的成功响应：

{
    "success": true,
    "message": "注册成功！欢迎测试用户",
    "data": {
        "id": 1700000000000,
        "name": "测试用户",
        "age": 28,
        "email": "test@example.com",
        "createdAt": "2024-01-15T10:30:00.000Z"
    }
}

第四步：用手机App连接服务器

现在重点来了——手机App怎么和这个服务器对话。我们以Android和iOS两个平台为例来讲，但原理完全一样。

Android端实现（Kotlin）

在Android项目里，你需要先添加网络权限和依赖库。

第一步：在 AndroidManifest.xml 里加权限

<!-- 允许App访问网络 -->
<uses-permission android:name="android.permission.INTERNET" />
<!-- 允许访问网络状态（可选） -->
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

第二步：添加依赖库

在 app/build.gradle 里添加：

dependencies {
    // 网络请求库 - Retrofit（最流行的Android网络库）
    implementation 'com.squareup.retrofit2:retrofit:2.9.0'
    implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
    // Kotlin协程支持
    implementation 'org.jetbrains.kotlinx:kotlinx-coroutines-android:1.7.3'
}

第三步：定义数据模型

// User.kt - 对应服务器的用户数据结构
data class User(
    val id: Int,
    val name: String,
    val age: Int,
    val email: String
)

// ApiResponse.kt - 统一封装服务器返回的数据
data class ApiResponse<T>(
    val success: Boolean,
    val message: String?,
    val data: T?
)

// LoginRequest.kt - 登录时提交的数据
data class LoginRequest(
    val email: String,
    val password: String
)

// RegisterRequest.kt - 注册时提交的数据
data class RegisterRequest(
    val name: String,
    val age: Int?,
    val email: String,
    val password: String
)

第四步：定义API接口

// ApiService.kt - 告诉Retrofit要去请求哪些接口
import retrofit2.Response
import retrofit2.http.*

interface ApiService {
    
    // GET请求：获取所有用户
    @GET("api/users")
    suspend fun getUsers(): Response<ApiResponse<List<User>>>
    
    // GET请求：获取单个用户
    @GET("api/users/{id}")
    suspend fun getUser(@Path("id") userId: Int): Response<ApiResponse<User>>
    
    // POST请求：注册新用户
    @POST("api/users/register")
    suspend fun registerUser(@Body request: RegisterRequest): Response<ApiResponse<User>>
    
    // POST请求：用户登录
    @POST("api/users/login")
    suspend fun loginUser(@Body request: LoginRequest): Response<ApiResponse<Map<String, Any>>>
}

第五步：创建Retrofit客户端

// ApiClient.kt - 创建统一的网络连接客户端
import retrofit2.Retrofit
import retrofit2.converter.gson.GsonConverterFactory

object ApiClient {
    
    // 服务器的基础地址
    // ⚠️ 注意：这里用10.0.2.2是因为在模拟器上访问本地服务器
    // 真机测试时需要换成你电脑的局域网IP，比如 192.168.1.100
    private const val BASE_URL = "http://10.0.2.2:3000/"
    
    // 创建Retrofit实例
    val instance: ApiService by lazy {
        Retrofit.Builder()
            .baseUrl(BASE_URL)
            .addConverterFactory(GsonConverterFactory.create())
            .build()
            .create(ApiService::class.java)
    }
}

第六步：在Activity中调用接口

// MainActivity.kt
import android.os.Bundle
import android.widget.*
import androidx.appcompat.app.AppCompatActivity
import androidx.lifecycle.lifecycleScope
import kotlinx.coroutines.launch
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.withContext

class MainActivity : AppCompatActivity() {
    
    private lateinit var tvResult: TextView
    private lateinit var btnLogin: Button
    private lateinit var btnRegister: Button
    private lateinit var etEmail: EditText
    private lateinit var etPassword: EditText
    private lateinit var progressBar: ProgressBar
    
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        // 绑定UI控件
        tvResult = findViewById(R.id.tvResult)
        btnLogin = findViewById(R.id.btnLogin)
        btnRegister = findViewById(R.id.btnRegister)
        etEmail = findViewById(R.id.etEmail)
        etPassword = findViewById(R.id.etPassword)
        progressBar = findViewById(R.id.progressBar)
        
        // 测试获取用户列表
        fetchUsers()
        
        // 登录按钮点击事件
        btnLogin.setOnClickListener {
            val email = etEmail.text.toString()
            val password = etPassword.text.toString()
            if (email.isEmpty() || password.isEmpty()) {
                Toast.makeText(this, "请填写邮箱和密码", Toast.LENGTH_SHORT).show()
                return@setOnClickListener
            }
            loginUser(email, password)
        }
        
        // 注册按钮点击事件
        btnRegister.setOnClickListener {
            registerUser("新用户" + System.currentTimeMillis(), 25, "user${System.currentTimeMillis()}@test.com", "123456")
        }
    }
    
    // 获取用户列表
    private fun fetchUsers() {
        progressBar.visibility = android.view.View.VISIBLE
        tvResult.text = "正在加载中..."
        
        lifecycleScope.launch {
            try {
                val response = ApiClient.instance.getUsers()
                
                withContext(Dispatchers.Main) {
                    progressBar.visibility = android.view.View.GONE
                    
                    if (response.isSuccessful && response.body()?.success == true) {
                        val users = response.body()?.data
                        val userNames = users?.joinToString("\n") { it.name }
                            ?: "暂无数据"
                        tvResult.text = "获取成功！\n用户列表：\n$userNames"
                    } else {
                        tvResult.text = "请求失败：${response.message()}"
                    }
                }
            } catch (e: Exception) {
                withContext(Dispatchers.Main) {
                    progressBar.visibility = android.view.View.GONE
                    tvResult.text = "网络错误：${e.message}"
                    Toast.makeText(this@MainActivity, "网络连接失败，请检查网络", Toast.LENGTH_SHORT).show()
                }
            }
        }
    }
    
    // 用户登录
    private fun loginUser(email: String, password: String) {
        progressBar.visibility = android.view.View.VISIBLE
        tvResult.text = "登录中..."
        
        lifecycleScope.launch {
            try {
                val response = ApiClient.instance.loginUser(
                    LoginRequest(email, password)
                )
                
                withContext(Dispatchers.Main) {
                    progressBar.visibility = android.view.View.GONE
                    
                    if (response.isSuccessful && response.body()?.success == true) {
                        val message = response.body()?.message ?: "登录成功"
                        tvResult.text = "$message\n\n登录成功！可以跳转主页了"
                        Toast.makeText(this@MainActivity, message, Toast.LENGTH_SHORT).show()
                    } else {
                        val errorMsg = response.body()?.message ?: "登录失败"
                        tvResult.text = errorMsg
                        Toast.makeText(this@MainActivity, errorMsg, Toast.LENGTH_SHORT).show()
                    }
                }
            } catch (e: Exception) {
                withContext(Dispatchers.Main) {
                    progressBar.visibility = android.view.View.GONE
                    tvResult.text = "登录请求失败"
                    Toast.makeText(this@MainActivity, "网络错误", Toast.LENGTH_SHORT).show()
                }
            }
        }
    }
    
    // 用户注册
    private fun registerUser(name: String, age: Int, email: String, password: String) {
        progressBar.visibility = android.view.View.VISIBLE
        tvResult.text = "注册中..."
        
        lifecycleScope.launch {
            try {
                val response = ApiClient.instance.registerUser(
                    RegisterRequest(name, age, email, password)
                )
                
                withContext(Dispatchers.Main) {
                    progressBar.visibility = android.view.View.GONE
                    
                    if (response.isSuccessful && response.body()?.success == true) {
                        val userName = response.body()?.data?.name ?: name
                        tvResult.text = "注册成功！欢迎 $userName"
                        Toast.makeText(this@MainActivity, "注册成功！", Toast.LENGTH_SHORT).show()
                    } else {
                        val errorMsg = response.body()?.message ?: "注册失败"
                        tvResult.text = errorMsg
                    }
                }
            } catch (e: Exception) {
                withContext(Dispatchers.Main) {
                    progressBar.visibility = android.view.View.GONE
                    tvResult.text = "注册请求失败"
                }
            }
        }
    }
}

Android的布局文件 activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp">
        
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="手机App连接服务器演示"
            android:textSize="20sp"
            android:textStyle="bold"
            android:gravity="center"
            android:paddingBottom="16dp"/>
        
        <EditText
            android:id="@+id/etEmail"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="邮箱"
            android:inputType="textEmailAddress"/>
        
        <EditText
            android:id="@+id/etPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="密码"
            android:inputType="textPassword"/>
        
        <Button
            android:id="@+id/btnLogin"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="登录"
            android:layout_marginTop="8dp"/>
        
        <Button
            android:id="@+id/btnRegister"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="注册新用户"
            android:layout_marginTop="8dp"/>
        
        <ProgressBar
            android:id="@+id/progressBar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:visibility="gone"/>
        
        <TextView
            android:id="@+id/tvResult"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="点击下方按钮测试接口..."
            android:paddingTop="16dp"/>
        
    </LinearLayout>
</ScrollView>

iOS端实现（Swift + URLSession）

iOS端我们用Swift原生实现，不需要额外依赖库：

// APIManager.swift - iOS端的网络请求管理
import Foundation

// MARK: - 数据模型
struct User: Codable {
    let id: Int
    let name: String
    let age: Int?
    let email: String
}

struct ApiResponse<T: Codable>: Codable {
    let success: Bool
    let message: String?
    let data: T?
}

struct LoginRequest: Codable {
    let email: String
    let password: String
}

struct RegisterRequest: Codable {
    let name: String
    let age: Int?
    let email: String
    let password: String
}

// MARK: - API管理器
class APIManager {
    
    // 服务器的基础地址
    // ⚠️ 注意：iOS模拟器访问本地服务器用 localhost 或 127.0.0.1
    // 真机测试时需要换成你电脑的局域网IP
    static let baseUrl = "http://localhost:3000"
    
    // 获取所有用户
    static func getUsers(completion: @escaping (Result<[User], Error>) -> Void) {
        guard let url = URL(string: "\(baseUrl)/api/users") else {
            completion(.failure(NSError(domain: "Invalid URL", code: -1)))
            return
        }
        
        makeRequest(url: url, completion: completion)
    }
    
    // 获取单个用户
    static func getUser(userId: Int, completion: @escaping (Result<User, Error>) -> Void) {
        guard let url = URL(string: "\(baseUrl)/api/users/\(userId)") else {
            completion(.failure(NSError(domain: "Invalid URL", code: -1)))
            return
        }
        
        makeRequest(url: url, completion: completion)
    }
    
    // 用户注册
    static func registerUser(_ request: RegisterRequest, completion: @escaping (Result<User, Error>) -> Void) {
        guard let url = URL(string: "\(baseUrl)/api/users/register") else {
            completion(.failure(NSError(domain: "Invalid URL", code: -1)))
            return
        }
        
        makePostRequest(url: url, body: request, completion: completion)
    }
    
    // 用户登录
    static func loginUser(_ request: LoginRequest, completion: @escaping (Result<Dictionary<String, Any>, Error>) -> Void) {
        guard let url = URL(string: "\(baseUrl)/api/users/login") else {
            completion(.failure(NSError(domain: "Invalid URL", code: -1)))
            return
        }
        
        makePostRequest(url: url, body: request, completion: completion)
    }
    
    // 通用的GET请求
    private static func makeRequest<T: Codable>(url: URL, completion: @escaping (Result<T, Error>) -> Void) {
        var request = URLRequest(url: url)
        request.httpMethod = "GET"
        request.setValue("application/json", forHTTPHeaderField: "Content-Type")
        
        let task = URLSession.shared.dataTask(with: request) { data, response, error in
            if let error = error {
                completion(.failure(error))
                return
            }
            
            guard let data = data else {
                completion(.failure(NSError(domain: "No data", code: -1)))
                return
            }
            
            do {
                let decoder = JSONDecoder()
                let apiResponse = try decoder.decode(ApiResponse<T>.self, from: data)
                
                if apiResponse.success, let data = apiResponse.data {
                    completion(.success(data))
                } else {
                    let errorMsg = apiResponse.message ?? "请求失败"
                    completion(.failure(NSError(domain: errorMsg, code: -1)))
                }
            } catch {
                completion(.failure(error))
            }
        }
        task.resume()
    }
    
    // 通用的POST请求
    private static func makePostRequest<T: Codable>(url: URL, body: Encodable, completion: @escaping (Result<T, Error>) -> Void) {
        var request = URLRequest(url: url)
        request.httpMethod = "POST"
        request.setValue("application/json", forHTTPHeaderField: "Content-Type")
        
        do {
            let jsonData = try JSONEncoder().encode(body)
            request.httpBody = jsonData
        } catch {
            completion(.failure(error))
            return
        }
        
        let task = URLSession.shared.dataTask(with: request) { data, response, error in
            if let error = error {
                completion(.failure(error))
                return
            }
            
            guard let data = data else {
                completion(.failure(NSError(domain: "No data", code: -1)))
                return
            }
            
            do {
                let decoder = JSONDecoder()
                let apiResponse = try decoder.decode(ApiResponse<T>.self, from: data)
                
                if apiResponse.success, let data = apiResponse.data {
                    completion(.success(data))
                } else {
                    let errorMsg = apiResponse.message ?? "请求失败"
                    completion(.failure(NSError(domain: errorMsg, code: -1)))
                }
            } catch {
                completion(.failure(error))
            }
        }
        task.resume()
    }
}

// ViewController.swift - iOS界面控制器
import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var emailTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    @IBOutlet weak var resultLabel: UILabel!
    @IBOutlet weak var activityIndicator: UIActivityIndicatorView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
        fetchUsers()
    }
    
    func setupUI() {
        activityIndicator.hidesWhenStopped = true
        resultLabel.text = "点击下方按钮测试接口..."
    }
    
    @IBAction func loginButtonTapped(_ sender: UIButton) {
        guard let email = emailTextField.text, !email.isEmpty,
              let password = passwordTextField.text, !password.isEmpty else {
            showAlert(title: "提示", message: "请填写邮箱和密码")
            return
        }
        
        startLoading()
        resultLabel.text = "登录中..."
        
        APIManager.loginUser(LoginRequest(email: email, password: password)) { [weak self] result in
            self?.stopLoading()
            
            switch result {
            case .success(let data):
                let message = data["message"] as? String ?? "登录成功"
                self?.resultLabel.text = "\(message)\n\n登录成功！"
                self?.showAlert(title: "成功", message: message)
            case .failure(let error):
                self?.resultLabel.text = "登录失败: \(error.localizedDescription)"
                self?.showAlert(title: "失败", message: error.localizedDescription)
            }
        }
    }
    
    @IBAction func registerButtonTapped(_ sender: UIButton) {
        startLoading()
        resultLabel.text = "注册中..."
        
        let registerRequest = RegisterRequest(
            name: "新用户\(Int(Date().timeIntervalSince1970))",
            age: 25,
            email: "user\(Int(Date().timeIntervalSince1970))@test.com",
            password: "123456"
        )
        
        APIManager.registerUser(registerRequest) { [weak self] result in
            self?.stopLoading()
            
            switch result {
            case .success(let user):
                self?.resultLabel.text = "注册成功！欢迎 \(user.name)"
                self?.showAlert(title: "成功", message: "注册成功！欢迎 \(user.name)")
            case .failure(let error):
                self?.resultLabel.text = "注册失败: \(error.localizedDescription)"
                self?.showAlert(title: "失败", message: error.localizedDescription)
            }
        }
    }
    
    func fetchUsers() {
        APIManager.getUsers { [weak self] result in
            guard let self = self else { return }
            
            switch result {
            case .success(let users):
                let names = users.map { $0.name }.joined(separator: "\n")
                self.resultLabel.text = "用户列表：\n$names"
            case .failure(let error):
                self.resultLabel.text = "获取用户失败: \(error.localizedDescription)"
            }
        }
    }
    
    func startLoading() {
        DispatchQueue.main.async {
            self.activityIndicator.startAnimating()
        }
    }
    
    func stopLoading() {
        DispatchQueue.main.async {
            self.activityIndicator.stopAnimating()
        }
    }
    
    func showAlert(title: String, message: String) {
        let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "确定", style: .default))
        present(alert, animated: true)
    }
}

第五步：处理真机测试的地址问题

这是新手最容易踩的坑——在模拟器上测试好好的，换到真机就连接不上了。原因很简单：

模拟器访问本机服务器：

  • Android模拟器用 10.0.2.2 代替 localhost
  • iOS模拟器用 localhost 或 127.0.0.1

真机访问本机服务器（手机和电脑连同一个WiFi）：

  • 先在电脑上打开终端，查看本机IP地址：

    # Mac
ifconfig | grep "inet "
# Windows
ipconfig

  • 把服务器地址换成电脑的局域网IP，比如 http://192.168.1.100:3000

  • 确保电脑的防火墙允许3000端口的连接

手机访问外部服务器（发布到正式环境）：

  • 直接用服务器的公网地址，比如 https://api.yourdomain.com
  • 推荐使用HTTPS，更安全

第六步：让接口更安全、更专业

上面的代码是教学用的简化版，正式项目中还需要注意这些：

1. 统一返回格式

不管成功失败，每次返回的数据结构保持一致，App端处理起来就方便很多：

{
    "success": true,
    "message": "操作成功",
    "data": { ... },
    "timestamp": 1700000000
}

2. 添加Token认证

用户登录后，服务器会返回一个Token，之后App每次请求都要带上这个Token：

// 后端验证Token的中间件
const authenticateToken = (req, res, next) => {
    const authHeader = req.headers['authorization'];
    const token = authHeader && authHeader.split(' ')[1];
    
    if (!token) {
        return res.status(401).json({ success: false, message: '请先登录' });
    }
    
    // 验证Token是否有效
    jwt.verify(token, 'your-secret-key', (err, user) => {
        if (err) {
            return res.status(403).json({ success: false, message: 'Token已过期' });
        }
        req.user = user;
        next();
    });
};

// 给需要登录的接口加上认证
app.post('/api/users/profile', authenticateToken, (req, res) => {
    res.json({ success: true, data: req.user });
});

3. 错误处理要友好

不要直接把错误堆栈甩给用户看，那是开发调试用的。给用户看到的是友好的提示：

app.use((err, req, res, next) => {
    console.error(err.stack); // 服务器日志记录真实错误
    res.status(500).json({
        success: false,
        message: '服务器开小差了，请稍后再试' // 用户看到的友好提示
    });
});

总结一下整个流程

把这件事串起来，其实就三步：

服务器那边：写代码 → 定义接口 → 启动服务 → 测试接口

手机App那边：配置网络权限 → 封装网络请求 → 调用接口 → 处理返回数据

连接起来：服务器地址对 → 接口路径对 → 请求格式对 → 数据解析对

每一步都有可能需要调整，遇到报错不要慌。把错误信息复制出来，搜索引擎是你的好朋友。

如果你现在就去动手试，大概率会碰到一两个坑——比如地址填错了、数据格式不对、或者网络权限没加。这些都很正常，每个开发者都是这么一步步踩过来的。

有问题随时来找我聊，祝你搭建顺利！🚀

-- 展开阅读全文 --