- 博客(80)
- 收藏
- 关注
原创 2024 uniapp( vue3 + TS )使用canvas生成海报并保存,taro/微信小程序也适用
使用canvas生成海报,翻页、保存等等。
2023-10-20 15:35:19 3462 11
原创 JavaScript 浅谈观察者模式 前端设计模式
定义一种一对多的依赖关系,当一个对象发生变化时,所有依赖于它的对象都会自动收到通知并更新。Subject(主题/被观察者)Observer(观察者)观察者模式一般至少有一个 Subject(主题) ,可以有多个Observer(观察者)。二者关系: Subject(主题)主动建立与观察者的关系。Subject(主题/被观察者):至少要有三个方法——添加观察者、移除观察者、通知观察者。发布订阅模式在观察者模式的基础上加入了事件调度中心,提供更灵活的控制,适用于复杂的消息交互场景。
2024-08-07 17:01:01 273
原创 2024最新 基于ant design pro 6实现多tab页(路由keepalive) 切换tab可刷新页面(可配置非缓存路由) 右键菜单 删除其他/刷新/拖拽
其实ant pro已经内置了多tabs页面,无需手写,插件为 alitajs,点我打开官网由于需要动态配置部分网页是否刷新,或需要增加额外功能,那么只能使用自定义tab了。
2024-08-07 15:23:27 676
原创 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 412
原创 ProTable/EditableProTable修改表单保存后 刷新界面数据不更新
编辑表格保存后,接口拿到最新表格数据,但是界面没有刷新。本以为是加个id给表格就能刷新的,没想到需要重置表单。表格数据变更后需要重置表单 form.resetFields()
2024-04-26 17:32:06 796
原创 react 实现chatGPT的打印机效果 兼容富文本,附git地址
我的思路是将字符串切割成两个数组,一个是 的标签数组,一个是按字符和标签截取的数组,效果如图:然后遍历chucksList生成新的数组,如下图:然后遍历这个数组,使用定时器插入dom即可:定义图像映射的区域。:定义文档中所有相对链接的基本URL。:插入换行符,强制文本换行。:定义表格列的属性,通常与一起使用。:嵌入外部内容,如多媒体文件或应用程序。:插入水平线,通常用于分隔内容。
2023-11-07 10:52:31 1290
原创 微信小程序自定义按钮触发转发分享功能
在一个父盒子中使用position: relative;将 悬浮在 自定义的div中即可。通过设置按钮属性的方式来触发,然而,有时候需要手动触发。
2023-09-26 18:21:24 1373
原创 js/axios/umi-request 根据后端返回的二进制流下载文件
【代码】js/axios/umi-request 根据后端返回的二进制流下载文件。
2023-09-21 16:35:53 879
原创 2024 vue2的响应式原理 通俗易懂!
依赖追踪。在Vue实例化过程中,会递归地将每个数据对象的属性转换为,并维护一个依赖收集器(Dep)。每个属性都有一个关联的watcher,当数据发生变化时watcher会被通知并更新视图。vue实例化时,会将message属性转换为,并添加到依赖收集器中。当属性值变化时,依赖收集器通知相关的watcher更新视图。Vue 2.x 只能响应对象属性的变化,不能响应数组的变化。
2023-05-20 14:43:08 621
原创 浅谈JavaScript的装饰器模式
在不改变原对象的基础上,对其进行包装拓展。在装饰器模式中,一个对象被另一个对象包装起来,形成一条包装链,并增加了原先对象的功能。
2023-03-14 16:05:20 133
原创 ant design table column动态表头列宽自适应,解决文字过长往下掉问题
某些场景下,我们的表头都是接口返回的,长度不定。也挺有意思的,几行就能解决自适应问题。
2022-10-20 11:21:18 2630 2
原创 js/vue3 取消已发送网络请求的方式
前置代码,先起一个简单的node本地服务,代码如下:一、xmlhttprequest官方解释:XMLHttpRequest.abort()如果请求已经发送, 该方法将中止请求。当一个请求被中止时,它 readyState被更改为 XMLHttpRequest.UNSENT(0) 并且请求的 status代码被设置为 0。AbortController 接口表示一个控制器对象,允许你根据需要中止一个或多个 Web 请求。你可以使用 AbortController.AbortController() 构造
2022-06-23 10:23:39 1281
原创 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 4981
原创 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 631
原创 使用coding自动化集成部署vue/react
上一篇有记录到使用jenkins实现自动化部署web项目,这篇讲一下如何使用codin部署1.创建项目首先注册一个coding账号并创建一个项目2.录入凭证通过上图点击左下角的项目设置进入页面,点击左下角开发者选择》凭证管理》录入凭证凭证名称:随便填个root:填写服务器的root密码:填写服务器的密码3.制作仓库这一步的目的是打包后的压缩包自动上传到该目录地址:web 可以写别的,只是个名称,用来指定仓库4.构建计划点击确定后就可以进行相应配置了,也可以从外边进入设置,
2022-05-04 21:17:38 2466
原创 腾讯云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 3499
原创 2023宝塔安装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 3921 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 5618 3
原创 ant design pro v5 Error: Module “xxx“ does not exist in container.报错
解决方案一在/config/config.ts 下注释掉 mfsu: {}, 或者删掉即可解决方案二删除/src/.umi 这个文件夹重启即可
2022-01-18 15:39:51 2475 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 383
原创 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 2121
原创 [PM2][ERROR] Script not found 和 npm in fork_mode
本人用的是宝塔面板打开终端,输入以下命令更新pm2即可pm2 update
2022-01-06 10:13:42 3179
原创 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 3412
原创 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 1469
原创 umi 项目安装 antd-mobile v5 后报错如何解决
在 umi 项目中引入 antd-mobile 时出现了类似下面这样的报错:These dependencies were not found:
2021-12-29 13:39:01 4120
原创 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 1946 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 1620 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 708 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 1726
原创 vite+vue3+element Plus搭建
1.安装安装命令如下:yarn create viteyarn add element-plus --devcnpm install element-plus --save2.在main.ts中引入import { createApp } from 'vue'import App from './App.vue'// 引入element plusimport ElementPlus from 'element-plus';// 引入css文件import 'element-plus/
2021-10-16 21:34:31 278
原创 egg.js代码更新到服务器不生效(坑)
解决方案如下:代码每次更新到服务器,都需要到终端重启-我用的是宝塔面板,操作如下打开终端cd 对应项目路径npm stopnpm run dev
2021-09-29 14:57:29 528
原创 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 251
原创 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 2902
原创 宝塔 无法自动认证,请填写本地服务器的登录信息
解决:通过xshell或者 宝塔ssh终端链接服务后输入以下命令:netstat -lntup|grep sshd
2021-09-02 13:56:19 12466 6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人