LeDao's Blog

概述微信小程序通过wx.login函数登录时，会返回一个code，后端拿到这个code向微信接口服务请求可以拿到openid，后端根据openid在数据库中查询这个登录的用户是否存在，不存在则向数据库新增这个用户的信息然后返回给微信小程序，微信小程序使用wx.setStorageSync函数保存用户的信息以保持登录状态 实现流程图 代码实现获取code并传给后端requestUtil是封装的wx.request方法，详情查看博客：微信小程序封装请求的地址（IP地址以及端口）和方法 | LeDao’s Blog (zoutl.cn) 12345678910111213141516171819202122//当顾客未登录时if (!wx.getStorageSync('currentCustomer')) { //登录 wx.login({ success: (res) => {//登录成功 //请求后端,给后端发送code以获取openid requestUtil({ url: '/custome ...

项目地址前台小程序代码：a6678696/mall-wx: 微信小程序商城前台 (github.com) 后台管理系统代码：a6678696/mall-web: 微信小程序商城后台 (github.com) 服务端代码：a6678696/mall-admin: 微信小程序商城服务端 (github.com) 使用的技术 所属项目 技术 版本 说明 服务端 MySQL 5.6 数据库 Spring Boot 2.2.6.RELEASE 后端项目框架 Mybatis-Plus 3.5.3.1 持久层框架 Druid 1.2.15 数据库连接池 Gson 2.10 Java对象序列化/反序列化库 Commons IO 2.11.0 用于协助开发IO功能 Hutool 5.8.11 Java工具类库 java-jwt 4.2.1 Java推荐的JWT依赖 后台 Vite 4.0.0 前端构建工具 Vue.js 3.2.45 前端JavaScript框架 Vue Router 4.1.6 Vue.js 的官方路由 Axio ...

概述微信小程序使用富文本时，如果图片宽度超出微信小程序屏幕的默认最大宽度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 ...