vue3前后端接口对接

### Vue 3 前后端接口对接实践 #### 使用 Axios 进行 HTTP 请求 为了使 Vue 3 应用能够与后端服务进行通信，可以采用 `axios` 或其他类似的 HTTP 客户端库。Axios 提供了一种简单的方法来发送异步 HTTP 请求至 RESTful Web API 并处理响应数据[^1]。 安装 Axios 可通过 npm： ```bash npm install axios ``` 创建一个新的文件夹结构以更好地组织代码，比如在 src 文件夹下新建 services 文件夹，在其中放置 api.js 来封装所有的网络请求逻辑: ```javascript // src/services/api.js import axios from 'axios'; const instance = axios.create({ baseURL: process.env.VUE_APP_API_URL || 'http://localhost:8080', }); export default { getBooks() { return instance.get('/books'); }, addBook(book) { return instance.post('/book', book); } } ``` 这里设置了基础 URL 和两个函数分别用来获取书籍列表以及向服务器添加新的书目记录。注意这里的 `/books`, `/book` 需要根据实际的后端路由调整。 接下来可以在组件内部调用这些方法来进行前后端的数据交换操作。例如在一个名为 BookList.vue 的单文件组件里展示所有书籍的信息，并允许用户新增一条书籍条目： ```html <template> <div class="container"> <h2>我的藏书</h2> <!-- 显示现有书籍 --> <ul v-if="books.length > 0"> <li v-for="(item, index) in books" :key="index">{{ item.title }}</li> </ul> <!-- 添加新书表单 --> <form @submit.prevent="handleSubmit()"> <input type="text" placeholder="输入书名..." required v-model.trim="title"/> <button type="submit">保存</button> </form> </div> </template> <script> import api from '../services/api'; export default { name: "BookList", data(){ return{ title:'', books:[] }; }, methods:{ handleSubmit:async function () { try { const response = await api.addBook({title:this.title}); this.books.push(response.data.book); this.title=''; } catch (error){ alleet(error.message); } } }, mounted:async function (){ try { let res=await api.getBooks(); this.books=res.data; }catch(e){ console.error(`加载失败 ${e}`); } } }; </script> ``` 上述例子展示了如何利用 async/await 结构简化异步编程流程，使得代码更加直观易读[^3]。 #### 处理错误情况 当遇到异常状况时（如网络连接中断），应当给用户提供友好的提示信息而不是让应用崩溃。这可以通过捕获 Promise 中抛出的 Error 对象完成。 #### 图片上传实例 对于图片类资源的操作，如头像上传，则涉及到 FormData 构造器的应用。下面给出一段简单的示例说明怎样把一张照片传送到远程服务器上并显示出来[^2]: ```html <!-- HeadPhotoUpload.vue --> <template> <div> <img id="preview" /> <br/> <label for="fileInput"></label> <input ref="fileInput" style="display:none;" type="file" accept=".jpg,.jpeg,.png" @change="onFileChange"/> <el-button size="small" icon="upload" circle @click="$refs.fileInput.click()" /> <el-dialog :visible.sync="dialogVisible" width="30%"> <cropper :src="imageSrc" :stencilProps="{ aspectRatio: 1}" @change="onChangeCropper" ></cropper> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible=false">取 消</el-button> <el-button type="primary" @click="handleCrop()">确 定</el-button> </span> </el-dialog> </div> </template> <script> import Cropper from '@vuepic/vue-cropper' import { uploadAvatarApi } from '@/apis/user' export default { components:{Cropper}, data(){ return { imageSrc:null, dialogVisible:false, croppedImage:'' } }, methods:{ onFileChange(event){ const file=event.target.files[0]; if (!file.type.startsWith('image')){return;} this.imageSrc=URL.createObjectURL(file); this.dialogVisible=true; document.getElementById("preview").src=this.imageSrc; }, onChangeCropper(dataUrl){ this.croppedImage=dataUrl; }, handleCrop(){ fetch(this.croppedImage).then(res=>res.blob()).then(blob=>{ const formData=new FormData(); formData.append('avatar',blob,'head.png'); uploadAvatarApi(formData).then((response)=>{ // 更新用户的头像链接... console.log('成功:',response); }).catch(err =>console.warn('失败:',err)); this.dialogVisible=false; }); } } } </script> ``` 此片段实现了基本的功能需求：选择本地图片 -> 裁切 -> 将裁剪后的结果作为二进制流提交给指定的服务端地址。