hjh15827475896的博客

原创 electron学习笔记（一）

这个是安全性方面的错误， 我们的解决办法是在 渲染进程中的 html 中加上 meta 标签中加上一些规则 也就是 csp 访问安全测策， 这主要是因为 electron 的主进程是 node环境， 是可以操作用户电脑上的文件的， 而渲染进程是 web 环境，不能让其运行node ,安全考虑，在对照表中，使用相应的 node.js 和 electron 的版本就可以了。在项目的 package.json 的文件中添加 监听的命令。有了以上的步骤，项目的控制台就清爽了。然后就是控制台中还有一个警告。

原创 vue3字典数据的显示问题（使用hooks解决）

以上就是用一个 hooks 解决了， 表格，查询框中的字典显示问题了，注意 hooks中返回的数据一定是 响应式数据 ref reactive 定义的， 因为这样， 页面标签才会监测到数据的变化，作出响应变化， （最主要的原因， 还是因为数据的请求是异步的，有可能页面显示的时候还没有得到数据， 但是响应式的数据，就不会被异步来防碍了，大至是这个意思，细品一下）上面就是一个 hooks 的方法了。我们的字典的数据格式如下。引入到要使用的页面去使用。

原创 函数式axios的封装

【代码】函数式axios的封装。

原创 @quick-start/electron安装过程中的问题解决

可以看到 package.json 文件中有 “sqlite3”: “5.1.6”, 的依赖。我们重新进入 myelectron 项目中， 再次 npm i 就可以了。于是当我们 npm install的时候就会卡在 这个位置不动了。首选 下载 visual studio。node 的版本是 18.18.2。选择以上的安装， 安装完成之后。package.json 文件。上面的问题的解决办法如下。下载得到一个在线的安装包。

原创 electron安装遇到的问题

在安装electron时， 我开始使用的是 git clone 命令安装的，之后进入文件夹再 npm install 就可以了，但是中间会出现问题， 安装的时候卡在 node install.js 命令行那里。上面的错误解决方式是这样的，之所以有这个的错误，其实它是 taobao 镜像的问题， 我们一般都是用的国内的 taobao 的镜像，所以这里我们要把镜像改一下，具体操作方法如下。在这里安装的时候， 同样会卡在 node install.js的位置， 等了许久之后就报出了错误如下。

原创 fastadmin 下拉选择框联动的两种方法

方法一，监听 类型数据的改变，同时修改 履职内容 的数据，如下面的代码。方法二 使用 fastadmin data-params 参数。需求是， 当类型发生改变时， 下面的 履职内容 也要发生相应的改变。fastadmin 下拉选择框是用的 selectpage 组件。方法二不需可写在事件监听中， 每次触发下拉时， 它都会执行。

原创 uviewplus省市区三组联动

【代码】uviewplus省市区三组联动。

原创 vue3中把封装svg图标为全局组件

以上是在单组件中调用， 每次使用 都要引入才可以使用，我们现在把它设置成全局组件，就不需要 每个调用的地方都要 import SvgIcon from “@/components/SvgIcon.vue”;第次使用图标都要写这么多重复的代码，很不方便，所以，如果我们把它封装成全局的组件， 就可以很方便的使用了。我们只需要在 main.ts中注册自定义的组件为全局组件就可以了。首先我们要看 svg 图标使用时 变化的部分有哪几个。在vue3中我们使用svg图标是下面这样子的。在页面中调用就可以了。

原创 vue3+vite项目中使用阿里图标库(svg)图标

前端项目中有很多地方会用到小图标，阿里的 iconfont 是一个不错的选择，同时， 它上面的 svg 矢量图标占用资源更少加载更快是一个不错的选择， 下面我们就来说一说，项目中如何来使用 svg 图标。

原创 uniapp+vue3 使用canvas，并保存图片（图片是空白的问题）

组件时， 参数 componentInstance 可以不传但如果我们的 canvas 是放在自定义组件中， 在vue2中一般传的是 this , 在vue3中是没有this的， 当我们在 vue3中要使用 this的时候， 我们一般会使用 getCurrentInstance()如果我们不是使用的自定义组件。

原创 小程序富文本中的图片宽度自适应 高度auto

【代码】小程序富文本中的图片宽度自适应 高度auto。

原创 fastadmin最新版导出数据时 表格中会有 html标签的解决办法

D:\laragon\www\weiyuan\public\assets\libs\tableExport.jquery.plugin\tableExport.js （主要是这个文件）这里的 exportOptions 的配置项有哪些呢 ， 我找的方法是 全项目查找 export 关键字， 之后， 看到了其中有两个文件。上面的情况我们的解决办法是，在导出的时候，把html 的标签去掉， 只在内容，当我们使用导出功能时， 有些数据， 我们在设计的时候，配置的是 枚举类型的。

原创 easywechat6+微信支付v3

运行完命令之后，就会得到一个 wechatpayXXXXXXXxXXXXX.pem 的文件，我们把它改名为 wechatpay.pem 这个文件就是 平台证书文件。上面的三个文件下载时都可以得到， 以上的三种方法只是用来验证用的，用处不是很大。第二次：默认密钥的操作密码(微信支付设置的六位数操作密码)第二次：默认密钥的操作密码(微信支付设置的六位数操作密码)第三次：重复输入第二次输入的密码。-s ，商户API证书的序列号。需要输入密码：默认密码是商户号。需要输入密码：默认密码是商户号。

原创 windows 查看端口占用，Failed to listen on 0.0.0.0:8000 (reason: 以一种访问权限不允许的方式做了一个访问套接字的尝试。)

Failed to listen on 0.0.0.0:8000 (reason: 以一种访问权限不允许的方式做了一个访问套接字的尝试。今天在启动 buildadmin 的时候，使用 php think run 居然给我报错。找了半天，感觉可能是端口被占用了， 但我没有其它程序在运行这个端口呀。可以看到 KGService.exe 原来是酷狗。查看 windows 的端口占用情况的命令。可以看到， 是7568 的 pid 点用了。根据 pid 找到占用端口的程序。果断关闭它，就OK了。

原创 uniapp中使用 iconfont字体

5. 使用iconfont 使用 iconfont 有两种方式， 一种是 class 方式， 一种是使用 unicode 的方式。5.2 使用 unicode 的方式。5.1 使用 class 的方式。

原创 workerman 实现推送实时数据到前端

最后在这里说明一下， 为什么 在 php 客户端中使用的是 stream_socket_client 函数创建的，而不是用 workerman 来创建客户端， 我们知道 workerman 也可以创建客户端，也可以创建服务端， 那么我们为什么没有 在 api 接口中，使用workerman 创建客户端呢？以上就是 服务端的代码， 使用时 在命令行中 php Testwroker.php就可以了， 它是一个挂起的窗口，我们实际上线时可以让它在后台运行就可以了。php 的创建的客户端的用法。

原创 fastadmin + laragon + nginx的后台访问路径配置

使用过fastadmin的小朋友都知道， fastadmin 默认的是不能访问admin模块的， 它在public 文件夹中又新建了一个 XXX.php 来指向 admin 模块的，作用像 index.php 的文件。以前我每次使用的时候，直接就到 config配置文件中把 admin 模块打开就可以了。对nginx 来说， 我们要修改一下nginx的配置文件。以上就是其中的一种方法，下面说另一种方法。

原创 uni-data-picker的回显问题

后来，发现，我们使用 uni-data-picker 中的 v-model 使用错了， 原本以为 v-model 对应的是 用户选择的地址名， 如：湖北/襄阳/老河口，但其它不是这样了的， v-model 记录的是 老河口市的 value 值，今天使用了uni-data-picker来选择用户的地区信息，但是当用户需要修改信息是的回显，就出问题了， v-model 绑字的字符中根本不会显示。

原创 uniapp微信小程序中的地图

uniapp的文档中， 一个是地图api 一个是地图的 map 组件，两个有些地方是相通的，不好区分。api的某些方法是需要在 manifest.json 中配置小程序的 getLocation的权限。uni.openLocation() 这个api 的参数 一这是 number 不然无效。它可以传入一个 经纬度， 显示位置，并可以调起高德地图导航去位置上去。而map组件是用来在 地图上 画marker 路线图等用的。比如我们常用的 查看位置的 api。

原创 z-paging 的使用 uniapp+vue3脚手架

说明， z-paging 默认是占满整个页面的，它会挡住页面的其它元素， 所以， 我们要把所有的元素写在 z-paging 的组件里。uniapp 中没有合适的分页插件， 所以找到了 z-paging的分页插件使用，这里记录一下用法。上面的例子中使用的是 HbuilderX 来引入的， 本人使用的是 脚手架， 所以是这样的。一种方法是 设置 use-page-scroll 这种方式还要引入另外一个组件。第二种方法 （也是我项目中使用方法）第一次进入时加载了两次。项目中没有问题的代码。

原创 uniapp+vue3+setup语法糖开发微信小程序时不能定义globalData的解决方法

在使用 uniapp 开发小程序的时候， 发现使用了setup 语法糖 ，定义 globalData 时，要不是定义不了， 要不就是使用 getApp()取不到，后来想到一个不伦不类的方法解决了， 这个方法有点难看， 但是解决了问题。

原创 pinia 的选项式和组合式的不同写法和持久化的方法

pinia 创建仓库的方法有两中写法， 一种是选项式的api 一种是组合式的api。当我们刷新页面的时候，pinia中的数据就会清空， 所以有时我们是想要把它持久化的。说明：action 不要使用 箭头函数， 这样会使 this 的指向错误。说明：action 不要使用 箭头函数， 这样会使 this 的指向错误。说明：action 不要使用 箭头函数， 这样会使 this 的指向错误。getter 方法， 是用的 computed 方法来实理的。defineStore 的第二个参数是一个函数。

原创 vite打包时发布时，放在服务器的二级目录中

如果我们的站点根目录为 public , 我们访问的时候使用的是 http://www.abc.com/ 访问到了站点的根目当，现在我们要访问 http://www.abc.com/mysite/#/在history模式下，使用 http://www.abc.com/mysite/index.html 来访问是错误的。说明一下， hash 模式下的访问路径是：http://www.abc.com/mysite/index.html。

原创 printjs 在vue中的使用

今天遇到项目中的一个功能， 要求在后台管理端打印一下书信，单纯的打印书信是小事，关建是信纸是图案是自定义的，用户上传一个图片做为信纸的背景图所以我们找到了 print-js 插件。

原创 buildadmim生成代码时让菜单有层级

当我们使用buildadmin生成代码的时候，在菜单的部分， 有时希望它生的是一个带有层级的菜单，有时候则想生成一个没有层级的菜单。我们可以在高级设置中的 相对位置处更改，同时可以更改一个生成的文件的名称。比如我设计了一个 优惠券类型的表 想生成一个带有层级的菜单。然后， 上层的菜单名称叫 coupon 我们怎么改成汉字呢。这样生成出来的菜单就是一个 两层的了。在这里把菜单名称改成中文的就可以了。如果我们要生成没有层级的菜单。

原创 css grid布局使用说明

原创 fastadmin自定义弹出框的回调问题

上面的代码有点不如意的地方，就是 当我们新增完成之后， 在关闭弹出窗时，想让当前页面刷新，但是上面的 callback 中的代码是不执行了。要注意的是， 我们open 的是 add 方法，所以 我们调用的 close方法是写在 add的js 使码中。但是，当点击 添加时， 弹出 fastadmin 的弹出框，添加也是fastadmin 自带的。通过上面的操作， open中的 callback方法就执行了， 我们就可以在其中刷新页面了。使用了 vue 更改了 fastadmin 项目的列表页面。

原创 fastadmin中引入 elementui

把下载的代码放入 public/assets/libs/elementui/elementui.js 和 public/assets/libs/elementui/elementui.css。通过以上的配置，就可以使用 element ui了。shim: 在末尾插入。path:在末尾插入。

原创 fastadmin页面中引入vue2的方法

在 /public/assets/js/backend-init.js中添加代码。把代码放在 public/assets/libs/vue2/vue2.js。三 完成了上面的，就可以在页面中引入了。四， 在相应的页面中 添加根节点就好了。二 配置 require.js。这里我们下载生产环境的版本。把代码全部 复制下来。

原创 buildadmin 入口文件index.php的代码解析

buildadmin的入口文件和一般的tp8的入口文件是不一样的，参考这个入口文件的写法，我们可以大至了解， 为什么，前端的 index.html 和 php的入口文件同在 public 的目录下，而可以不冲突。先看一下 buildadmin的入口文件。我们来会段看下代码的意思。

原创 vue3+vite 项目的创建

我们要使用的话， 还要安装 vue-router sass sass-loader pinia 都要自已装上。之前用 vue-cli 创建的 vue2项目很方便的， 但是，它所使用的是webpack 的工具，不是 vite。说明一下， vite 的 index.html 文件不是在 public 目录下， 不影响，一样的用。首选创建一个 vite 项目 ，创建的时候，会让你选择使用 vue 还是 react。以上只是一个单纯的 vue + vite 项目。输入项目的名称，之后选择 vue。

原创 buildadmin自动生成表格和表单的修改（switch组件）

显然，这不是我们想要的，但如果删除掉生成的再重新生成又不方便， 所以， 我们可以自己改代码。本人在设计时， id 字段的注释忘记写了， 结果生成的数据表的表头是这样的。本文中说的是修改swich 组件的样式，但也适用于其它的组件。首先，按照数据表生成规范，生成数据表。这里也是一个空的，没有开， 关两个字。根据上面的添加就可以了。

原创 微信小程序订阅消息前后端示例

订阅消息成功以后， 后台服务端是要发送消息给用户的。这里我们使用了 easywechat6 的功能。页面点击订阅按钮，弹出订阅框。以上就是小程序端的订阅消息。

原创 vue 公众号开发，调用jssdk封装

vue 公众号开发，经常会使用到 转发朋友，朋友圈，调用扫一扫等功能，这时就要使用微信的 jssdk。

原创 Vue 封装的 axios 类的使用（小bug 改进）

改进方法， 每一次都来 new api()的实例有点麻烦，所以， 我在 api 的类中添加了一个静态方法。有了静态方法，就不用每次使用时就要new了。业务类 api 继承 http。

原创 微信小程序使用 节流函数的写法

在工具类中添加节流函数找到需 要节流的按钮

原创 crmeb v5新增一个功能的完整示例记录

我们在小程序端已经可以走到页面上了，但是还需要接口实现功能， 对提交回收数据的功能， 我设计的接口 地址是 http://crmeb.test/api/recovery/save 的路由。首页的页面配置好之后，就要在 前端的展示程序中 配置相应的路由和文件了。后台相要的页面如下， 回收是一个大的菜单，回收菜单下有一个回收记录的菜单。工作中的二开需求是这样的，修改首页的装修，并新增回收报价的功能。路由配置好了之后，就是文件了，要相应的目录下，建相应的文件。然后，就是对生成出来的路由文件稍加修改。

原创 crmeb v5自动生成代码报错（adminInfo方法或404路由不存在的问题）

adminInfo方法不存在或404

原创 crmeb后台自定义菜单并生成代码

进入后台界面之后，我们可以看到界面如下 找到 维护->开发配置->权限维护->添加规则按扭。我们的目的是 想要在基础配置的下方 再生成一个 菜单,用来对一个表进行 增删改查的页面操作。如果我们还想在 新增的条目下再添加 子级， 可以后到有一个添加下级的选项。这样我们的crud 代码就生成出来的，数据库中相应的表也会对应的生成。我们要在设置的 菜单之下，添加一个 基础配置的 子菜单。找到 维护->开发工具->代码生成->添加功能。提交之后，刷新页面就会在列表中出现菜单了。这里我们就不添加了。

原创 vue2和vue3中注册全局属性的区别（例如全局使用axios ）

以上两种方法都是通过 getCurrentInstance()的方法，获取到的全局属性，官方强烈不推荐，并没有说它不可以使用。在vue2中注册全局属性是很方便的， 只需要使用 vue.prototype.XXXX = XXXX就可以了，如下面的代码。如果说以上的两个方法， 不是太好， 我们也可以合使用 provide, injecdt 的依赖注入的方法引入全局属性。然后在子页面中，就可以使用 this.$axios() 的方法了。在这种方法中， proxy 就相当于 vue2中的this。