UniApp Vue 程序使用 uni.request 提交数据并渲染响应结果

<template>
  <view class='container'>
    <view class='input-container'>
      <input type='text' v-model='prompt' placeholder='请输入内容' />
    </view>
    <view class='button-container'>
      <button @click='submitData'>提交</button>
    </view>
    <view class='response-container'>
      <p>响应数据：</p>
      <p>{{ responseData }}</p>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      prompt: '',
      responseData: ''
    };
  },
  methods: {
    submitData() {
      uni.request({
        url: 'http://localhost:3000/data', // 假设接口地址为 http://localhost:3000/data
        method: 'POST',
        data: {
          prompt: this.prompt,
          keys: 'sk4'
        },
        success: res => {
          this.responseData = JSON.stringify(res.data);
        }
      });
    }
  }
};
</script>
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-container {
  margin-top: 50px;
}

.button-container {
  margin-top: 20px;
}

.response-container {
  margin-top: 20px;
}
</style>