Fastapi前端搭建

1. 配置import { defineConfig } from vite import vue from vitejs/plugin-vue import { resolve } from path export default defineConfig({ plugins: [vue()], resolve: { alias: { : resolve(__dirname, src) } }, server: { proxy: { /api: { target: http://127.0.0.1:8000, changeOrigin: true, } } } })Vue 前端配置在/api路径下配置代理将请求转发到后端地址 http://127.0.0.1:8000/api/changeOrigin: true修改请求头中的Origin为目标地址避免后端因 Origin 校验拒绝请求。2. 接口格式// 加载图书列表 1. 在挂载时加载 // const loadBook () { // axios.get(/api/book/?page${query.value.page}page_size${query.value.page_size}) // .then(res { // console.log(后端返回, res.data) // tableData.value res.data.data // totalNum.value res.data.count_total // }) // .catch(err console.error(err)) // }1. 方法一axios.get(调用路径/?分页参数 查询条件).then请求成功后触发.then中的回调函数。.catch请求失败后触发。相当于一个 if-else 判断如果成功执行成功逻辑如果失败则提示错误。2. 方法二// 加载图书列表 2. 在事件中加载 const loadBook () { axios.get(/api/book/, {params: query.value}) .then(res { console.log(res.data) tableData.value res.data.data totalNum.value res.data.count_total }) .catch(err console.error(err)) }在事件中加载时将参数放在请求体{params: query.value}中params中传递数据不在路由中传递。3. 添加、编辑接口!-- 新增、编辑共用弹窗 -- el-dialog v-modeldialogVisible title图书表单 width520px el-form label-width90px el-form-item label书名 el-input v-modelform.name/el-input /el-form-item el-form-item label价格 el-input v-model.numberform.price/el-input /el-form-item el-form-item label库存数量 el-input v-model.numberform.numbers/el-input /el-form-item !-- 分类下拉选择 -- el-form-item label分类 el-select v-modelform.category_id placeholder请选择分类 stylewidth: 100% el-option label文学小说 value1 / el-option label计算机编程 value2 / el-option label历史人文 value3 / el-option label心理学 value4 / el-option label美食菜谱 value5 / /el-select /el-form-item /el-form template #footer el-button clickdialogVisible false取消/el-button el-button typeprimary clicksubmitForm确定提交/el-button /template /el-dialog组件定义弹窗变量dialogVisible false默认未打开点击后打开并显示数据绑定form中的空数据。如果输入数据就将输入的数据放到form中对应的字段中。添加接口、编辑接口const submitForm () { if (operateMode.value add) { // 新增 axios.post(/api/book/, form.value) .then(() { ElMessage.success(新增成功) dialogVisible.value false loadBook() }) .catch(err { ElMessage.error(新增失败) console.error(err) }) } else { // 编辑 axios.put(/api/book/${editBookId.value}, form.value) .then(() { ElMessage.success(修改成功) dialogVisible.value false loadBook() }) .catch(err { ElMessage.error(修改失败) console.error(err) }) } }因为编辑和添加功能在一起需要先判断当前窗口是添加还是编辑然后调用对应的接口。将请求体发送到后端form中是添加的数据传到后端后添加到 MySQL 数据库中。添加或编辑成功后将dialogVisible.value false关闭窗口。修改时只传递修改后的数据然后传到后端接口进行修改。