LeDao's Blog

概述wangEditor 5是一款开源Web富文本编辑器，开箱即用，配置简单 虽然官方有文档，但是不够简明，所以我写本博客方便以后快速引入wangEditor 5富文本编辑器 实现过程安装1npm install @wangeditor/editor @wangeditor/editor-for-vue@next --save 定义组件在components文件夹新建一个名为myEditor.vue的文件，内容如下，直接复制下面的代码即可 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869<template> <div style="border: 1px solid #ccc"> <Toolbar style="border-bottom: 1px solid #ccc" ...

概述父组件（使用子组件的页面称为父组件）使用子组件时，如果想使用子组件的属性和方法，可以在父组件使用子组件时加上ref属性来实现，但是子组件需要提前暴露这些属性和方法 实现过程我把父组件放在views文件夹中，子组件放在components文件夹中 子组件首先在components文件夹中新建一个名为child.vue的子组件，defineExpose暴露的属性和方法才可以被父组件使用 12345678910111213141516171819202122<template> <h2>子组件的内容: <span style="color: red">{{content}}</span></h2></template><script setup>import {ref, defineExpose} from "vue";const content = ref('我是子组件原来的内容') ...

概述VueQuill富文本编辑器添加的图片默认是不可以缩放的，如果图片尺寸过大的话，会非常影响用户的体验。虽然不支持缩放图片，但是可以通过安装quill-blot-formatter这个插件来实现 实现过程安装插件1npm install --save quill-blot-formatter 引入插件1import BlotFormatter from 'quill-blot-formatter'; 配置插件下面是配置两个及以上插件的格式，如果只配置一个插件，其格式查看博客：Spring Boot 实现 VueQuill 富文本编辑器上传图片到服务器 | LeDao’s Blog (zoutl.cn) 12345678910111213const modules = [{ //这里是另一个插件的配置}, { name: 'BlotFormatter', module: BlotFormatter, options: { overlay: { style: { ...

概述VueQuill富文本编辑器添加图片时，会将图片转换为base64格式 如果直接将编辑器的内容传到后端并保存到MySQL数据库时（我习惯使用text类型），很容易就超出text类型的长度，即使还有比text类型长度更长的类型，但是还是不推荐直接将base64格式的图片保存到MySQL中 所以有必要实现VueQuill富文本编辑器添加图片时，先将图片上传到服务器中，然后后端返回图片的链接给编辑器引用，编辑器要上传到图片到后端需要安装插件quill-image-uploader 实现过程安装插件1npm install quill-image-uploader --save 引入1import ImageUploader from 'quill-image-uploader'; 安装插件到编辑器首先定义模块，只需要修改请求后端的url，下面代码的url经过getServerUrl的封装最终是localhost:8080/goods/vueQuillUploadImage，getServerUrl的代码查看博客：Vue 项目实现统一管理请求的后端 IP 地址和端口 ...

概述官方文档：Introduction | VueQuill (vueup.github.io) 中文文档：vue-quill-editor · Quill官方中文文档 · 看云 (kancloud.cn) 编辑器的插件列举查看官网：Modules | VueQuill (vueup.github.io)，我实现了图片上传到服务器和图片缩放插件的使用，博客链接为：上传图片到服务器 和实现图片的缩放 在几款适合Vue3的富文本编辑器中，我发现VueQuill最简单易用，不过也有一个BUG：数据无法双向绑定，页面的数据不会显示到富文本编辑器中，实现数据双向绑定的办法看下面 实现过程安装插件1npm install @vueup/vue-quill@latest --save 局部引入虽然可以全局引入，但是还是建议局部引入，首先引入组件和样式（在<script>标签中加入下面代码） 12import {QuillEditor} from '@vueup/vue-quill'import '@vueup/vue-quill/di ...

概述在Java实体类中使用布尔类型的话，有一些细节要特别注意，不然这些布尔类型的字段用起来会很麻烦 注意事项不要以is开头属性名不要以is开头，如果以is开头的话，自动生成的Setter和Getter的方法名会自动省略掉is，例如以下代码中Setter和Getter的方法名原本应该是getIsHotGoods和setIsHotGoods，但是实际上是getHotGoods和setHotGoods，会给我们带来一些困扰 使用包装类在实体类中，不要使用基本数据类型，而是使用它们的包装类，例如布尔基本类型boolean就要使用Boolean 如果使用了布尔基本类型boolean，那么我们自动生成Setter和Getter时不会有Getter方法，为了开发时减少麻烦，不要使用基本类型，无论如何都只使用包装类 MySQL字段类型当实体类的属性类型是Boolean时，MySQL表的字段类型可以使用tinyint，长度设为1 实体类的值为true时MySQL的值是1，值为false时MySQL的值是0，从MySQL查到的值会被转换成true或false，而不是1或0

概述当前Element Plus组件的默认文字是英文，为了方便，我们直接设置全局的默认文字让每个页面都生效 实现过程直接在App.vue中设置，首先引入简体中文的js文件 1import zhCn from "element-plus/lib/locale/lang/zh-cn"; ​ 使用<el-config-provider :locale="zhCn"></el-config-provider>将<router-view/>包住即可生效 123<el-config-provider :locale="zhCn"> <router-view/></el-config-provider> 完整App.vue代码如下： 123456789101112<script setup>import zhCn from "element-plus/lib/locale/lang/zh-cn";</script&g ...

概述微信小程序开发一个新页面时，我们需要把它设置为编译后的启动页面，设置方法有两个： 到app.json中设置 修改微信开发者工具的编译设置，推荐使用这种方式 实现过程到app.json中修改添加一个entryPagePath属性（优先级比较高），其值为页面的路径，或者把页面的定义放在pages数组的第一个，下面代码的启动页面是index 12345678{ "entryPagePath": "pages/index/index", "pages": [ "pages/index/index", "pages/category/category", "pages/cart/cart" ]} 修改编译设置首先添加一个编译模式 编译模式的设置

概述两个人都修改了同一个文件，第一个人进行push操作后，如果第二个人也进行push操作，那么第二个人就会出现代码合并冲突同时push失败 情景复现本地仓库和远程GitHub仓库都有一个名为bbb.txt的文件，先在GitHub仓库中修改这个文件，然后在本地修改这个文件 本地的bbb.txt文件内容如下： 123bbbbbb本地库修改bbb GitHub仓库的bbb.txt文件内容如下： 123bbbbbbbbb远程库修改 进行add操作 1git add . 进行commit操作 1git commit -m "修改bbb.txt" 进行push操作 1git push origin master 会出现下图的错误，提示我们在再次push前先进行pull操作 解决过程根据上面的提示进行pull操作 1git pull origin master 然后查看本地的bbb.txt文件的内容，多了一些东西，<<<<<<< HEAD和=======之间的内容是本地仓库和远程GitHub仓库冲突的内容（属于本地仓库），= ...

概述对于一些文件，如果我们不希望它们被Git提交的话，可以通过.gitignore文件配置规则，让这些文件不能添加到暂存区进而不能被提交到本地仓库 实现过程新建文件首先在仓库的根目录新建一个名为.gitignore的文件，我们可以在里面配置一些规则，让某些文件不能被提交 规则说明如何测试看规则有没有效果，可以通过git status命令来查看 单个文件直接在.gitignore内加上这个文件的名称，例如我们要忽略根目录的test.txt文件，规则如下：（一行写一个规则，注释用#号） 12345# 忽略根目录下的test.txttest.txt# 忽略根目录下的test文件夹内的1.txttest/1.txt 整个文件夹忽略根目录下的test文件夹 1test/ 取反对于一些文件或文件夹，Git默认是不添加的，我们在忽略规则前面加上!即可 12# 我们假定test文件夹是默认不添加的，但是我们需要添加test文件夹的test.txt!test/test.txt 另外，如果规则配置了忽略test文件夹，那么上面的规则是不会生效的，文件夹的优先级比较大 过滤过滤某种类型文件，例如过 ...