• 【wiki知识库】04.SpringBoot后端实现电子书的增删改查以及前端界面的展示

      📝个人主页：哈__

    期待您的关注 

    目录

    一、🔥今日内容

    二、🌏前端页面的改造

    2.1新增电子书管理页面

    2.2新增路由规则

    2.3修改the-header代码

    三、🚗SpringBoot后端Ebook模块改造

    3.1增加电子书增/改接口

    3.1.1新增EbookSaveParam

    3.1.2添加Controller代码

    3.1.3在Ebook实体类上增加一个注解

    3.2 增加电子书删除接口

    四、🔨测试 

    4.1添加功能测试

    4.2修改功能测试。

    4.3删除功能测试

    一、🔥今日内容

    【wiki知识库】03.前后端的初步交互（展现所有的电子书）-CSDN博客

    上一次带领大家把前端的首页部分实现了一下，成功的从数据库当中取出了我们的信息并且展示在前端页面，到了下图的部分。

    今天主要是把这个网页的界面初步优化一下，修改一下导航栏以及增加电子书管理模块。包含电子书的查询功能、新增功能、编辑功能和删除功能（不包括文档管理）。

    二、🌏前端页面的改造

    2.1新增电子书管理页面

    我在src下新建了admin文件夹，这个文件夹中的内容是给网站管理员看到的，所以放到了admin目录，名字为admin-ebook.vue。

     admin-ebook.vue的具体内容如下。这个文件里我注释掉了一些信息，而且这个文件中的内容包含了页面需要的功能很多，有的一些并不是今天要讲解的内容，所以并没有使用到。今天主要就是想带着大家做出一个电子书管理的模块来。

    1. <template>
    2.   <a-layout>
    3.     <a-layout-content
    4.       :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    5.     >
    6.       <p>
    7.         <a-form layout="inline" :model="param">
    8.           <a-form-item>
    9.             <a-input v-model:value="param.name" placeholder="名称">
    10.             a-input>
    11.           a-form-item>
    12.           <a-form-item>
    13.             <a-button type="primary" @click="handleQuery({page: 1, size: pagination.pageSize})">
    14.               查询
    15.             a-button>
    16.           a-form-item>
    17.           <a-form-item>
    18.             <a-button type="primary" @click="add()">
    19.               新增
    20.             a-button>
    21.           a-form-item>
    22.         a-form>
    23.       p>
    24.       <a-table
    25.         :columns="columns"
    26.         :row-key="record => record.id"
    27.         :data-source="ebooks"
    28.         :pagination="pagination"
    29.         :loading="loading"
    30.         @change="handleTableChange"
    31.       >
    32.         <template #cover="{ text: cover }">
    33.           <img v-if="cover" :src="cover" alt="avatar" />
    34.         template>
    35.         <template v-slot:category="{ text, record }">
    36.           
    37.         template>
    38.         <template v-slot:action="{ text, record }">
    39.           <a-space size="small">
    40.             
    41.               <a-button type="primary">
    42.                 文档管理
    43.               a-button>
    44.             
    45.             <a-button type="primary" @click="edit(record)">
    46.               编辑
    47.             a-button>
    48.             <a-popconfirm
    49.               title="删除后不可恢复，确认删除?"
    50.               ok-text="是"
    51.               cancel-text="否"
    52.               @confirm="handleDelete(record.id)"
    53.             >
    54.               <a-button type="danger">
    55.                 删除
    56.               a-button>
    57.             a-popconfirm>
    58.           a-space>
    59.         template>
    60.       a-table>
    61.     a-layout-content>
    62.   a-layout>
    63.  
    64.   <a-modal
    65.     title="电子书表单"
    66.     v-model:visible="modalVisible"
    67.     :confirm-loading="modalLoading"
    68.     @ok="handleModalOk"
    69.   >
    70.     <a-form :model="ebook" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
    71.       <a-form-item label="封面">
    72.         <a-input v-model:value="ebook.cover" />
    73.       a-form-item>
    74.       <a-form-item label="名称">
    75.         <a-input v-model:value="ebook.name" />
    76.       a-form-item>
    77.       <a-form-item label="分类">
    78.         <a-cascader
    79.           v-model:value="categoryIds"
    80.           :field-names="{ label: 'name', value: 'id', children: 'children' }"
    81.           :options="level1"
    82.         />
    83.       a-form-item>
    84.       <a-form-item label="描述">
    85.         <a-input v-model:value="ebook.description" type="textarea" />
    86.       a-form-item>
    87.     a-form>
    88.   a-modal>
    89. template>
    90.  
    91. <script lang="ts">
    92.   import { defineComponent, onMounted, ref } from 'vue';
    93.   import axios from 'axios';
    94.   import { message } from 'ant-design-vue';
    95.   import {Tool} from "@/util/tool";
    96.  
    97.   export default defineComponent({
    98.     name: 'AdminEbook',
    99.     setup() {
    100.       const param = ref();
    101.       param.value = {};
    102.       const ebooks = ref();
    103.       const pagination = ref({
    104.         current: 1,
    105.         pageSize: 10,
    106.         total: 0
    107.       });
    108.       const loading = ref(false);
    109.  
    110.       const columns = [
    111.         {
    112.           title: '封面',
    113.           dataIndex: 'cover',
    114.           slots: { customRender: 'cover' }
    115.         },
    116.         {
    117.           title: '名称',
    118.           dataIndex: 'name'
    119.         },
    120.         {
    121.           title: '分类',
    122.           slots: { customRender: 'category' }
    123.         },
    124.         {
    125.           title: '文档数',
    126.           dataIndex: 'docCount'
    127.         },
    128.         {
    129.           title: '阅读数',
    130.           dataIndex: 'viewCount'
    131.         },
    132.         {
    133.           title: '点赞数',
    134.           dataIndex: 'voteCount'
    135.         },
    136.         {
    137.           title: 'Action',
    138.           key: 'action',
    139.           slots: { customRender: 'action' }
    140.         }
    141.       ];
    142.  
    143.       /**
    144.        * 数据查询
    145.        **/
    146.       const handleQuery = (params: any) => {
    147.         loading.value = true;
    148.         // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据
    149.         ebooks.value = [];
    150.         axios.get("/ebook/list", {
    151.           params: {
    152.             page: params.page,
    153.             size: params.size,
    154.             name: param.value.name
    155.           }
    156.         }).then((response) => {
    157.           loading.value = false;
    158.           const data = response.data;
    159.           if (data.success) {
    160.             ebooks.value = data.content.list;
    161.  
    162.             // 重置分页按钮
    163.             pagination.value.current = params.page;
    164.             pagination.value.total = data.content.total;
    165.           } else {
    166.             message.error(data.message);
    167.           }
    168.         });
    169.       };
    170.  
    171.       /**
    172.        * 表格点击页码时触发
    173.        */
    174.       const handleTableChange = (pagination: any) => {
    175.         console.log("看看自带的分页参数都有啥：" + pagination);
    176.         handleQuery({
    177.           page: pagination.current,
    178.           size: pagination.pageSize
    179.         });
    180.       };
    181.  
    182.       // -------- 表单 ---------
    183.       /**
    184.        * 数组，[100, 101]对应：前端开发 / Vue
    185.        */
    186.       const categoryIds = ref();
    187.       const ebook = ref();
    188.       const modalVisible = ref(false);
    189.       const modalLoading = ref(false);
    190.       const handleModalOk = () => {
    191.         modalLoading.value = true;
    192.         ebook.value.category1Id = categoryIds.value[0];
    193.         ebook.value.category2Id = categoryIds.value[1];
    194.         axios.post("/ebook/save", ebook.value).then((response) => {
    195.           modalLoading.value = false;
    196.           const data = response.data; // data = commonResp
    197.           if (data.success) {
    198.             modalVisible.value = false;
    199.  
    200.             // 重新加载列表
    201.             handleQuery({
    202.               page: pagination.value.current,
    203.               size: pagination.value.pageSize,
    204.             });
    205.           } else {
    206.             message.error(data.message);
    207.           }
    208.         });
    209.       };
    210.  
    211.       /**
    212.        * 编辑
    213.        */
    214.       const edit = (record: any) => {
    215.         modalVisible.value = true;
    216.         ebook.value = Tool.copy(record);
    217.         categoryIds.value = [ebook.value.category1Id, ebook.value.category2Id]
    218.       };
    219.  
    220.       /**
    221.        * 新增
    222.        */
    223.       const add = () => {
    224.         modalVisible.value = true;
    225.         ebook.value = {};
    226.       };
    227.  
    228.       const handleDelete = (id: number) => {
    229.         axios.delete("/ebook/delete/" + id).then((response) => {
    230.           const data = response.data; // data = commonResp
    231.           if (data.success) {
    232.             // 重新加载列表
    233.             handleQuery({
    234.               page: pagination.value.current,
    235.               size: pagination.value.pageSize,
    236.             });
    237.           } else {
    238.             message.error(data.message);
    239.           }
    240.         });
    241.       };
    242.  
    243.       const level1 =  ref();
    244.       let categorys: any;
    245.       /**
    246.        * 查询所有分类
    247.        **/
    248.       const handleQueryCategory = () => {
    249.         loading.value = true;
    250.         axios.get("/category/all").then((response) => {
    251.           loading.value = false;
    252.           const data = response.data;
    253.           if (data.success) {
    254.             categorys = data.content;
    255.             console.log("原始数组：", categorys);
    256.  
    257.             level1.value = [];
    258.             level1.value = Tool.array2Tree(categorys, 0);
    259.             console.log("树形结构：", level1.value);
    260.  
    261.             // 加载完分类后，再加载电子书，否则如果分类树加载很慢，则电子书渲染会报错
    262.             handleQuery({
    263.               page: 1,
    264.               size: pagination.value.pageSize,
    265.             });
    266.           } else {
    267.             message.error(data.message);
    268.           }
    269.         });
    270.       };
    271.  
    272.       const getCategoryName = (cid: number) => {
    273.         // console.log(cid)
    274.         let result = "";
    275.         categorys.forEach((item: any) => {
    276.           if (item.id === cid) {
    277.             // return item.name; // 注意，这里直接return不起作用
    278.             result = item.name;
    279.           }
    280.         });
    281.         return result;
    282.       };
    283.  
    284.       onMounted(() => {
    285.         handleQuery({
    286.               page: pagination.value.current,
    287.               size: pagination.value.pageSize,
    288.             });
    289.       });
    290.  
    291.       return {
    292.         param,
    293.         ebooks,
    294.         pagination,
    295.         columns,
    296.         loading,
    297.         handleTableChange,
    298.         handleQuery,
    299.         getCategoryName,
    300.  
    301.         edit,
    302.         add,
    303.  
    304.         ebook,
    305.         modalVisible,
    306.         modalLoading,
    307.         handleModalOk,
    308.         categoryIds,
    309.         level1,
    310.  
    311.         handleDelete
    312.       }
    313.     }
    314.   });
    315. script>
    316.  
    317. <style scoped>
    318.   img {
    319.     width: 50px;
    320.     height: 50px;
    321.   }
    322. style>

    上边的内容很多，但我们今天核心的前端调用部分是下边的代码。

    1. const handleQuery = (params: any) => {
    2.         loading.value = true;
    3.         // 如果不清空现有数据，则编辑保存重新加载数据后，再点编辑，则列表显示的还是编辑前的数据
    4.         ebooks.value = [];
    5.         axios.get("/ebook/list", {
    6.           params: {
    7.             page: params.page,
    8.             size: params.size,
    9.             name: param.value.name
    10.           }
    11.         }).then((response) => {
    12.           loading.value = false;
    13.           const data = response.data;
    14.           if (data.success) {
    15.             ebooks.value = data.content.list;
    16.  
    17.             // 重置分页按钮
    18.             pagination.value.current = params.page;
    19.             pagination.value.total = data.content.total;
    20.           } else {
    21.             message.error(data.message);
    22.           }
    23.         });
    24.       };

    当我们进去这个页面的时候，首先就会调用下方代码，请求路径也恰好是我们后端之前写过的list接口，用来分页查询电子书信息。

    1. onMounted(() => {
    2.         handleQuery({
    3.               page: pagination.value.current,
    4.               size: pagination.value.pageSize,
    5.             });
    6.       });

    2.2新增路由规则

    既然都要新增一个电子书的管理页面了，那我们也要为这个页面分配一个能够匹配到的路由路径。

    1. import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
    2. import HomeView from '../views/HomeView.vue'
    3. import AdminEbook from '@/views/admin/admin-ebook.vue'
    4. import AboutView from '../views/AboutView.vue'
    5. const routes: Array<RouteRecordRaw> = [
    6.   {
    7.     path: '/',
    8.     name: 'home',
    9.     component: HomeView
    10.   },
    11.   {
    12.     path: '/about',
    13.     name: 'about',
    14.     component:AboutView
    15.   },
    16.   {
    17.     path: '/admin/ebook',
    18.     name: 'AdminEbook',
    19.     component: AdminEbook
    20.   },
    21. ]
    22.  
    23. const router = createRouter({
    24.   history: createWebHistory(process.env.BASE_URL),
    25.   routes
    26. })
    27.  
    28. export default router

    2.3修改the-header代码

     我们新增的组件是通过点击the-header组件中的按钮实现跳转的，这里要修改一些代码。我在这个页面添加了一些路由用于跳转我们的组件。

    1. <template>
    2.      <a-layout-header class="header">
    3.       <div class="logo" >div>
    4.       <a-menu
    5.         theme="dark"
    6.         mode="horizontal"
    7.         v-model:selectedKeys="sselectedKeys1"
    8.         :style="{ lineHeight: '64px' }"
    9.       >
    10.         <a-menu-item key="/"><router-link to="/">首页router-link>a-menu-item>
    11.         <a-menu-item key="/admin/ebook"><router-link to="/admin/ebook">电子书管理router-link>a-menu-item>
    12.         <a-menu-item key="/about"><router-link to="/about">关于我们router-link>a-menu-item>
    13.       a-menu>
    14.     a-layout-header>
    15. template>

    至此我们前端改造成功，接下来就是后端了。

    三、🚗SpringBoot后端Ebook模块改造

    3.1增加电子书增/改接口

    在我们点击新增按钮或者编辑按钮的时候，会弹出一个窗口来添加或者修改电子书的信息，当我们点击确定之后会向后端发送请求。请求接口是/ebook/save，注意，这里的save指代两个功能，第一个是新增，第二个是修改。

    3.1.1新增EbookSaveParam

    这个实体类用于封装我们前端传过来的电子书的信息。

    1. @Data
    2. public class EbookSaveParam {
    3.     private Long id;
    4.     @NotNull(message = "【名称】不能为空")
    5.     private String name;
    6.     private Long category1Id;
    7.     private Long category2Id;
    8.     private String description;
    9.     private String cover;
    10.     private Integer docCount;
    11.     private Integer viewCount;
    12.     private Integer voteCount;
    13. }

    3.1.2添加Controller代码

    这里我直接使用的MybatisPlus封装好的函数

    1.     /**
    2.      *  保存/修改电子书
    3.      * @param ebookQueryParam
    4.      * @return
    5.      */
    6.     @PostMapping("/save")
    7.     public CommonResp save(@Validated @RequestBody EbookSaveParam ebookQueryParam){
    8.         boolean res = ebookService.saveOrUpdate(CopyUtil.copy(ebookQueryParam,Ebook.class));
    9.         String message = Boolean.TRUE.equals(res) ? "操作成功":"操作失败";
    10.         return new CommonResp<>(true,message,null);
    11.     }

    3.1.3在Ebook实体类上增加一个注解

    我们要使用雪花算法生成的id存储在数据库当中。

    1.   /**
    2.      * id
    3.      */
    4.     @TableId(type = IdType.ASSIGN_UUID)
    5.     private Long id;

    当然除了雪花id还有其他的id可供选择。这里就不一一给大家说了。

    3.2 增加电子书删除接口

    删除功能的接口是下边图中所示。采用的是Restful风格的请求。

     对应Controller代码。

    1.  /**
    2.      * 删除电子书
    3.      * @param id 电子书id
    4.      * @return
    5.      */
    6.     @DeleteMapping("/delete/{id}")
    7.     public CommonResp delete(@PathVariable("id") Long id){
    8.         boolean res = ebookService.removeById(id);
    9.         String message = Boolean.TRUE.equals(res) ? "删除成功":"删除失败";
    10.         return new CommonResp<>(true,message,null);
    11.     }

    四、🔨测试 

    4.1添加功能测试

    测试之前还要注释两行代码。因为我们的分类模块还没写，这里不能传值。

    随便加一个电子书上去。

    结果还是没问题的。

    4.2修改功能测试。

    不在截图展示了，点击编辑按钮之后哦修改数据我这里是正确的。

    4.3删除功能测试

    这时就有问题了，我删除怎么成功不了？那么你是否会分析原因呢？先看看前端的打印。

    仔细看看我们传过去的id是什么，再看看你的数据库里是否有这个id？ 显然是没有的。

    这里就要说一下前后端传输数据的数据精度丢失问题了，因为我们传的数据是一个整形，而且数值很大，在传输的过程总是有精度问题得，想要解决就需要在后端加一个配置类。

    1. package com.my.hawiki.config;
    2.  
    3. import com.fasterxml.jackson.databind.ObjectMapper;
    4. import com.fasterxml.jackson.databind.module.SimpleModule;
    5. import com.fasterxml.jackson.databind.ser.std.ToStringSerializer;
    6. import org.springframework.context.annotation.Bean;
    7. import org.springframework.context.annotation.Configuration;
    8. import org.springframework.http.converter.json.Jackson2ObjectMapperBuilder;
    9.  
    10. /**
    11.  * 统一注解，解决前后端交互Long类型精度丢失的问题
    12.  */
    13. @Configuration
    14. public class JacksonConfig {
    15.     @Bean
    16.     public ObjectMapper jacksonObjectMapper(Jackson2ObjectMapperBuilder builder) {
    17.         ObjectMapper objectMapper = builder.createXmlMapper(false).build();
    18.         SimpleModule simpleModule = new SimpleModule();
    19.         simpleModule.addSerializer(Long.class, ToStringSerializer.instance);
    20.         objectMapper.registerModule(simpleModule);
    21.         return objectMapper;
    22.     }
    23. }

    之后在运行代码试试。大功告成。

     电子书管理页面的基本几个功能差不多就这么多了。

  • 相关阅读:
    文件内容操作
    【劳动者捍卫自己的权利】
    聊聊 mysql 事务？（三：从redo log恢复数据）
    Open3D(C++)欧式聚类分割
    Java面向对象16：接口的定义与实现
    数据库安全：Hadoop 未授权访问-命令执行漏洞.
    使用NodeList
    【Arthas性能排查系列（一）】检查Java程序调用链路的耗时情况
    standard_init_linux.go:211: exec user process caused “exec format error“
    【微服务｜SCG】Filters的33种用法
  • 原文地址：https://blog.csdn.net/qq_61024956/article/details/139395392