hjh15827475896的博客

原创 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。

原创 vite项目报错 This file is being treated as an ES module because it has a ‘.js‘ file extension

NodeJS默认以CommonJS的规范来执行JavaScript代码，使用CommonJS模块的导出和导入方式，也就是对应代码中的module.exports和require关键字，如下所示。

原创 crmeb本地开发配置代理

crmeb 是一个开源的商城系统， v5 版本是一个前后端分离的项目， 我们从git仓库中下载下来的是一个文件夹，其结构是这样的。我的系统没有使用docker ，使用的是 laragon 的系统。之后， 我们打开 pc 端前端的代码，配置代码。所以首先我们要在 nginx 中配置。

原创 小程序云开发中引入vant

首先看一下云开发中的小程序的目录结构。具体到我们的项目是这样子的。最后，构建一下就可以了。

原创 tp8 使用rabbitMQ（4）路由模式

在第三节中我们使用的 交换机的 fanout 把生产者的消息广播到了所有与它绑定的队列中处理，但是我们能不能把特定的消息，发送给指定的队列，而不是广播给所有队列呢？代码和发布订阅模式的代码差不多，主要是 exchange的模式要改成直联， 然后在消费者的代码中binding 时，指名 routing_key。如图，交换机把 orange 类型的消息发送给了 队列1处理， 而带有 black 和 green标记的数据发送给了队列2来处理。这时就要使用路由模式了。

原创 tp8 使用rabbitMQ（3）发布／订阅

当我们使用RabbitMQ时，如果不指定交换机的类型，那么Rabbit会使用默认的一个交换机，这个默认的交换机类型是一个直连交换机（direct），后续新建的队列（queue）都会自动绑定到这个默认交换机上，绑定的路由键就是队列的名称，注意这个默认交换机的名称是一个空字符串 " "当我们想把一个消息，发送给 多个消费者的时候，我们把这种模式叫做发布/订阅模式，比如我们做两个消费者，其中一个消费者把消息写入磁盘中，别一个消费者把消息结果输出到屏幕上，就要用到发布订阅模式。头交换机的性能不好， 基本不用。

原创 tp8 使用rabbitMQ（2）工作队列

代码的参数说明在 第一小节的代码中，如果需要可移步到第一节中查看。

原创 tp8 使用rabbitMQ（1）简单队列

php8.0 使用 rabbitmq 要使用 3.6版本以上的， 并且还要开启 php.ini中的 socket 扩展php think make:command SimpleMQProduce //创建一个生产者命令行php think make:command SimpleMQConsumer //创建一个消费者命令行。

原创 RabbitMQ 的网页界面操作说明

先手动创建两个队列，然后再把这两个队列和交换机绑定，就可以发布消息。上面给用户添加了角色和权限， 我们就可以登录了。再看一下队列中发生的变化。可以看到队列中收到了信息。队列中显示绑定了交换机。

原创 buildAdmin 后端控制器的代码分析

在追代码的过程中，我没有看到 跨域的操作， 因为fastadmin 在这里面是有跨域操作的一段代码的，后来经过 整块代码搜索， 才想起来， 这是tp8了， 是有中间键的，而fastadmin中是tp5.0,没有中间键的。buildAdmin的代码生成，很像是 fastadmin 的生成模式，当我们利用数据库生成了一个控制器的时候，我们可以看到， 它的生成代码很简洁。真正的 增，删，改，查的代码 就在traits中。接着我们来到，父类， backend。

原创 buildadmin+tp8表格操作（9）预设的表格渲染

buildadmin中，为我们预设了很多 单元格的渲染方式，我们在使用的时候，只需要在定义中写好预设的名称就可以了。这些效果其实我们也有其它的方法来实现，比如使用 table 中的 插槽来实现。有了这种操作方式， 单元格理论上可以供开发者任意变换样式了。首先在table中使用 template 的插槽。当我们使用的时候，我们只需要添加相应的名称就可以了。

原创 buildadmin+tp8表格操作（8） 表格下方添加 合计行

表格的下方可以自定义添加一个合计行，如果有其它的需求， 我们可以添加我们自已需要的行， 并不局限于合计行。//这里合计完了之后， 返回 sums[index]以上就可以给表格的最下方添加一个合计行了。

原创 buildadmin+tp8表格操作（7.1）表格的事件监听（el-table中的事件）

因为buildAdmin是封装的 el-table的组件，所以el-table中的事件， 也是可以使用的， 两者有几个事件是有共同的（比如 双击事件）， 这时可以根据自己的需要自行选择。可以看到， table 组件中 绑定了很多的事件， 这些事件都是 el-table的事件。以下代码是 buildadmin 使用 el-table中的事件的例子。

原创 buildadmin+tp8表格操作（7）表格的事件监听

我们只需要在 创建对象的时候，定义好这些钩子就可以了。如下例中， baTable类 创建对象的进候，就添加了相应的 before after 钩子。通过以上的钩子，就可以响应自定义的事件处理了。那么我们是如何使用这些钩子呢？

原创 buildadmin+tp8表格操作（6.1）表格行中添加详情链接并弹出对话框

上一个是添加按钮，查看详情，这里我们在表格中添加一个列， 这个列中， 你也可以放按钮， 也就以放链接，点击后弹出详情对话框， 代码和添加按钮弹出还是有区别的， 包括 Info 的组件， 都是不太一样的。

原创 buildadmin+tp8表格操作（6）表格行中添加详情按钮并弹出对话框

有了这一行， 那么 它的子组件中， 都可以获取到这个对象，所以， 有弹出框的 Info 组件，也可以获取到。下面来看一下，dialog的 对话框中是怎么拿到数据的。在表格行中添加按钮， 是个基本操作。我们来到 Info 组件。

原创 buildadmin+tp8表格操作（5）自定义组装搜索的查询

从上面的代码中， 可以看到， 主要是组装了一个 comSearchData的数组，之后调用， baTable.onTableHeaderAction(‘refresh’,{}) 的方法刷新了一下表格就可以了。找到 filter ，可以看到 comSearchDAta 是在这里的，也就是说表格每一次刷新，都会使用搜索中的数据。有时候我们会自定义组装一些数据，发送给后端，让后端来进行筛选，这里有一个示例。所以， 我们更改了 comSearchData之后，直接刷新表格，就有效果了。为什么是这样就可以了。