- 博客(28)
- 收藏
- 关注
RSS订阅原创 React项目中的JS设计模式应用
设计模式(Design Pattern)是软件工程中面临的一般问题的解决方案。它不是成熟的代码,而是原则和思路。设计模式在不同的语言和工具中会有不同的实现方式,但核心思想是不变的。设计模式的主要目的是代码复用和减少系统的复杂性。它通常会解决一类问题,而不是一个具体问题。设计模式允许使用户更加相信系统,它使可维护性较高且方便扩展。设计模式的类型主要分为三类:1. 创建型模式:这些设计模式提供用于创建对象的某种机制,它们帮助创建对象,同时隐藏创建细节。比如工厂方法模式、抽象工厂模式、构建者模式、原型模式等。
2023-05-18 11:41:53
661
原创 微前端应用(qiankun+umi+antd)
微前端是一种前端架构模式，它将前端应用程序拆分成多个小型的、独立开发、独立部署的子应用，然后将这些子应用组合成一个大型的、复杂的前端应用。每个子应用都有自己的技术栈、独立的代码库、独立的开发、测试和部署流程，并且可以独立运行、测试和部署。微前端的目的是解决大型前端应用程序在开发、测试和部署等方面的复杂性和困难。通过将前端应用程序拆分成多个独立的子应用，可以实现团队的分工协作、提高开发效率、降低代码耦合性、提高代码可维护性和可测试性。
2023-05-11 15:12:23
2842
原创 DatePicker选择日期报错clone.weekday is not a function
DatePicker组件赋值后选择日期报错clone.weekday is not a function
2023-03-02 15:06:27
2402
原创 The @emotion/core package has been renamed to @emotion/react
antd从 v4 到 v5
2023-02-27 17:15:25
231
转载 ant.design-pro使用useModel传递全局数据
示例图: 三个组件的数量可以共享使用方法在src目录下models文件夹,新建一个文件,文件名就是引入的数据对象1.2.完整代码/src/models/product.tsimport { useState, useCallback } from 'react'export default () => { const [count, setCount] = useState(0) // 增加数量 const addCount = useCallback((val:
2022-06-22 16:54:31
3200
2
转载 9种常见的前端跨域解决方案（详解）
文章转载自：9种常见的前端跨域解决方案（详解）_慕课手记 (imooc.com)一、什么是跨域？ 在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。什么是同源策略？ 同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。 同源策略限
2022-03-25 16:36:38
27847
原创 前端如何设置浏览器窗口的网站logo
logo实际上是一个“favicon.ico”图片实现步骤：第一步：制作favicon.ico，大小为16*16毫米；没有ico格式的，使用在线工具将图片转一下格式：PNG转ICO - 在线转换图标文件 (aconvert.com)第二步：将“favicon.ico”放到项目的根路径下。第三步：在所有html页面head中添加如下代码。//收藏用logo图标<link rel="bookmark" type="image/x-icon" href="favi..
2022-02-18 09:55:33
2947
原创 Ant Design Pro 左侧菜单栏一直固定展开
如题,因为项目需求需要加这个功能,所以查了下资料,只需要在两个地方设置一下1.defaultSettings 文件添加openKeys:false2.layouts 文件下BasicLayout.jsx文件添加openKeys={false}两处设置就可以了
2021-03-21 13:59:23
3642
2
原创 React进阶useRef和useImperativeHandle的用法
目录useRefuseImperativeHandleReact.forwardRefuseRefconst refContainer = useRef(initialValue);useRef返回一个可变的 ref 对象，其.current属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。useRef有什么作用呢，其实很简单，总共有两种用法获取子组件的实例(只有类组件可用) 在函数组件中的一个全局变量...
2020-10-08 17:50:15
1516
1
转载 React 中性能优化、 memo、 PureComponent、shouldComponentUpdate 的使用
场景React是一个用于构建用户界面的JavaScript库，主要负责将数据转换为视图，要保证数据和视图的统一，react通过 重新render来保证数据和视图的统一，但当数据没有变化时，视图重新渲染，就会造成不必要的性能浪费看下面这个例子， import React from 'react' class Children extends React.Component { render () { console.log(' Children ren...
2020-10-08 17:00:45
392
转载 React 中 Context 的使用
contextContext提供了一种方式，能够让数据在组件树中传递时不必一级一级的手动传递一般情况下，数据在组件中，要一级一级的传递，单向数据流，比如Parent组件中的theme值，需要在Item组件中使用，就需要我们从Parent中向下传递， 但当我们有了Context后，我们就不需要一级一级传递了 Parent(theme=red) List(theme=red) Item(theme=red) Th.
2020-10-08 16:58:46
528
原创 react项目里js实现数据预览及下载
定义参数// 打印功能参数 const [printData, setPrintData] = useState([]) const [printGroupData, setPrintGroupData] = useState([])定义页面宽度,根据页面宽度赋值表单的宽let screenWidth = document.documentElement.scrollWidth || body.scrollWidth定义打印的每一列数据const printCol = [
2020-09-29 16:22:54
446
4
原创 react获取数据导出到excel
数据从接口获取,执行导出的方法下载插件js-export-excelnpm install js-export-exceloryarn add js-export-excel//导出为excel文件的方法 const downloadFileToExcel = () => { let option = {}, //option代表的就是excel文件 dataTable = [], //excel文件中的数据内容 .
2020-09-29 16:10:10
908
1
原创 js根据路径下载图片
我的项目是react+antd组件用的upload,onDownload方法可以直接获取文件的全部信息const onDownload = (file) => { let a = document.createElement('a'), event = new MouseEvent("click"), index = file.name.lastIndexOf("."),//获取最后一个.的位置 name .
2020-09-29 15:45:53
891
原创 Visual Studio Code怎么自动引入相关模块?
1.打开Visual Studio Code软件, 点击左侧扩展图标或者用Command+shift+X快捷键,显示安装扩展的页面2.在输入框输入需要的扩展(插件)auto import,回车搜索后,点击安装按钮安装扩展(插件),等待安装完成3.安装完成以后,输入相关内容,看到如图提示内容后点击回车就可以了注意:如果第一次用AntDesign的<card>组件时，是不会有自动导入提示的，所以第一次导入要自己写import {Card} from 'antd';在.
2020-07-22 15:37:10
8623
原创 开发项目安装依赖时（npm install） 报 npm ERR! cb()never called!的错误
在运行react项目安装npm时报npm ERR! cb()never called!如图:解决方法:1.首先以管理员模式打开cmd,清除npm缓存:npm cache clean -f2.根据提示执行安装全局npm :npm install -g npm安装完后查看npm版本:npm -v再次执行清理缓存npm cache clean -f2.安装最新版本的Node helper:npm install -g n如果出现npm ERR! notsup Uns..
2020-07-21 10:45:07
1589
原创 小程序下载文件wx.saveFile报错：saveFile:fail exceeded the maximum size of the file storage limit 10M
// 下载文件资源到本地 downloadFile(url){ //下载文件，生成临时地址 wx.downloadFile({ url, success(res) { console.log(res,'下载文件') //保存到本地 wx.saveFile({ tempFilePath: res.tempFilePath, success:.
2020-07-20 16:26:16
2261
转载 JS日期时间类型(Y-m-d H:i:s)与时间戳互转
需要在小程序wxs里实现时间戳转换就查了一下资料,转载自:http://blog.sina.com.cn/s/blog_6ad624380101i7l6.htmlfunction datetime_to_unix(datetime){ var tmp_datetime = datetime.replace(/:/g,'-'); tmp_datetime = tmp_datetime.replace(/ /g,'-'); var arr = tmp_datetime.spl.
2020-06-17 16:31:26
1255
原创 小程序实现吸顶效果
本文实例为大家分享了微信小程序实现吸顶特效的具体代码，供大家参考，具体内容如下首先上原始的图wxml:<view class="tab1 {{oneFixed}}" id="tab"> <!-- tabBar --> <import src="/pages/templates/common/nav/cuNav" /> <template is="cuNav" data="{{TabCur:tabCurrent,stateTa
2020-05-18 14:20:21
1779
5
原创 微信小程序引入其他UI组件后按钮组件太大问题
新建一个小程序项目后,引入常用开发的UI组件后发现按钮出奇的大,需要手动强制调节大小,这我怎么受的了,查了很多重置按钮和覆盖原来按钮样式,试用后都不行.好在没放弃,后来查资料是组件升级的原因.来看看它有多大官方文档对Style是这样说的:解决方法如下:...
2020-05-13 10:43:12
988
原创 This is probably not a problem with npm
今天从SVN检出公司项目,运行npm start报错,This is probably not a problem with npm,检查npm -v提示已安装的版本,但是没有node_modules目录,执行npm install安装也没有这个目录,然后用淘宝镜像安装也是不行,于是查阅资料,发现执行npm install express可以的,切安装的都在node_modu...
2020-04-01 16:41:16
625
转载 async/await 来处理异步
本文转载自:https://www.cnblogs.com/SamWeb/p/8417940.html先说一下async的用法，它作为一个关键字放到函数前面async function timeout() { return 'hello world';} 只有一个作用, 它的调用会返回一个promise对象。调用一下看看就知道了，怎么调用？async函数也是函数，所以它的调...
2020-03-25 17:44:17
160
原创 ant design pro之带参数的路由
脚手架默认支持带参数的路由，但是在菜单中显示带参数的路由需要在代码中自行处理{ path: '/dashboard/:page', hideInMenu:true, name: 'analysis', component: './Dashboard/Analysis',},通过以下代码来跳转到这个路由:import router from 'umi/router'...
2020-03-25 16:20:45
3966
原创 记录-antd按需加载配置过程
antd按需加载配置过程1.安装模块yarn add react-app-rewired customize-cra babel-plugin-import2.修改 package.json 里的启动配置/* package.json */"scripts": {- "start": "react-scripts start",+ "start": "react-...
2020-03-25 10:54:58
275
转载 安装了wampserver 集成包如何查看数据库的用户名和密码
ps:安装初试账户:root 密码为空首先要确定你在安装集成包的时候你安装了的路径是什么，是放到了电脑的那个那个盘里面，然后在通过X:/wamp/apps/phpmyadmin.x.x.x/config.inc.php中查找$cfg['Servers'][$i]['user']和$cfg['Servers'][$i]['password'] = ''; 找到你的用户名和密码...
2018-10-31 22:14:17
6672
转载 解析关于wamp启动是80端口被占用的问题
本篇文章是对关于wamp启动是80端口被占用的问题（win7系统下WAMP 80端口被Microsoft-HTTPAPI/2.0占用的解决办法）进行了详细的分析介绍，需要的朋友参考下问题如下:网上有关于这个处理办法，说道：VS2010在更新了SP1后，会在开机时自动启动一个服务，占用WAMP的80端口，导致WAMP无法正常启动Apache。提示信息：Your port 80 is a...
2018-10-31 22:02:32
187
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人