qq_37833745的博客

原创 Electron【构建桌面应用程序】

访问地址

原创 npm link

npm link的解释

原创 vue@cli4 和 webpack5【实现自适应px-rem转化】

1: 项目目录结构：2 ：项目简单介绍 如上图可看出：该项目是由 vue@cli4 构建的，使用 webpack5 来打包的，3： 想要实现 本地编译时 和 上线后，适配所有pc 端，步骤1： 安装2个插件：autoprefixer : 它可以解析CSS文件并且添加浏览器前缀到CSS内容里和postcss-pxtorem: 将px 转化为 remamfe-flexible：是配置可伸缩布局方案，主要是将1rem设为viewWidth/10。npm...

原创 vue3.0

一：vue3.0 介绍1：源码组织方式的改变源码采用 TypeScript 重写【会有格式类型匹配提示】 使用 monorepo 管理项目结构 2：Composition API 【vue3.0 采用Composition API ，vue2.0采用Options API】RFC(Request For Comments) https://github.com/vuejs/rfcs Composition API RFC https://composition...

原创 10个常见安全网络攻击及预防【黑客防不胜防】

安全攻击https://mp.weixin.qq.com/s/muRAhPmK3sj18SV_LzkQbg

原创 API开发调试神器【前端、后端，测试都爱它】

备注：15人以下团队免费的 培训机构和高校也是免费https://mp.weixin.qq.com/s/l2yEBQ9tNhSdeb_JAwmaTQ

原创 crypto-js【AES-ECB-128】加密结果 与 crypto不一致

重点提要：crypto-js 应对key进行 md5 散列AES加密规定了密钥长度，crypto通过md5的方式使key设为了定长，所以crypto-js（包括java）为了与crypto结果保持一致，应当对key进行md5散列，且散列结果不为字符串，而是数组（即WordArry，类比Java中的byte[]，Node.js中的Buffer），以下附上crypto-js、crypto、java三端AES-ECB-128加解密代码：1、crypto-js（web前端、小程序）impo...

原创 webpack【插件---持续更新】

webpack4通过mini-css-extract-plugin分离css文件再通过optimize-css-assets-webpack-plugin压缩 css

原创 前端常用算法【持续更新】

算法

原创 一个故事讲完https

原创 让我们了解了解【闭包】

闭包的应用场景：应用场景一: 典型应用是模块封装，在各模块规范出现之前，都是用这样的方式防止变量污染全局。var Yideng = (function () {// 这样声明为模块私有变量，外界无法直接访问 var foo = 0; function Yideng() {} Yideng.prototype.bar = function bar() { return foo; }; return Yideng;}());应用场景二: "在循环

原创 webpack之plugins 【常用插件集合】

1: 提取 “公共类库/打包公共代码” 插件 在基于Webpack构建的多页面应用中，每个页面配有唯一的入口文件，即使多个入口使用了相同的类库（比如jQuery），也会各自打包进自己的js文件中，这样无疑增加了额外的代码量。传统的前端项目并没有这样的问题，因为那个时候没有模块打包这样的过程，多个页面会引入公共的静态资源。 Webpack的CommonsChunkPlugin可以分析出各个入口文件中引用的公共代码片段，然后将其提取出来，作为公共类库供各个入口文件使用plugi...

原创 webpack-dev-server【devServer属性配置】

前言： DevServer是webpack开发服务器。webpack-dev-server： 是一个本地开发服务器，会自动监听变化，自动打包构建，自动更新刷新浏览器特点：不会产生dist文件，将打包结果暂时存在内存中，内部的http-sever访问这些文件并读取数据，发送给浏览器 减少磁盘的读取，提高构建效率写法：在webpack.config.js文件中，通过属性devServer: { } 设置与 webpack-dev-server相关的配置安装：下载安装...

原创 常用的正则校验集合

1: 8-20位字母数字特殊字符组合： '^(?![a-zA-z]+$)(?!\\d+$)(?![!@#$%^&*]+$)[a-zA-Z\\d!@#$%^&*]{8,20}$'2: 常见 input 正则english /^[a-zA-Z]$/ 英文 num /^[0-9]*$/ 数字 phone /^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/ ...

原创 VUE项目使用VUE原型构建【VUE原型达到开箱即用的模式】

VUE原型构建 以下为具体搭建项目流程 1. 克隆项目git库 2. 创建subapps/* 项目分支 创建项目分支格式如下 subapps/yourproject/v1.0.0 如：《登录绑卡项目》 项目名即为：subapps/H5Login/v1.0.0 ...

原创 H5遇到的那些坑 ( 持续更新 )

1:原生js (es5语法 和 jquery)【jquery使用jsonp进行ajax发送请求，在同时发送多个请求时，响应结果会乱】答：jquery版本1.10.2 ，A请求应当响应 RA，B请求响应 RB，但是偶尔出现 A请求响应了RB。导致响应结果乱了，原因是jquery会在window对象上定义一个变量（window["jsonp1505717931752"]），变量是以时间戳来定义的，即使定义了时间戳，全局变量也会存在冲突问题，导致响应结果乱。解决办法：在$.ajax()方法内使用： ..

原创 Fiddler抓包远程调试篇

Fiddler抓包远程调试篇 由于部分同学没有mac电脑或者其他条件限制，不方便在ios手机上调试，或者在4.3版本的安卓手机以下在客户端大厅内不能debug，我们只能采用fiddler抓包进行远程调试。 远程调试使用weinre，weinre是一款非常好用的远程调试工具。功能与网页浏览器的开发者工具基本类似，但这个工具更适合用于移动端web的调试。抓包的作用：1.可使用的电脑：windows或mac电脑调试android和ios手机2.可调试的手机有(所...

原创 h5远程调试

H5开发远程调试篇 由于部分同学对远程调试不太了解，了解远程调试后，可以直接避免打alert来看数据的变化，直接在chrome浏览器内打断点，然后查看每一步数据的变化，可提高开发效率，定位问题快等优点，H5发布生产后也可通过debug调试来定位问题，快快来看看我们在各个平台是如何debug，加入我们吧！以下调试方式包括：微信内安卓、浏览器android和IOS的4种调试1、微信----安卓远程调试1、TBS studio调试（第二代）推荐使用1.移动调试链接：4042、微...

原创 前端初始化工具vue-cli：使用指南

vue-cli-plugin-orange1、准备工作首先我们需要查看当前是否安装官方Vue/cli工具，若未安装，直接完成按官网指导下载最新版即可。若Vue/cli版本低于3.0版本，需要升级版本才能实现以下功能。Vue/cli工具官方地址：http://​ https://cli.vuejs.org/zh/ ​2、模板使用克隆地址： git clone [email protected]:jqn-room/case-code.git#vue-cli-plugin-orange/mas..

原创 利用http-server启动本地服务

简介：http-server 是一个简单的零配置命令行HTTP服务器, 基于node.Js前提：本地安装node适用场景：1、测试本地页面，在手机上的效果。2、在测试大厅里，通过url去调试，避免zip的方式。注意事项：电脑和手机必须在同一网段安装步骤：1、全局安装http-server.打开命令行：执行 npm install -g http-server2、在目标目录下开启命令行：输入命令http-server，如下图说明启动本地服务成功....

原创 vue-axios

vue.cli项目封装全局axios，封装请求，封装公共的api和调用请求的全过程_JCat的博客-CSDN博客_vue封装axios全局使用

原创 vue组件缓存

动态组件在切换的过程中，组件的实例都是「重新创建」的，而我们需要保留组件状态。为了解决这个问题，你还需要使用 vue 内置组件 <keep-alive>。<!-- 组件内部--><keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件，比如 Home！ --> </router-view></..

原创 image图片懒加载

1:图片属性loading="lazy"延迟请求加载资源// loading可选值: lazy(图片延迟加载) / eager(默认值，立即执行)<img src="deathghost.jpg" loading="lazy" alt="新码笔记" />// MORE ...2: 图片延迟加载jquery插件【imgLazyLoading】 此案例源码撮这里????<!DOCTYPE html><html lang="en"><head&

原创 Vue-【图片上传组件】

<template> <div class="upload"> <div class="uploadFile"> <div class="previewBox"> <div class="uploadPreview" v-if="uploadPicPreview"> <ms-viewer :imgUrl="'data:image/jpg;base64,' + uploadPicPr.

原创 Vue 混入mixin

案例1: 项目中使用混入：预留信息功能mixin.jsexport default { computed: { cacheKey () { console.warn('cacheKey', this.$store.getters.merchantCode) return 'MCT_PROD_RESERVED_INFORMATION_' + this.$store.getters.merchantCode }, inputValue () { .

原创 JS 基础公共方法封装

1: 深拷贝// 函数库const _ = {}// 1: 判断数据类型_.type = function (obj) { return Object.prototype.toString.call(obj).replace(/\[object\s|\]/g, '')}// 2: 深拷贝_.deepCopy = function (obj) { let buf let type = _.type(obj) switch (type) { case 'Array':

原创 清除浮动方式 + css属性继承 + 3栏布局方式+ （::after区别:after）

1：清除浮动父元素加 overflow:hidden空元素设置 在浮动的盒子之下，放一个标签，在这个标签中使用 clear: both:after伪元素添加了clear:both2: css属性继承 font类： font-size，font-weight, font-family text类: text-align ,text-indent color: color3: 三栏布局方式 1: 自身浮动法：左边左浮动， 右边右浮动，中间放最...

原创 z-index的层级关系 和css的层叠上下文

z-index属性： 指定了元素与元素之间的z轴上的顺序，而z轴决定元素之间发生覆盖的层叠关系默认值： auto，可以是正负值参考资料：https://www.jianshu.com/p/5cbbd0638449

原创 Vuex的理解

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。核心概念5个1: state：数据源 相当于多个组件之间的公共存储空间const Counter = { template: `{{ count }}`, computed: { count () { return this.$store.state.count } }}2: getter： 对state中存储的数据进行过滤操作（不是改变）computed: { doneTo

原创 小程序-案例1-【礼品兑换】

源码链接地址获取撮这里????页面效果：演示链接撮这里

原创 apply 和 call 的区别

apply 和call 都是重新定义this的指向的apply():有2个参数，第一个参数时上下文，第二个参数：参数组成的数组，如果上下文是 null，则用全局对象代替 如：apply(this, [1,2, 3, 4])call()： 第一个参数是上下文，后续是实例传入的参数序列如：function call(this, 1, 2, 3)...

原创 link 和 @import的区别

link： 1: link属于XHTML 标签，可以引入css文件 和 定义RSS定义rel<link rel="stylesheet" type="text/css" href="theme.css" /> 2: 页面被加载时，link会同时被加载 3:<link> 没有兼容性@import： 1: 只可以用于加载 CSS 2: @import引入的 CSS 会等页面加载完之后才会加载， ...

原创 奇葩console.log

原创 【6】线程与进程 的 区别

一个程序至少有一个进程，一个进程至少有一个线程 【进程 > 线程】 线程的划分尺度小于 进程，使得 “多线程” 程序的 “并发性高“ 进程在执行过程中有自己单独的内存单元，多个线程共享内存，从而极大的提高了程序的运行效率 每个独立的 线程 都有一个 “程序运行的入口”，顺序执行 序列 和 程序的出口，但是 线程不能独立执行，必须 “依存在应用程序“ 中，由应用程序提供多个线程执行控制 多线程的意义在于一个应用程序中，有多个执行部分可以同时执行，但操作系统并没有将多个 线程 看作...

原创 协议-【5】Websocket协议

概念： Websocket是HTML5出的东西（协议），也就是说HTTP协议没有变化，但HTTP是不支持持久连接的（长连接，循环连接的不算），Websocket是一个持久化的协议，相对于HTTP这种非持久的协议来说，可以把 WebSocket 看成是 HTTP 协议为了支持长连接所打的一个大补丁Websocket只需要一次HTTP握手，就可以做到源源不断的信息传送了。（在程序设计中，这种设计叫做回调，即：你有信息了再来通知我，而不是我傻乎乎的每次跑来问你）， WebSock...

原创 浏览器-【4】TCP 通信：三次握手，四次挥手

TCP协议是面向连接的通信协议，即在传输数据前先在发送端和接受端建立逻辑连接，然后再传输数据，它提供了2台计算机之间可靠无差错的数据传输三次握手????在TCP连接中必须要明确 “客户端” 和 “服务端”，由 “客户端” 向 “服务端” 发出连接请求，每次 “创建连”。接都要经过三次握手????第一次握手：客户端向服务端发送一个带 SYN 标志的数据包，等待服务端确认第二次握手：服务端向客户端回传一个带 SYN/ ACK 标志的数据包，通知客户端收到了 “连接请求”第三次握手：客户端再次

原创 网络与安全-网络

1:HTTP 2.0 与 HTTP 1.0 的区别？ http2.0 采用二进制格式而非文本格式 http2.0 是完全多路复用的，而非有序并阻塞的（只需一个连接即可实现并行，使用报头压缩） http2.0 降低了开销，让服务器可以将响应主动 “推送” 到客户端缓存中 http状态码：解析：状态码 类别 描述 1xx Informational（信息状态码） 接受请求正在处理 2xx Success（成功状态码） ...

原创 网络与安全-安全

1: 简要描述 HTTPS 的安全机制，描述 Http2 和 Https 的关系 Https 实现原理 HTTPS 在通讯过程中的原理，总共分为 8 步 : 1: 客户端发起 HTTPS 请求 2: 服务端的配置 3: 传送证书 4: 客户端解析证书 5: 传送加密信息 6: 服务端解密信息 7: 传输加密...

原创 null 和 undefined 的区别？

首先Undefined和Null都是基本数据类型，这两个基本数据类型分别都只有一个值，就是undefined和null。undefined代表的含义是未定义，null代表的含义是空对象。 一般变量声明了但还没有定义的时候会返回undefined， null主要用于赋值给一些可能会返回对象的变量，作为初始化。undefined在 js 中不是一个保留字，这意味着我们可以使用undefined来作为一个变量名，这样的做法是非常危险的，它会影响我们对un...

原创 浏览器-【2】跨域

因为浏览器出于安全考虑，有同源策略。也就是说，如果协议、域名或者端口有一个不同就是跨域，Ajax 请求会失败。我们可以通过以下几种常用方法解决跨域的问题1: JSONP JSONP 的原理很简单，就是利用<script>标签没有跨域限制的漏洞。通过<script>标签指向一个需要访问的地址并提供一个回调函数来接收数据当需要通讯时。<script src="http://domain/api?param1=a&param2=b&...