Question

我是新手。而且我正在尝试使用API。

我在Google上搜索并找到了相关代码，但无法在API请求中添加表单数据。

<template>
<div>
    <img src="../img/svg/Mangosteen.png" alt="">
    <Navbar />
    <form @submit.prevent="updateProfile">
    <b-card
    class="profile-card"
    >
    <div>
        <b-form>
            <p class="mt-3 text-center profile-title">Profile</p>
            <b-form-input
            id="input-1"
            v-model="fullname"
            type="text"
            required
            placeholder="fullname"
            class="mt-5 input"
            name="fullname" 
            v-validate="'required'" 
            :class="{ 'mt-5 input': errors.has('fullname') }">
            >
            </b-form-input>
            <p v-show="errors.has('fullname')" class="validate text-center">{{ errors.first('fullname') }}</p> 
            <b-form-input
            id="input-2"
            v-model="phone"
            type="tel"
            required
            placeholder="phone number"
            class="mt-5 input"
            name="phone number" 
            v-validate="'required'" 
            :class="{ 'mt-5 input': errors.has('phone number') }">
            >
            </b-form-input>
            <p v-show="errors.has('phone number')" class="validate text-center">{{ errors.first('phone number') }}</p>  
            <b-form-input
            id="input-3"
            v-model="email"
            type="email"
            required
            placeholder="Email"
            class="mt-5 input"
            name="email" 
            v-validate="'required|email'" 
            :class="{ 'mt-5 input': errors.has('email') }">
            >
            </b-form-input>
            <p v-show="errors.has('email')" class="validate text-center">{{ errors.first('email') }}</p>
            <error-bar :error="error"></error-bar> 
            </b-form>
        <b-button class="update-btn" type="submit">Update</b-button>
        </div>
    </b-card>
    </form>
</div>
</template>

<script>
import Navbar from "@/components/Navbar.vue";
import ErrorBar from '@/components/ErrorBar'
import apiJobMixin from '@/mixins/apiJobMixin'
  
  
  export default {
    data () {
      return {
        fullname: '',
        phone: '',
        email: '',
      }
    },
    mixins: [apiJobMixin],
    components: {
      ErrorBar: ErrorBar
    },
    mounted: function () {
      this.$store.commit('clearError')
      const user = this.$store.getters.user
      if (user) {
        this.fullname = user.name
        this.phone = user.phone
        this.email = user.email
      }
    },
    methods: {
      updateProfile () {
        this.$validator.validateAll()
          .then(result => {
            if (result) {
              this.$store.dispatch('updateProfile', { fullname: this.fullname, phone: this.phone, email: this.email })
            }
          })
      },
      jobsDone () {        
        this.$swal({
          title: 'Profile updated successfuly',
          icon: 'success'
        })
      }
    },
    // If data gone after page reload
    computed: {      
      userData () {
        return this.$store.getters.user
      }
    },
    watch: {      
      userData (value) {
        if (value) {
          this.fullname = value.name
          this.phone = value.phone
          this.email = value.email
        }
      }
    }
  }
</script>

我必须通过import 'dart:convert'; import '../models/bill.dart'; Future<Stream<Bill>> getBills() async { final String url = 'https://api.punkapi.com/v2/beers'; final client = new http.Client(); final streamedRest = await client.send(http.Request('post', Uri.parse(url))); return streamedRest.stream .transform(utf8.decoder) .transform(json.decoder) .expand((data) => (data as List)) .map((data) => Bill.fromJSON(data)); }身体。请帮助我

Answer 1

检查此示例

    Future<Album> createAlbum(String title) async {
  final http.Response response = await http.post(
    'https://jsonplaceholder.typicode.com/albums',
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': title,
    }),
  );
  if (response.statusCode == 201) {
    // If the server did return a 201 CREATED response,
    // then parse the JSON.
    return Album.fromJson(json.decode(response.body));
  } else {
    // If the server did not return a 201 CREATED response,
    // then throw an exception.
    throw Exception('Failed to load album');
  }
}

在此处详细了解 Complete example

您也可以使用Dio包
A powerful Http client for Dart

如何在Flutter http请求中添加正文？

1 个答案: