- 博客(46)
- 资源 (5)
- 收藏
- 关注
RSS订阅转载 前端常见的9种设计模式
1. 概念设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。2. 设计原则S –单一职责原则一个程序只做好一件事如果功能过于复杂就拆分开，每个部分保持独立O – 开放/封闭原则对扩展开放，对修改封闭增加需求时，扩展新代码，而非修改已有代码L – 里氏替换原则子类能覆
2021-02-22 22:25:34
762
转载 axios与ajax的区别及优缺点
区别：axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios优缺点：ajax：1、本身是针对MVC编程，不符合前端MVVM的浪潮2、基于原生XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案，jquery整个项目太大，单纯使用ajax却要引入整个
2021-02-22 21:26:54
672
原创 http请求错误码
一些常见的状态码为：200 - 服务器成功返回网页404 - 请求的网页不存在503 - 服务不可用详细分解：1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码。代码 说明100 （继续） 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。2xx （成功）表示成功处理了请求的状态代码。代码 说明200 （成功） 服务器已成功处理了请求。 通常，这表
2021-02-17 20:20:55
186
原创 vue中的.sync修饰符
在Vue中，子父组件最常用的通信方式就是通过props进行数据传递，props值只能在父组件中更新并传递给子组件，在子组件内部，是不允许改变传递进来的props值，这样做是为了保证数据单向流通。但有时候，我们会遇到一些场景，需要在子组件内部改变props属性值并更新到父组件中，这时就需要用到.sync修饰符。通过定义一个Child子组件并设置name属性来显示一句欢迎语，当点击按钮时，通过在父组件中来改变name属性的值；当点击欢迎语时，则通过在Child子组件中改变name属性值。没有.sync修饰符
2021-02-08 14:19:11
96
原创 Vue中报错：Redirected when going from “/about“ to “/cart“ via a navigation guard.
VUE路由全局守卫 报错vue-router版本过高这个的意思是在router 包升级后 login页面在跳转的时候抛出了一个promise异常 没有接收它 所以报了这个错误使用路由重定向做了登录验证后, 报错Error: Redirected when going from “/about” to “/cart” via a navigation guard.是因为router的版本问题 和vue/lic有冲突解决方案:删除 node_modules ，到 package.json 中将
2021-02-03 17:34:02
1214
原创 自用vue.config.js模板
module.exports = { /* 部署应用包的基本URL */ /* baseUrl 从 Vue CLI 3.3 起已弃用 ，请使用publicPath */ // baseUrl: process.env.NODE_ENV === "production" ? "./" : "./", publicPath: process.env.NODE_ENV === "production" ? "./" : "./", /* 生产环境构建文件的目录 defalut: dist *
2021-01-19 09:54:37
169
原创 前端部分基础习题
一.HTML1.DOCTYPE 的作用是什么？标准模式与兼容模式各有什么区别? 你知道多少种Doctype文档类型声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。!DOCTYPE是一种标准通用标记语言的文档类型声明，它的目的是要告诉浏览器它应该使用什么样的文档类型定义（DTD）来解析文档。标准模式，浏览器按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。标准模式的排版 和 JS运作模式都是以该浏览器支持的最高标准运行。在兼容模
2020-12-08 11:09:58
17131
原创 JS中如何区分数组和对象
方法一：通过调用constructor来识别{}.constructor //返回object[].constructor //返回Array方法二：通过instance of来识别[] instance of Array //true{} instance of Array //false方法三：通过Object,prototype.toString.call方法来识别Object.prototype.toString.call([]) //["object Ar
2020-12-08 10:46:01
351
原创 vue组件深层次传值方式-$attrs/$listeners
attrs与attrs与attrs与listeners的主要应用是实现多层嵌套传递。组件A与组件B通信一般都会使用组件B中转，即A传递给B，B再给C，但是如果A到C组件之间嵌套的组件过多，需要传递的事件和属性较多，会导致代码繁琐，代码维护困难。在vue2.4中，为了解决该需求，引入了attrs和attrs和attrs和listeners，新增了inheritAttrs选项。$attrs的使用官方定义：包含了父作用域中不作为prop 被识别 (且获取) 的特性绑定 (class和 style除外)。
2020-11-28 13:21:47
835
转载 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常，我们在使用vue编写页面时，会需要使用vuex在组件间传递（或者说共同响应）同一个数据的变化。例如：用户的登录信息。下面，我们使用传递用户登录信息的例子来一步步解决这个问题。首先，我们的第一个问题是：我在一个组件（例如登录组件页面）中登录了后，其它页面要怎么获取和响应这个变化？（就是这么小白，/(ㄒoㄒ)/~~）这个答案就是使用vuex啦，在中文版的文档中有这样一句话：而这里的计算属性就是我们的伟大的computed属性啦~（至于前面的通过mutation之类的把数据存入vuex中的过程就省
2020-11-27 10:05:06
934
原创 前端优化方案
1 优化css1.1 避免使用CSS表达式用CSS表达式动态设置CSS属性，是一种强大又危险的方式。从IE5开始支持，但从IE8起就不推荐使用了。例如，可以用CSS表达式把背景颜色设置成按小时交替的尽量减少标签选择器的使用尽可能少使用id选择器，多使用样式选择器(通用性强)减少选择器前缀，例如.headerBox .nav .left a{} 选择器是从右向左查询的避免使用css表达式background-color: expression( (new Date()).getHours()%2
2020-11-20 12:50:26
446
1
原创 什么是抓包？
什么是抓包？抓包（packet capture）就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全。抓包也经常被用来进行数据截取等。抓包做什么？不管做什么事情，首先要有明确的目的，其次是要清楚能力的范畴，最后是要有清晰的思路。原始数据->过滤->分析,这是数据处理的基本套路,抓包的目的就是为了获取到想要的原始数据，拿到数据以后，我们就可以做以下一些事情:分析数据传输协议。定位网络协议的问题。从数据包中获取想要的信息。将截取到的数据包
2020-11-20 12:30:42
9909
1
原创 Vue 3.0双向绑定原理的实现
proxy方法vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过new Proxy()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。具体实现过程的代码如下：1.定义构造函数function Vue(option){ this.$el = document.querySelector(option.el); //获取挂载节点 this.$data = option.data; this.$methods = opt
2020-11-15 11:49:54
958
转载 电商网站后台九大功能模块详解
电商网站后台九大功能模块详解随着电子商务的发展，网上购物正在趋于一种时尚，电子商务网站也逐渐成为企业顺应潮流的标配。大多数人知道可能在电子商务网站前端有查询，注册登录，购物车等等功能。可是您知道建设电子商务网站后台功能模块都有哪些么?今天我们就聊聊电商网站后台功能模块的那些事。电子商务网站整个系统的后端管理，按功能划分为九大模块，包括商品组织管理、订单处理、内容发布管理等模块。一、后台主页：各类主要信息的概要统计，包括客户信息、 订单信息、商品信息、库存信息、评论和最近反馈等。二、商品模块：1.
2020-09-25 12:57:20
2019
原创 安装node-sass提示没有vendor目录的解决办法
根据package.json,进行npm install node_modules, 运行npm run dev时候,报错,错误如下.解决办法:上图node-sass文件夹下,新建 vender 文件夹.然后运行,npm rebuild node-sass --save-dev,之后,查看node-sass文件夹
2020-09-25 12:54:43
247
原创 vue自定义指令directive的使用方法
Vue中内置了很多的指令，如v-model、v-show、v-html等，但是有时候这些指令并不能满足我们，或者说我们想为元素附加一些特别的功能，这时候，我们就需要用到vue中一个很强大的功能了—自定义指令。在开始之前，我们需要明确一点，自定义指令解决的问题或者说使用场景是对普通 DOM 元素进行底层操作，所以我们不能盲目的胡乱的使用自定义指令。如何声明自定义指令？就像vue中有全局组件和局部组件一样，他也分全局自定义指令和局部指令。let Opt = { bind:function(el,bin
2020-09-22 18:07:31
1467
原创 作为前端人员也要熟悉的TCP三次握手和四次挥手
三次握手：客户端–发送带有SYN标志的数据包–一次握手–服务端服务端–发送带有SYN/ACK标志的数据包–二次握手–客户端客户端–发送带有带有ACK标志的数据包–三次握手–服务端四次挥手：客户端-发送一个FIN，用来关闭客户端到服务器的数据传送服务器-收到这个FIN，它发回一个ACK，确认序号为收到的序号加1和SYN一样，一个FIN将占用一个序号服务器-关闭与客户端的连接，发送一个FIN给客户端客户端-发回ACK报文确认，并将确认序号设置为收到序号加12XX 成功200 OK，
2020-09-15 12:02:37
152
原创 Vue面试题汇总（持续更新中）
1.什么是MVVM？MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和Model的对象（桥梁）。在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Mo
2020-09-11 14:10:39
876
原创 vue定义嵌套路由
在实际项目中我们会碰到多层嵌套的组件组合而成，但是我们如何实现嵌套路由呢？其实很简单，只需要我们在 VueRouter 的参数中使用 children 配置，这样就可以很好的实现路由嵌套。下面为示例代码：index.html，只有一个路由出口<div id="app"> <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router-view></router-view> </di
2020-09-11 11:20:42
470
原创 vue-router 有哪几种导航钩子
问题一：vue-router有哪几种导航钩子（ 导航守卫 ）？1、全局守卫： router.beforeEach2、全局解析守卫： router.beforeResolve3、全局后置钩子： router.afterEach4、路由独享的守卫： beforeEnter5、组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave导航表示路由正在发生改变，vue-router 提供的导航守卫主要用来:通过跳转或取消的方式
2020-09-07 08:22:57
2023
原创 最新数组方法
最新数组方法（包括es6）1 arr.push() 从后面添加元素，返回值为添加完后的数组的长度let arr = [1,2,3,4,5]console.log(arr.push(5)) // 6console.log(arr) // [1,2,3,4,5,5]2 arr.pop() 从后面删除元素，只能是一个，返回值是删除的元素let arr = [1,2,3,4,5]console.log(arr.pop()) // 5console.log(arr) //[1,2,3,
2020-09-04 08:48:24
101
转载 前端解决跨域问题的几种方法
1.同源策略如下： URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http://www.a.com/script/b.js 同一域名下不同文件夹 允许 http://www.a.com:8000/a.js http://w
2020-09-02 11:06:18
171
原创 Vue项目中一些常见的文件名及作用
总结了一些常见的项目文件名称-及其对应的作用常见的文件夹命名src解释：source的简写，指源代码。位置：一级目录。作用：存放源代码。lib/dep/plugins解释：library/dependence/plugins的简写，依赖工具库/框架。位置：二级目录。作用：存放依赖的第三方工具库/框架（如：jquery）。bin解释：binary的简写。位置：一级目录。作用：存放二进制文件（如：*.exe）。dist/build解释：distributi
2020-08-29 21:03:28
956
原创 Vue项目开发目录结构和引用调用关系
本文精华总结：在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容，而index.html中的Title部分不会被取代，所以会一直保留。下图为Vue项目文件夹：以下就项目文件夹中的各文件的作用进行介绍：├── build/ # Webpack 配置目录
2020-08-29 21:02:23
441
原创 Git 命令整理（详细）
git是一个非常好用的分布式版本管理工具，功能比svn强大，与SVN不同点是Git去中心化，每一个分支都是一个中心，并且支持本地仓库存储，像如今很多大公司都用git做版本控制。话不多说，具体命令整理如下： git拉取远程代码git clone https://xxx.gitgit拉取远程指定分支下代码（-b 分支名称）git clone -b v2.8.1 https://xxx.git初始化一个本地仓库，在同级目录下会出现一个隐藏的.git文件git init查看git的配置信息
2020-08-24 10:48:51
516
原创 身份令牌toKen Vuex + localStorage结合存储
前提：我们都知道在登陆的时候后台会返回一串字符串，也就是token, 也是我们常说的身份令牌， 在后续的请求中只有在请求头中携带了token才会被允许访问后台数据，因此如何存储token就显得尤为重要。如果直接将 ToKen 存储在 Vuex容器中，好处： 1. 获取方便2.响应式缺点： 只要页面一刷新就没数据了。为了持久化，还需要把 Token 放到本地存储（localStorage–除非手动清除，永久存在）持久化所以，我们采取 Vuex 和 本地存储相结合的方式 来存储 Token我们
2020-08-22 08:52:11
1175
原创 模块化封装 --- 双ToKen 实现免登录步骤详解
本文大概配置了下 双token免登录/** * 封装 axios 请求模块 */import axios from 'axios'import jsonBig from 'json-bigint'import store from '@/store' import router from '@/router' // 导入路由模块// 配置公共请求头const request = axios.create({ baseURL: 'xxxxxx/', // 基础路径 transfor
2020-08-22 08:49:55
1241
原创 axios 四种请求传参方式
axios 拦截器请求拦截器请求拦截器的作用是在请求发送前进行一些操作例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易响应拦截器响应拦截器的作用是在接收到响应后进行一些操作例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页 # 1. 请求拦截器 axios.interceptors.request.use(function(config) { console.log(config.url) # 1.1 任
2020-08-22 08:48:12
3302
原创 axios 请求的配置选项
这些是创建请求时可以用的配置选项。只有url是必须的，如果没有指定method，请求将默认使用get方法。{ // url 是用于请求的服务器 URL url: '/user', // method 是创建请求时使用的方法 method: 'get', // default // baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL // 它可以通过设置一个 baseURL 便于为
2020-08-22 08:36:33
505
原创 关于后端返回数据中的大数字问题
关于后端返回数据中的大数字问题在项目中请求数据回 404 是因为我们请求发送的ID不正确。是因为JavaScript 能够准确表示的整数范围在-253到253之间（不含两个端点），超过这个范围，无法精确表示这个值，这使得 JavaScript 不适合进行科学和金融方面的精确计算。Math.pow(2, 53) // 90071992547409929007199254740992 // 90071992547409929007199254740993 // 9007199254740992
2020-08-17 17:56:52
1341
原创 try{}catch(){}用法和对应的六种错误类型
如何使用try{}catch(){}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> &
2020-08-11 21:21:20
1356
1
原创 Vue中定义全局过滤器，将时间戳转换为普通日期的格式
今天做vue项目中，需要将时间戳转换成普通日期的格式，于是想到两种方式去实现，记录在此，方便日后有需要时，直接复制粘贴方法一：1、运行 npm install moment --save 或者 yarn add moment 安装 moment 插件2、在 main.js 文件中引入 moment 插件，并定义全局过滤器// 导入事件格式化组件库import moment from 'moment'// 定义时间格式化全局过滤器Vue.filter('dateFormat', (dateStr
2020-08-07 09:49:30
1688
转载 vue cli4.0 快速搭建项目详解
搭建项目之前，请确认好你自己已经安装过node, npm, vue cli。没安装的可以参考下面的链接安装。如何安装node?安装好node默认已经安装好npm了，所以不用单独安装了。如何安装vue cli?剧场环境已搭建好，开始表演！1.进入一个目录，创建项目对应命令：vue create project-one2.我们这里选择手动配置按 ↓ 选择“Manually select features”，再按 Enter3.选择你需要的配置项通过↑ ↓ 箭头选择你要配置的项，按 空格
2020-07-24 21:11:58
551
原创 Vue中的父子组件之间的传值
vue中我们常常用到组件：父子组件之间的传值如何传值的呢1、父组件向子组件传值你可以给子组件传入一个值，用v-bind绑定 <menu-item :title='ptitle' content='hello'></menu-item>子组件要显式的用props选项声明它预期的数据Vue.component('menu-item', { props: ['title', 'content'], data: function() { r
2020-07-22 11:44:39
331
原创 Vue的生命周期是什么
我们知道vue是一个构建数据驱动的web界面的渐进式框架。那vue的生命周期是什么呢？vue生命周期是指vue实例对象从创建之初到销毁的过程，vue所有功能的实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数实现组件数据管理和DOM渲染两大重要功能。先放一张官方文档的图在这个图中我们可以清楚地看到 Vue 的整个生命周期和它所提供的钩子函数。钩子函数beforeCreate(创建前):此阶段为实例初始化之后，此时的数据观察和事件机制都未形成，不能获得DOM节点。create
2020-07-21 20:28:02
2195
原创 用css3 绘制心形图案
闲来无聊，做做CSS3<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
2020-07-21 20:04:47
571
原创 Javascrip实现图片懒加载的方式
在实际的项目开发中，我们通常会遇见这样的场景：一个页面有很多图片，而首屏出现的图片大概就一两张，那么我们还要一次性把所有图片都加载出来吗？显然这是愚蠢的，不仅影响页面渲染速度，还浪费带宽。为了解决以上问题，提高用户体验，就出现了懒加载方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。懒加载的好处：(1）减少加载时的线程数据，可以使可视区内的图片快速加载(2）减少了同一时间发送到服务器的请求数量，减轻服务器压力懒加载原理一张图片就是一个标签，浏览器是否发
2020-07-16 15:48:59
339
原创 Nodejs--express路由
什么是路由路由这个次不是nodejs专属，在web应用程序中就有路由，路由描述应用程序是否以及如何对调http（超文本传输协议）请求进行应答，当用户在与应用程序或者网站交互的时候，浏览器就会生成这些请求。路由就是映射关系根据不同的用户 URL 请求，返回不同的内容本质：URL 请求地址与服务器资源之间的对应关系Express中的路由在 Express 中，路由指的是客户端的请求与服务器处理函数之间的映射关系Express 中的路由分 3 部分组成，分别是请求的类型、请求的 URL 地址、
2020-07-10 17:15:55
561
转载 CSS面试题
CSS面试题一、基础篇1、用纯css创建一个三角形的原理是什么？首先，需要把元素的宽高设置为0，然后设置边框样式。width: 0;height: 0;border-top: 40px solid transparent;border-left: 40px solid transparent;border-right: 40px solid transparent;border-bottom: 40px solid #00ff00;2、一个满屏品字布局如何设计?方法一：上面那块用ma
2020-07-08 20:26:46
688
原创 了解什么事Node.js
1.什么是 NodeNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境Node 实际上就是一个 JavaScript 运行环境，它集成了 v8 引擎， 从而能对 JavaScript 代码进行解析2.Node 中的 JavaScript 环境Node 运行环境包含两个部分，分别是：V8 引擎，主要负责解析 JavaScript 代码内置 API，我们学习 Node.js 重点就是学习这些内置的 API，从而能够完成后台的开发Node 运行环境
2020-07-05 19:07:45
256
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人