自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(35)
  • 收藏
  • 关注

原创 vue-cli2 配置多入口

实际业务需求中需要实现一个vue工程中两个分离的入口及两个风格路由内容均不相同的系统,简单的说是一个工程两个项目,具体实现如下

2023-02-15 17:10:27 1032

原创 Vscode常用快捷键

1、Ctrl + F 本页搜索内容2、 Ctrl + Shift + T 重新打开关闭的页面3、Ctrl + T 通过匹配文本打开指定文件4、Ctrl + ` 打开终端5、Ctrl + Alt +右箭头 并排显示两个标签页窗口(最后一个和倒数第二个)6、Ctrl + Shift +右箭头 逐个词依次扩大选择内容7、Shift + Alt + 向下箭头或向上箭头 同时操作多行8、Ctrl + F2 同时操作该文件中出现的所有某个单词内容9、Alt + 向上箭头/向下箭头

2021-04-13 17:21:13 241

原创 js的event loop/js内存泄漏

js的event-loop机制event-loop主要有三部分组成 执行栈,消息队列、微任务队列执行优先级是 执行栈>微任务队列>消息对系列js是单线程语言,event loop开始时会从全局栈开始一行一行执行,遇到函数调用,则压入执行栈执行,叫做帧,当函数返回后会从执行栈弹出,直到函数执行完毕,执行栈清空。在这里setTimeout/setInterval/fetch函数的回调函数进入消息队列、promise/async await执行的异步函数的回调函数进入微任务队列等待执行。当执行栈

2021-04-01 22:23:19 171

原创 基础考点测试题

1、以下代码执行结果:var tx=[1,4,5];tx=[].concat(tx)console.log(tx.toString())答:1,4,5考点:toString()的用法及concat()用法2、parseInt(‘4f’,10)和parseInt(‘f4’,10)的值是否一样?答:不一样 parseInt(‘4f’,10)=4 parseInt(‘f4’,10)=NAN3、以下代码输出内容是什么?var a=1;a='f4';a=[3];a=parseFloat(a,

2021-04-01 09:02:46 159

原创 面向对象编程 (二)

一、构造函数的继承一个构造函数继承另一个构造函数的步骤1、在子类的构造函数中调用父类的构造函数2、让子类的原型指向父类的原型代码示例该示例为n继承 构造函数m 之后a为实例化n一个对象,则a同时拥有m和n的属性第二种写法重点代码://第一种方法:function n(){ m.call(this) //继承m构造函数 this.color="red"}//第二种方法:function n(){ this.base=m; //继承m构造函数的属性 t

2021-03-30 23:24:28 80

原创 Object常用方法

1、Object.getPrototypeOf() 返回参数对象上的原型,获取原型对象的标准方法。三种特殊原型2、Object.setPrototypeOf() 为参数对象设置原型并返回改参数对象,它接收两个参数第一个是现有对象 第二个实原型对象new命令可以用Object.setPrototypeOf()进行模拟3、Object.create() 该方法生成的对象继承了它的原型对象的构造函数语法Object.create(Object,{item1,item2})其中Objec

2021-03-30 15:38:53 2545

原创 面向对象编程(一)

一、面向对象编程的概念面向对象编程(Object Oriented Programming 简称OOP)是目前主流的编程模式。它将真实世界各种复杂的关系,抽象为一个个对象,然后由对象之间的分工和合作,完成对真实世界的模拟。每一个对象都是功能中心,具有明确分工,可以完成接收信息、处理数据、发出信息等任务,可以复用,还可以通过继承机制进行定制。因此面向对象编程具有,灵活、代码可复用、高度模块化的特点。更适合多人合作的大型软件项目。二、构造函数js语言对象体系基于构造函数(construtor)和原型链

2021-03-30 13:49:48 771

原创 Object方法属性描述对象

1、属性描述对象概念JavaScript 提供了一个内部数据结构,用来描述对象属性,控制它的行为。这个内部数据结构就称为属性描述对象。每个属性都有自己对应的属性描述对象,保存该属性的一些原信息。例{ value:'111',//默认是undefined writable:true, //值为true或false value值是否可改变 enumberable:true, // 该属性是否可遍历 设置false则执行for...in循环或者Object.keys则会跳过该属性值 config

2021-03-29 22:42:03 335

原创 js 中window对象和screen对象

window对象表示浏览器中打开的窗口常用属性window.closed 窗口是否已被关闭window.opener 返回对创建此窗口的窗口应用window.innerHeight 窗口文档显示区高度window.innerWidth 窗口文档显示区宽度window.localStroage 浏览器本地存储的键值对(没有过期时间直到手动删除)window.sessionStroage 浏览器临时窗口保存回话数据 ,窗口关闭则清空window.locationhash URL 锚部

2021-03-29 16:47:21 547

原创 js基础----常见数组对象方法(二)

1、entries() 。返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。注:根据返回的对像调用next().value方法获取键值对组成的数组例var m=['111','222','333'];var x=m.entries();console.log(x.next().value);console.log(x.next().value);console.log(x.next().value);控制台输出2、every() 检测数组所有元素是否符合指定条件(

2021-03-29 14:17:28 250

原创 js基础----常见数组对象方法(一)

1、数组前面增加元素 unshift()2、数组后面增加元素 push()3、合并数组 concat()4、数组前面删除一个元素 shift()5、数组后面删除一个元素pop()6、数组截取指定位置元素返回新数组 slice(start,end)7、数组在指定位置新增元素 改变原数组splice(index,0,item)替换splice(index,1,item)8、数组在删除元素 改变原数组splice(index,howMany)9、查找元素在数组中首次出现的位置 indexOf()

2021-03-26 17:06:33 112

原创 面试常问面试基础层知识汇总3

对闭包的理解闭包是一种保护私有变量的机制,在函数执行时形成一个私有的作用域,保护函数里面的私有变量不受外界干扰,只管的说就是形成一个不销毁的栈环境对小程序和普通APP内嵌H5的区别理解小程序和APP中的H5本质上都是webview加载的,但小程序的执行js代码是通过基于微信客户端的底层代码实现的,而h5页面则是直接由浏览器执行解析的js文件,所以小程序中data不适合储存太多数据,当数据变化,底层js调用频繁会影响小程序性能,严重时会导致小程序崩溃ES6的新特性一 var /let/const的区

2021-03-25 22:31:22 72

原创 面试2

对MVVM的理解MVVM是Model-View-ViewModel的缩写。 它借鉴了桌面应用程序的MVC思想,在前端页面中,把Model用纯JavaScript对象表示,View负责显示,两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来,还负责把View的修改同步回Model。数据双向绑定原理所谓的双向绑定,就是view的变化能反映到ViewModel上,ViewModel的变化能同步到vie.

2021-03-23 22:16:36 83

原创 koa+mysql项目中Sequelize配置

项目涉及到的文件第一步配置自己项目数据库的基础文件config下的devConfig.js (此处名字不重要,根据自己的实际情况即可)var devConfig = { environment: 'dev', data:{ host: 'localhost',// 主机名 username: 'root', // 用户名 password: '123456', port: '3306', // 端口号,MySQL默认3306 database: 'testnode',// 使用

2021-03-09 17:10:38 320

原创 koa连接mysql数据库并进行简单增删改查

连接数据库初级菜鸟,为图方便暂时在路由中配置数据库未使用连接池 ,路由文件const mysql = require('mysql') //引入数据库插件const koaRouter = require('koa-router');const router = koaRouter();//连接数据库const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: '123456

2021-02-23 18:32:06 1109

原创 koa 上传文件 简单处理 (上传、接收,保存)

前端文件上传(两种)(一) element UI组件<el-upload class="avatar-uploader" action="/api/image/upload" multiple :show-file-list="true" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> <img v-if="form.imageUrl" :src="form.imageU

2021-02-23 18:07:35 3769 5

原创 windows安装及卸载mysql数据库及解决Navicat链接报错

安装mysql1.下载mysql安装包,解压到要安装的目录,打开对应的mysql目录 例我的解压目录为D:\testSql\mysql-8.0.22-winx64 则进入D:\testSql\mysql-8.0.22-winx642.新建my.ini文件 内容如下[client]# 设置mysql客户端默认字符集default-character-set=utf8 [mysqld]# 设置3306端口port = 3306# 设置mysql的安装目录basedir=D:\\testS

2021-02-03 16:47:21 209

原创 从0到1搭建koa服务端框架

koa框架和express的区别express:包含一个完整的应用程序框架 ,有路由和模板等功能 ,占用空间比较庞大koa:Koa模块是中间件内核,模块化成度更高,占用内存小,运行快从0到1搭建express框架初始化pakage.jsonnpm init安装依赖将一下代码粘入 pakage.json中后执行npm install"koa": "^2.13.1","koa-bodyparser": "^4.3.0","koa-onerror": "^4.1.0","ko

2021-02-02 17:37:48 188

原创 简单封装npm插件

因为业务需要研究一下封装插件一、新建一个webpack-simple项目npm install -g @vue/cli-initvue init webpack-simple ‘listIcon’一路回车二、src下新建lib文件夹存放业务代码三、修改配置文件修改webpack.config.js文件配置修改index.html文件配置 .gitignore 文件去掉dist/pakage.json文件配置 框中自己的业务需要修改 需要与自己的git地址绑

2021-01-28 16:18:55 609

原创 安装手机端调试工具vConsole

在public里面的index.html中header插入以下代码 <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>下面添加js代码<script type="text/javascript"> let vConsole = new VConsole();</script>就是这么简单,完毕!效果如下...

2021-01-26 11:12:53 933

原创 环信3即时通信——web端sdk简单集成(一)(文本消息)

环信3即时通信——web端sdk简单集成实现简单的登录/文字发送/获取好友列表/接收文字消息,(本文章只为简单未使用vuex,消息记录保存在本地localstorage里面)一、安装sdknpm install easemob-websdk二、utill配置文件具体内部代码因EMedia_x1v1_3.4.1.js可以直接在demo中拿到内部代码不在粘贴WebIMConfig.js// for react native// var location = {// protoc

2021-01-21 18:33:09 735

原创 小程序封装自定义组件及父子组件之间的通信

编写子组件(以弹出框为例)xml<view class="popbg" wx:if="{{showPop}}"> <text>{{popText}}</text></view>css:.popbg{ width: calc(80% - 2rem); margin: 2rem 10% 0; padding: 0.7rem 1rem; background: #fff; border: 1px solid rgb(0,255,0

2021-01-14 14:26:56 165

原创 xlsx导出表格文件

安装相关依赖及插件npm install xlsxnpm install file-saver script-loader将以下工具js文件放置在自己的工具文件夹下/* eslint-disable */require('script-loader!file-saver');require('script-loader!xlsx/dist/xlsx.core.min');function generateArray(table) { var out = []; var ro

2021-01-13 11:46:02 417

原创 从输入网址到首屏加载完成流程

网页加载过程输入资源地址(地址栏输入、页面跳转、页面加载)发起请求==> 浏览器查找本地有无缓存可用( 搜索自身的 DNS 缓存 - 搜索操作系统自身的DNS 缓存 - 读取本地的 HOST 文件 )==>浏览器向 DNS 服务器发起解析请求==> 域名解析服务器查询IP地址(先查缓存,缓存没有向运营商迭代发送请求查询,查询到结果后缓存到本地再一层层返回结果)==> 浏览器拿到IP地址后发起TCP请求 完成三次握手==> 浏览器发送HTTP请求索要网页 创建端口

2020-12-29 16:01:10 207

原创 关于面试中遇到的vue框架基层原理及平时模糊的概念知识点总结(面试一)

前端面试题总结对于最近面试中的遇到的常问框架级原理方面问题做了个总结,还是有些收获的,从自学前端至今已有几年工作经验的我,总是致力于能解决问题,没有重点关注过原理方面的我还是有所收获的。所谓我本对此并无所知,问的人多了便知道了,本对此认识的模棱两可,问的多了我便清楚确定以及肯定了。望跟同我一样的小伙伴们一同进步!问题一、对于VDOM的原理的理解及key值的作用在传统的开发模式中操作dom时,浏览器会将构建DOM树的流程从头到尾的执行一遍,如果一次要操作5个dom节点,浏览器就会将构建DOM树的流程一遍

2020-12-26 23:39:37 136

原创 vue项目换肤功能

theme.scss部分// 默认主题$default-theme : ( base-color: #ddd, border-color: #000);//我的主题$my-theme : ( base-color: red, border-color: red);//定义映射集合$themes: ( default-theme: $default-theme, my-theme: $my-theme);//遍历生成对应样式表@mixin base-backgro

2020-12-24 17:36:29 526 5

原创 input在移动端不容易获取焦点问题及获取焦点后Android手机键盘弹起覆盖输入框问题解决

给input包裹一层父级div 并添加点击事件使input获取焦点html代码<div class="inputBox" @click="inputClicked('activeInput')"><input v-model="activeChecked" @focus="androidFocus" ref='activeInput' /></div>js方法:androidFocus(){ //此处获取本地存储UA为通过 navigator.userAgen

2020-12-24 13:16:33 588

转载 移动端开发常用到的问题总结及性能优化的两个网址转载

前端系列-移动端开发踩过的一些坑https://www.cnblogs.com/ljx20180807/p/9729941.html移动H5前端性能优化指南https://segmentfault.com/a/1190000002511921

2020-12-24 11:55:27 65

原创 Navigator appVersion 常用属性应用及判别

判断当前机型var u = navigator.userAgent;if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { console.log('安卓');} else if (u.indexOf('iPhone') > -1) { console.log('苹果');}判断当前设备类别设备类型关键字段IE内核Tridentopera内核Presto 或 Opera

2020-12-23 15:45:18 3466 2

原创 封装的echarts组件

封装组件<template> <div class="BSchart" :id="chartId" ref="myEchart"></div></template><script> export default{ props:{ chartId: { type: String, default: 'my-echart' }, datalists:{ type: O

2020-12-23 12:07:25 277

原创 uni-app 百度语音转文字

<template> <view class="content"> <!-- <image class="logo" src="/static/logo.png"></image> --> <view class="text-area"> <!-- <text class="title">{{title}}1111</text> --> <button @click="st

2020-12-23 12:04:55 1289

原创 cesium插件配置文件

const CopyWebpackPlugin = require('copy-webpack-plugin')const webpack = require('webpack')const path = require('path')//// CesiumJS源代码的路径const cesiumSource = 'node_modules/cesium/Source'const cesiumWorkers = '../Build/Cesium/Workers'const Copywebpack

2020-12-23 12:02:29 412

原创 配置fly.js请求

utils中的request文件import Fly from 'flyio/dist/npm/wx'//该位置可根据不同运行环境进行判断 let baseUrl = 'http://myurl.cn/' // 创建fly实例let fly = new Fly()//处理请求队列配置 // 正在请求的 url 数组let pendingArr = []// 获取正在请求/响应的请求索引let pendingIndex = url => pendingArr.findInde

2020-12-23 11:59:04 814

原创 快速搭建angular脚手架项目

快速搭建angular脚手架项目先确定电脑上全局安装了node和npm环境打开终端/或命令窗,安装全局 angular CLI创建新项目启动开发服务器先确定电脑上全局安装了node和npm环境npm -v打开终端/或命令窗,安装全局 angular CLIcnpm install -g @angular/cli创建新项目ng new project-name启动开发服务器进入项目所在根目录cd my-app安装依赖cnpm install启动服务ng se

2020-12-23 11:47:42 256 2

原创 新手搭建angular-cli项目起步

新手搭建angular-cli项目起步前言一、使用表单组件需要在跟组件模块中引入formsmodule 模块二、如果想要使用sass三、 配置路由总结前言闲来无事研究一下angular,有问题欢迎大佬指教一、使用表单组件需要在跟组件模块中引入formsmodule 模块import { FormsModule } from '@angular/forms';@NgModule({ declarations: [ ], imports: [ BrowserModule,

2020-12-23 11:33:36 147

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除