自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 iframe的简单介绍

框架的优点List item 重载页面时不需要重载整个页面,只需要重载页面中的一个框架页(减少了数据的传输,增加了网页下载速度)方便制作导航栏框架的缺点会产生很多页面,不容易管理不容易打印浏览器的后退按钮无效代码复杂,无法被一些搜索引擎索引到多数小型的移动设备(PDA 手机)无法完全显示框架多框架的页面会增加服务器的http请求由于上面诸多缺点,因此不符合标准网页设计的理念,已经被标准网页设计抛弃使用方法<iframe src="demo_iframe_sandbox.

2022-03-08 10:53:37 172

原创 vue项目node编译内存溢出(node)

vue项目在启动以后,进行修改内容,编译出错,自动退出启动报错如下经过查找FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory里面的这句话是 调用和重试上次分配失败-JavaScript堆内存不足接着就找了关于JS内存不足与node编译内存溢出的解决办法,如下:1.这个是给node分配更多的内存 只需在 package.json 里面 加上 --max_old_space_size

2021-07-30 17:39:28 1110

原创 css基础用法,常见属性

CSS: 层叠样式表。主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS语法: CSS实例由选择器,以及一条或多条声明(属性)两部分组成。每个声明(属性)可以有一个或多个值。属性和值被冒号分开。CSS声明以分号;结束,声明以大括号{}括起来。CSS注释: 支持使用/* */进行注释CSS引入: 三种。外部样式表、内部样式表、内联样式。CSS选择器1.通配符选择器:以选取所有标签。2.标签选择器:使用标签名选取

2021-05-31 10:27:41 216

原创 Unexpected token z in JSON at position 39761 while parsing near ‘...me-maybe“: “^1.0.1“,z

Unexpected token z in JSON at position 39761 while parsing near '…me-maybe": “^1.0.1”,z出现以下情况,解决的方法是:1)删除根目录下 package-lock.json 文件2)npm install

2021-03-15 15:04:39 197

原创 给el-tree数据里的长名称添加提示框

给el-tree数据里的长名称添加提示框这个呢,可以通过塔里的一个参数render-content来实现<el-tree class="ellipsisStyle" :data="local_treeTableTree" :props="treeProps" ref="tree2" :showCheckbox="false" :highlightCurrent="true"

2021-03-01 10:43:47 1008

原创 [Vue warn]: Error in render: “TypeError: Cannot read property ‘slice‘ of undefined&q...

[Vue warn]: Error in render: "TypeError: Cannot read property ‘slice’ of undefined&q…在页面中使用slice, 页面报错,报错原因 是由于数组对象未定义或为null 引起的,所以查看获取数据的接口是否请求到了数据。因为加载顺序(生命周期)的问题导致先执行的时候为空,做个空数据就好了 (userInfo || ‘’)修改前的修改后的到这里就欧克了...

2020-12-12 10:27:32 585

原创 Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩遇到问题

Vue+elementUI 自定义动态数据菜单导航组件实现展开收缩遇到问题自定义组件包含在 fragment下面, 不是div 不然展开和收缩会出现字体无法隐藏的问题如下:解决菜单导航折叠后文字不隐藏出现这个问题是因为我们在<el-menu>嵌套中出现了意料之外的<div>,而<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,<el-menu-item-group>其中之一但是

2020-11-07 19:24:43 2215 1

原创 Run `npm rebuild node-sass` to download the binding for your current environment.

出现这个错误Run npm rebuild node-sass to download the binding for your current environment.原因:可能是node升级导致解决:在根目录创建.npmrc文件sass_binary_site=https://npm.taobao.org/mirrors/node-sass/registry=https://registry.npm.taobao.org执行命令npm rebuild node-sass这个

2020-11-03 20:52:52 1323

原创 jquery语法,选择器

一:选择器层级选择器后代选择器,子代选择器,next,siblings描述?基本选择器:?:first :last :not :even :odd :eq :gt :lt :header :animated4.内容选择器的描述?:contains :empty :has :parent匹配包含给定文本的元素匹配所有不包含子元素或者文本的空元素匹配含有选择器所匹配的元素的元素匹配含有子元素或者文本的元素5.可见性选择器:hidden :visible匹配所有不可见元素display

2020-09-29 22:02:59 143

原创 原生js实现Swiper功能

原生js实现Swiper功能主要使用html,css,js来完成首要的HTML部分:1、.slide滑槽,里面存放所有图片;2、.prev是向左的箭头,.next是向右的箭头;3、pointer是指示器,用于放的五个切换按钮,每个切换按钮用span来表示;其次呢,css部分1、.slide、.prev、.next、pointer全都用绝对定位放到合适位置;2、.slide的所有图片水平排列js部分1、切换功能:设置 nextEl: ‘.swiper-button-next’,pre

2020-09-28 22:04:40 2858 4

原创 CSRF与XSS攻击的原理与防范

CSRF与XSS攻击的原理与防范 首先呢,说一下csrf1、概念与原理CSRF,跨站请求伪造,攻击方伪装用户身份发送请求从而窃取信息或者破坏系统。例如:用户访问A网站登陆并生成了cookie,再访问B网站,如果A网站存在CSRF漏洞,此时B网站给A网站的请求(此时相当于是用户访问),A网站会认为是用户发的请求,从而B网站就成功伪装了你的身份,因此叫跨站请求伪造。2、CSRF防范1、重要数据交互采用POST进行接收,当然是用POST也不是万能的,伪造一个form表单即可破解2、使用验证码,只要

2020-09-25 22:07:11 370

原创 Vue项目进行的优化

Vue项目进行的优化代码层面优化:v-if和v-show区分使用场景computed和watch区分场景v-for遍历必须为item添加key,且避免同时使用v-if长列表的性能优化事件的销毁图片资源懒加载路由懒加载第三方插件的按需引入优化无序列表的性能服务端渲染SSR or与渲染webpack层面的优化webpack对图片进行压缩减少Es6转为Es5的冗余代码提取公共代码模板预编译提取组件的css优化SourceMap构建结果输出分析Vue项目的编译优化基

2020-09-24 21:25:02 150

原创 常见浏览器兼容问题及解决方案

浏览器兼容问题解决在此只展示了十点问题一:不同浏览器的标签默认内外补丁不同问题:我们平时随便做测试,写几个标签,在不加样式的情况下,各自margin与padding的差异是很大的解决:在css里,给全局加*{ margin:0; padding:0;}问题二:块属性标签设置float后,同时又有水平margin时,在IE6显示margin比设置的大导致最后一块元素被挤掉解决:可以将块级元素display设置为inline。问题三:在IE6,IE7等浏览器,标签高度小于

2020-09-23 21:47:35 308

原创 跨域的解决方案

跨域的解决方案 跨域的解决方案呢,目前主流的呢,有三种 跨域呢,他是浏览器做出的限制,和后端没有关系jsonp是利用script标签,向服务器发送请求,服务器通过接收请求,返回一段js代码,调用客户端写好的方法,把json数据传入该方法,即可拿到想要的数据vue的代理方式(前端代理和后端代理)前端代理在vue中主要通过vue脚手架中的config中的index文件来配置,其中有个proxyTable来配置跨域CORS服务端操作CORS全程叫跨域资源共享,主要是后台工程师设置后端代码来达到前

2020-09-22 21:32:44 115 1

原创 微信小程序的支付功能

微信小程序的支付功能 微信小程序不仅是一个展示平台,更多的我们经常用到小程序的电商功能,支付的话呢,我们目前是要接入我们的微信支付首先呢,是我们的第一点应用的场景分别呢,会有线下场所,我有公众号,我有小程序,我有pc网,我有app不同的场景呢,支付类型各不相同:第二步呢开发准备需要进行注册账号,微信小程序账号,微信商户平台账号最后呢,就是我们的开发流程发起微信支付即调用API wx.requestPayment(Object object)根据过程,划分6个模块1.下单2.

2020-09-21 20:24:39 1746

原创 对优化的了解

对优化的了解客户端方面:压缩代码(js/css),压缩图片合并一些小图片打包的代码尽可能切割成多个chunk,减少单一,chunk过大静态文件采用cdn引入HTTP的缓存头使用的合理减少第三方库的依赖对于代码应该考虑性能来编写渐进升级,引入preload这些预加载资源从服务端着手带宽,域名解析,多域名解析页面做服务端渲染,减少对浏览器的依赖渐进升级,比如引入HTTP2(多路复用)...

2020-09-18 21:04:53 95

原创 项目总结

项目总结今天进行项目的评比,这个项目呢,他的主要的功能点之处就是编辑、添加、删除分配权限,分页、树形结构、图表,搜索登录授权示例:1…搜索我主要是通过lodash这个插件里的_.debounce这个方法来实现防抖功能(优化),运用,调取接口,获取响应的数据,进行实现,可以通过点击事件触发,还可以通过el-input里的@input事件触发//下载npm i lodash//文本部分<div style="margin-top: 15px;">

2020-09-17 22:15:44 112

原创 Vue Element ui 富文本图片上传加地址插入富文本与富文本

Vue Element ui 富文本图片上传加地址插入富文本与富文本富文本安装npm install vue-quill-editor -Snpm install quill -S引入富文本样式import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式 三种样式三选一引入即可import 'quill/dist/quill.core.css'import 'quill/dist/quill.bubble.css'js部分components:

2020-09-16 20:53:09 567

原创 Vuex的数据持久化

Vuex的数据持久化vuex中的state存储于内存中,一刷新更新的数据就没了,其解决方案呢,有两种,具体如下:有两种方式可以解决利用H5的本地存储(localStorage,sessionStorage)可以利用第三方封装好的插件,vuex-persistedstate首先进行安装npm install vuex-persistedstate --save引入在store下的index.js中import createPersistedState from "vuex-

2020-09-15 23:38:23 432

原创 ECharts的使用

简单 ECharts的使用首先呢,我们进行echarts的引入npm install echarts --save第二步,进行引入<!DOCTYPE html><html><head> <meta charset="utf-8"> <!-- 引入 ECharts 文件 --> <script src="echarts.min.js"></script></head>&lt

2020-09-14 23:32:24 100

原创 css3动画

css3动画transition的含义是过渡。过渡是CSS3中具有颠覆性的一个特征,可以实现元素不同状态间的平滑过渡(补间动画),经常用来制作动画效果。补间动画:自动完成从起始状态到终止状态的的过渡。不用管中间的状态。帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片。transition 包括以下属性:transition-property: all; 如果希望所有的属性都发生过渡,就使用all。transition-duration: 1s; 过渡的持续时间。

2020-09-11 21:36:37 65

原创 图片懒加载

概念什么是懒加载懒加载顾名思义突出一个“懒”字,懒字就是拖延的意思,说白就是延迟加载。比如我们进入一个新的页面进行加载的时候,这个页面很长超过了屏幕可视区域的时候,那么懒加载就会优先加载我们可视区域可见的内容,剩余部分是当进入到可视区域之后再进行加载。所以这就是为什么要使用懒加载的原因总结出来有两个点:全部加载用户体验差一次性全部加载浪费用户流量,也许只是访问部分内容,不是全部内容都能够访问完,全部加载的话,就有点浪费流量了。懒加载实现原理(图片懒加载)网页占用资

2020-09-09 22:56:24 126

原创 数组内置遍历方法

数组内置遍历方法foeEach() 他的返回值是undefinedfilter() 它是用来过滤的,遍历出满足条件的数组元素,返回新数组map() 对原数组进行加工处理,得到一个新的数组reduce() 是用来归并的,将多个值归并成一个值findIndex() 用来查找下标every() 全部满足才会返回true,否则的话为falsesome() 只要有一个满足的话就会返回true,否则就为falsefind() 找出数组中匹配到的元素includes() 他可以判断出

2020-09-08 22:04:31 100

原创 Mock数据

Mock数据可以通过4步进行先进性安装 mockjsnpm install mockjs创建mock目录生成mock数据引入:import Mock from "mockjs";数据模拟://mock课程数据var result=Mock.mock({ code: 200, msg: "操作成功", data: { current_page: 1, last_page: 18, total: 178, "list|10": [

2020-09-08 00:09:57 146

原创 Es6/7/8...新增特性

Es6/7/8…新增特性1. let和const:let是定义变量的,const是定义常量的(不可改)当我们想改const时,以及将它定义成{}形式,(他改的不是本身,改变的是里面的属性)-. let和var的区别相同点:他们都是定义变量的关键字不同点:var有变量提升,允许重复定义变量,块级作用域let不可以变量提升,不允许重复声明,块级作用域2.symbol:有几种类型:number,string,boolean,null,undefined,symbolsymbol:他是定义的值是

2020-09-04 20:52:18 152

原创 计时器

计时器一个简单的计时器实现<template> <div class="timer"> <div ref="startTimer"></div> </div></template> <script>export default { name: "Timer", data() { return { timer: "", content: "",

2020-09-03 23:33:56 95

原创 闭包

闭包闭包的构成闭包=函数+词法作用域- 广义上的闭包:var a=1000;function fn1() { alert(a)}fn1()狭义上的闭包:指的就是函数嵌套函数,子函数引用父函数的相关变量闭包的应用场景和实现:求和,设置字号,循环表单,封装组件和插件//循环表单function makeHelp(help) { return function() { console.log(help) d

2020-09-02 23:49:13 87

原创 水平垂直居中的方法

水平垂直居中的方法其中的公共html<div class="wp"> <div class="box size">66666</div> </div>第一种: 通过绝对定位的方式 absolute + 负margin​ 首先知道子元素的宽高,给子元素设置top:50%;left:50%,但绝对定位是基于子元素的左上角,我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值,负的外边距可以让元素向相反方向定位,​

2020-09-01 22:32:11 137

原创 防抖和节流

防抖和节流防抖呢,是在固定得时间内没有触发,然后再固定事件结束后进行触发,如果实在固定得时间内触发了事件,会延长相应的固定时间再触发他呢,主要可以利用我们的定时器来实现实现的方法:function debounce(func,wait) { var timer=null; return function() { //保存当前调用的dom对象 var _this=this; //保存事件对象 var args=arguments; cle

2020-08-31 22:04:23 951

原创 Vue生成二维码

Vue生成二维码首先呢,我们要先进行安装npm install --save qrcode然后进行引入:import QRCode from 'qrcode'我们需要在页面写 <div class="lbj_tc"> <van-popup v-model="show"> <div class="lbj_fenn"> <p>分享</p> <div>

2020-08-28 23:13:01 254

原创 JavaScript数据类型

JavaScript数据类型它分为两种基本数据类型- number(它里面特殊的是NaN) 如:typeof NaN typeof Infinity 他们返回的都是number- boolean true或false或者呢可以隐式转换true或false类型能转换成false,只有以下几种情况:0,空字符串,null,undefined,NaN,false- string 用‘’,“”,或` `,来定义字符- nulltypeof null 返回Objectnullundefine

2020-08-27 22:26:32 98

原创 递归组件

递归组件概念是函数自身调用函数自身递归的使用条件:他可以将复杂的问题用简单的步骤来描述有一个结束递归的条件 if(n===1) return 1;既然要用递归组件,那么对我们的数据格式肯定是需要满足递归的条件的。就像wo下边这ge样子,这是一个树状的递归数据。let jsonObj={ books:[ {id:1001,name:'一级菜单01',children:[ {id:100001,pid:1001,name:'二级菜单01'},

2020-08-26 23:52:54 378

原创 Vue中ui框架的样式穿透

Vue中的样式穿透vue里写样式时加scoped(很好用)只可以在当前组件使用,不加的话是全局当时在Vue项目中,当我们引入第三方组件库时(如使用element-ui),需要在局部组件中修改第三方组件库样式,而又不想去除scoped属性造成组件之间的样式覆盖。这时我们可以通过特殊的方式穿透scoped。styles的样式穿透可以使用 >>>.wrapper >>> .swiper-pagination-bullet-active{ background

2020-08-24 22:56:34 213

原创 Vuex的五个核心属性及辅助函数

Vuex的五个核心属性及辅助函数Vuex是什么??VueX 是一个专门为 Vue.js 应用设计的状态管理架构主要包括几个模块state 保存全局状态的getters 允许组件从state中获取数据,相当于计算属性mutation store中唯一改变state中状态的方法,同步函数actions 用于提交mutation 异步操作modules 拆分多个模块的辅助函数mapState引入import { mapState } from 'vuex3种方法对象:com

2020-08-21 23:20:07 293

原创 SVG

SVG什么是SVG?SVG 指可伸缩矢量图形SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG 是万维网联盟的标准svg优势在于SVG 可被非常多的工具读取和修改(比如记事本)SVG 与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强。SVG 是可伸缩的SVG 图像可在任何的分辨率下都会特别清晰SVG 可在图像质量不下降的情况下被放大SVG 图像中的文本是可选的,同时也是可

2020-08-21 00:15:04 140

原创 生产环境,开发环境互相切换

生产环境,开发环境互相切换**有两种方式可以进行**第一种方法:通过配置.env文件来实现第二种发法:one:通过创建不同环境js文件,再通过cross-env来切换 config dev.js prod.jsdev.jsmodule.exports = { BASE_URL: "https://test.365msmk.com"};prod.jsmodule.exports = { BASE_URL: "https://www.365msmk.com"}

2020-08-20 01:37:54 867

原创 重新认识vue-cli

重新认识vue-cli首先呢,我们先检测其版本npm -v node -v vue -V检测如果不是最新版,就进行先卸载在重新下载新版用 npm uninstall vue-cli -g卸载用 npm install -g @vue/cli来进行下载安装完成后,就进行搭建脚手架,命令行输vue create lbj_pro然后有两种模式的,手动跟自动的我采用的呢,是手动版的选择需要下载的命令? Check the features needed for

2020-08-18 23:06:18 163

原创 如何使用webpack搭建环境

如何使用webpack搭建环境查看淘宝镜像是否更改过来:npm config list回车进行查看1.创建项目目录并初始化package.json默认创建package.json文件通过npm init -y2.安装webpack和webpack-clinpm install webpack webpack-cli --save-dev简写:npm i webpack webpack-cli -D3.运行webpack测试CommonJS规范:基于服务端模块化规范,node产出抛

2020-08-17 22:16:36 163

原创 天使童装项目总结

天使童装项目总结最近一直在小程序写小程序的项目,对小程序开发的流程及相关技有一定的了解,在开发过程中也总结了一些心得经验、可以了解到一些小程序文档上没有的东西、踩了好多的坑。通过这个总结,希望可以结识更多朋友,多交流,互相学习,共同进步。有什么不足的地方,希望大家可以及时指出。。。。。。写这个项目,我主要做的是分类页面,里面的功能技术还好是通过获取里面的接口,来调用 接口很多,我们通过进行封装可以简洁使用接口获取://商品分类左侧列表接口 lbjClassifyLeft:()=>

2020-08-15 23:40:57 771

原创 JavaScript高级

JavaScript高级每个JavaScript函数实际上都是一个Function对象创建函数的3种方式函数声明的方式function 函数的名称(){}函数表达式var 函数名 = function(){}var fn = function (){}通过fn()获取构造函数的创建var 函数名 = new Function('a','alert(a)') 第一个指的是参数,第二个指的是函数体函数的声明与函数的表达式区别- 函数声明可以在任意可见位置调用(即在函数定义

2020-08-14 23:05:21 99

空空如也

空空如也

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

TA关注的人

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