使用 UniApp 调用 Spring Boot 的指南

在当今的开发环境中，前后端分离的架构越来越普遍。UniApp 是一款优秀的跨平台应用开发框架，而 Spring Boot 是广受欢迎的后端开发框架。本文将介绍如何使用 UniApp 调用 Spring Boot 后端 API，并提供相关的代码示例。

一、环境准备

在开始之前，你需要确保你的开发环境中已经安装了以下工具：

  • Node.js：用于运行 UniApp。
  • HBuilderX：UniApp 的集成开发环境。
  • JDK 1.8 及以上：用于运行 Spring Boot。
  • Maven：管理 Spring Boot 项目的依赖。

二、创建 Spring Boot 项目

使用 Spring Initializr（ Spring Boot 项目。在生成项目时，选择以下依赖：

  • Spring Web
  • Spring Boot DevTools（可选，开发时使用）

生成后解压缩，并用 IDE 打开这个项目。接下来，我们创建一个简单的 REST 控制器。

REST 控制器示例

在 src/main/java/com/example/demo/controller 目录下创建一个 HelloController.java 文件，内容如下：

package com.example.demo.controller;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class HelloController {
    
    @GetMapping("/api/hello")
    public String sayHello() {
        return "Hello from Spring Boot!";
    }
}

三、运行 Spring Boot 应用

在 IDE 中运行该项目，或使用命令行执行以下命令启动应用：

mvn spring-boot:run

默认情况下，Spring Boot 会在 http://localhost:8080 启动。

四、使用 UniApp 调用 Spring Boot API

接下来，我们创建一个 UniApp 项目并调用刚才的 API。打开 HBuilderX，选择“新建项目”，然后选择“UniApp”模板。

调用 API 示例

在 UniApp 项目中，编辑 pages/index/index.vue 文件，添加以下内容：

<template>
  <view class="container">
    <button @click="getHello">获取问候</button>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    }
  },
  methods: {
    async getHello() {
      try {
        const response = await uni.request({
          url: 'http://localhost:8080/api/hello',
          method: 'GET'
        });
        this.message = response[1].data;
      } catch (error) {
        console.error(error);
        this.message = "请求失败";
      }
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
</style>

代码说明

  • <button> 元素用于触发 API 请求。
  • getHello 方法通过 uni.request 发起 GET 请求，获取后端的问候信息。
  • message 用于存储并展示 API 返回的数据。

五、系统流程图与旅程图

在整个过程中，前后端的交互可以用流程图表示为：

flowchart TD
    A[用户点击按钮] --> B[UniApp 发送请求]
    B --> C[Spring Boot 接收请求]
    C --> D[返回问候信息]
    D --> E[UniApp 显示结果]

与此同时，我们也可以使用旅程图来表示用户在应用中的操作过程：

journey
    title 用户获取问候信息的旅程
    section 启动应用
      用户打开 UniApp: 5: 用户
    section 发送请求
      用户点击获取问候按钮: 5: 用户
      UniApp 发送请求到后端: 5: 系统
    section 接收响应
      Spring Boot 返回问候信息: 5: 系统
      用户看到问候信息: 5: 用户

六、总结

通过以上的步骤，我们成功实现了 UniApp 调用 Spring Boot 后端 API 的功能。在这个过程中，我们创建了一个简单的 RESTful API，并使用 UniApp 发送请求以获取数据。这样的前后端分离架构不仅增强了项目的可维护性，还提高了开发效率。

未来，您可以在此基础上扩展更多的功能，比如增强错误处理、实现用户登录功能等，来构建一个完整的应用程序。希望本文能对您有所帮助，祝您在前后端开发的旅途中一帆风顺！