实现新增和删除电子书功能

最新推荐文章于 2022-03-04 22:11:18 发布
最新推荐文章于 2022-03-04 22:11:18 发布
阅读量192 收藏 1
点赞数
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qzw752890913/article/details/117994617
版权

文章目录

实现新增电子书功能

新增电子书时，需要生成全局唯一id，所以这里用到了雪花算法，关于雪花算法，更多可以访问这里。

package com.jepcc.test.service;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.jepcc.test.mapper.EbookMapper;
import com.jepcc.test.model.Ebook;
import com.jepcc.test.model.EbookExample;
import com.jepcc.test.req.EbookReq;
import com.jepcc.test.req.EbookSaveReq;
import com.jepcc.test.resp.EbookResp;
import com.jepcc.test.resp.PageResp;
import com.jepcc.test.util.CopyUtil;
import com.jepcc.test.util.SnowFlake;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.ObjectUtils;

import java.util.List;


@Service
public class EbookService {
    private static final Logger LOG = LoggerFactory.getLogger(EbookService.class);
    @Autowired
    private EbookMapper ebookMapper;
    @Autowired
    private SnowFlake snowFlake;
    public PageResp<EbookResp> list(EbookReq req){

        EbookExample ebookExample = new EbookExample();
        EbookExample.Criteria criteria = ebookExample.or();
        if(!ObjectUtils.isEmpty(req.getName())){
            criteria.andNameLike("%"+req.getName()+"%");
        }

        PageHelper.startPage(req.getPage(),req.getSize());
        List<Ebook> ebookList = ebookMapper.selectByExample(ebookExample);

        PageInfo<Ebook> pageinfo = new PageInfo<>(ebookList);
//        LOG.info("总条数：{}",pageinfo.getTotal());
//        LOG.info("总页数，{}",pageinfo.getPages());
        List<EbookResp> list = CopyUtil.copyList(ebookList,EbookResp.class);
        PageResp<EbookResp> pageResp = new PageResp<>();
        pageResp.setTotal(pageinfo.getTotal());
        pageResp.setList(list);

        return pageResp;
    }

    public void save(EbookSaveReq req){
        Ebook ebook = CopyUtil.copy(req,Ebook.class);
        if(!ObjectUtils.isEmpty(ebook.getId())){
            ebookMapper.updateByPrimaryKey(ebook);
        }else{
            ebook.setId(snowFlake.nextId());
            ebookMapper.insert(ebook);
        }
    }
}

在这里插入图片描述

<template>
  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      <p>
        <a-button type="primary" size="large" @click="add">新增</a-button>
      </p>
      <a-table :columns="columns" 
        :dataSource="ebooks"
        :row-key="record=>record.id"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange">
        <template #cover="{text:cover}">
          <img v-if="cover" :src="cover" alt="avatar">
        </template>
        <template #action="{text,record}">
          <a-space>
            <a-button type="primary" @click="edit(record)">编辑</a-button>
            <a-button type="danger">删除</a-button>
          </a-space>
        </template>
      </a-table>
    </a-layout-content>

  </a-layout>

  <a-modal
    title="电子书表单"
    v-model:visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
  >
    <a-form :model="ebook" :label-col="{span:4}" :wrapper-col="{span:16}">
      <a-form-item label="封面">
        <a-input v-model:value="ebook.cover" />
      </a-form-item>
      <a-form-item label="名称">
        <a-input v-model:value="ebook.name" />
      </a-form-item>
      <a-form-item label="分类一">
        <a-input v-model:value="ebook.category1Id" />
      </a-form-item>  
      <a-form-item label="分类二">
        <a-input v-model:value="ebook.category2Id" />
      </a-form-item>     
      <a-form-item label="描述">
        <a-input v-model:value="ebook.description" />
      </a-form-item>      
    </a-form>
  </a-modal>

</template>


<script lang="ts">

import { defineComponent,ref,onMounted} from 'vue';
import axios from "axios";
export default defineComponent({
  name:"AdminEbook",
  setup() {
    const ebooks = ref();
    const pagination = ref({
      current:1,
      pageSize:4,
      total:0
    });
    const loading = ref(false);
    const columns = [
      {
        title:"封面",
        dataIndex:"cover",
        key:"cover",
        slots:{customRender:'cover'}
      },
      {
        title:"名称",
        key:"name",
        dataIndex:"name"
      },
      {
        title:"分类一",
        key:"category1Id",
        dataIndex:"category1Id"
      },
      {
        title:"分类二",
        key:"category2Id",
        dataIndex:"category2Id"
      },
      {
        title:"文档数",
        key:"docCount",
        dataIndex:"docCount"
      },
      {
        title:"阅读数",
        key:"viewCount",
        dataIndex:"viewCount"
      },
      {
        title:"点赞数",
        key:"vouteCount",
        dataIndex:"voteCount"
      },
      {
        title:"操作",
        key:"action",
        dataIndex:"action",
        slots:{customRender:'action'}

      }
    ];

    const visible = ref(false);
    const modalText = ref('test');
    const confirmLoading = ref(false);
    const ebook= ref({});

    const handleQuery = (params:any) => {
      loading.value = true;
      axios.get("/ebook/list",{params:params}).then(response => {
        loading.value = false;
        const data = response.data.content;
        ebooks.value = data.list;
        
        pagination.value.total = data.total;
        pagination.value.current = params.page;
      })
    };

    const handleTableChange = (pagination:any) => {
      handleQuery({
        page:pagination.current,
        size:pagination.pageSize
      });
    }

    const edit = (record:any) => {
      visible.value = true;
      ebook.value = record;
    }
    const add = () => {
      visible.value = true;
      ebook.value = {};
    }
    const handleOk = () => {
      // modalText.value = 'The modal will be closed after two seconds';
      // confirmLoading.value = true;
      axios.post("/ebook/save",ebook.value).then(response => {
        const data = response.data;
        if(data.success){
          visible.value = false;
          confirmLoading.value = false;

          handleQuery({
            page:pagination.value.current,
            size:pagination.value.pageSize
          })
        }
        
      })
      // setTimeout(() => {
      //   visible.value = false;
      //   confirmLoading.value = false;
      // }, 2000);
    };
    
    onMounted(() => {
      handleQuery({
        page:1,
        size:pagination.value.pageSize
      });
    })

    return {
      columns,
      ebooks,
      loading,
      pagination,
      handleTableChange,
      visible,
      modalText,
      confirmLoading,
      edit,
      add,
      handleOk,
      ebook
    }
  }
})
</script>


<style scoped>
img{
  width: 48px;
  height: 48px;
}
</style>

在这里插入图片描述
在这里插入图片描述

实现删除电子书功能
后台添加 删除电子书 接口
package com.jepcc.test.controller;

import com.alibaba.fastjson.JSONObject;
import com.jepcc.test.req.EbookReq;
import com.jepcc.test.req.EbookSaveReq;
import com.jepcc.test.resp.CommonResp;
import com.jepcc.test.resp.EbookResp;
import com.jepcc.test.resp.PageResp;
import com.jepcc.test.service.EbookService;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@RequestMapping("/ebook")
public class EbookController {
    private static final Logger LOG = LoggerFactory.getLogger(EbookController.class);
    @Autowired
    private EbookService ebookService;


    @GetMapping("/list")
    public CommonResp list(EbookReq req){
        CommonResp resp = new CommonResp();
        PageResp<EbookResp> list = ebookService.list(req);
        resp.setContent(list);
        return resp;
    }

    @PostMapping("/save")
    public CommonResp save(@RequestBody EbookSaveReq req){
        LOG.info("----------------------------------------");
        LOG.info("req:{}", JSONObject.toJSONString(req));
        LOG.info("----------------------------------------");
        CommonResp resp = new CommonResp();
        ebookService.save(req);
        return resp;
    }

    @DeleteMapping("/delete/{id}")
    public CommonResp delete(@PathVariable Long id){
        CommonResp resp = new CommonResp();
        ebookService.delete(id);
        return resp;
    }
}

在这里插入图片描述

package com.jepcc.test.service;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.jepcc.test.mapper.EbookMapper;
import com.jepcc.test.model.Ebook;
import com.jepcc.test.model.EbookExample;
import com.jepcc.test.req.EbookReq;
import com.jepcc.test.req.EbookSaveReq;
import com.jepcc.test.resp.EbookResp;
import com.jepcc.test.resp.PageResp;
import com.jepcc.test.util.CopyUtil;
import com.jepcc.test.util.SnowFlake;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.util.ObjectUtils;

import java.util.List;


@Service
public class EbookService {
    private static final Logger LOG = LoggerFactory.getLogger(EbookService.class);
    @Autowired
    private EbookMapper ebookMapper;
    @Autowired
    private SnowFlake snowFlake;
    public PageResp<EbookResp> list(EbookReq req){

        EbookExample ebookExample = new EbookExample();
        EbookExample.Criteria criteria = ebookExample.or();
        if(!ObjectUtils.isEmpty(req.getName())){
            criteria.andNameLike("%"+req.getName()+"%");
        }

        PageHelper.startPage(req.getPage(),req.getSize());
        List<Ebook> ebookList = ebookMapper.selectByExample(ebookExample);

        PageInfo<Ebook> pageinfo = new PageInfo<>(ebookList);
//        LOG.info("总条数：{}",pageinfo.getTotal());
//        LOG.info("总页数，{}",pageinfo.getPages());
        List<EbookResp> list = CopyUtil.copyList(ebookList,EbookResp.class);
        PageResp<EbookResp> pageResp = new PageResp<>();
        pageResp.setTotal(pageinfo.getTotal());
        pageResp.setList(list);

        return pageResp;
    }

    public void save(EbookSaveReq req){
        Ebook ebook = CopyUtil.copy(req,Ebook.class);
        if(!ObjectUtils.isEmpty(ebook.getId())){
            ebookMapper.updateByPrimaryKey(ebook);
        }else{
            ebook.setId(snowFlake.nextId());
            ebookMapper.insert(ebook);
        }
    }
    public void delete(Long id){
        ebookMapper.deleteByPrimaryKey(id);
    }
}

在这里插入图片描述

前台添加 删除电子书 代码
<template>
  <a-layout>
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"
    >
      <p>
        <a-button type="primary" size="large" @click="add">新增</a-button>
      </p>
      <a-table :columns="columns" 
        :dataSource="ebooks"
        :row-key="record=>record.id"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange">
        <template #cover="{text:cover}">
          <img v-if="cover" :src="cover" alt="avatar">
        </template>
        <template #action="{text,record}">
          <a-space>
            <a-button type="primary" @click="edit(record)">编辑</a-button>
            <a-popconfirm
              title="删除后不可恢复，确认删除?"
              ok-text="确定"
              cancel-text="取消"
              @confirm="handleDelete(record)"
            >
            <a-button type="danger">删除</a-button>
            </a-popconfirm>
            
          </a-space>
        </template>
      </a-table>
    </a-layout-content>

  </a-layout>

  <a-modal
    title="电子书表单"
    v-model:visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
  >
    <a-form :model="ebook" :label-col="{span:4}" :wrapper-col="{span:16}">
      <a-form-item label="封面">
        <a-input v-model:value="ebook.cover" />
      </a-form-item>
      <a-form-item label="名称">
        <a-input v-model:value="ebook.name" />
      </a-form-item>
      <a-form-item label="分类一">
        <a-input v-model:value="ebook.category1Id" />
      </a-form-item>  
      <a-form-item label="分类二">
        <a-input v-model:value="ebook.category2Id" />
      </a-form-item>     
      <a-form-item label="描述">
        <a-input v-model:value="ebook.description" />
      </a-form-item>      
    </a-form>
  </a-modal>

</template>


<script lang="ts">

import { defineComponent,ref,onMounted} from 'vue';
import axios from "axios";
export default defineComponent({
  name:"AdminEbook",
  setup() {
    const ebooks = ref();
    const pagination = ref({
      current:1,
      pageSize:4,
      total:0
    });
    const loading = ref(false);
    const columns = [
      {
        title:"封面",
        dataIndex:"cover",
        key:"cover",
        slots:{customRender:'cover'}
      },
      {
        title:"名称",
        key:"name",
        dataIndex:"name"
      },
      {
        title:"分类一",
        key:"category1Id",
        dataIndex:"category1Id"
      },
      {
        title:"分类二",
        key:"category2Id",
        dataIndex:"category2Id"
      },
      {
        title:"文档数",
        key:"docCount",
        dataIndex:"docCount"
      },
      {
        title:"阅读数",
        key:"viewCount",
        dataIndex:"viewCount"
      },
      {
        title:"点赞数",
        key:"vouteCount",
        dataIndex:"voteCount"
      },
      {
        title:"操作",
        key:"action",
        dataIndex:"action",
        slots:{customRender:'action'}

      }
    ];

    const visible = ref(false);
    const modalText = ref('test');
    const confirmLoading = ref(false);
    const ebook= ref({});

    const handleQuery = (params:any) => {
      loading.value = true;
      axios.get("/ebook/list",{params:params}).then(response => {
        loading.value = false;
        const data = response.data.content;
        ebooks.value = data.list;
        
        pagination.value.total = data.total;
        pagination.value.current = params.page;
      })
    };

    const handleTableChange = (pagination:any) => {
      handleQuery({
        page:pagination.current,
        size:pagination.pageSize
      });
    }

    const edit = (record:any) => {
      visible.value = true;
      ebook.value = record;
    }
    const add = () => {
      visible.value = true;
      ebook.value = {};
    }
    const handleDelete = (record:any) => {
      axios.delete("ebook/delete/"+record.id).then(response => {
        const data = response.data;
        if(data.success){
          handleQuery({
            page:pagination.value.current,
            size:pagination.value.pageSize
          })
        }
      })
    }
    const handleOk = () => {
      // modalText.value = 'The modal will be closed after two seconds';
      // confirmLoading.value = true;
      axios.post("/ebook/save",ebook.value).then(response => {
        const data = response.data;
        if(data.success){
          visible.value = false;
          confirmLoading.value = false;

          handleQuery({
            page:pagination.value.current,
            size:pagination.value.pageSize
          })
        }
        
      })
      // setTimeout(() => {
      //   visible.value = false;
      //   confirmLoading.value = false;
      // }, 2000);
    };
    
    onMounted(() => {
      handleQuery({
        page:1,
        size:pagination.value.pageSize
      });
    })

    return {
      columns,
      ebooks,
      loading,
      pagination,
      handleTableChange,
      visible,
      modalText,
      confirmLoading,
      edit,
      add,
      handleDelete,
      handleOk,
      ebook
    }
  }
})
</script>


<style scoped>
img{
  width: 48px;
  height: 48px;
}
</style>

在这里插入图片描述
在这里插入图片描述

richest_qi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
solr demo
heima201907的博客
03-19 414
测试类 [Java]纯文本查看复制代码 ? 001 002 003 004 005 006 007 008 ...
寻找写代码感觉（十二）之 封装分页请求参数和返回参数
专研技术结交志同道合的朋友
12-07 26
一、写在前面 好在上周的加班，有了些成效，终于不用每天熬着了，可以为那段程序画上一个暂时性的句号了，最后希望项目顺利上线。 二、为什么要进行封装？ 学习的角度看，更加贴近了封装的特性，使得代码整洁，复用率高，锻炼自己的能力。 协作的角度看，利人利己。别人调你的方法或者接口，效率更高。 三、如何进行分页请求参数和返回参数的封装 从结果导向来看，就是将入参及返回信息统一化，我们先对请求参数进行改...
Invalid bound statement (not found):com.example.mapper.EbookMapper.selectByExample（springboot）
dayejia12的博客
09-23 602
1.问题 未绑定状态，也就是说你的xml文件没有被找到。 2.解决方法 需要在 yml或properties中配置Mapper映射文件 mybatis-plus: #配置Mapper映射文件 mapper-locations: classpath*:/mapper/*Mapper.xml # 配置MyBatis数据返回类型别名（默认别名是类名） type-aliases-package: com.yeb.server.pojo..
6-10 增加删除电子书功能
孤注一掷的博客
03-04 860
电子书管理页面，点击某一行的删除按钮式，删除该行电子书 后端增加删除接口 前端点击删除按钮时调用后端删除接口 删除时需要有一个确认框 添加： 注意要使用@DeleteMapping。 {id}会自动映射 @PathVariable Long id 修改：添加气泡确认窗 新增删除事件 最后返回事件。 注意： 由于后端id使用的是long类型，前端是number类型，雪花算法id在前后端交互时会产生精度损失，造成前端获取的id与后端不同，产生问题。 解决方法：将lon...
JavaScript_实现增删改操作（新增、删除、修改）
一只正在狂飙的肥兔
12-09 1万+
通过动态生成页面，以及事件委托、点击事件、循环遍历、数组等 js 基础知识实现新增、删除和修改的操作！
前后端分页
richest_qi的博客
05-26 682
文章目录使用分页分页前分页后封装分页请求参数和返回参数 使用分页 如果你也在用Mybatis，建议尝试该分页插件，这一定是最方便使用的分页插件。分页插件支持任何复杂的表单、多表分页。 如果你使用Maven，你只需要在pom.xml中添加下面的依赖： <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId>
JAVA项目开发全程实录（含电子书和所有源代码）
09-29
《Java项目开发全程实录》这一本书从开发背景、需求分析、系统功能分析、数据库分析、数据库建模、网站开发和网站发布或者程序打包与运行，每一过程都进行了详细的介绍。 目 录 第1章 进销存管理系统（Swing+SQL ...
微软JavaScript手册（电子书）
03-31
《微软JavaScript手册》是一份详尽的资源，旨在帮助开发者深入理解JScript，它是微软对JavaScript的实现，与标准的JavaScript语法和特性有相当程度的相似性，但也存在一些独有的特点和差异。 手册可能涵盖了以下...
lucene 基础及代码分析
05-29
4. **实时性与持久性**：Lucene 支持实时索引，新增或删除文档后立即可见，同时通过 SegmentReader 和 NRT Manager 确保数据持久化。 ### 四、学习资源 提供的资源包括基础教程和原理及代码分析，可以帮助读者从...
javasctipt学习不求人
01-07
8. **ES6及新特性**：接触和学习ECMAScript 6及其后的新增特性，如箭头函数、模板字符串、类等。 9. **前端框架与库**：了解React、Vue、Angular等主流框架的使用，以及jQuery等库的便捷功能。 10. **性能优化**：...
teechart安装说明.doc
09-03
**TeeChart安装详解——C++ Builder 6.0中的步骤** 在C++ Builder 6.0开发过程中，为了满足更高级别的图表分析需求，我们...在实际应用中，可以根据需求添加更多系列、调整样式、设置交互功能等，实现复杂的图表设计。
vue中如何实现图片不存在时显示一个默认的图片
weixin_30352191的博客
03-18 1445
使用v-if可以实现，如果portrait存在，就显示获取到的图片；如果portrait不存在，就显示默认的图片img/avatar.png，代码如下： <img v-if="portrait" :src="portrait" alt="头像"/> <img v-if="!portrait" src="img/avatar.png" alt="头像"/> 也...
新建SpringBoot项目：雪花算法与新增功能、删除电子书功能
lm19770429的专栏
07-20 520
雪花算法与新增功能 时间戳
用js实现增加和删除功能
qq_44604924的博客
08-14 7518
描述：用js实现增加和删除功能，点击按钮进行增加，点击delete进行删除具体界面如下： js代码如下： 用于进行删除的函数，用removeChild()函数实现： 灰色的部分是代码注释了，是因为把它提取成一个函数后面进行调用，所以前面的部分不在此函数里面实现： 2.对删除函数进行调用，对所有的超链接进行点击函数绑定： 3.添加： 1）点击按钮，将数据添加到表格中，要先获取数据，代码： 2）创建表单结构，用document.createElement()函数和document.createTextNo
Android数据存储和访问-书籍的增删改查
Miao04的博客
11-24 706
本次实验的任务是实现书籍的增删改查，其实我们可以对数据进行的操作也就无非四种，即CRUD。其中C代表添加（Create），R代表查询（Retrieve），U代表更新（Update），D代表删除（Delete）。每一种操作又各自对应了一种SQL命令，如果你比较熟悉SQL语言的话，一定会知道添加数据时使用insert，查询数据时使用select，更新数据时使用update，删除数据时使用delete。
STM32项目设计：基于STM32F4的电子阅读器制作教程
热门推荐
mbs706的博客
12-08 1万+
基于STM32F4的电子阅读器 一、项目功能要求 项目说明： 项目偏软件，但是要依赖于自己对硬件的熟悉和驱动才能完成 用到的主要技术： SD卡驱动（难–不过可移植 SD卡驱动细节可在用完再了解其驱动协议） FatFs文件系统移植使用 LCD屏驱动（加载字库文件 做字库在LCD上的显示） 功能要求： 开机Logo 电子书列表扫描 电子书列表显示及小说选择菜单 阅读功能： 字体选择 字体大小选择 字体颜色设置 阅读背景设置 书签设置 能够记录每本电子书的退出时处于什么阅读位置 下
插入一条数据后获取这条新数据自动生成的id值
发则韩的博客
03-05 2267
文章目录问题：插入一条数据，如何获取这条新数据自动生成的id值？解决方法：在insert语句上加入两个属性：useGeneratedKeys="true" keyProperty="实体类id属性名" 问题：插入一条数据，如何获取这条新数据自动生成的id值？ 插入一条数据，如何获取这条新数据自动生成的id值？ 解决方法：在insert语句上加入两个属性：useGeneratedKeys=“true...
使用ant-design-vue的Table组件
richest_qi的博客
05-25 6376
使用Vue CLI新建项目 vue create antd-demo 下载ant-design-vue，ant-design-vue@2.1.6 npm install ant-design-vue@next --save 修改main.js，完整引入ant-design-vue所有组件及样式 import { createApp } from 'vue' import App from './App.vue' import Antd from "ant-design-vue"; impor.
antd Table组件的使用
richest_qi的博客
05-26 4432
:data-source与:dataSource等效，:row-key与rowKey等效。 :row-key，表格行key的取值，可以是一个字符串，也可以是一个函数。 //rowKey是一个字符串 <a-table :columns="columns" :row-key="uid"></a-table> //rowKey是一个函数 <a-table :columns="columns" :row-key="record => record.uid"></.
阅读器新增和编辑功能实现
最新发布
07-16
要实现阅读器的新增和编辑功能，你可以按照以下步骤进行： 1. 创建表单：在阅读器界面上添加一个表单，用于输入和编辑内容。表单可以包含文本框、下拉列表、复选框等表单元素，以便用户输入和选择需要的信息。 2. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值