coca_cola_1105的博客

原创 第一次安装typescript引出的问题

sudo npm i typescript

原创 export和export defult的区别

require和import的区别以及export和export default的区别

原创 class类 static

class 类 static继承实例化规则

原创 2023react面试题

自我react查漏补缺

原创 react点击其他地方关闭Modal框

服务端渲解决点击其他地方关闭Modal框

原创 解决Next.js使用Arco design select框 option不显示问题

Nextjs 踩坑

原创 什么是cmd？什么是PowerShell？Terminal？

什么是cmd？什么是PowerShell？区别是什么？

原创 npm安装包原理

详解npm安装包原理和运行指令原理

原创 使用Electron将HTML项目打包为桌面应用exe文件

后端的java项目好像是前后端不分离的那种，前端基础环境需要node和npm。① 进入需要打包的项目文件夹中，打开cmd进入该目录。快捷键 win+r 输入cmd 进入默认在c盘目录 输入 d: 进入d盘 再输入dir查看目录文件 cd文件名进入。② npm init项目中会多出一个package.json文件，以下是默认内容：{ "name": "needle-server", "version": "1.0.0", "description": "", "main": "ind

原创 cross-env

在react开发中，npm script 脚本中有cross-env那什么是cross-env？它是运行跨平台设置和使用环境变量的脚本（Node环境变量）为什么需要cross-env？我们在自定义配置环境变量的时候，由于在不同环境下，配置方式也是不同的。例如在windows和linux。cross-env 能够提供一个设置环境变量的scripts，这样我们就能够以unix方式设置环境变量，然而在windows上也能够兼容的。使用：npm install --save-dev cross-

原创 Docker浅析

背景先了解下虚拟机：带环境安装的一种解决方案。它可以在一种操作系统里面运行另外一种操作系统，比如在windows系统运行Linux系统。可以通过虚拟机还原软件的原始环境，但有缺点：①占用资源多 ②冗余步骤 ③启动慢所以这里又引入一个概念：Linux容器。Linux容器不是一个完整的操作系统，而是对进程进行隔离。犹豫容器是进程级别的，相比虚拟机有很多优势：①启动快 ②资源占用少 ③体积小Docker概念：属于对Linux容器的一种封装，提供简单易用的容器使用接口。是目前最流行的Linuxs容器解决方

原创 react路由跳转三种方式

Link to 跳转 <Link to='/path'> {name} </Link>编程式跳转import {history} from 'umi' onClick = ()=>{ history.push('/path')}

原创 了解npx

最近做低代码，用到的都是之前写vue没接触过的东西。今天就遇到一个解决我问题的npx。先来了解下npx是个什么东西。概念：npm从5.2增加了npx命令。node自带npm模块，所以可以直接使用npx命令。如果不能用就手动安装下。$ npm install -g npx那么npx主要是用来解决什么问题的呢？就是调用项目内部安装的模块。原理：运行时会到node_modules/bin路径和环境变量PATH里面，检查命令是否存在。由于npx会检查环境变量PATH里面，检查命令是否存在。由于npx会检

原创 react引入静态svg

react 如何引入经验svg 变成列表渲染 const req = (require as any).context('../../../../public/icons/svg', false, /\.svg$/); const requireAll = (requireContext: any) => requireContext.keys().map(requireContext); const iconList = requireAll(req);...

原创 vue和小程序的异同

原创 小程序弹框后禁止滑动

<page-meta page-style="{{ isShowCoupon ? 'overflow: hidden;' : '' }}" />isShowCoupon :true 弹框出现

原创 关于Vue的一些小记录

受现代 JavaScript 的限制，Vue不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性遍历执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。解决办法：数组this.$set(Array, index, newValue)对象this.$set(Object, key, value)有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend() 方法来添加

原创 使用webpack创建项目vue项目和vue-cli3创建项目的区别

vue-cli 内部封装了 webpack,对外仅仅提供几个依赖。而且做了很多适合 vue 项目的优化，同时你可以用 vue.config.js 来管理项目。package.json 非常清爽webpack 更符合针有特定需求，毕竟是原生。不过管理起来也更加复杂。不过社区有升级，可以第一时间获取升级优势。前一种只能等待 vue-cli 项目升级一般来说，vue-cli 够用了，但是 vue-cli 能实现的，webpack 一定能实现，反之，不一定————————————————原文链接：https

转载 7种方法解决移动端Retina屏幕1px边框问题

7种方法解决移动端Retina屏幕1px边框问题参考链接

原创 深入理解Promise

6个静态方法： Promise.resolve() Promise.reject() Promise.all() Promise.allSettled() Promise.any() Promise.race()实例方法： Promise.prototype.catch() Promise.prototype.finally() Promise.protptype.then()...

原创 微信小程序使用AES加密和解密

前端请求后端接口进行参数加密处理：const CryptoJs = require('crypto-js');const defaultKey = "zoe_nurse_qazxr8"; // 默认的keyconst defaultIv = "qwertyuiopasdfgh"; // 默认的key 偏移量/** * 加密方法 * @param: str 需要加密的字符 * @param: key 密钥 * @param: iv 密钥偏移量 */function encrypt(s

原创 Es6 class类 个人理解

Es6 class 个人理解

原创 原型原型链

原型原型链老网红了，吃透了又忘了，此处为备忘录！第一步第二步实例的构造函数属性(constructor)指向构造函数每个对象都有_proto_属性，但只有函数对象才有prototype属性(这个属性指向函数的原型对象)原型对象都有一个constructor(构造函数)属性指向prototype所在的函数(即Person)person1.constructor == PersonPerson.prototype.constructor == Person...

原创 前端优化详解

工作日常中经常会接手烂代码或者不巧自己就是写烂代码的人（笑死）。面对项目中的烂代码，不能做彻彻底底的清道夫也要泥石流中的一股清流。要保证自己接手过的代码要比原来要好，自己能接受。面对烂代码万能法则第一条：自己不写烂代码！！！个人对于优化觉得可以分为：代码可读性 性能可读性优化：命名 组件化 模块化代码具体优化参考性能优化：降低请求数量：合并资源，减少HTTP请求 加快请求速度：预解析DNS，减少域名数，并行加载，CSDN分发 缓存 渲染：JS、CSS优化，加载速度 ...

原创 解决New Date（）解析出NaN问题

实际遇到开发问题是这样的，打印出日期有时间是正确的，编辑器上运行OK。就在苹果手机上会有问题。例：2018-12-28 15:00:001. var newDate = new Date("2018-12-28 15:00:00") 这种获取的时间在安卓手机上显示是正常的，在苹果手机上显示NaN2. var newDate = new Date("2018/12/28 15:00:00") 这种获取的时间在安卓和苹果手机上都显示正常3. ...

原创 壹题（刷题记录）

目录1.写Vue/React项目时为什么要在列表组件中写key，其作用是什么？2.['1', '2', '3'].map(parseInt) what & why ?3.什么是防抖和节流？有什么区别？如何实现？1.写Vue/React项目时为什么要在列表组件中写key，其作用是什么？ vue和react都是采用diff算法来对比新旧虚拟节点，从而更新节点。因此key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度。2.['1', ...

原创 前端工程化的理解

前端工程化主要是为了提高开发效率降低维护难度，制定规范提高团队协作能力、压缩代码、单元测试。简单来说可分为四个方面：模块化：简单来说就是将一个大文件拆成相互依赖的小文件，再进行统一的拼接和加载。 js的模块化 使用webpack 、Babel将所有的模块打包成一个文件夹同步加载 css的模块化 使用sass、less、stylus等预处理器是此案css的文件拆分 组件化 规范化 自动化：包括（图标合成，持续集成、自动化构建、自动化部署、自动化测试）组件和模块化的区别：模块化.

原创 VUE 复制内容至剪切板

VUE 复制内容至剪切板复制内容到剪切板使用的最简介快速的方式 快速解决 ：使用插件vue-clipboard2 快速实现功能一、安装插件npm install vue-clipboard2 --save二、全局注入（main.js）import VueClipboard from 'vue-clipboard2'Vue.use(VueClipboard)二、使用 <el-button type="success" size="small" class="page-btn" plai

原创 vue elementUI data-pick时间范围限制

vue elementUI data-pick时间范围限制需求：开始日期和结束日期都必须是今天之前；先选择开始日期，那么结束日期必须在开始日期之后，即只能选择开始日期之后的日期；先选择结束日期，那么开始日期必须在结束日期之前，即只能选择结束日期之前的日期；三个条件是【且】的关系。` script 代码//时间限制，符合日期先后顺序的实际情况 data() { return{ addDrillRecordRow:{ startTime:'',

原创 浅谈js宏观任务、微观任务

js运行机制分为同步异步，异步又分为宏观事件和微观事件；同步异步：js是一门单线程语言，因此js在同一个时间里只能做一件事，单线程意味着，如果在同个时间有多个任务的话，这些任务就需要排队，前一个执行完成才能执行下一个任务。①同步任务同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。②异步任务异步任务是指不进去主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行力，该任务才会进入主线程。③异步机制那么，Jav..

原创 解决elementUI radio默认不选中问题

解决elementUI radio默认不选中问题设置了默认值却不默认选中问题 原因如下：label=“0” 即为字符串0:label=“0” 即为数字0所以只需要把label前面的：去掉即可显示！

原创 微信小程序ios底部黑条自适应

微信小程序ios底部黑条自适应微信小程序ios底部黑条自适应解决方案微信小程序ios底部黑条自适应在苹果 iPhoneX 、iPhone XR等设备上，可以看到物理Home键被取消，改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况。解决方案在微信小程序上适配安全区域在app.jsonLaunch() { this.init()} init(){ wx.getSystemInfo({

原创 解决echart图表层级太高 cover-view无效的问题

解决echart图表层级太高 cover-view无效的问题首先在这里贴下微信小程序使用echart的流程：（注意：这里要下载最新版的ec-canvas这里附上链接[https://github.com/ecomfe/echarts-for-weixin]这个最新的链接并且解决了图表模糊的问题。）下面展示一些 echart使用案例。将legend的z设置成-1，将头部的cover-view的z-indez设置成99即解决了echart图表层级过高的问题。import * as echarts from