张婷张婷呀-优快云博客

HTTP 与 HTTPS 有哪些区别1.HTTP 是超文本传输协议，信息是明文传输，存在安全风险的问题。HTTPS 则解决 HTTP 不安全的缺陷，在 TCP 和 HTTP 网络层之间加入了 SSL/TLS 安全协议，使得报文能够加密传输。2.HTTP 连接建立相对简单， TCP 三次握手之后便可进行 HTTP 的报文传输。而 HTTPS 在 TCP 三次握手之后，还需进行 SSL/TLS 的握手过程，才可进入加密报文传输。（这里我没有详细了解TCP三次握手的东西，后面再进行补充）3.http默认的端

2021-01-06 18:07:55 246

原创在vue-cil3中配置多个代理url，解决项目运行时跨域问题

1.在项目的根目录下新建vue.config.js配置代理信息//想要代理的目标地址const targetUrl=`http://47.101.140.48:9533`const wxUrl=`https://qyapi.weixin.qq.com`//需要代理的api的匹配路径列表const proxyTable= { '/mdata': {//这里的值：例如你想访问的接口地址为http://47.101.140.48:9533/mdata/xxxx target: t

2021-01-06 17:33:59 1103 2

原创 vue修饰符sync在项目中的应用

sync这个关键字在v2.3.0+ 新增,主要的目的就是子组件改变父组件DATA的一种方法，而不需要props向上传递改变父组件的值。使用背景在项目中有遇到比较复杂的页面结构，为了代码的可读性将各个模块封装为组件，但是这样就导致了子组件利用props向上传递参数的时候比较麻烦，并且有时候父组件的值会莫名其妙的不更新数据，所以我使用sync替换原本的传值方式，有些类似于对子组件和父组件之间进行双向绑定，修改子组件的值的时候就能直接改变父组件中的值。父组件中在子组件中更新数据...

2021-01-06 17:21:40 271 2

原创浏览器缓存的理解与应用

关于浏览器缓存的利用如果很好的利用缓存能够很好的对网页速度进行优化，能够缩短请求资源的时间，对于已缓存的文件可以直接访问缓存，能够减少带宽。当我们请求数据时，可以利用缓存直接访问缓存的内容不发起请求，或者是发起请求但是后端存储的资源并未发生改变，就不再将数据回传，能够减少数据响应的时间。缓存的位置缓存按位置区分可以分为四种，Service Worker，Memory Cache，Disk Cache，Push Cache，当依次查找这些位置都没有找到时，才会去请求网络。1.Service Work

2021-01-03 02:47:36 321

原创 HTTP常见状态码及解决方式

1开头的状态码1xx 类状态码属于提示信息，是协议处理中的一种中间状态，实际用到的比较少。2开头的状态码2xx 类状态码表示服务器成功处理了客户端的请求。（1）200 OK：最常见的成功状态码，表示一切正常。如果是非 HEAD 请求，服务器返回的响应头都会有 body 数据。（2）204 No Content：也是常见的成功状态码，与 200 OK 基本相同，但响应头没有 body 数据。（3）206 Partial Content：是应用于 HTTP 分块下载或断电续传，表示响应返回的

2021-01-03 02:47:20 3042

原创 vue的组件通信的方式

关于vue组件相互通信的几种方式如下1.方法一：props和 $emit 父组件通过props向下传递数据给子组件，子组件通过event给父组件发送消息，实际上就是子组件把自己的数据发送给父组件。2.方法二: $attrs和 $emit 第一种方式处理父子组件之间的数据传输有一个问题：如果父组件A下面有子组件B，组件B下面有组件C,这时如果组件A想传递数据给组件C怎么办呢？如果采用第一种方法，我们必须让组件A通过prop传递消息给组件B，组件B在通过prop传递消息给组件C；要是组件A和

2021-01-02 19:00:41 133

原创 Vuex详解

Vuex笔记1. Vuex概述1.1 vuex是什么 vuex是实现组件全局状态（数据）管理的一种机制，可以方便实现组件之间数据的共享1.2 使用Vuex统一管理状态的好处能够在vuex中集中管理共享的数据，易于开发和后期维护能够高效地实现组件之间的数据共享，提高开发效率存储在Vuex中的数据都是响应式的，能够实施保持数据与页面的同步1.3 什么样的数据适合存储到Vuex中一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的da

2021-01-02 18:45:13 171

原创 http的常见请求方法

get： 1. Get 方法的含义是请求从服务器获取资源，这个资源可以是静态的文本、页面、图片视频等。 2.请求的时候数据是被放在url上面的，由于url长度的限制，所以传送的数据量比较小。 3.Get只产生一个TCP数据包，通俗来说GET请求，浏览器会把http header和data一起发送出去，服务器响应200后返回数据。常用于，我们常见的查询页面列表，查看图片资源等。post：POST 方法向 URI 指定的资源提交数据，数据就放在报文的 body 里。POST产生一个TCP数据包，

2021-01-02 18:39:00 314

原创解决运行vue项目内存溢出

（1）全局安装increase-memory-limitnpm install -g increase-memory-limit（2）进入相应的项目目录下，执行increase-memory-limit然后再运行就不会内存溢出了

2020-12-03 13:56:26 1630 1

原创 dart基本语法

1.main函数main函数是dart的入口方法（1）定义为：main(){print('hdhhhh');}(2)无返回值定义为void main(){}2.变量（1）变量定义变量的定义有两种方式，一种是类似于js种自动推断类型的定义，另外一种则可以制定类型定义。(1)使用var定义（自动推断类型）：var a='ggg';var b=99;在后面的使用中，给变量赋值的时候必须要与最开始用var声明的类型一致，否则代码会报错。如下所示：var str='qqq';s

2020-11-23 22:46:09 670

原创 mac dart安装

1.安装brew在mac环境下安装dart首先要安装brew。不然安装时会报-bash: brew: command not foundbrew官网的这个安装方法貌似只能翻墙使用，我没办法安装。然后找了一下不用翻墙的方法：在终端运行如下命令：/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"然后按照操作提示来即可。这里选择下载镜像的时候我选择的是北京外国语学院（ps：清华大

2020-11-20 15:12:09 1517 1

原创 (5)vue+ts

1.vue+ts项目脚手架搭建(1)安装vue脚手架 npm i -g @vue/cli如果报错A complete log of this run can be found in:需要全局安装更新npmnpm install npm -g再运行npm i -g @vue/cli即可（2）创建vue项目

2020-11-10 11:14:51 158

原创（4）类

1. 创建对象（1）js写法function testClass(name,age){this.name=namethis.age=age}testClass.prototype.test1=function (){console.log(this.name,this.age)}//调用let t=new testClass('张婷',19)t.test1()//张婷 19t.namet.age（2）ts写法class testClass{name:string;//成员

2020-11-09 11:51:04 2240

原创（3）函数

1.函数定义在ts中函数有返回值，要定义返回值的类型，当函数没有返回值时，则用void来定义//有返回值function testMethod():string{return 'hhhhh'} let testMethod:number = function(){return 11}//无返回值function testMethod():void{····} let testMethod:void = function(){····}2.函数参数（1）形参实参一般用法/

2020-11-03 11:58:46 120

原创获取某年某个月的天数

/** * @param year 年 * @param month 月（如:2） */function getDaysInMonth (year, month) { return new Date(year, month, 0).getDate()}

2020-11-03 11:03:09 245

原创 js时间戳转日期，日期转时间戳方法

// 日期转时间戳Vue.prototype.dateTransformaTimeStr = function (dateStr) { let date = new Date(dateStr) return date.getTime()}// 时间戳转日期/*type：YYYY-MM-DD-hh:mm:ss ----->2020-11-03,19:08:02YYYY-MM ------>2020-11hh:mm:ss ------>19:08:02默认

2020-11-03 10:57:01 442 1

原创移动端判断当前是ios还是Android平台的方法

/** * 判断平台 * @return {String} 平台 */export function detectOS () { const ua = navigator.userAgent.toLowerCase() if (/iPhone|iPad|iPod|iOS/i.test(ua)) { return 'ios' } else if (/Android/i.test(ua)) { return 'android' } else { return 'ot

2020-11-03 10:45:37 389

原创（2）ts数据类型

1.ts数据类型总览ts包含js原有的数据类型，并且在js基础上新增了几种数据类型2.数据类型的定义（1）常见数据类型let type1:number=1//number：只能为数字类型let type2:boolean=true//boolean,只能为true和falselet type3:string='字符串呵呵'//string,只能为字符串（2）数组（Array）数组有两种定义方式// 在元素类型后面加上[]，数组每个元素都为numberlet arr: number[]

2020-11-02 17:57:05 677

原创如何配置vscode自动编译ts文件生成js文件

（1）生成tsconfig.json 配置文件tsc --init(2)修改tsconfig.json 文件配置outDir属性即为输出的js文件的路径（3）设置监听/运行在vscode中按 mac： Command+ ⬆️ + B ； windows： Ctrl + Shift + B选择监听后每次保存将会自动更新对应文件夹中js的内容...

2020-11-02 16:19:36 1410

原创（1）ts安装与运行

1. 环境安装（1）全局安装typescriptnpm install -g typescript（2）检查是否安装完成tsc -v tsc的作用：将ts转化为浏览器或node.js能识别的js代码ts代码运行

2020-11-02 16:18:36 736

原创将Base64图片转为Blob文件流

在项目中遇到h5调用app的方法返回base64格式的图片给h5，这时候我们通常都需要把其转化为文件流的格式再上传到后端服务器上。在企业微信的sdk中ios获取的base64会多加一个前缀，所以下面的方法分为两种，一种为处理普通的base64，一种为处理企业微信ios返回的base64/** * 将以base64的图片url数据转换为Blob * 用url方式表示的base64图片数据 * isWx:是否为企业微信 */ let base64 = {

2020-09-18 11:49:46 5055

原创解决前端代码部署发布后页面代码不更新问题

在项目中遇到前端部署镜像后，每次都访问历史版本，只有清理缓存才会访问最新代码。这里我是通过更改nginx反向代理的配置文件来解决了这个问题在反向代理的配置文件新增这个配置 location / { proxy_set_header X-Forwarded-For \$proxy_add_x_forwarded_for; try_files \$uri /index.html; add_header Cache-Contro

2020-09-18 11:29:38 5484

原创 js去掉数组中某个值相同的元素，并保留一个

例如我们想去掉数组中id相同的元素并保留一个。let attchments=[{name:'哈哈哈',id:'01'},{name:'好多',id:'02'},{name:'嘿嘿黑',id:'01'}]dealRdata (attchments,keyname) {//attchments:数组，键值 let list = [...attchments] let result = [] let obj = {} for (let i = 0; i

2020-09-18 11:16:09 1574

原创判断一个时间是否处于两个时间之间

/** * @method 判断一个时间是否位于两时间之间 * @param sDate1，sDate2为日期，如：2019-01-01 */function dateBetweenJudget (startDate, endDate, date0) { let oStartDate = new Date(startDate) let oEndDate = new Date(endDate) let oDate0 = new Date(date0) if ((oEndDate.get

2020-09-11 15:23:57 1608

原创根据日期判断当前是周几

/** * @method 根据日期判断今天周几 * @param {*} date 日期格式为字符串2018-01-01 */function getDateWeek (date) { const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'] const myDate = new Date(Date.parse(date)) return weekDay[myDate.getDay()]}...

2020-09-11 15:22:04 551

原创 js深拷贝方法

深拷贝一个数组或者一个对象/** * @method 深拷贝函数 * @param {*传入需要深拷贝的对象} obj */function deepClone (obj) { let newobj = obj.constructor === Array ? [] : {} if (typeof obj !== 'object') return if (obj === {}) return try { newobj = JSON.parse(JSON.stringify(o

2020-09-11 15:19:33 106

原创 echarts绘制负数条形图，点击条形区域触发点击事件

在工作中遇到需要绘制负数条形图的场景，并且点击条形图会触发相应的操作。在这个过程中遇到很多问题，大概总结一下。1.页面中需要引入echarts首先要下载依赖包，这里用的是yarn add echarts下载完成后要将echarts引入页面import echarts from 'echarts'绘制条形图 // 基于准备好的dom，初始化echarts实例 echarts.init(document.getElementById('echart-line')).disp

2020-09-11 15:11:12 1286

原创文本域textarea与页面滚动相互冲突解决办法

应用场景在页面中的textarea文字内容比较长的情况下通常需要滚动浏览，这时如果页面上有滚动的话就会冲突，本质上就是冒泡事件，所以我们只需要阻止文本域的冒泡事件即可。在页面中或全局加上如下代码即可：window.addEventListener('touchmove', function(e) { let target = e.target; if (target && target.tagName === 'TEXTAREA') { e.stopPropaga

2020-09-09 15:40:32 1179

原创移动端查看附件的几种方式

移动端查看附件的几种方式html标签实现方式（1）a标签的实现方式<a :href="fileUrl">文件名称</a>js类似的实现方式有：window.location.href(url)window.open(url, '_self')优点：代码简单，适用于h5集成在支持下载查看的app，适用于文件下载链接。如果是html链接则可直接实现预览。不足：下载链接，仅适用于支持下载的app，否则安卓无法查看附

2020-09-03 17:01:06 4278

原创 zip文件树形结构数据组件封装（vue）

zip文件树形结构数据组件封装（vue）项目中需要实现各种文件的预览，其中包括zip文件的预览。本文主要是针对zip文件在后端解压后返回树形结构的数据给前端展示目录结构。

2020-09-03 14:52:24 603

weixin_42326052的博客

原创 vue3.0父子组件通信

原创 http与https的区别