- 博客(78)
- 收藏
- 关注
RSS订阅
原创 2024 uniapp( vue3 + TS )使用canvas生成海报并保存，taro/微信小程序也适用
使用canvas生成海报，翻页、保存等等。
2023-10-20 15:35:19
4399
12
原创 JavaScript 浅谈观察者模式 前端设计模式
定义一种一对多的依赖关系，当一个对象发生变化时，所有依赖于它的对象都会自动收到通知并更新。Subject（主题/被观察者）Observer（观察者）观察者模式一般至少有一个 Subject（主题） ，可以有多个Observer（观察者）。二者关系： Subject（主题）主动建立与观察者的关系。Subject（主题/被观察者）：至少要有三个方法——添加观察者、移除观察者、通知观察者。发布订阅模式在观察者模式的基础上加入了事件调度中心，提供更灵活的控制，适用于复杂的消息交互场景。
2024-08-07 17:01:01
318
原创 2024手把手 基于ant design pro 6实现多tab页(路由keepalive) 动态配置可刷新 右键菜单 删除其他/刷新/拖拽
其实ant pro已经内置了多tabs页面，无需手写，插件为 alitajs，点我打开官网由于需要动态配置部分网页是否刷新，或需要增加额外功能，那么只能使用自定义tab了。
2024-08-07 15:23:27
1727
3
原创 ProTable/EditableProTable 无法用formRef.current.setFieldsValue修改table某一行的值
上图可以看到打印出来的key是下标，值为每一行的表格数据，所以可以通过下标(index)或者rowKey也就是绑定的id拿到每一条数据，然后在赋值整个table即可。ProTable的编辑表格(开启editable)，无法用formRef.current.setFieldsValue修改某一行的值，坑又来了…需要做个包装，Table外层增加ProForm和ProFormItem，ProTable增加属性name="xx"即可解决。
2024-04-28 16:06:37
744
原创 ProTable/EditableProTable修改表单保存后 刷新界面数据不更新
编辑表格保存后，接口拿到最新表格数据，但是界面没有刷新。本以为是加个id给表格就能刷新的，没想到需要重置表单。表格数据变更后需要重置表单 form.resetFields()
2024-04-26 17:32:06
1366
原创 react 实现chatGPT的打印机效果 兼容富文本，附git地址
我的思路是将字符串切割成两个数组，一个是 的标签数组，一个是按字符和标签截取的数组，效果如图：然后遍历chucksList生成新的数组，如下图：然后遍历这个数组，使用定时器插入dom即可：定义图像映射的区域。：定义文档中所有相对链接的基本URL。：插入换行符，强制文本换行。：定义表格列的属性，通常与一起使用。：嵌入外部内容，如多媒体文件或应用程序。：插入水平线，通常用于分隔内容。
2023-11-07 10:52:31
1556
原创 微信小程序自定义按钮触发转发分享功能
在一个父盒子中使用position: relative;将 悬浮在 自定义的div中即可。通过设置按钮属性的方式来触发，然而，有时候需要手动触发。
2023-09-26 18:21:24
1639
原创 js/axios/umi-request 根据后端返回的二进制流下载文件
【代码】js/axios/umi-request 根据后端返回的二进制流下载文件。
2023-09-21 16:35:53
1020
原创 浅谈JavaScript的装饰器模式
在不改变原对象的基础上，对其进行包装拓展。在装饰器模式中，一个对象被另一个对象包装起来，形成一条包装链，并增加了原先对象的功能。
2023-03-14 16:05:20
154
原创 ant design table column动态表头列宽自适应，解决文字过长往下掉问题
某些场景下，我们的表头都是接口返回的，长度不定。也挺有意思的，几行就能解决自适应问题。
2022-10-20 11:21:18
2971
3
原创 js/vue3 取消已发送网络请求的方式
前置代码，先起一个简单的node本地服务，代码如下：一、xmlhttprequest官方解释：XMLHttpRequest.abort()如果请求已经发送， 该方法将中止请求。当一个请求被中止时，它 readyState被更改为 XMLHttpRequest.UNSENT(0) 并且请求的 status代码被设置为 0。AbortController 接口表示一个控制器对象，允许你根据需要中止一个或多个 Web 请求。你可以使用 AbortController.AbortController() 构造
2022-06-23 10:23:39
1396
原创 ant design Form必填校验失败自动滚动到第一条 scrollToFirstError scrollIntoView
老规矩，话不多说，直接上实现方式注意：本帅用的版本 “antd”: “4.16.13”,前提代码如下 const generateUUID = () => { let d = new Date().getTime(); const uuid = 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, (c: any) => { const r = (d + Math.random() * 16) % 16 | 0;
2022-05-31 13:52:58
5598
原创 webpack 的plugin简单实现 customize-cra
我是用的是 npx create-react-app my-app创建的项目个人不推荐通过 npm run eject拉取webpack配置1 下载 customize-cra 和 react-app-rewiredcnpm install customize-cra react-app-rewired --dev2 更改 package.json 中的 scripts 配置将原本以下四行做替换 "scripts": { "start": "react-app-rewired star
2022-05-18 23:51:16
708
原创 使用coding自动化集成部署vue/react
上一篇有记录到使用jenkins实现自动化部署web项目，这篇讲一下如何使用codin部署1.创建项目首先注册一个coding账号并创建一个项目2.录入凭证通过上图点击左下角的项目设置进入页面，点击左下角开发者选择》凭证管理》录入凭证凭证名称：随便填个root：填写服务器的root密码：填写服务器的密码3.制作仓库这一步的目的是打包后的压缩包自动上传到该目录地址：web 可以写别的，只是个名称，用来指定仓库4.构建计划点击确定后就可以进行相应配置了，也可以从外边进入设置，
2022-05-04 21:17:38
2652
原创 腾讯云SSH connection failed: connect ECONNREFUSED
前提要素：由于不小心修改了权限，ssh死活登不上…解决方案：首先进去腾讯云服务器控制台，通过如图方式登录终端输入服务器账号密码后，输入以下命令即可：chown -R root.root /var/empty/sshdchmod 744 /var/empty/sshdservice sshd restart...
2022-05-03 21:28:24
3837
原创 宝塔安装jenkins 自动部署vue到服务器
本人用的宝塔面板，现在软件商店中安装docker在服务器终端中输入如下命令：1.下载jenkins镜像docker pull jenkins/jenkins:lts //lts表示支持版本较长2、创立jenkins挂载目录并赋权限mkdir -p /mydata/jenkins_homechown -R 1000 /mydata/jenkins_home/3、创立并启动Jenkins容器docker run -di --name=jenkins -p 8080:8080
2022-05-01 21:25:17
4415
2
原创 umi+Ant Design Mobile+rem搭建移动端H5框架
1.创建项目yarn create @umijs/umi-app2.安装Ant Design Mobileyarn add antd-mobile3.安装postcss-plugin-px2remcnpm i postcss-plugin-px2rem4.配置 /.umirc.ts/* * @Author: muge * @Date: 2021-12-29 10:41:57 * @LastEditors: Please set LastEditors * @LastEditTim
2022-03-01 15:14:52
6192
5
原创 ant design pro v5 Error: Module “xxx“ does not exist in container.报错
解决方案一在/config/config.ts 下注释掉 mfsu: {}, 或者删掉即可解决方案二删除/src/.umi 这个文件夹重启即可
2022-01-18 15:39:51
2593
1
原创 调整wang富文本编辑器层级
由于做了一个上传图片裁剪，被富文本挡住了，效果如下：解决方式如下：//添加样式即可// wang富文本.w-e-toolbar,.w-e-menu,.w-e-text-container,.w-e-text { z-index: 1 !important; // 这是内容框}
2022-01-07 10:58:05
444
原创 egg.js npm start报错
本人用的宝塔面板 2022-01-06 14:17:34,851 ERROR 11707 [app_worker] server got error: bind EADDRINUSE null:7001, code: EADDRINUSE[egg-scripts] 2022-01-06 14:17:34,868 ERROR 11687 nodejs.AppWorkerDiedError: [master] app_worker#2:11707 died (code: 0, signal: null, s
2022-01-06 14:34:24
2325
原创 [PM2][ERROR] Script not found 和 npm in fork_mode
本人用的是宝塔面板打开终端，输入以下命令更新pm2即可pm2 update
2022-01-06 10:13:42
3367
原创 react自定义鼠标右键菜单，跟随鼠标右键位置展示
我的练习项目用的是ant design pro，直接上代码项目demo地址 点我打开import React, { useState, useRef, useEffect } from 'react';import { message } from 'antd';import styles from './index.less';const Index = () => { const [visible, setVisible] = useState<boolean>(fals
2022-01-05 10:39:53
3580
原创 umi部署到非根路径的问题
在根路径的.umirc.ts 做配置base: root, //部署到非根目录时才需配置publicPath:root, //静态资源 —必须配置，不然静态资源出不来/* * @Author: muge * @Date: 2021-12-29 10:41:57 * @LastEditors: Please set LastEditors * @LastEditTime: 2021-12-31 10:18:08 */import { defineConfig } from 'umi';
2021-12-31 10:21:48
1592
原创 umi 项目安装 antd-mobile v5 后报错如何解决
在 umi 项目中引入 antd-mobile 时出现了类似下面这样的报错：These dependencies were not found:
2021-12-29 13:39:01
4314
1
原创 react-dnd 实现拖拽（ant tree）到其他列表
这是我的demo地址 ： react_dnd本文将实现一个列表拖拽和一个属性组件拖拽（ant design tree）1.1.使用DndProvider定义一个可以拖拽的范围/* * @Author: muge * @Date: 2021-12-04 16:59:25 * @LastEditors: Please set LastEditors * @LastEditTime: 2021-12-08 14:24:47 */import React, { useState } from .
2021-12-08 14:46:48
2130
3
原创 ant design tree 切换在点开，展开三角图标消失问题解决
前提：当左侧切换重新加载数据的时候，tree已展开的字段 三角图标会消息代码如下： <Tree showIcon onSelect={onSelectTree} loadData={onLoadData} treeData={treeData} />解决如下添加key，每次数据加载回来，刷新key即可刷新tree // tree标识key c.
2021-11-11 09:29:15
1737
2
原创 vue3+vite+ant design vue+router模板搭建
1.项目下载yarn create vite根据提示选择即可2.安装项目依赖cd 进去或者直接通过vscode打开运行 yarn 安装依赖3.安装ant-design-vue组件库cnpm i --save ant-design-vue@next然后在main.ts中引入import Antd from 'ant-design-vue';import 'ant-design-vue/dist/antd.css';const app = createApp(App);app.use(
2021-10-18 17:20:19
772
2
原创 egg.js部署到宝塔具体操作
1.首先先把egg项目文件夹中除了node_modules的文件放到服务器的某个目录下2.在宝塔 软件商店中 安装 pm2tips：忧郁框架内置了 egg-cluster 来启动 Master 进程，Master 有足够的稳定性，不再需要使用 pm2 等进程守护模块。同时，框架也提供了 egg-scripts 来支持线上环境的运行和停止 ----- egg官方文档npm i egg-scripts --save //可不用安装PM2，在3步骤中执行此命令3.在宝塔终端
2021-10-18 14:33:36
1883
原创 egg.js代码更新到服务器不生效（坑）
解决方案如下：代码每次更新到服务器，都需要到终端重启-我用的是宝塔面板，操作如下打开终端cd 对应项目路径npm stopnpm run dev
2021-09-29 14:57:29
591
原创 JavaScript 数字格式化，三位逗号分隔
// 数字格式化，三位逗号分隔export const formatNum = (nums: number) => { let num = (nums || 0).toString(); const re = /\d{3}$/; let result = ''; while (re.test(num)) { result = RegExp.lastMatch + result; if (num !== RegExp.lastMatch) { result
2021-09-13 09:29:05
280
原创 Vscode配置ftp连接远程服务器
1.下载在商店中下载 sftp2.配置输入 crtl+shift+p 输入ftp配置命令 sftp:config配置如下{ "name": "muge.chat", //名字 "host": "47.11.******", //ip地址 "protocol": "ftp", "port": 21, //端口号 "username": "muge.chat", //ftp的用户名 "password": "*******", //ftp的密码
2021-09-03 09:06:58
3055
原创 宝塔 无法自动认证，请填写本地服务器的登录信息
解决：通过xshell或者 宝塔ssh终端链接服务后输入以下命令：netstat -lntup|grep sshd
2021-09-02 13:56:19
12871
6
原创 vue3 路由报错 Uncaught Error: Catch all routes (“*“) must now be defined using a param with a custom reg
错误：const notFound = () => import('@views/404/404.vue') { path: '*', name: '404', component: notFound }根据报错信息可得 必须使用正则表达式解决方案：const notFound = () => import('@views/404/404.vue') { // 匹配所有路径 vue2使用* vue3使用/:pathMatch(.*)*或
2021-08-09 14:26:33
2707
2
原创 vue3.0使用vant 覆盖原本类名样式方法 踩坑
问题：想修改 组件 ,发现只能通过style 修改，想通过类名覆盖却发现不生效未解决：用了样式穿透 /deep/:deep()之类的都不行解决方式：后来发现是scoped的问题，把scoped去掉或者再加一个 style标签代码如下代码如下：<style lang="less" scoped> 导航的样式 .nav { height: 35px; background-color: black; box-sizing: border-box;
2021-08-04 17:06:59
1171
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人