LeDao's Blog

介绍JSON Server的作用是用来模拟服务端接口数据，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据 安装和启动安装使用npm安装，安装命令如下： 1npm install -g json-server 启动要在JSON数据文件所在的文件夹打开cmd命令窗口并使用以下命令，启动命令如下所示，默认端口是3000，使用的数据文件是db.json（没有这个文件会自动新建，名称可以自己改掉） 1json-server --watch db.json 如果要修改端口加上--port参数，后面接端口号，下面命令的端口号是1314 1json-server --watch --port 1314 db.json 相关启动参数如下表所示 参数 简写 默认值 说明 --config -c 指定配置文件 [默认值: “json-server.json”] --port -p 设置端口 [默认值: 3000] Number --host -H 设置域 [默认值: “0.0.0.0”] String --watch -w W ...

概述隔行设置背景颜色可以让Excel表格更易读，平时数据少的时候可以按住CTRL键同时使用鼠标选中要设置背景颜色的单元格（虽然简单，但是操作起来容易出现漏选或多选），所以最好还是通过设置规则来实现隔行设置背景颜色比较好 实现过程选中单元格首先选中所有要隔行设置背景颜色的单元格，不用选上表头 新建规则根据下图打开新建规则界面 根据下图填写规则公式和选择背景颜色及其它样式，最后点击确定即可 关于公式=MOD(ROW(),2)=0的解释：行数除以2取余，余数为0（这里的行数从表头开始数，也就是说表头是第1行），该公式的取反公式为：=MOD(ROW(),2)=1，用哪个公式根据自己的情况选择

概述有时候下面的代码有参数需要从上面执行的异步函数中获取，但是当异步函数没有执行完时，下面的代码就执行完了（此时参数为空），从而出错 由于JavaScript是单线程的，所以代码的执行是同步的，代码从上至下执行，这里贴一下JavaScript代码的执行顺序：（原因可以查看下面的JavaScript运行机制） 同步代码，包括promise的构造函数 promise.then()中的代码 setTimeout函数，关于该函数的等待时间：最小值不得小于4毫秒，如果低于这个值，则默认是4毫秒 JavaScript运行机制同步代码（包括promise的构造函数）在执行栈中执行，同时异步任务按顺序进入异步任务队列（队列是先进先出的），然后将异步任务分配到微任务队列（nextTick，Promise.then()）和任务队列（DOM，AJAX，setTimeout，setImmediate） 同步代码执行完毕后，微任务队列中的异步任务依次进入执行栈并执行，每次进入一个，执行完毕后再进入下一个，这就是Event Loop（事件循环），最后执行任务队列的异步任务 解决办法我们可以使用Promise ...

概述封装了Axios请求，可以添加请求拦截器以便在发送请求之前做些什么（例如统一加JWT请求头给后端验证），还可以添加响应拦截器以便对响应数据做点什么 代码实现安装Axios1npm install axios 封装Axios请求封装了三个方法：get请求、post请求、文件上传 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123/** * 引入axios */import axios from "axios";/** * 请求的IP地址和端口 * @type {string} * ...

JWT介绍关于JWT的详细介绍可以查看博客：JSON Web Token 入门教程 - 阮一峰的网络日志 (ruanyifeng.com) 或者直接去官网了解（官网可直接解码JWT）：JSON Web Tokens - jwt.io 代码实现引入依赖该依赖的接口文档网址为：JWT - java-jwt 4.2.1 javadoc 123456<!-- https://mvnrepository.com/artifact/com.auth0/java-jwt --><dependency> <groupId>com.auth0</groupId> <artifactId>java-jwt</artifactId> <version>4.2.1</version></dependency> 生成和验证我把JWT的生成和验证封装成了一个工具类，以方便调用 12345678910111213141516171819202122232425262728293031323 ...

概述微信小程序通过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 ...