- 博客(45)
- 收藏
- 关注
RSS订阅原创 [巧克力变成巧克力之前都是苦的] 原生 J S
JavaScript是一种基于对象和事件驱动的客户端脚本语言组成: ECMAScript---------------标准语法Bom(browser Object Model) Dom(document)-------浏览器提供的扩充API : application programming interface 应用程序接口js引入,内部和外部,最好都放到body里的标签前;外部:-----可维护性高,可缓存的;放在head和body中也可以,但是考虑加载顺序docu..
2020-10-02 20:28:44
2699
原创 JavaScript 和 jQuery 高频面试题
JavaScript数据类型基本类型：Number,String,Boolean,Null,Undefined,Symbol(ES6)引用类型：Array,Functionm,Object基本类型和引用类型的区别引用类型值保存在堆里，基本类型是存放在栈里引用类型值可添加属性和方法，而基本类型值则不可以判断类型方式typeofinstanceofObject.prototype.toString.call()栈和堆的区别栈由编译器自动分配释放空间，堆一般由程序员分配释放
2020-09-29 19:28:28
870
1
原创 vue 页面加载进度条组件
页面加载进度条最初我是在youtube上看到的，后面几乎在各大网站上都能见到它的身影，可以让用户在加载页面的时候不会对着完全空白的页面发呆，提升用户体验但是从开发角度讲，这种进度条在真实性上确实很难把握，因为在逻辑代码加载完成之前，我们都不能统计到进度，而逻辑代码自身的进度也无法统计。另外，我们不可能监控到所有资源的加载情况。事实上，用户并不是在乎你的页面究竟加载了百分之几，而真正关心的是离加载完还有多久，以及这个空白页面是没有加载完，还是加载完就是空白的。所以没我们需要去“模拟”一个进度条，在后端数据
2020-09-28 23:42:19
377
原创 Web常见安全漏洞
跨站脚本攻击（XSS攻击）XSS(Cross Site Scripting)，跨站脚本攻击。XSS 是常见的 Web 攻击技术之一.所谓的跨站脚本攻击 指得是:恶意攻击者往 Web 页面里注入恶意 Script 代码，用户浏览这些网页时，就会执行其中的恶意代码， 可对用户进行盗取 cookie 信息、会话劫持等各种攻击.解决方案:(1) 输入过滤。永远不要相信用户的输入，对用户输入的数据做一定的过滤。如输入的数据是否符合预期 的格式，比如日期格式，Email 格式，电话号码格式等等。这样可以初步对 X
2020-09-24 21:37:09
528
原创 Vue（双向数据绑定 虚拟DOM Promise Webpack 事件委托）原理
一．双向数据绑定Vue 实现的双向数据绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。要实现mvvm的双向绑定，就必须要实现以下几点：Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象1. 实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿
2020-09-23 23:39:37
426
原创 怎么封装微信小程序的数据请求
1.目录结构在根目录下创建http目录及api.js文件fetch.js以及http.js文件；在根目录下创建env目录,创建index.js配置并导出多个开发环境在api.js中统一管理，请求的url地址在fetch.js中用promise对wx.request()进行封装在http.js，根据当前环境，设置相应的baseUrl, 引入fetch中封装好的promise请求，封装基础的get\post\put\upload等请求方法，设置请求体，带上token和异常处理等；设置对应的
2020-09-22 20:09:13
339
原创 vue中mixins(混入)的使用
一、来自官网的描述混入 (mixins)： 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。二、项目中如何使用混入在vue组件内，如果想将一些公共功能，如组件、方法、钩子函数等复用，混入是一个很好的选择。下面简单介绍一下混入的方式及特点。你可以将一个对象作为混入的选项，在组件中复用。因为vue实例也是对象，所以你可以将vue实例作为混入选项传递进去。我们可以创建一个目录mixins，在创建一个
2020-09-21 20:07:06
242
原创 详解微信小程序支付流程
小程序微信支付图微信小程序的商户系统一般是以接口的形式开发的，小程序通过调用与后端约定好的接口进行参数的传递以及数据的接收。在小程序支付这块，还需要跟微信服务器进行交互。过程大致是这样的：一. 小程序调用登录接口获取code，传递给商户服务器用来获取用户的openID我们知道在微信平台中，同一个公众号的openID都是不同的，它是用户身份识别的id，也就是说，我们通过openID来区分不同的用户，这个有微信开发基础的应该都很熟悉。为了知道谁在支付，我们需要先获取当前用户的openid，那么openI
2020-09-20 23:43:25
385
原创 关于web前端性能优化和浏览器兼容问题的总结
性能优化性能优化的层次： 按照我的理解可以分为需求阶段，设计阶段，实现阶段；越上层的阶段优化效果越明显，同时也更需要对业务、需求的深入理解。需求阶段需求是为了解决某个问题，问题是本质，需求是解决问题的手段。需求讨论的前提对业务的深入了解，如果不了解业务，根本没法讨论。即使需求已经实现了，当我们发现有性能问题的时候，首先也可以从需求出发。需求分析对性能优化有什么帮助呢，第一，为了达到同样的目的，解决同样问题，也许可以有性能更优（消耗更小）的办法。这种优化是无损的，即不改变需求本质的同时，
2020-09-18 13:44:10
1059
原创 大团结
微信小程序（天使童装）移动端 （每时每课）PC端（后台管理系统）为期近俩月学习锻炼了这三个项目 从零碎到完整，有懵逼也有欣慰，更多的是收获 这里做个总结：微信小程序全程挠头，（微信小程序专用开发工具 :微信开发者工具 ）BUG套BUG ，因为是第一次学习，开发的时候一直很小心翼翼，说白了就是让BUG给整怕了。好在它的语言思路和Vue差不多，一路虽然是磕磕绊绊但也是顶住压力走了下来 。这里贴一下微信小程序官方api说明文档：https://developers.weixin.q.
2020-09-18 00:02:10
385
原创 在浏览器中输入一个网址后，发生了什么？| 经典面试题
第一步 浏览器查找该域名的 IP 地址第二步 浏览器根据解析得到的IP地址向 web 服务器发送一个 HTTP 请求第三步 服务器收到请求并进行处理第四步 服务器返回一个响应第五步 浏览器对该响应进行解码，渲染显示。第六步 页面显示完成后，浏览器发送异步请求。第七步 整个过程结束之后，浏览器关闭TCP连接。分析浏览器查找该域名的 IP 地址DNS查找过程为：浏览器缓存->系统缓存->路由器缓存->ISP DNS缓存->递归搜索递归搜索过程为：从根域名服务器到.
2020-09-16 13:46:53
155
原创 开发眼中的一些前端交互优化
移动web开发与PCweb开发有哪些不同？首先一点就是性能：手机端的性能，要求更高；M中有很多meta标签；V中的css有很多屏幕适配；C中的交互优化与性能优化；交互优化与性能优化的差别系统真的快于用户感觉很快，是两码事；交互优化是更多的根据用户的实际感受来优化。交互优化 – 点击事件(如下场景：延时，卡顿；)根本原因：默认点击有300ms延迟：有很多pc网页没有做移动端分辨率兼容，需要放大缩小来浏览，则简单暴力用双击300ms以内来决定放大缩小。所以单击的时候会有延迟
2020-09-15 21:27:21
478
原创 使用vue-quill-editor实现富文本编辑器
安装vue-quill-editornpm install vue-quill-editor -S在具体使用的vue文件(引入和使用)也可以在man.js中引入scripttemplate※以上两步就可以了 是最基础的用法 适合初学者 如果有更多需求 看下面 ↓ ↓ ↓https://blog.csdn.net/wangxinxin1992816/article/details/86294262...
2020-09-14 13:41:02
206
原创 论网站后台管理系统的重要性
对于一家企业来说，拥有一个完整网站是很重要的事情，网站包括前端设计和后端的信息管理。简单来说，前端就是我们当我们打开一个网站的时候，肉眼所能看到的一切，而后台则是我们所看不到的一个信息管理系统。根据不同的需求，网站后台管理系统有几种不同的分类方法。比如：根据应用层面的不同，可以被划分为：重视后台管理的网站后台管理系统；重视风格设计的网站后台管理系统；重视前台发布的网站后台管理系统；等等。在网络上比较流行的各种网站后台管理系统，风格千差万别，但都具有很好的灵活性，方便灵活变动。对
2020-09-11 19:45:17
566
原创 vue路由懒加载的两种方式
1. 当一个vue项目很大的时候，对于一些“暂时”用不到的组件，我们可以不进行加载，等到用到次组件时再加载。这样可以优化spa应用首次加载白屏情况，也给用户更好的体验。这样就是vue路由懒加载。2. 常用的懒加载方式有两种：即使用 ES中的import 和 vue异步组件未使用懒加载使用ES中的import进行懒加载 (推荐使用，也是最常用的)使用VUE中的异步组件进行懒加载...
2020-09-10 00:21:24
259
原创 懒加载和预加载
懒加载什么是懒加载？懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。为什么要使用懒加载？很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。要是页面载入就一次性加载完毕。估计大家都会等到黄花变成黄花菜了。懒加载的原
2020-09-08 23:30:04
310
原创 Mock数据：模拟数据
MOCK具体使用方法mockjs官网：http://mockjs.com/mockjs官方文档：https://github.com/nuysoft/Mock/wiki/Getting-Started第一步 安装mockjsnpm install mockjs第二步 创建一个mock目录生成mock数据第三步：将模拟的数据注入到main.js// 注入mockimport ‘./mock’第四步：在要请求的组件中请求数据axios.get(‘http:/
2020-09-07 23:40:10
278
原创 数组
概念：一组相同类型的数据的组合 数组也是一种引用类型，名称：数组名称不是固定的，与存放的数据的类型有关。数组中只能存一种类型的数据如: 存放一组int类型的数据，数组名称 int[] 存放一组字符串数据 数组名称 String[] 存放一组Scanner类型的数据 数组名称 Scanner[] 存放一组字符类型的数据 数组名称 char[]元素的概念： 数组中的每个数据，都是这个数值的元素。数组的声
2020-09-04 20:40:25
206
原创 Promise理解以及封装ajax
Promise.then(函数1，函数2)函数1：表示成功返回函数2：代表失败返回.catch：失败处理ajax(url,‘GET’) //通常成功返回的处理 .then(res=>{ console.log(‘获取数据：：’,res) }) //失败处理 .catch(error=>{ console.log(‘失败的处理’,error) }).all：主要用于同时处理多个接口的请求时使用，只有多个接口同时成功返回时才可以finally：无论成功和失败，都会被执行race
2020-09-03 22:46:24
79
原创 闭包和原型链
闭包（英文：closure）是一个函数与作用域环境(即 词法环境)形成的闭包闭包的理解：广义的闭包：函数这个函数能访问到函数外部的状态（也称函数外部的变量）并不是我们平时理解的闭包：函数嵌套函数，并且内部函数通过return返回到外部，外部可以访问内部函数的变量总结：闭包=函数+词法作用域（词法作用域：即以变量声明定义的位置为参照，如果当前位置没有定义，就会访问父级定义的位置）闭包特点：闭包中自由变量长期驻留内存，长期驻留内存中的变量如果处理不当，会导致内存泄露，不用的话
2020-09-03 00:19:50
284
原创 微信小程序收藏和搜索功能实现思路
<image src="{{src}}" catchtap="add_soucang" data-user="{{list}}"></image>
2020-09-01 23:53:34
797
原创 什么是防抖和节流？有什么区别？如何实现？
什么是防抖与节流？防抖（debounce）：当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。通俗地讲（在固定的时间内没有触发事件，会在固定时间结束后触发，如果固定时间内触发事件了，会在延长固定时间再触发）节流（throttle）：当持续触发事件时，保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们
2020-08-31 23:03:58
114
原创 vue 更改头像功能实现（结合项目）
用VUE脚手架学习开发的一个项目（某学习软件）先分享一个更换头像的功能 真实后台接口数据很常见的个人中心版块 重点在头像和昵称这块，首先要理清业务需求（点击头像或昵称跳转到修改信息页 下面上代码）跳转到信息填写页面↑↑↑↑↑↑ 点击头像 弹出遮罩层↓↓↓↓↓这些简单逻辑就不上代码了弹出遮罩层 点击拍照 弹出本地文件夹 选择一张已经准备好的图片 开始实现主要逻辑需求 下面上代码OK新手上路 请多关照...
2020-08-28 23:09:27
2197
2
原创 浅谈后台管理系统
一、后台是什么二、模块管理三、角色管理四、账号管理五、密码管理六、更多讨论一、后台是什么后台不是某个独立系统，是多个模块的组合，并且之间还有信息交互。所以后台的设计对于PM要求一般较高。后台是用来数据维护的，后台需要一个管理模块来对后台的权限、角色、密码和模块进行管理，如何设计这个模块是我们要学习的。对于有经验的PM来说，当前台提出需求时，第一时间并不是去画原型、设计功能、而是分析要实现需求涉及哪些模块，需要协调哪些子系统对接。所以PM一定是对产品整体架构比较清楚，能从系统整体角度考虑功能
2020-08-26 22:47:20
3428
原创 vue中8种组件通信方式
vue组件中关系说明:如上图所示, A与B、A与C、B与D、C与E组件之间是父子关系； B与C之间是兄弟关系；A与D、A与E之间是隔代关系； D与E是堂兄关系（非直系亲属） 针对以上关系可归类为：父子组件之间通信非父子组件之间通信(兄弟组件、隔代关系组件等)下面演示不同的场景下如何选择有效方式实现的组件间通信方式一、 props / emit父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信。父组件向子组件传值下面通过一个例子说明父组件如何向子组
2020-08-25 23:51:05
244
原创 组件样式穿透和vuex数据持久化
对于一些组件我们需要修改组件内部的样式 但是因为scoped导致样式独立 互不影响想要修改只能使用组件样式穿透1. less的样式穿透 不同组件之间样式穿透 /deep/2. scss样式穿透 ::v-deep好像scss直接使用deep是没有效果的 可以去掉lang="scss"就可以生效或者是使用 ::v-deep注意：::v-deep 是在scss中使用的3. stylus >>>除了使用样式穿透之外 我们还可以不使用scoped关键字直接使用#users{h
2020-08-24 22:35:03
241
原创 web前端新手面试指南：自我介绍
web前端新手面试指南：自我介绍面试时注意：自我介绍不能太长，也不能过短，3分钟左右最合适，尤其做为web前端技术方面的面试，更加要说到点上，我依次从学习方面、项目实践、未来规划这三个方面写下web前端面试的自我介绍。您好，我叫###，广东人，是厦门大学毕业，今天来是想面试贵公司的web前端岗位，我想从以下三个方面介绍自己。web前端新手面试指南：自我介绍web前端技术面经项目实践从接触前端至今有3年时间了，期间写的最多的就是静态页面，也写过H5和响应式页面，最近也开发了两个比较综合的项目wor
2020-08-21 23:33:14
8063
原创 vue实现用户注册获取验证码及验证码校验功能（部分代码）
首先需要明确业务需求：前端需要对用户手机号码校验（手机号格式、手机号输入框是否为空）需要对验证码校验（验证码输入格式、验证码输入框是否为空）获取验证码按钮校验（控制验证码60s内不可重复提交、判断验证码是否和输入框中的值相同、验证码输入框是否为空）根据不同返回结果给予不同的提示手机号已绑定（别人已绑定）手机号为当前用户已绑定后端集成发送短信验证码能力随机生成六位数短信验证法校验手机号是否已绑定存储一个简单的用户手机号绑定/注册的业务大致就是这些，接下来我们开始做。首先做前端
2020-08-21 00:15:48
2711
原创 vuecli3配置开发环境 测试环境 生产环境
开发环境、生产环境、测试环境的基本理解和区别：开发环境：开发环境是程序猿们专门用于开发的服务器，配置可以比较随意， 为了开发调试方便，一般打开全部错误报告。项目尚且在编码阶段，我们的代码一般在开发环境中 不会在生产环境中，生产环境组成：操作系统 ，web服务器 ，语言环境。 php 。 数据库 。 等等测试环境：一般是克隆一份生产环境的配置，一个程序在测试环境工作不正常，那么肯定不能把它发布到生产机上。项目完成测试，修改bug阶段生产环境：是值正式提供对外服务的，一般会关掉错误报告，打开错误日志.
2020-08-20 00:36:28
1144
原创 vue请求后台数据真实接口和封装请求数据的接口总结
vue请求后台数据真实接口真实案例前端请求html 模块js模块store文件内容封装请求数据的接口总结一、配置url（可以放在一个js中）引入axios：import axios from “axios”配置urlconst service=axios.create({baseURL:请求的地址,timeout:5000 //访问超时的时间限制});抛出（如果是新起的js文件）：export default service;二、写接口的文件（js文件）.
2020-08-18 22:46:38
1164
原创 基于webpack搭建vue的开发环境
webpack概念本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundlewebpack核心概念入口：entry：指向项目执行的主入口出口：output 构建输出的文件路径和文件名加载器：loader 转换webpack不识别的文件（资源）类型插件：plu
2020-08-18 00:17:35
112
原创 vue 指令
指令解释：指令 (Directives) 是带有 v- 前缀的特殊属性作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM常用指令v-textv-htmlv-bindv-text解释：更新元素的 textContentv-html解释：更新元素的 innerHTMLv-bind作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM语法：v-bind:title=“msg”简写：:title=“msg”v-on作用：绑定事件
2020-08-16 23:54:52
161
原创 微信小程序项目完工之感想篇
干一行爱一行 不爱也得爱 一个前端渣渣的感想，先讲一下另一个大数据渣渣的故事吧（我的朋友-…-）近30岁的年纪，每天和00后的朋友一块学习，努力程度绝对能给自己感动哭了，每天睡4个小时左右，在他身上没有周末这一说，吃饭这种事每天都是随缘，近乎痴狂。唠这么一堆不是想表达他有多么辛苦，多么惨，只是想问一下各位你们觉着他的技术怎么样。 只能说一般般！ 最痛苦的莫过于这种事了，100%努力的结果是失败 当然这是事前话了，不过是好是坏早已明朗，前天，我俩照面了，他跟我说了句：我想放弃了。…好了，其实我跟我朋友的情况差
2020-08-16 00:17:56
408
原创 项目答辩PPT（一）
以 运动APP 为例展开1. 项目整体介绍（定位和需求）在银行工作的王小姐是个健身爱好者，从制订健身计划，到约人一起跑步，再到周末预订场地和家人打一场羽毛球赛，她用一部手机轻松搞定。“现在有了手机APP，运动方便多了。”王小姐的运动方式是如今都市人的一个缩影。当运动成为时尚，健身成为习惯，各种运动类APP争相进入了运动市场。这不但给人们带来了一种新的运动方式，还形成了一个新的产业。去年，有12个运动APP产品获得风投。运动app开发不但可以让们身体上得到健康，还可以在运动交流，增加他们运动乐趣。.
2020-08-15 01:28:22
4807
原创 项目答辩PPT
将一个团队的结晶（开发项目）用PPT的方式展示出来？既然老大发话了 那必须要完成 首先在脑袋中整理出来一个框架 在这个框架里具体要干啥？ 每项每条每个要细化到什么程度？ 做出来要如何说出来展示给大家？今天先讲一下大概要做的事情1. 项目整体介绍（定位和需求）项目策划的核心、本源，是项目全程策划的出发点和回归点，是在项目策划初期就必须首先明确。2. 项目模块介绍明确各模块职责，了解各模块涉及的对象3. 每个模块具体功能及如何实现结合穿插技术讲项目比如商品模块的功能：添加商品时，商品图片的.
2020-08-14 01:15:25
2199
原创 微信小程序中常见的事件理解
官方文档：事件是视图层到逻辑层的通讯方式事件将用户的行为反馈到逻辑层进行处理事件对象可以携带额外信息，比如：id,dataset事件的分类1、冒泡事件：一个组件上的事件被触发，该事件会向组件的父节点传递2、非冒泡事件，该事件不会向父节点传递小程序中的冒泡事件：事件的绑定和冒泡以bind或者catch开头，加上事件的类型，如：bind绑定事件不会阻止冒泡事件向上冒泡，catch绑定事件能阻止冒泡事件向上冒泡。事件对象自定义事件对象属性列表detai ： 组件额外信息t.
2020-08-12 22:09:12
292
原创 微信小程序授权登录(实战篇)
（未封装版）短时间内的研发 有很多不足 好在还能实现 o√o1.自定义一个模板 只复用wxml,css两部分 下图细节已标注2.使用自定义模板 举个栗子3.这里用点击事件触发自定义模板中授权登录排版的显示隐藏 同时做是否已登录的逻辑根据已设定逻辑做出相对应的交互4.在自定义模板中做登录注册的逻辑以上打好基础下面正式开始：源码Page({// 页面的初始数据data: {注册需要用到的三个值iv: '',encryptedData: '',code
2020-08-11 22:55:25
1196
原创 微信小程序中用户登录和登录态维护
微信小程序接口改版后的登录和会话保持流程提供用户登录以及维护用户的登录状态，是一个拥有用户系统的软件应用普遍需要做的事情。像微信这样的一个社交平台，如果做一个小程序应用，我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件。让用户登录，标识用户和获取用户信息，以用户为核心提供服务，是大部分小程序都会做的事情。我们今天就来了解下在小程序中，如何做用户登录，以及如何去维护这个登录后的会话(Session)状态。在微信小程序中，我们大致会涉及到以下三类登录方式：自有的账号注册和登录使用其他第三方
2020-08-11 00:44:39
515
原创 微信小程序封装数据请求
先提一嘴在使用 微信开发者工具 清除授权数据的方法 相对来说比较完美便捷正文： 封装数据请求统一环境地址业务数据请求方法的统一 （例如）商品列表接口详情接口加入收藏搜索接口…ajax的封装（ajax:axios,wx.request,xmlHttpRequest,fetch）运用示范...
2020-08-10 00:38:45
91
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人