LeDao's Blog

概述微信小程序使用富文本时，如果图片宽度超出微信小程序屏幕的默认最大宽度750rpx（rpx是动态像素，一个rpx宽度并不是固定的，可以根据屏幕宽度进行自适应），会导致图片显示不全 解决办法直接在使用了富文本的页面的样式中加入以下代码即可，值得注意的是图片一定要有alt这个属性，不然没有用，alt改成src也是可以的 12345[alt] { max-width: 100%;//图片宽度过大,但是我只希望它把屏幕的宽度撑满就行 min-width: 100%;//图片宽度过小,但是我希望它把屏幕的宽度撑满 height: auto;//高度自动,防止图片的长宽比改变}

概述项目开发时和上线时请求的IP地址和端口是不一样的，为了避免后期修改请求的IP地址和端口带来的麻烦，非常有必要把请求的IP地址和端口封装起来，另外，还可以使用Promise封装一下请求的方法和使用async和await关键字以避免回调地狱 实现过程在根目录下新建一个名为utils的文件夹（和pages同级），在一个名为requestUtil.js的文件，请求的IP地址以及端口和方法都封装在里面 封装请求的IP地址和端口代码如下，在这里可以统一管理项目请求的IP地址和端口，后期要修改的话只需要改这个地方即可 1234567//定义请求的IP地址和端口const baseUrl = 'http://localhost:8080';//返回baseUrlexport const getBaseUrl = () => { return baseUrl;} 在使用前，要先在页面的js文件中引入，然后在原始数据中定义（空值），最后在onLoad()函数中设置就可以使用了 12345678910111213// 引入请求后端工具类import ...

概述wangEditor 5富文本编辑器只支持添加网络图片，如果要上传本地图片的话，需要自己写后端代码来实现 实现过程添加上传图片配置在编辑器组件代码中找到editorConfig后修改以及添加成下面代码就可以了，编辑器组件的代码查看博客：Vue.js3.2引入wangEditor 5富文本编辑器 | LeDao’s Blog (zoutl.cn) 1234567//修改过const editorConfig = {placeholder: '请输入内容...', MENU_CONF: {}}//新添加editorConfig.MENU_CONF['uploadImage'] = { fieldName: 'image', server: 'http://localhost:8080/goods/wangEditorUploadImage',} Java后端上传图片代码代码的一些说明以及前置条件（依赖和图片路径）可以参考博客：Spring B ...

概述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 ...