flask前后端项目--实例-前端部分：-5-vue-Element Plus-t添加数据_flask+vue前后端项目

在前端添加数据信息

这个是一系列的内容，本章内容重点关注页面添加数据的过程，其他功能未调测

1.需要在vue-plus中找到dialog组件

---

2.在ui界面上添加数据--实际代码

app.vue的数据

<script setup>
  import axios from "axios";
  import {reactive,ref,onMounted} from "vue";
  import {ElMessageBox}from 'element-plus'
 
  const books=reactive([])
 
  //请求后端数据,像后端请求数据
  const getStudent=()=>{
    axios.get("http://127.0.0.1:5000/books",).then(
        res=>{
          //删除旧的数据
          books.splice(0,books.length)
          //解压新的数据并且添加
          books.push(...res.data.results)
          console.log("更新数据")
        }
    )
 
  }
 
  //在页面上删除数据
  const handleDelete=(index,scope)=>{
    console.log(index,scope)
    axios.delete("http://127.0.0.1:5000/books/${scope.id}").then(
 
        ()=>{getStudent()}
 
    )
  }
 
  //页面加载完毕后再获取后台数据,生命周期的一个钩子函数
  onMounted(()=>{
    getStudent()
  })
 
  //表单添加
  const add_dialog_visible=ref(false)
  const ruleFormRef=ref()
  const book_form=reactive({
    book_number:"",
    book_name:"",
    book_type:"",
    book_price:"",
    author:"",
    book_publisher:"",
    id:"",})
 
 
  //表单提交事项
  const submitForm=(formEl)=>{
    axios.post("http://127.0.0.1:5000/books",book_form).then(()=>{
          add_dialog_visible.value=false
          formEl.resetFields()
          getStudents()
 
        }
    )
  }
 
 
  //重置表单
  const resetFrom=(formEl)=>{
    formEl.resetFields()
    getStudents()
 
  }
 
  //关闭弹窗确认
  const handleClose=(done)=> {
    ElMessageBox.confirm("确认关闭")
        .then(() => {
          done();
        })
        .catch(() => {
 
        });
  }
 
 
</script>
 
<template>
  <div style="margin: 0 auto;width: 100%">
    <h1 style="text-align: center"> 图书管理系统</h1>
    <!--    添加图书按钮-->
    <el-button type="primary" @click="add_dialog_visible=true" size="small">添加图书</el-button>
 
    <!--    展示数据的表格-->
    <el-table :data="books" style="margin: 20px auto;">
      <el-table-column label="编号" prop="book_number"></el-table-column>
      <el-table-column label="书名" prop="book_name"></el-table-column>
      <el-table-column label="类型" prop="book_type"></el-table-column>
      <el-table-column label="价格" prop="book_price"></el-table-column>
      <el-table-column label="作者" prop="book_author"></el-table-column>
      <el-table-column label="出版社" prop="book_publisher"></el-table-column>
      <el-table-column label="操作" align="right" width="200px">
        <template #default="scope">
 
          <el-button size="small" @click="handleEdit(scope.$index,scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
 
 
        </template>
      </el-table-column>
 
    </el-table>
 
  </div>
 
 
  <el-dialog title="添加图书" v-model="add_dialog_visible" width="30%" :before-close="handleClose">
 
    <el-form ref="ruleFormRef" :model="book_form" status-icon label-width="120px" class="demo-ruleForm">
      <el-form-item label="编号" prop="book_number">
        <el-input v-model="book_form.book_number" autocomplete="off"></el-input>
      </el-form-item>
 
      <el-form-item label="书名" prop="book_name">
        <el-input v-model="book_form.book_name" autocomplete="off"></el-input>
      </el-form-item>
 
      <el-form-item label="类型" prop="book_type">
        <el-input v-model="book_form.book_type" autocomplete="off"></el-input>
      </el-form-item>
 
      <el-form-item label="价格" prop="book_price">
        <el-input v-model="book_form.book_price" autocomplete="off"></el-input>
      </el-form-item>
 
      <el-form-item label="作者" prop="book_author">
        <el-input v-model="book_form.author" autocomplete="off"></el-input>
      </el-form-item>
 
      <el-form-item label="出版社" prop="book_publisher">
        <el-input v-model="book_form.book_publisher" autocomplete="off"></el-input>
      </el-form-item>
 
 
      <el-form-item >
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
        <el-button @click="resetFrom(ruleFormRef)">重置</el-button>
      </el-form-item>
 
    </el-form>
  </el-dialog>
 
</template>
 
<style scoped>
 
</style>

main.js

import {createApp, reactive} from 'vue'
import './style.css'
import App from './App.vue'
 
 
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
 
 
 
 
createApp(App).use(ElementPlus).mount('#app')
// createApp(App).mount('#app')

3.代码组织结构

 4.界面展示

 添加数据以及成功显示

 

 5后端代码

在我的上个文章中，不在重复书写，后端代码没有改变

https://blog.csdn.net/wtt234/article/details/128266545

总结：

到此在ui添加数据完成，还有一些优化没有做，前后端注意的是代码的字段名称一定要注意，

分析问题的时候，查看浏览器F12提示以及查看后端服务的提示，进行分析处理相应故障。