四、給表單添加網絡請求提交數據

（一）準備測試提交接口

同上一篇文章一樣先造一個接口（這個接口是模擬接收表單數據的，實際要根據真實接口調整）。圖如下：

模擬接口鏈接為：

（二）修改首頁表單代碼

打開​​pages/index/index.uvue​​​，修改​​submitForm​​方法，讓表單數據通過網絡請求提交：

<template>
  <view class="container">
    <text>這是首頁呀</text>
    <!-- 跳轉按鈕 -->
    <button @click="goToUserPage">去個人頁面</button> 
    <!-- 表單區域 -->
    <view class="form-area">
      <view class="form-item">
        <text>姓名：</text>
        <input class="wh" type="text" placeholder="請輸入姓名" v-model="formData.name" />
      </view>
      <view class="form-item">
        <text>年齡：</text>
        <input  class="wh" type="number" placeholder="請輸入年齡" v-model="formData.age" />
      </view>
      <button class="submit-btn" @click="submitForm">提交</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        name: '',
        age: ''
      }
    };
  },
  methods: {
    goToUserPage() {
      uni.navigateTo({
        url: '/pages/user/user' 
      });
    },
    submitForm() {
      if (!this.formData.name || !this.formData.age) {
        uni.showToast({
          title: '請填寫完整信息',
          icon: 'none'
        });
        return;
      }
      // 發起網絡請求提交數據
      uni.request({
        url: 'http://10.0.2.2:2345/user',
        method: 'POST',
        data: this.formData,
        success: (res) => {
          if (res.statusCode === 201) {
            uni.showToast({
              title: '提交成功',
              icon: 'success'
            });
            // 提交成功後可以清空表單
            this.formData.name = '';
            this.formData.age = '';
          } else {
            uni.showToast({
              title: '提交失敗，請重試',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.log('提交失敗', err);
          uni.showToast({
            title: '網絡出錯啦',
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
button {
  margin-top: 20rpx;
  padding: 15rpx 30rpx;
  background-color: #007AFF;
  color: #fff;
  border-radius: 8rpx;
}
.form-area {
  width: 80%;
  margin-top: 30rpx;
}
.form-item {
  display: flex;
  flex-direction: row;

  margin-bottom: 20rpx;
}
.form-item text {
  width: 120rpx;
}
.input {
  flex: 1;
  padding: 10rpx;
  border: 1px solid #ccc;
  border-radius: 4rpx;
}
.submit-btn {
  width: 100%;
}
.wh{
    width: 50%;
}
</style>

這裏在表單提交時，先做校驗，通過後用​​POST​​​方法把​​formData​​的數據提交到接口，根據返回結果提示用户提交成功或失敗，成功的話還可以清空表單數據。

頁面效果：

五、遇到的問題及解決

（一）跨域問題

在瀏覽器運行項目測試時，可能會遇到跨域報錯。不過在真機或模擬器運行時，Uniapp 已經做了處理，一般不會有跨域問題。如果是在 HBuilderX 裏用瀏覽器預覽出現跨域，可以安裝瀏覽器的跨域插件（比如 Chrome 的 Allow CORS 插件）臨時解決，或者讓後端小夥伴配置跨域頭。

（二）接口返回數據格式不對

有時候接口返回的數據結構和我們預期的不一樣，導致頁面渲染出錯。這時候要仔細看接口文檔，或者打印​​res.data​​​看看具體返回內容，調整代碼裏的數據處理邏輯。比如有的接口返回會包一層​​result​​​，那我們就得取​​res.data.result​​裏的數據。

六、總結

今天給項目加上了網絡請求功能，讓列表能從服務器獲取數據，表單能把數據提交到服務器，這就更貼近真實項目啦！通過​​uni.request​​​方法，我們可以很方便地實現數據的獲取和提交，雖然過程中遇到了跨域、數據格式等小問題，但解決後對網絡請求的理解更深了。後續打算優化網絡請求的封裝，比如把​​uni.request​​封裝成一個通用函數，減少重複代碼，還可以處理加載動畫、統一錯誤提示等。學習就是這樣，一步步把功能完善，慢慢構建出一個完整的應用，繼續加油呀！

`##Uniapp##三方框架##商務##