uni-app前后端的怎么对接

发布于 1周前 作者 eggper 来自 Uni-App

uni-app前后端的怎么对接

你好，我是初学者，相关后端代码能分享一下吗？谢谢！

Harmonyos Next教程
1 回复

在uni-app中实现前后端对接，通常涉及前端通过HTTP请求与后端API进行交互。以下是一个简单的示例，展示如何在uni-app中进行前后端对接。假设后端提供的是一个基于Node.js和Express框架的RESTful API。

后端代码（Node.js + Express）

首先，确保你已经安装了Node.js和Express。创建一个简单的Express服务器，提供一个获取用户信息的API。

// server.js
const express = require('express');
const app = express();
const port = 3000;

// 中间件解析JSON请求体
app.use(express.json());

// 示例用户数据
const users = [
    { id: 1, name: 'Alice', age: 25 },
    { id: 2, name: 'Bob', age: 30 }
];

// 获取用户信息的API
app.get('/api/users/:id', (req, res) => {
    const userId = parseInt(req.params.id, 10);
    const user = users.find(u => u.id === userId);
    if (user) {
        res.json(user);
    } else {
        res.status(404).json({ error: 'User not found' });
    }
});

app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

前端代码（uni-app）

在uni-app中，你可以使用uni.request方法发送HTTP请求。以下是一个在pages/index/index.vue中发送GET请求的示例。

<template>
  <view>
    <text>{{ userInfo ? userInfo.name : 'Loading...' }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userInfo: null
    };
  },
  onLoad() {
    this.fetchUserInfo(1); // 获取ID为1的用户信息
  },
  methods: {
    fetchUserInfo(userId) {
      uni.request({
        url: `http://localhost:3000/api/users/${userId}`,
        method: 'GET',
        success: (res) => {
          if (res.statusCode === 200) {
            this.userInfo = res.data;
          } else {
            console.error('Failed to fetch user info:', res.data);
          }
        },
        fail: (err) => {
          console.error('Request failed:', err);
        }
      });
    }
  }
};
</script>

在这个示例中，后端提供了一个简单的Express服务器，并定义了一个获取用户信息的API。前端uni-app通过uni.request方法发送GET请求到该API，并在成功获取数据后更新页面显示的用户信息。

请注意，实际开发中可能需要进行更多的错误处理、数据验证和安全措施，例如使用HTTPS、身份验证和授权等。此外，跨域问题也需要根据实际情况进行处理，例如在Express中设置CORS（跨来源资源共享）中间件。

回到顶部