新建SpringBoot项目：电子书编辑功能

制作电子书表单

先选择组件：

<template>
  <div>
    <a-button type="primary" @click="showModal">Open Modal with async logic</a-button>
    <a-modal
      title="Title"
      v-model:visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
    >
      <p>{{ modalText }}</p>
    </a-modal>
  </div>
</template>
<script lang="ts">
import { ref, defineComponent } from 'vue';
export default defineComponent({
  setup() {
    const modalText = ref<string>('Content of the modal');
    const visible = ref<boolean>(false);
    const confirmLoading = ref<boolean>(false);

    const showModal = () => {
      visible.value = true;
    };

    const handleOk = () => {
      modalText.value = 'The modal will be closed after two seconds';
      confirmLoading.value = true;
      setTimeout(() => {
        visible.value = false;
        confirmLoading.value = false;
      }, 2000);
    };
    return {
      modalText,
      visible,
      confirmLoading,
      showModal,
      handleOk,
    };
  },
});
</script>

在admin-ebook.vue中加入：

 

---

 表单组件

 

 

 

---

完成电子书编辑功能

需要定义两个的请求参数封装

先把原来的改名:EbookReq->EbookQueryReq

 再定义一个新的保存请求参数封装

 

用同一个方法：同时完成更新、新增的思路

 

 进一步修改save方法：

  

测试：

  我们用前端界面测试

在admin-ebook.vue中

 对axios.post()方法进行修改

没有成功！！！！！！！！！但是没有传回后端！！！！！（看日志）

 解决办法：

 用json方式的提交，同@RequestBody才能接收到

新建一个测试如下：

 最后再改一下查询请求参数的封装

 

 

---

---