Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】

简介: 文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。

前言

   闲的无聊、给原有的系统添加一个公告的功能。就是后台可以写一些公告信息,然后前台可以看到发布的信息。一般来说一个公告就是一些文字描述+图片+视频等。还有排版样式啥的。使用文本编辑器就可以实现。然后正好用到了Quill,通过Quill富文本编辑器集成到Vue中,就可以实现这个效果。具体实现过程中遇到的几个小问题:1、如何将插入的图片进行缩放? 2、如何获取文本中的内容?3、如何将保存到数据库中的内容,重新按照原格式展示出来? 真正弄出来,发现也不难

提示

本篇博客是在下方博客的基础上进行的。建议先看一下基础版本的,然后再回过头来看这个实战的。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】

1、具体实现的效果

在Vue项目中使用Quill富文本编辑器实现公告的发布与修改

   **提示**:在修改的时候,重新上传的图片是可以调整大小的。不知道是不是录制视频的软件影响。导致修改公告信息的时候,重新上传的图片缩放不好用了。

2、添加公告

1.1 前端代码

   这里只给出方法,具体的页面设计,建议看上一篇博客介绍。这里遇到的问题,就是如何将用户输入的公告信息收集起来,然后传给后端。**富文本的内容在content里边,直接获取就行**。然后把数据组合一下发送给后端。
    //添加公告信息
    addAnnounceInfo() {
      const _this = this;
      let entity = this.entity;
      entity.content = this.content;
      entity.name = this.name;
      console.error("entity:" + JSON.stringify(entity));

      this.$axios.addAnnounceInfo(this.entity).then(function (resp) {
        if (resp.code == 200) {
          _this.$alert("《" + _this.entity.name + "》添加成功", "消息", {
            confirmButtonText: "确定",
            callback: (action) => {
              _this.adddialogVisible = false; //dialog对话窗口关闭
              _this.showAllAnnounceMentInfo();
            },
          });
          _this.showAllAnnounceMentInfo();
        } else {
          _this.$message.error(resp.data.errMessage);
        }
      });
    },
   看这里调用富文本的组件,然后双向绑定的值是content,然后你在编辑器里边做的操作,数据都在这里。你直接拿这个数据就行了。

在这里插入图片描述

   这里是测试从content中拿到的数据

在这里插入图片描述

1.2 后端代码

   后端就是存储从前端获取的数据,这里用实体类接收前端传来的参数,具体的保存,我这里用的mybatis-plus。
    /**
     *  添加公告信息
     */

    @RequestMapping(value = "/announce/addAnnounceInfo", method = RequestMethod.POST)
    public Result addAnnounceInfo(@RequestBody AdvertiserInfo advertiserInfo){
        int result = 0;
        if(advertiserInfo == null){
            return Result.error().data("errMessage","信息不能为空!");
        }
        String createTime = CurrentTime.getCurrentTime();
        advertiserInfo.setTime(createTime);

        result = advertiserInfoMapper.insert(advertiserInfo);

        if(result > 0){
            return Result.ok();
        }else{
            return Result.error().data("errMessage","添加失败!");
        }

    }
    这里我将公告的信息用一个实体类表示。

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

1.3 数据库存储

   这里将图片存储直接存储到数据库了,你可以选择在上传图片的时候,将图片上传到服务器,然后数据库中保存访问该图片的地址。视频也同理。  

在这里插入图片描述

3、删除公告

1.1 前端代码

   删除就是获取对应公告的id,然后传给后端。后端根据这个id进行对应公告的删除。
//html
                      <el-popconfirm
                        confirm-button-text="好的"
                        cancel-button-text="不用了"
                        icon="el-icon-info"
                        icon-color="red"
                        title="确定删除吗?"
                        @confirm="handleDelete(scope.$index, scope.row)"
                      >
                        <el-button
                          type="danger"
                          icon="el-icon-delete"
                          slot="reference"
                        ></el-button>
                      </el-popconfirm>

//methods

    //删除公告信息
    handleDelete(index, row) {
      const _this = this;
      const params = {
        id: row.id,
      };
      this.$axios.handleDeleteAnnounceInfo(params).then((resp) => {
        if (resp.code == 200) {
          _this.$alert("删除成功", "消息", {
            confirmButtonText: "确定",
            callback: (action) => {
              _this.showAllAnnounceMentInfo();
            },
          });
        } else {
          _this.$message.error(resp.data.errMessage);
        }
      });
    },

1.2 后端代码

   拿到id删除就行了,没啥好说的

    /**
     * 删除公告信息
     *
     * @param
     * @return
     */
    @RequestMapping(value = "/announce/deleteAnnounceInfo", method = RequestMethod.DELETE)
    public Result deletelAnnounceInfo(@RequestParam  Map<String,Object> maps) {
        String id = (String) maps.get("id");
        HashMap<String, Object> map = new HashMap<>();
        map.put("id", id);
        int rs = advertiserInfoMapper.deleteByMap(map);

        if (rs > 0) {
            return Result.ok();
        } else {
            return Result.error().data("errMessage", "删除失败");
        }

    }

4、修改公告

1.1 前端代码

   要修改哪个公告,就先获取到哪个公告的相关信息。然后修改后,提交数据到后端进行数据修改。**这里有一点,就是保存到数据库中的文本,再次展示的富文本框的时候,样式是不变的。**
    //修改公告信息
    UpdateAnnounceInfo(index, row) {
      console.error("====:" + index, +"-----:" + row);
      this.updateDialogVisible = true;
      this.content = row.content;
      this.name = row.name;
      this.id = row.id
    },
    updateAnnounceInfo1() {
      const _this = this;
      let entity = this.entity;
      entity.id = this.id
      entity.content = this.content;
      entity.name = this.name;
      console.error("entity:" + JSON.stringify(entity));

      this.$axios.submitUpdateAnnounce(this.entity).then(function (resp) {
        if (resp.code == 200) {
          _this.$alert("《" + _this.entity.name + "》信息修改成功", "消息", {
            confirmButtonText: "确定",
            callback: (action) => {
              _this.updateDialogVisible = false;
              _this.showAllAnnounceMentInfo();
            },
          });
        } else {
          _this.$message.error(resp.data.errMessage);
        }
      });
    },

1.2 后端代码

就是一个修改操作,没啥好说的

    /**
     * 修改公告信息
     *
     * @param advertiserInfo
     * @return
     */
    @RequestMapping(value = "/announce/updateAnnounceInfo", method = RequestMethod.PUT)
    public Result updateAnnounceInfo(@RequestBody AdvertiserInfo advertiserInfo) {

        if (advertiserInfo == null) {
            return Result.error().data("errMessage", "信息不能为空");
        }

        UpdateWrapper<AdvertiserInfo> updateUserWrapper = new UpdateWrapper<>();
        updateUserWrapper.like("id", advertiserInfo.getId());
        int rs = advertiserInfoMapper.update(advertiserInfo, updateUserWrapper);
        if (rs > 0) {
            return Result.ok();
        } else {
            return Result.error().data("errMessage", "信息修改失败");
        }

    }

5、后语

这是一个简单的小案例,可以借鉴看看。主要目的是练习Quill富文本的使用。以及如何在Vue中使用

相关文章
|
11天前
|
安全 Java 数据库
SpringSecurity认证授权及项目集成
本文介绍了基于Spring Security的权限管理框架,涵盖认证、授权与鉴权核心概念,通过快速入门示例演示集成流程,并结合数据库实现用户认证。进一步扩展实现正常登录,JWT登录及鉴权管理器,实现灵活的安全控制,适用于前后端分离项目中的权限设计与实践。
133 3
|
1月前
|
资源调度 JavaScript 前端开发
在Vue 3项目中集成Element Plus组件库的步骤
总结起来,在集成过程当中我们关注于库本身提供功能与特性、环境搭建与依赖管理、模块化编程思想以及前端工程化等方面知识点;同时也涵盖前端性能优化(比如上文提及“按需加载”)与定制化开发(例如“自定义主题”)等高级话题.
114 16
|
3月前
|
JSON 分布式计算 大数据
springboot项目集成大数据第三方dolphinscheduler调度器
springboot项目集成大数据第三方dolphinscheduler调度器
145 3
|
3月前
|
Java 关系型数据库 数据库连接
Spring Boot项目集成MyBatis Plus操作PostgreSQL全解析
集成 Spring Boot、PostgreSQL 和 MyBatis Plus 的步骤与 MyBatis 类似,只不过在 MyBatis Plus 中提供了更多的便利功能,如自动生成 SQL、分页查询、Wrapper 查询等。
279 4
|
3月前
|
Java 关系型数据库 MySQL
springboot项目集成dolphinscheduler调度器 实现datax数据同步任务
springboot项目集成dolphinscheduler调度器 实现datax数据同步任务
363 2
|
3月前
|
分布式计算 Java 大数据
springboot项目集成dolphinscheduler调度器 可拖拽spark任务管理
springboot项目集成dolphinscheduler调度器 可拖拽spark任务管理
173 2
|
3月前
|
物联网 Linux 开发者
快速部署自己私有MQTT-Broker-下载安装到运行不到一分钟,快速简单且易于集成到自己项目中
本文给物联网开发的朋友推荐的是GMQT,让物联网开发者快速拥有合适自己的MQTT-Broker,本文从下载程序到安装部署手把手教大家安装用上私有化MQTT服务器。
885 5
|
分布式计算 大数据 Java
springboot项目集成大数据第三方dolphinscheduler调度器 执行/停止任务
springboot项目集成大数据第三方dolphinscheduler调度器 执行/停止任务
37 0
|
8月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
410 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
分布式计算 Java 大数据
springboot项目集成dolphinscheduler调度器 项目管理
springboot项目集成dolphinscheduler调度器 项目管理
64 0

热门文章

最新文章