Spring Boot + vue-element 开发个人博客项目实战教程(十三、文章标签功能实现)

简介: Spring Boot + vue-element 开发个人博客项目实战教程(十三、文章标签功能实现)

⭐ 作者简介:码上言



⭐ 代表教程:Spring Boot + vue-element 开发个人博客项目实战教程



⭐专栏内容:零基础学Java个人博客系统

项目部署视频

https://www.bilibili.com/video/BV1sg4y1A7Kv/?vd_source=dc7bf298d3c608d281c16239b3f5167b

文章目录

前言

本章将继续进行博客功能的开发,慢慢的我们做了好几个功能模块的开发,其实流程都差不多,只是有些业务逻辑不同而已。前面有网友测试的通知公告的有bug存在,我们先改一下Bug,没有bug就不叫写程序,发现bug修改bug才能进步。

一、bug修改

1、NoticeController.java接口层

我偷懒复制的分类接口那边的代码,有的类名没有进行修改,我们在开发中要规范写方法名。

一个是公告列表的地址list没有加上"/",另一个是类名不规范,现在修改如下:

package com.blog.personalblog.controller;
import com.blog.personalblog.config.page.PageRequest;
import com.blog.personalblog.config.page.PageResult;
import com.blog.personalblog.entity.Category;
import com.blog.personalblog.entity.Notice;
import com.blog.personalblog.service.NoticeService;
import com.blog.personalblog.util.JsonResult;
import com.blog.personalblog.util.PageUtil;
import com.github.pagehelper.PageInfo;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.validation.Valid;
import java.util.List;
/**
 * 公告管理接口
 *
 * @author: SuperMan
 * @create: 2021-11-23
 */
@Api(tags = "公告管理")
@RestController
@RequestMapping("/notice")
public class NoticeController {
    @Autowired
    NoticeService noticeService;
    /**
     * 分页查询列表
     * @param pageRequest
     * @return
     */
    @ApiOperation(value = "公告列表")
    @PostMapping("/list")
    public JsonResult<Object> listPage(@RequestBody @Valid PageRequest pageRequest) {
        List<Notice> noticeList = noticeService.getNoticePage(pageRequest);
        PageInfo pageInfo = new PageInfo(noticeList);
        PageResult pageResult = PageUtil.getPageResult(pageRequest, pageInfo);
        return JsonResult.success(pageResult);
    }
    /**
     * 添加公告
     * @return
     */
    @ApiOperation(value = "添加公告")
    @PostMapping("/create")
    public JsonResult<Object> noticeCreate(@RequestBody @Valid Notice notice) {
        int isStatus = noticeService.saveNotice(notice);
        if (isStatus == 0) {
            return JsonResult.error("添加公告失败");
        }
        return JsonResult.success();
    }
    /**
     * 修改公告
     * @return
     */
    @ApiOperation(value = "修改公告")
    @PostMapping("/update")
    public JsonResult<Object> noticeUpdate(@RequestBody @Valid Notice notice) {
        int isStatus = noticeService.updateNotice(notice);
        if (isStatus == 0) {
            return JsonResult.error("修改公告失败");
        }
        return JsonResult.success();
    }
    /**
     * 删除
     * @return
     */
    @ApiOperation(value = "删除公告")
    @PostMapping("/delete/{id}")
    public JsonResult<Object> noticeDelete(@PathVariable(value = "id") int id) {
        noticeService.deleteNotice(id);
        return JsonResult.success();
    }
}

2、sql语句修改

我们打开NoticeMapper.xml配置文件,然后找到添加公告的sql语句,将keyProperty="categoryId" 修改为keyProperty="noticeId" 等具体下面我已经标出来了。

   <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.blog.personalblog.mapper.NoticeMapper">
    <resultMap id="BaseResultMap" type="com.blog.personalblog.entity.Notice">
        <result column="notice_id" jdbcType="INTEGER" property="noticeId"/>
        <result column="notice_title" jdbcType="VARCHAR" property="noticeTitle"/>
        <result column="notice_type" jdbcType="INTEGER" property="noticeType"/>
        <result column="status" jdbcType="INTEGER" property="status"/>
        <result column="notice_content" jdbcType="VARCHAR" property="noticeContent"/>
        <result column="create_by" jdbcType="VARCHAR" property="createBy"/>
        <result column="create_time" jdbcType="TIMESTAMP" property="createTime"/>
        <result column="update_time" jdbcType="TIMESTAMP" property="updateTime"/>
    </resultMap>
    <select id="getNoticePage" resultMap="BaseResultMap">
        select * from person_notice
    </select>
    <insert id="createNotice" parameterType="com.blog.personalblog.entity.Notice" useGeneratedKeys="true" keyProperty="noticeId">
        INSERT INTO person_notice (notice_title, notice_type, status, notice_content, create_by)
        VALUES(#{noticeTitle}, #{noticeType}, #{status}, #{noticeContent}, #{createBy})
    </insert>
    <update id="updateNotice" parameterType="com.blog.personalblog.entity.Notice">
        update person_notice
        <set>
            notice_title = #{noticeTitle},
            notice_type = #{noticeType},
            status = #{status},
            notice_content = #{noticeContent},
            create_by = #{createBy}
        </set>
        WHERE notice_id = #{noticeId}
    </update>
    <delete id="deleteNotice" parameterType="java.lang.Integer">
        delete from person_notice where notice_id = #{noticeId, jdbcType=INTEGER}
    </delete>
</mapper>

3、实体类:Notice.java中的创建者属性也要修改。

    /**
     * 创建者
     */
    private String createBy;

二、文章标签功能实现

好啦,以上的bug修改完成,下面我们进行标签功能的开发,前面有读者问有没有批量插入,标签会有的,一篇文章可能会有多个标签,所以我们要多添加批量插入和批量删除的方法,另外还要过滤以下要插入的标签是否和数据库有重复,有重复数据库就不再添加了,保证数据表的标签唯一。

1、添加实体类

和以前一样,根据数据库进行设计对象,标签比较简单点,就一个内容。

新建一个实体类:Tag.java

package com.blog.personalblog.entity;
import lombok.Data;
import java.time.LocalDateTime;
/**
 * 标签
 *
 * @author: SuperMan
 * @create: 2021-11-28
 */
@Data
public class Tag {
    /**
     * 主键id
     */
    private Integer id;
    /**
     * 标签名称
     */
    private String tagName;
    /**
     * 创建时间
     */
    private LocalDateTime createTime;
    /**
     * 更新时间
     */
    private LocalDateTime updateTime;
}

2、添加业务接口

新建一个接口:TagService.java

可以看到接口中比以前的基本功能多了两个接口,批量删除和批量添加,我们重点讲一下这两个方法,在以后的开发中会经常使用到。

package com.blog.personalblog.service;
import com.blog.personalblog.config.page.PageRequest;
import com.blog.personalblog.entity.Tag;
import java.util.List;
/**
 * @author: SuperMan
 * @create: 2021-11-28
 */
public interface TagService {
    /**
     * 获取所有的标签(分页)
     * @return
     */
    List<Tag> getTagPage(PageRequest pageRequest);
    /**
     * 新建标签
     * @param tag
     * @return
     */
    int saveTag(Tag tag);
    /**
     * 修改标签
     * @param tag
     * @return
     */
    int updateTag(Tag tag);
    /**
     * 删除标签
     * @param tagId
     */
    void deleteTag(Integer tagId);
    /**
     * 批量添加
     * @param tags
     * @return
     */
    boolean batchAddTag(String tags) throws Exception;
    /**
     * 批量删除标签
     * @param ids
     * @return
     */
    boolean batchDelTag(String ids);
    /**
     * 根据标签查找
     * @param tagName
     * @return
     */
    Tag findByTagName(String tagName);
}

3、添加业务接口实现类

实现类:TagServiceImpl.java

和以前不一样的是多了batchAddTagbatchDelTag两个方法,具体的每一步我都添加了注释,大家应该可以看明白。批量插入: 前端传来的是字符串格式的标签,我们约定好以英文逗号把标签隔开,然后我们传参将字符串获取到,然后进行拆分字符串转成数组的格式,大家学基础的时候肯定知道学习了数组,数据以下标0开始的,我们可以遍历数组。

for(类型 变量 : 数组){
}

这种for循环要学会使用,非常的方便,具体可以去百度查找用法。

然后我们再定义一个List集合来存放我们每一个对象,我们每次遍历的时候都要去表中查找是否有添加的标签,没有的话则存入List集合中,有的话则不存。然后再限制下批量添加标签的个数,都通过则进行数据的插入。

 @Override
    public boolean batchAddTag(String tags) throws Exception {
        //将字符串转成数组
        String[] split = tags.split(",");
        List<Tag> tagList = new ArrayList<>();
        //循环数据,放入List集合中
        for (String str : split) {
            //过滤:判断数据库中是否有存在的标签,没有就添加,有就不添加
            if (findByTagName(str) == null) {
                Tag tag = new Tag();
                tag.setTagName(str);
                tagList.add(tag);
            }
        }
        //我们限制下添加的数量,一次最多添加10个标签
        if (tagList == null || tagList.size() == 0 || tagList.size() > 10){
            throw new Exception ("标签已存在或超过添加标签的限制!");
        }
        boolean isStatus = tagMapper.batchAddTag(tagList);
        return isStatus;
    }

批量删除: 所谓的批量删除就是前端传来多个数据的id,我们根据id去表中把数据删除,和普通的删除的区别就是多个id删除数据罢了。首先接收到id,和批量添加一样,对id进行解析,然后存到新new的对象中,把所有的对象都存到List集合中进行统一删除。

@Override
    public boolean batchDelTag(String ids){
        //将id字符串转成数组
        String[] split = ids.split(",");
        List<Tag> idList = new ArrayList<>();
        for (String id : split) {
            Tag tag = new Tag();
            tag.setId(Integer.valueOf(id));
            idList.add(tag);
        }
        boolean isStatus = tagMapper.deleteBatch(idList);
        return isStatus;
    }

完整代码如下:

package com.blog.personalblog.service.Impl;
import com.blog.personalblog.config.page.PageRequest;
import com.blog.personalblog.entity.Tag;
import com.blog.personalblog.mapper.TagMapper;
import com.blog.personalblog.service.TagService;
import com.github.pagehelper.PageHelper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
/**
 * @author: SuperMan
 * @create: 2021-11-28
 */
@Service
public class TagServiceImpl implements TagService {
    @Autowired
    TagMapper tagMapper;
    @Override
    public List<Tag> getTagPage(PageRequest pageRequest) {
        int pageNum = pageRequest.getPageNum();
        int pageSize = pageRequest.getPageSize();
        PageHelper.startPage(pageNum,pageSize);
        List<Tag> tagList = tagMapper.getTagPage();
        return tagList;
    }
    @Override
    public int saveTag(Tag tag) {
        return tagMapper.createTag(tag);
    }
    @Override
    public int updateTag(Tag tag) {
        return tagMapper.updateTag(tag);
    }
    @Override
    public void deleteTag(Integer tagId) {
        tagMapper.deleteTag(tagId);
    }
    @Override
    public boolean batchAddTag(String tags) throws Exception {
        //将字符串转成数组
        String[] split = tags.split(",");
        List<Tag> tagList = new ArrayList<>();
        //循环数据,放入List集合中
        for (String str : split) {
            //过滤:判断数据库中是否有存在的标签,没有就添加,有就不添加
            if (findByTagName(str) == null) {
                Tag tag = new Tag();
                tag.setTagName(str);
                tagList.add(tag);
            }
        }
        //我们限制下添加的数量,一次最多添加10个标签
        if (tagList == null || tagList.size() == 0 || tagList.size() > 10){
            throw new Exception ("标签已存在或超过添加标签的限制!");
        }
        boolean isStatus = tagMapper.batchAddTag(tagList);
        return isStatus;
    }
    @Override
    public boolean batchDelTag(String ids){
        //将id字符串转成数组
        String[] split = ids.split(",");
        List<Tag> idList = new ArrayList<>();
        for (String id : split) {
            Tag tag = new Tag();
            tag.setId(Integer.valueOf(id));
            idList.add(tag);
        }
        boolean isStatus = tagMapper.deleteBatch(idList);
        return isStatus;
    }
    @Override
    public Tag findByTagName(String tagName) {
        Tag tag = new Tag();
        tag.setTagName(tagName);
        Tag byTagName = tagMapper.getByTagName(tag);
        return byTagName;
    }
}

4、数据库查询接口实现

新建一个Mapper接口:TagMapper.java

package com.blog.personalblog.mapper;
import com.blog.personalblog.entity.Tag;
import org.springframework.stereotype.Repository;
import java.util.List;
/**
 * @author: SuperMan
 * @create: 2021-11-28
 */
@Repository
public interface TagMapper {
    /**
     * 创建
     * @param tag
     * @return
     */
    int createTag(Tag tag);
    /**
     * 修改
     * @param tag
     * @return
     */
    int updateTag(Tag tag);
    /**
     * 分类列表(分页)
     * @return
     */
    List<Tag> getTagPage();
    /**
     * 删除
     * @param id
     */
    void deleteTag(Integer id);
    /**
     * 批量添加标签
     * @param strings
     * @return
     */
    boolean batchAddTag(List<Tag> strings);
    /**
     * 批量删除标签
     * @param ids
     */
    boolean deleteBatch(List<Tag> ids);
    /**
     * 根据标签查找该对象
     * @param tag
     * @return
     */
    Tag getByTagName(Tag tag);
}

5、编写数据库xml

在xml中批量添加和删除用到了个知识点foreach的用法。

foreach的主要用在构建in条件中,它可以在SQL语句中进行迭代一个集合。foreach元素的属性主要有 item,index,collection,open,separator,closeitem表示集合中每一个元素进行迭代时的别名,

index指 定一个名字,用于表示在迭代过程中,每次迭代到的位置,

open表示该语句以什么开始,

separator表示在每次进行迭代之间以什么符号作为分隔 符,

close表示以什么结束。

其中我们使用的collection属性是最重要的,这个要看你传参的类型是什么才能给它赋什么样的值。我们都把参数转成了List进行添加和删除的,所以我们这里要使用list作为属性值。

<foreach collection="list" item="item" index="index" separator="," >
            (#{item.tagName})
</foreach>

1、如果传入的是单参数且参数类型是一个List的时候,collection属性值为list

2、如果传入的是单参数且参数类型是一个array数组的时候,collection的属性值为array

3、如果传入的参数是多个的时候,我们就需要把它们封装成一个Map了,当然单参数也可以封装成map。

完整代码如下:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.blog.personalblog.mapper.TagMapper">
    <resultMap id="BaseResultMap" type="com.blog.personalblog.entity.Tag">
        <result column="id" jdbcType="INTEGER" property="id"/>
        <result column="tag_name" jdbcType="VARCHAR" property="tagName"/>
        <result column="create_time" jdbcType="TIMESTAMP" property="createTime"/>
        <result column="update_time" jdbcType="TIMESTAMP" property="updateTime"/>
    </resultMap>
    <select id="getTagPage" resultMap="BaseResultMap">
        select * from person_tag
    </select>
    <insert id="createTag" parameterType="com.blog.personalblog.entity.Tag" useGeneratedKeys="true" keyProperty="id">
        INSERT INTO person_tag (tag_name)
        VALUES(#{tagName})
    </insert>
    <update id="updateTag" parameterType="com.blog.personalblog.entity.Tag">
        update person_tag
        <set>
            tag_name = #{tagName}
        </set>
        WHERE id = #{id}
    </update>
    <delete id="deleteTag" parameterType="java.lang.Integer">
        delete from person_tag where id = #{id, jdbcType=INTEGER}
    </delete>
    <insert id="batchAddTag" parameterType="java.util.List">
        INSERT INTO person_tag (tag_name)
        VALUES
        <foreach collection="list" item="item" index="index" separator="," >
            (#{item.tagName})
        </foreach>
    </insert>
    <delete id="deleteBatch" parameterType="java.util.List">
        delete from person_tag where id in
        <foreach collection="list" item="item" open="(" close=")" separator="," >
            (#{item.id})
        </foreach>
    </delete>
    <select id="getByTagName" resultType="com.blog.personalblog.entity.Tag">
        SELECT * FROM person_tag WHERE tag_name = #{tagName}
    </select>
</mapper>

6、编写接口层

编写controller层类:TagController.java

package com.blog.personalblog.controller;
import com.blog.personalblog.config.page.PageRequest;
import com.blog.personalblog.config.page.PageResult;
import com.blog.personalblog.entity.Tag;
import com.blog.personalblog.service.TagService;
import com.blog.personalblog.util.JsonResult;
import com.blog.personalblog.util.PageUtil;
import com.github.pagehelper.PageInfo;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import javax.validation.Valid;
import java.util.List;
/**
 * @author: SuperMan
 * @create: 2021-11-28
 */
@Api(tags = "标签管理")
@RestController
@RequestMapping("/tag")
public class TagController {
    @Autowired
    TagService tagService;
    /**
     * 分页查询列表
     * @param pageRequest
     * @return
     */
    @ApiOperation(value = "标签列表")
    @PostMapping("list")
    public JsonResult<Object> listPage(@RequestBody @Valid PageRequest pageRequest) {
        List<Tag> tagList = tagService.getTagPage(pageRequest);
        PageInfo pageInfo = new PageInfo(tagList);
        PageResult pageResult = PageUtil.getPageResult(pageRequest, pageInfo);
        return JsonResult.success(pageResult);
    }
    /**
     * 添加标签
     * @return
     */
    @ApiOperation(value = "添加标签")
    @PostMapping("/create")
    public JsonResult<Object> tagCreate(@RequestBody @Valid Tag tag) {
        int isStatus = tagService.saveTag(tag);
        if (isStatus == 0) {
            return JsonResult.error("添加公告失败");
        }
        return JsonResult.success();
    }
    /**
     * 批量添加标签,最多添加10个
     * @param tags 以字符串的方式,以英文逗号隔开。例如:Java,C语言,Python
     *
     * @return
     */
    @ApiOperation(value = "批量添加标签")
    @PostMapping("/batchCreate")
    public JsonResult<Object> batchCreate(@RequestBody @Valid Tag tags) {
        try {
            boolean isStatus = tagService.batchAddTag(tags.getTagName());
            if (!isStatus) {
                return JsonResult.error("批量插入失败!");
            }
        }catch (Exception e) {
            return JsonResult.error(e.getMessage());
        }
        return JsonResult.success();
    }
    /**
     * 批量删除标签
     * @param ids
     * @return
     */
    @ApiOperation(value = "批量添加标签")
    @DeleteMapping("/batchDelete")
    public JsonResult<Object> batchDelete(@RequestBody @Valid String ids) {
        boolean isDelTag = tagService.batchDelTag(ids);
        if (!isDelTag) {
            return JsonResult.error("批量删除标签失败");
        }
        return JsonResult.success();
    }
    /**
     * 修改标签
     * @return
     */
    @ApiOperation(value = "修改标签")
    @PutMapping("/update")
    public JsonResult<Object> tagUpdate(@RequestBody @Valid Tag tag) {
        int isStatus = tagService.updateTag(tag);
        if (isStatus == 0) {
            return JsonResult.error("修改标签失败");
        }
        return JsonResult.success();
    }
    /**
     * 删除
     * @return
     */
    @ApiOperation(value = "删除标签")
    @DeleteMapping("/delete/{id}")
    public JsonResult<Object> tagDelete(@PathVariable(value = "id") int id) {
        tagService.deleteTag(id);
        return JsonResult.success();
    }
}

三、Postman测试

这里我只测一个批量添加的接口,其他的还是老规矩大家自己测测,有bug评论区见!

请求返回成功!再测的时候,大家要测一下如果数据库中有了数据,再添加同样的数据是否重复插入了,如果没有则过滤成功了。

四、总结

好啦!本章的标签开发也结束了,重点是批量删除和添加的功能,其实也没那么难写代码,只要思路对,顺着写就可以了。下面我们就要开发博客的功能了,这个才是重点,里面会整合很多的东西,希望大家好好练习基础。

接口多测一测,Swagger文档别忘了维护和代码的提交等。

博客代码地址:https://gitee.com/xyhwh/personal_blog

目录
相关文章
|
3天前
|
人工智能 自然语言处理 Java
Spring AI,Spring团队开发的新组件,Java工程师快来一起体验吧
文章介绍了Spring AI,这是Spring团队开发的新组件,旨在为Java开发者提供易于集成的人工智能API,包括机器学习、自然语言处理和图像识别等功能,并通过实际代码示例展示了如何快速集成和使用这些AI技术。
Spring AI,Spring团队开发的新组件,Java工程师快来一起体验吧
|
3天前
|
前端开发 JavaScript Java
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置自己定义、图片可以在前端回显(一))
这篇文章详细介绍了在SpringBoot+Vue项目中实现表单和图片上传的完整流程,包括前端上传、后端接口处理、数据库保存图片路径,以及前端图片回显的方法,同时探讨了图片资源映射、token验证、过滤器配置等相关问题。
|
3天前
|
前端开发 数据库
SpringBoot+Vue+token实现(表单+图片)上传、图片地址保存到数据库。上传图片保存位置到项目中的静态资源下、图片可以在前端回显(二))
这篇文章是关于如何在SpringBoot+Vue+token的环境下实现表单和图片上传的优化篇,主要改进是将图片保存位置从磁盘指定位置改为项目中的静态资源目录,使得图片资源可以跨环境访问,并在前端正确回显。
|
3天前
|
前端开发 数据库
SpringBoot+Vue实现商品不能重复加入购物车、购物车中展示商品的信息、删除商品重点提示等操作。如何点击图片实现图片放大
这篇文章介绍了如何在SpringBoot+Vue框架下实现购物车功能,包括防止商品重复加入、展示商品信息、删除商品时的提示,以及点击图片放大的前端实现。
SpringBoot+Vue实现商品不能重复加入购物车、购物车中展示商品的信息、删除商品重点提示等操作。如何点击图片实现图片放大
|
3天前
|
XML 数据库 数据格式
Spring5入门到实战------14、完全注解开发形式 ----JdbcTemplate操作数据库(增删改查、批量增删改)。具体代码+讲解 【终结篇】
这篇文章是Spring5框架的实战教程的终结篇,介绍了如何使用注解而非XML配置文件来实现JdbcTemplate的数据库操作,包括增删改查和批量操作,通过创建配置类来注入数据库连接池和JdbcTemplate对象,并展示了完全注解开发形式的项目结构和代码实现。
Spring5入门到实战------14、完全注解开发形式 ----JdbcTemplate操作数据库(增删改查、批量增删改)。具体代码+讲解 【终结篇】
|
4天前
|
前端开发 JavaScript
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
本文介绍了如何在Vue3项目中实现一个鼠标拖动调整元素宽度的功能,并展示了点击按钮收起或展开侧边栏的效果,提供了完整的实现代码和操作演示。
39 0
基于Vue3实现鼠标按下某个元素进行拖动,实时改变左侧或右侧元素的宽度,以及点击收起或展开的功能
|
4天前
|
JSON JavaScript 前端开发
基于SpringBoot + Vue实现单个文件上传(带上Token和其它表单信息)的前后端完整过程
本文介绍了在SpringBoot + Vue项目中实现单个文件上传的同时携带Token和其它表单信息的前后端完整流程,包括后端SpringBoot的文件上传处理和前端Vue使用FormData进行表单数据和文件的上传。
15 0
基于SpringBoot + Vue实现单个文件上传(带上Token和其它表单信息)的前后端完整过程
|
4天前
|
JavaScript 前端开发 easyexcel
基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的前后端完整过程
本文展示了基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的完整过程,包括后端使用EasyExcel生成Excel文件流,前端通过Blob对象接收并触发下载的操作步骤和代码示例。
21 0
基于SpringBoot + EasyExcel + Vue + Blob实现导出Excel文件的前后端完整过程
|
4天前
|
数据库
elementUi使用dialog的进行信息的添加、删除表格数据时进行信息提示。删除或者添加成功的信息提示(SpringBoot+Vue+MybatisPlus)
这篇文章介绍了如何在基于SpringBoot+Vue+MybatisPlus的项目中使用elementUI的dialog组件进行用户信息的添加和删除操作,包括弹窗表单的设置、信息提交、数据库操作以及删除前的信息提示和确认。
elementUi使用dialog的进行信息的添加、删除表格数据时进行信息提示。删除或者添加成功的信息提示(SpringBoot+Vue+MybatisPlus)
|
4天前
|
JavaScript
基于Vue3+TS简单设计一个查看文章时点击展开和点击收起的小功能
该文章展示了如何使用Vue 3和TypeScript创建一个简单的展开和收起功能,用于文章查看时的交互体验。
11 0
基于Vue3+TS简单设计一个查看文章时点击展开和点击收起的小功能