zhangluludeCSDN的博客

原创 前端下载文件

【代码】根据文件名判断文件类型。

原创 根据文件名判断文件类型

【代码】根据文件名判断文件类型。

原创 根据文件名判断文件类型

【代码】根据文件名判断文件类型。

原创 新电脑配置前端环境

官方网址：http://nodejs.cn/下载网址：http://nodejs.cn/download/v14.18.2。

原创 vue 状态管理vuex笔记

getters:获取状态，本身也是一个对象，里面存储获取方法，这些方法默认带有两个参数 【state：当前vuex中状态中心】 【getters：代表当前getters对象， 用于将getters下面某个的getter方法获取过来】Ps3: vuex子模块getters中的方法可以有4个参数【state 当前子模块内state】，【getters当前子模块内getters】【rootState：外层state】 【rootGetters：外层getters】1、state：状态中心【核心】......

原创 react实现分期计算（等额本金等额本息）

react实现分期计算（等额本金等额本息）

原创 判断当前终端是移动端还是PC端

判断是移动端还是PC端

原创 Using target=“_blank“ without rel=“noreferrer“ (which implies rel=“noopener“) 【前端安全】

Using target="_blank" without rel="noreferrer" (which implies rel="noopener") is a security risk in older browsers: see https://mathiasbynens.github.io/rel-noopener/#recommendations react/jsx-no-target-blank

原创 vue3引入three.js

vue3引入three.js

原创 Ajax基础原理及使用教程

https://zhuanlan.zhihu.com/p/170465909

转载 request请求头中出现Provisional headers are shown的解决过程

https://zhuanlan.zhihu.com/p/170465909

原创 关于react中使用splice出现的问题

splice 会改变原数组 splice的时候 源数据改变了 react没监听到使用splice动态修改循环展示数据，数据能更新，但是dom不更新

原创 antd 给table底部加合计、侧边总计动态计算

使用antd4中summaryhttps://ant.design/components/table-cn/#components-table-demo-edit-row

原创 js带转义字符改正

alterContent.replaceAll(""","\"");

原创 常用正则表达式

常见的正则表达式

原创 vue2源码学习笔记【未完结，学习中】

vue与模板编写页面模板直接在HTML标签中写标签使用template使用单文件（）创建vue实例在vue的构造函数中提供：data、methods、computed、watcher、props,…将vue挂载到页面中（mount）数据驱动模型#vue的执行流程获得模板：模板中有‘坑’利用vue构造函数提供的数据来‘填坑’，得到可以在页面中显示的‘标签’，将标签替换页面中原来有坑的标签vue利用我们提供的数据和页面中模板，生成了一个新的HTML标签（node

原创 模块化打包的认识【未完结，学习中】

webpack是什么？webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。为什么要用？如今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法a:模块化，让我们可以把复杂的程序细化为小的文件;b:类似于TypeScript这种在JavaS

原创 关于react的理解—setState失效？

setState失效？State 的更新可能是异步的出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。// Wrong 这种不对this.setState({ counter: this.state.counter + this.props.increment,});用这种方法写：// Correctthis.setState((state, p

转载 Vue3 setup语法糖使用简易教程

新生命周期(setup)vue3删除了create生命周期，其他方法前面加上on进行访问，例如onMounted、onUpdated，同时新增setup属性（比created更早执行,同时setup中this不会指向实例），更贴近于html写法，这个方法在onBeforeMounted之前被调用，同时vue3在生命周期中也删除了this指向，所有的方法必须自己在vue实例中调用<template> <div>123</div></template>

原创 前端面试题【持续更新中】

前端面试题

原创 前端工程化思想

1. 什么是工程化工程及工程化1、一个工程其实就是一个项目2、要学习工程化，就需要先了解工程化的整个生命周期3、工程化内容：其实就是完成项目过程中，用到的各种工具和技术4、工程化的作用：通过使用工具，提升开发效率2. 工程化解决的问题1、上线前的压缩代码，对ES6+ 或 CSS3 新特性进行转换， 对 Less 等 CSS 的预编译语言进行编译处理最后，前端工程化之所以成功和繁荣，有一个关键性角色，不容忽视，那就是 Node.js，可以这么说，前端工程化就是在Node的基础上发展的；

原创 vscode插件

原创 Promise.all()

批量删除selectedRowsState.forEach((res) => { ps.push( delFile({ id: res.id }).then((val) => { if (val.code != 0) { message.error(`删除${res.name}失败`); } return val.code; }), ); });

原创 js级联修改字段名

function getTreeData(data) { // 修改涉及级联选择器 最后一个空白的情况 循环遍历json数据 for (var i = 0; i < data.length; i++) { data[i]['label'] = data[i].title; delete data[i].title; if (data[i].children.length < 1) { // children若为空数组，则不作操作 } else

原创 原生js实现http请求

function httpRequest(paramObj,fun,errFun) { var xmlhttp = null; /*创建XMLHttpRequest对象， *老版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 对象：new ActiveXObject("Microsoft.XMLHTTP") * */ if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else if

原创 reract hooks实现移动端签名

import React, { useEffect, useState, useRef } from 'react'// import styles from './lili.scss';// import HtmlToPdf from './htmlToPdf';import QRCode from 'qrcode.react';function Others() { const canvasDom = useRef() const [imgSrc, setSrc] = useState

原创 前端 二进制文件流导出为Excel

注意：最好不要使用封装的请求方法，直接axios请求 exportExcel(urls) { let b = { method:'post', headers: { 'Content-Type': 'application/json' }, responseType: "blob", url:'/api'+urls } axios(b).then(response =&g

原创 react项目遇到的问题及解决方案【持续更新中...】

1、modalForm表单每次点开显示的重复这个问题可能是你没有给模态框加一个随机的key如果加上key之后每次点击出来的模态框就是一个新的和上次无关2、树形选择数据结构const cascaderOptions = [ { label: '综合管理中心', value: 'fe', children: [ { label: '运营部', value: 'js', }, { label:

原创 git上传代码

git上传流程git add . 要提交的文件git commit -m 这里写提交日志git pull （拉取代码）git push （推送代码）

原创 react笔记

yarnyarn 安装环境yarn start 启动yarn build 构建yarn add xxx 安装某插件yarn eject 暴露出所有webpack相关的文件（默认是隐藏的）此执行后不可撤销创建项目并启动**create-react-app 是react 提供的用于创建react项目的脚手架库 **全局安装： npm install -g create-react-app 或者 npx create-react-app my-app切换到想创建项目的目录 creat..

原创 yarn的安装和使用

https://blog.csdn.net/yw00yw/article/details/81354533

转载 前端 uniapp 实现base64格式图片保存到相册

saveHeadImgFile() { let base64 = this.qrImgUrl; const bitmap = new plus.nativeObj.Bitmap("test"); bitmap.loadBase64Data(base64, function() { const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式 console.log('saveH

原创 价格精确到后两位函数封装 预览图片函数封装

<image @click="$previewImage(src)" :src="src" style="width: 750rpx;" mode="aspectFit"></image>Vue.prototype.$previewImage = previewImagefunction previewImage(url,type){ console.log(type) if(typeof(url)=='string') url = [url] uni.previewIm

原创 app微信登陆 小程序微信授权登陆

最近在做一个项目兼容app和小程序这里写一下这里面微信登陆的流程这里有授权获取手机号弹窗 需用户手动点击按钮确认授权才行<!-- 授权获取手机号弹窗 需用户手动点击按钮确认授权才行--><u-modal v-model="showSQ" title=" " :show-confirm-button='false'> <button style="background-color:#23C9A5;width: 500rpx;height: 80rpx;col

原创 app横屏之后再竖屏字体变大

A（竖屏页面）跳转到B（横屏页面）横屏页面返回后 竖屏页面字体变大解决办法：横屏页面内：注意：横屏页面返回的时候跳转到一个空白页面 再在空白页跳转到A页面这样就能保证页面不乱//横屏页面代码 onLoad(e) { // 设置横屏 plus.screen.lockOrientation('landscape-primary') }, onBackPress(e) { // 设置竖屏 plus.screen.lockOrientation('po

原创 vue uniapp商品多规格选择套用模板

<!-- 弹窗 --> <u-popup v-model="showIt" mode="bottom" border-radius="20" close-icon="true"> <view class="popup"> <view class="img"> <u-image :src="popAvatar" width="178rpx" height="178rpx"></u-image> &lt

原创 vue cli4X 关闭eslint代码规范审查

把这个注释掉试试

原创 图文详情两边的直线

<view class="detail"> <text class="word">图文详情</text></view>.detail { text-align: center; background-color: #F5F5F5; position: relative; height: 90rpx; line-height: 90rpx; width: 100vw; margin-bottom: 700rpx; }

原创 hbuilder 突然打不开了 怎么点都没反应

https://ask.dcloud.net.cn/article/35583官方回答

原创 web前端实现与原生开发对接（ios android）

最近的项目需要与原生配合开发，今天整理出来这里使用了一个封装的方法，简单好用1、将封装好的方法在页面上引用import bridge from "../../common/unfile.js";2、continueLive 指的是传给原生开发人员的方法名称，id代表需要传的参数joinLiveCallback 原生开发返回来的回调//continueLive 指的是传给原生开发人员的方法名称，id代表需要传的参数//joinLiveCallback 原生开发返回来的回调bridge.