- 博客(81)
- 收藏
- 关注
RSS订阅原创 ESLint配置
ESLint配置ESLint 是一个ECMAScript/JavaScript 语法规则和代码风格的检查工具，它的目标是保证代码的一致性和避免错误。借助 ESLint，可将 静态代码分析 和 问题代码协助修复 集成到 编码、提交 和 打包 过程中，及早发现并协助修复代码中：有语法错误的部分不符合约定的样式准则的部分不符合约定的最佳实践的部分在项目开发中获得如下收益：在执行代码之前发现并修复语法错误，减少调试耗时和潜在 bug保证项目的编码风格统一，提高可维护性督促团队成员在编码时遵守
2022-04-02 15:29:16
3822
原创 indexedDB简单介绍
indexedDB一、其它几种前端存储：1、cookieHTTP cookie 通常也叫作 cookie，最初用于在客户端存储会话信息。这个规范要求服务器在响应HTTP 请求时，通过发送 Set-Cookie HTTP 头部包含会话信息。例如， 下面是包含这个头部的一个 HTTP响应 :HTTP/1.1 200 OKContent-type: text/htmlSet-Cookie: name=valueOther-header: other-header-value这个 HTTP
2021-05-30 20:56:44
2468
1
原创 git相关
一、生成ssh密钥Git ssh key 作用与配置。ssh指secure shell（一种安全的网络协议），git使用这种协议进行远程加密登录。ssh登录安全性由非对称加密保证，产生密钥时，一次产生两个密钥，一个公钥，一个私钥，在git中一般分别命名为id_rsa.pub, id_rsa。ssh方式单独使用非对称的秘钥进行认证和加密传输，和账号密码分离开来，不需要账号也可以访问repo。git基于多种传输协议，其中最常用的就是https和ssh。都是为了数据传输安全，那么设置ssh密钥的目的是
2021-05-27 20:39:23
132
原创 获取hostIp
动态获取主机IP地址，打开网页不再是localhost// 比如在vue.config.js中：这里返回的IPv4就是自己主机的ip地址，这里打开网页就不再是localhostconst os = require("os");const interfaces = os.networkInterfaces();function hostIp() { var IPv4 = null; if (process.platform === "darwin") { // Mac平台
2021-05-20 21:15:33
1034
原创 npm和yarn命令及几类npm依赖包
一、npm&&yarn1、安装nodejs就会有npm这个node package manager依赖包管理器；2、npm和对应yarn的常用命令：1. npm init、yarn init 初始化# 需要回答提问，或者回车键默认npm inityarn init# 直接使用默认配置npm init -f # npm init -yyarn init --yes # 简写 -y2. npm install 安装模块(通过 yarn add 添加依赖会更新 package
2021-05-11 16:44:46
805
原创 在Vue项目中使用svg sprite
在Vue项目中使用svg sprite一、什么是svg sprite？二、svg sprite对比其它几种图片的使用方法的优缺点：三、在项目中怎么使用？1、可以在iconFont官网批量下载svg图片。2、在src/icons/svg文件夹里面放需要使用到的svg图片文件，可以后续往里面新添加，不过需要再次启动项目编译之后，才能在项目中使用新加的svg图片。3、安装svg-sprite-loadernpm i svg-sprite-loader --dev4、配置vue.config
2021-03-22 13:35:21
340
原创 简单电脑装系统
装电脑系统：需要准备： 1、一个8G左右的U盘，作为U盘启动盘； 2、一个iso系统镜像；1、U盘启动盘可以在大白菜或者系统之家或者软件安装管家下载之后进行制作。制作U盘启动盘需要格式化U盘，所以请先备份U盘里面的文件；2、从MSDN 网站下载需要的系统镜像iso文件，将这个文件复制到U盘启动盘中，再将U盘插到需要安装系统的电脑上，开始或者重启是按BIOS键，例如惠普的是F9键，选择U盘启动，在虚拟桌面中进行系统安装，可以参考大白菜的示例进行安装；...
2021-03-21 14:54:23
75
原创 前端Mock数据
前端Mock数据一、时常面临的尴尬 前端开发依赖于后端接口数据，但是后台人员不足或者无法立即到位，前端迟迟不能开工，或者前端小哥哥、小姐姐自己参照ui设计图，完成对应的静态页面（没有数据交互），待后台人员到位，再进行二次开发，协助完成接口对接。二、mock数据1、什么是mock数据？前后端同时开发的时候，后端接口数据没有出来，前端可以mock假数据，模拟开发；2、mock数据的优势A 团队可以并行工作有了Mock，前后端人员只需要定义好接口文档就可以开始并行工作，互不影响，只
2021-03-01 23:29:31
1117
原创 vuex的简单用法
vuex 梳理什么是vuexvuex 是为vue 应用程序开发的状态管理模式，简单的理解就是公共变量管理工具，用于组件间通信vuex解决了什么问题多个组件依赖于同一状态时，对于多层嵌套的组件的传参将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。来自不同组件的行为需要变更同一状态。以往采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。什么时候用到vuex当项目遇到以下两种场景时多个组件依赖于同一状态时来自不同组件
2021-02-28 17:05:22
131
原创 用canvas简单画一个时钟
<style> body { text-align: center; } #canvas { background-color: powderblue; }</style><body> <!--设置画布高和宽 --> <canvas id="canvas" height="400px" width="400px"></canvas></body
2021-02-01 22:29:31
75
原创 webpack简单配置
webpack简单配置1、初始化（获得package.json文件）npm init -y2、安装webpack 开发依赖 ，还需要webpack-cli@为选择特定版本npm i webpack --save--dev或者使用npm i webpack -D3、安装babel 以及ES2015和stage-0预设（-0的范围最大，-4最精确），将ES6~ES8转换为ES5，以便被大多数浏览器所兼容、识别。npm i babel babel-core babel-loader -Dn
2020-11-22 23:50:58
95
原创 bus事件总线
// bus.jsimport Vue from 'vue';export default new Vue();// main.jsimport $bus from 'bus.js'Vue.prototype.$bus = $bus;// 父组件this.$bus.$emit('eventName','参数')// 子组件this.$bus.$on('eventName',function() {// 一些操作})
2020-11-17 15:25:10
395
原创 遍历对象、可枚举
// 1、 a in b// 判断a这个键是不是存在于b或者b的原型中(a即b和b的原型上的“所有”key)// for in // 当前对象加该对象原型上的所有可以“枚举的”的key// hasOwnProperty// 获取当前对象直接包含的key// myObject.hasOwnProperty('a');// Object.keys(myObject)// 获取当前对象直接包含的key// Object.getOwnPropertyNames(myObject)// 获
2020-11-16 22:03:54
107
原创 滚动条设置
// 全局配置滚动条样式// 设置滚动条轨道和滑块的宽度(两者只能同宽)&::-webkit-scrollbar { width: 6px; /*滚动条宽度*/ height: 6px; /*滚动条高度*/}/*正常情况下滚动条滑块*/&::-webkit-scrollbar-thumb { background-color: #eff0f1; border-radius: 6px; -webkit-box-shadow: inset 1
2020-11-15 12:08:18
379
原创 v-bind=“attrs“、v-on=“$listeners“
1、v-bind="attrs"的作用：2、比如这里有父组件、子组件、孙子组件三级3、父组件将a,b,c,d,e五个属性通过属性绑定的方式传给子组件，子组件里面可以不用props来接收，而使用 this.$attrs[属性名]来使用父组件的属性，在子组件里面的孙子组件身上写v-bind="attrs"，在孙子组件里面就可以通过this.$attrs[属性名]来使用父组件的属性；如果子组件在props里面接收了来自父组件绑定的属性，那么孙子组件的this.$attrs里面就没有这几个属性，只剩下父组件里面
2020-11-05 19:11:14
2925
原创 鼠标拖动盒子
简单小例子：<div id="dropArea"></div>#dropArea { width: 300px; height: 300px; background-color: brown;}// js部分let dragable = false;let offsetX = 0;let offsetY = 0;const dropDom = document.getElementById("dropArea");dropDom.style.positio
2020-11-04 22:56:09
164
原创 在项目中配置rem
在项目中配置rem一般在最外层的index.html中写一个自执行函数// 根据屏幕分辨率来确定rem基准以适应不同屏幕：// 这里1920以下的是 100px = 1rem(function(window) { var availWidth = window.screen.width; if(!availWidth) { return false; } availWidth = availWidth < 1920 ? 1920 : availWidth; // 这里parse
2020-11-04 22:16:09
236
原创 点击下载word或者其他格式文档
点击下载word文档将要下载的内容传给后端，后端返回内容的流数据，前端点击触发接口并下载doc文件this.$http.get('bigData-api/fire/fireAnalyseReportDownload',{ headers: { // 请求头 contentType: 'application/json;charset=UTF-8', re...
2020-04-19 21:15:22
362
原创 nginx安装、配置文件
认识Nginx：1、nginx基本概念：1、nginx是什么？a: Nginx 是一个高性能的http和反向代理的服务器，特点是占有内存较少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好。b: Nginx 专为性能优化而开发，性能是其最重要的考量，实现上非常注重效率，能经受高负载的考验，有报告表明能支持高达 50000个并发连接数。详见：https://...
2020-02-29 20:09:15
1534
原创 初学java1
1、进制转换：常用的有16、10、8、2进制除了自己手动计算（辗转相除、乘以2的多少次方等等）外，最便捷的是使用windows电脑里面的计算器，可以选择程序员模式。2、计算机的存储单元：数字0或1占据一位，成bit计算机最小的存储单位为字节Byte，一个字节 = 8位(1Byte = 8bit)1KB = 1024Byte1MB = 1024KB1GB = 1024MB1TB =...
2020-01-15 23:23:48
92
原创 React的vscode插件
1、ES7 React/Redux/GraphQL/React-Native snippets2、Fullstack React/React Native snippets3、JS JSX Snippets4、React-Native/React/Redux snippets for es6/es75、Simple React Snippets6、TypeScript Importer...
2020-01-05 21:38:33
593
转载 js数组原型方法
转载“流sand”博主文章:js数组原型方法主要有以下一些：join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() （ES5新增）forEach() （ES5新增）map() （ES5新增）filter() （ES5新增）eve...
2019-11-19 19:10:39
208
原创 vue做项目时的一些备忘点
一、vue的vue.config.js文件配置：（路径别名+反向代理）//在项目根目录下建vue.config.js文件//webpack配置（反向代理+路径别名配置）const path = require('path')module.exports = { devServer : {//反向代理配置 proxy : { '/ajax':...
2019-10-06 20:51:12
139
原创 vue的深入响应式原理、数据驱动原理、双向数据绑定原理解释
vue的深入响应式原理、数据驱动原理、双向数据绑定原理解释1、深入响应式原理：- 数据模型仅仅是普通的javascript对象，而当你修改它们时，视图会更新2、数据驱动原理：- 数据改变，视图改变3、双向数据绑定原理：- 我们使用v-model这个指令来实现，数据改变，视图改变；视图改变，数据也随之改变。公共答案部分：- vue是通过数据劫持和发布订阅来实现这一功能的。数据劫...
2019-09-25 18:12:53
751
转载 怎么保证前端的代码质量？
怎么保证前端的代码质量？一般的团队开发，对代码质量是有较高要求的，对于有代码洁癖的人来说，乱糟糟的代码肯定是无法接受的。如何保证前端的一个代码质量呢？我们一般从这四个角度考虑：1、制定编码规范2、开发工作流lint风格强制检查3、定期Code Review（代码审查）4、单元测试详述请参考掘金上面一个大佬的文章：链接：如何保障前端代码质量...
2019-09-19 10:29:49
892
原创 js数据类型划分
js数据类型划分第一种：1、初始数据类型： - Number - String - Null - Undefined - Boolean2、引用数据类型Object (Math、Date、Function、Object、RegExp、Array)第二种：1、基础数据类型：Number、String、Boolean2、负载数据类型：Object3、特殊数据类型：Nu...
2019-09-15 16:05:09
183
原创 Flux流程
Flux流程1、要想使用FLux架构思维，需要通过一个工具进行使用， 这个工具就是flux2、安装 flux $ yarn add flux3、在src目录下 新建store目录，里面新建index.jsstore有两个功能存储数据当数据发生改变时，视图要进行更新 （ 当前组件中的state发生了改变，从新从store中获取数据，要想重新复制，那么要通过事件的发布，订阅 ）...
2019-08-25 17:11:05
199
原创 React配置反向代理、路由（展示、导航、组件）、better-scroll、1px兼容、数据请求时loading效果、react-hooks、lodash、immutable.js
React的一些点1、配置反向代理：在 src 目录下新建一个名为setupProxy.js的文件（必须是这个文件名），先要安装cnpm i http-proxy-middleware -D,再const proxy = require('http-proxy-middleware')引入。const proxy = require('http-proxy-middleware')mo...
2019-08-25 16:04:51
1026
原创 Vue知识点小小小总结
1、原理性：vue双向数据绑定：我们使用v-model这个指令来实现，数据改变，视图改变，视图改变，数据也随之改变，vue是通过数据劫持和订阅发布来进行深入响应的，数据劫持指的是，vue通过es5的Object.defineProperty属性对data选项中的数据进行getter和setter设置，订阅发布指的是vue通过之定义自定义事件将data的变化反映到视图上去，vue通过o...
2019-08-22 09:03:58
303
原创 React之高阶组件
React之高阶组件import React,{Component,Fragment} from 'react'import Test1 from './Test1.js'import Test2 from './Test2.js'/** 1、高阶组件：是一个函数，接收一个参数，参数是一个组件* 2、高阶组件的作用：让外层函数帮助内层组件完成任务，内层组件直接使用结果* 3、一些共...
2019-08-17 14:51:17
102
原创 React的组件通信方式
React的组件通信方式1、父子组件通信实现途径：通过属性绑定的形式（在父组件的模板中子组件的标签上，自定义属性，子组件通过props来接收）这里由于render(){ }函数是触发两次(初始化渲染时一次，数据修改渲染时再一次)，所以，如果是发送请求得到数据，这里要先判断这个数据有没有，用短路逻辑，如果有，再渲染，如果第一次没有，比如就定义了这个状态数据，而值为null，渲染就会报错。父...
2019-08-17 09:34:53
201
原创 ref绑定、class、value值、列表渲染、dangerouslySetInnerHTML
1、一般针对输入框：推荐用第二种<input type = "text" ref = "inp"/>通过this.refs.inp可以访问这个input框即：this.refs.inp.value就是input框里面的内容<input type = "text" ref = { el => this.inp = el }/>通过el就会少一层，el代表的...
2019-08-16 20:47:39
682
原创 React的组件创建、样式写法、数据的状态和属性、属性验证prop-types
React的组件创建、样式写法、数据的状态和属性、属性验证prop-types一、组件的创建1、函数式组件（无状态组件 prueCcmponent）import React,{Fragment} from 'react'function Comp(){ return ( <Fragment> <div>content</di...
2019-08-16 09:24:28
839
转载 前端框架级之数据请求的axios和fetch方法
前端框架级之数据请求的axios和fetch用法此之前，看到了Vue，了解到了前端的3种框架级的数据请求方法：axios（第三方库）fetch（js原生）Vue.resource（这是Vue自己封装使用的类库，但比较久以前，其作者就已经放弃更新了，Vue.resource的用法和axios相似度很高 >90%,Vue2.0基本上用的都是前两者了，Vue.resource有...
2019-08-06 14:44:46
456
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人