理解fetch传输方式在Vue中的应用-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_42603009/article/details/87487415

本文介绍了fetch作为传输方式在Vue项目中的使用。首先，需要设置前端URL以配合后台交互；接着，封装fetch请求并发送给服务器获取数据；最后，将请求到的数据在对应的Vue组件中进行取值和赋值操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fetch传输方式
vue所利用的一种传输方式。
①在前后台传输之前，需要配置好前台画面跳转的url;
在这里插入图片描述
②请求封装后，传输给后台url,返回请求数据。

③将请求的到参数，导入对应的.vue,取值赋值。

	<template>
	<div class="detailsContainer" style="font-size: 14px;width: 100%">
	<p style="text-align:center;padding-top: 20px;padding-bottom: 10px;font-size: 20px;border-bottom:2px solid floralwhite">预约者详情			</p>
<div style="background: ghostwhite;margin-top: 20px">
<el-row  class="reservation_head">
  <el-col :span="3" style="padding-top: 20px;padding-left: 10px"> <img src="/static/img/ll.PNG" /></el-col>
  <el-col :span="4" class="reservation_head_info">
    <el-row style="padding-top: 40px">
      <el-col :span=24 style="margin-bottom: 10px">预约者:{
  { userName }} </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">预约房源：{
  { dormitoryName }}{
  { roomName }}</el-col>
    </el-row>
  </el-col>
</el-row>
<el-row  class="reservationHeadTip" style="padding-top: 20px">
  <el-col :span="3" style="border-bottom: 3px solid peachpuff">{
  { userName }}的信息</el-col>
</el-row>