- 博客(84)
- 收藏
- 关注
RSS订阅原创 angular的httpClient
angular使用httpClient模块发送网络请求，首先在app.module.ts中引入HttpClientModule、HttpClientJsonpModule相关模块，然后在下方imports中添加相关模块1、http请求---get和post 在需要发送网络请求的组件中引入，注意post请求需要引入httpheaders;下方construuctor中定义变量发送get/post请求2、jsonp请求3、axios请求在service里封装一个发送ax
2022-07-04 17:35:39
507
1
原创 angular的observable
类似于promise，angular里有observable来处理异步操作，接下来简要介绍一下他。在使用observable之前，需要在相应的组件里先引入 例如，我想先创建一个发送异步请求的文件storage.service.ts，把它放在service里，哪里需要哪里引用。可以发现observable的使用和promise类似，先new一个实例，该实例接受一个函数参数，该函数参数内部可实现异步操作，又有一个observer参数，我们可以通过observer.next将异步数据抛出，这样我们就能在
2022-07-04 16:59:58
1818
原创 报错Failed to resolve component: column-list
在一个组件中引用了另一个组件，结果被引用的组件不能正常显示，还报错Failed to resolve component: column-list If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at ...
2022-07-04 15:44:27
1282
原创 angualr的脏值检测
angualr主要通过脏值检测来判断数据有无发生改变，这与vue不同。什么是脏值检测呢？我也只能大概说下，还要继续探索！1、监听器$watcher 为scope中绑定在页面中的数据添加监听器$watcher，当监听器监听的数据发生改变时，会触发对应的listener。2、持续监听 当一个watcher中的值改变会影响另一个watcher中的值，这种情况下digest不能监听到变化，所以不能只进行一次digest。每次执行digset时，若有数据发生变化，就将判断数据是否为脏的dirt
2022-07-04 15:42:59
512
原创 angular的数据双向绑定
以前我们通过jquery操作DOM可以实现数据绑定，但这样会使操作量加大，而在angular中可以轻松的实现数据双向绑定。数据双向绑定指的是数据改变，相应的视图发生改变，而用户操作视图，底层数据会发生相应改变。angular实现数据双向绑定主要依靠以下几个指令：1、Mustache语法---{{ }} 单向的数据绑定，数据--->视图2、ng-model 实现表单的数据双向绑定我们可以在input表单上使用ng-model，实现表单输入值和底层数据的双向绑定，实际上它是由事件绑定和属性
2022-07-04 15:14:22
3671
原创 vue3中用mitt实现组件之间传递数据
vue2中可以使用$on，$emit，$off 来发射，监听数据，但是vue3中取消了它们，因此要想新的办法。我们可以用mitt来实现。首先，安装mittnpm install mitt --save然后组件内引入import mitt from 'mitt'正式使用，先创建监听器，一个组件emit数据，另一个组件on数据validateForm组件内：// 创建监听器export const emitter = mitt()setup(){ // 创建存放
2022-03-24 14:55:44
3025
1
原创 vue3中用ref拿到dom元素
实现场景：有多个表单元素组件validate-input，内部可以实现验证功能（即验证表单输入是否满足条件），并且有返回值（true表示满足，false表示不满足），将他们包裹在一个父组件validate-form中，将父组件放在app.vue中，若想在app.vue中拿到父组件中的属性，则需要先获取到该元素节点。 这就需要在父组件中拿到子组件的dom节点在vue2中，我们可以通过ref拿到一个元素节点<div ref="myRef"></div>thi...
2022-03-23 20:45:02
3394
原创 vue3中的watch
例子：点击按钮，网页标题改变<template> <div id='app'> <img alt="vue logo" src="./assets/logo.png"> <!-- ref对象在模板中引用时，vue可以直接把内部的值展示出来，不需要写count.value --> <h1>{{count}}</h1> <h1>{{double}}</h1> <
2022-03-21 14:42:02
1495
原创 vue3中的ref、computed、reactive、toRefs
在vue2中，data函数里返回的值直接为响应式的，但在vue3中我们需要使用一些API才能达到这个效果。setup函数中拿不到vue的this1、ref API本质为一个函数，输入参数为一个值（原始类型），返回响应式的对象2、computed API本质为一个函数，输入参数是一个函数，可以将我们需要的值作为输入函数的返回值例子：实现点击按钮，屏幕上的数加1<template> <div id='app'> <img alt="vue
2022-03-20 21:45:37
983
原创 vue3中如何关闭eslint
初始创建vue项目时，开启了eslint，没想到编码不规范造成了编译不成功，又想关掉。看了很多资料都是vue2的，在vue3中应该打开eslintrc.js修改配置，如下：将里面的'plugin:vue/vue3-essential',注释掉，就可。...
2022-03-20 18:44:24
6764
2
原创 类型别名、字面量、交叉类型
1、类型别名ts中定义类型有时很冗长，用type直接把函数类型定义出来，后续可以直接使用。定义函数类型：let sum: (x:number,y:number)=>numberconst res = sum(1,2)//type声明一个函数类型，以后可以直接用type plusType = (x:number,y:number)=>numberlet sum2: plusTypeconst res2 = sum2(2,3)定义联合类型：type num = n
2022-03-11 21:49:42
160
原创 泛型的几个用武之地
听课听的有点晕，赶快记下来在常规函数的输入输出里，我们希望函数的输入与返回值类型保持一致，有点难，这时可以用到泛型。function fn(num){ return num}const res = fn(123) //这时res丧失了变量类型，为any//若约束fn的输入输出类型function fn(num:number):number{ return num}const res = fn(123) //此时res为number
2022-03-11 16:25:10
167
原创 ts中的implements
在js中，一个class只能继承自另一个class，若其他类中的方法与属性也想继承，则很麻烦。而在ts中可以使用implements来实现一些类共有方法属性的提取。class Car{ switchRadio(trigger:boolean){ }}class cellphone{ switchRadio(trigger:boolean){ }}上述两个类都有一个共同的方法，我们可以使用interface接口把他提取出来,
2022-03-11 15:10:33
14162
3
原创 ts中的class
首先是在es6中的class，类的实例为对象，对象三大特性：封装、继承与多态。class Animal{ constructor(name){ this.name = name } run(){ return `${this.name} is running` }}const snake = new Animal('lily')console.log(snake.run())es6中的继承：class Dog exte
2022-03-11 11:46:39
1721
原创 ts中的类型推论、联合类型和类型断言
一、类型推论在定义函数时，我们发现用函数表达式定义函数时，声明的变量会自动获得一个数据类型，如下//此时add将自动获得(x:number,y:number,z?:number) => number类型//与let add：(x:number,y:number,z?:number) => number同理let add = function(x:number,y:number,z?:number):number{ return x+y}此时发生了类型推论，ts推断出
2022-03-10 11:10:02
2221
原创 Typescript学习笔记-变量类型
typescript属于静态类型语言，在编译时就会检查数据类型，与c、c++一样，而常用的js、python属于动态类型语言，运行时才会检查数据类型。使用ts可以帮助我们减少错误代码的生成，提高效率。下面主要介绍ts的一些原始数据类型。ts的原始数据类型有number、boolean、string、undefined、null、bigint、symbol、object。let flag:boolean = falselet age:number = 23let firstname:stri
2022-03-09 21:29:55
1151
原创 如何将vue项目部署到服务器上
最终结果：输入mi.jialilili.cn就能访问到该项目 我用的是百度的服务器（centOS)，首先得进行域名解析，配置二级域名，还要打开相应的端口，在云服务器的安全组里设置，图怎么有点不清楚 之后打开gitbash，开始连接服务器，输入ssh root@‘ip地址’再输入密码，如下图，连接成功！ 若服务器没有安装nginx，可以用以下指令安装，检查nginx配置yum install nginx //安装which nginx ...
2021-09-06 13:43:59
3555
原创 fatal: unable to access ‘https://github.com/jialililili-zhou/Mimall.git/‘: OpenSSL SSL_read: Connect
上传代码到github上遇到了这样的问题，解决方法如下1、注意false，不加双引号git config --global http.sslVerify false 我是用这种方法解决的2、可能是网不行，换个网试试
2021-09-03 10:03:23
311
原创 JS实现每隔一秒打印一个数字
第一种：匿名函数自调用// 第一种：匿名自调用函数，构建闭包for(var i = 0;i < 4;i++){ (function(i){ setTimeout(()=>{ console.log(i) },1000*i) })(i)}第二种：let形成块级作用域// 第二种：letfor(let i = 0;i < 4;i++){ setTimeout(()=>{ console.log(i) },1000*
2021-08-29 17:01:03
2434
原创 iframe和frame的区别
iframe和frame的功能差不多，iframe用来定义一个内联框架，在html文档里嵌入另一个html文档。iframe包含的内容和页面是一个整体，但是frame包含的内容是一个独立的区域。 先来说说frameset一、frameset主要属性：1、cols：纵向分割页面。其数值表示方法有三种：“30%、30（或者30px）、*”；数值的个数代表分成的视窗数目且数值之间用“,”隔开。“30%”表示该框架区域占全部浏览器页面区域的30%；“30”表示该区域横向宽度为...
2021-08-26 10:27:33
1998
原创 手写promise.all、promise.race
promise.all：接受一个数组参数，数组元素是promise实例，如果不是，将调用promise.resolve()转化为promise。当所有promise实例的状态都变成fulfilled，它才会变成fulfilled。Promise.prototype.all = function(array){ if(!Array.isArray(array)){ throw new Error('not a array') } var result = ne.
2021-08-24 17:05:55
61
原创 token是啥？
一直都听说过token，但是却不知道具体实现是什么，整理一些最近看到的内容。说到token，得先说起session和cookie，大致说一下他俩的优缺点。一、session 浏览器在第一次向服务端请求数据时，服务端会开辟出一小块内存，用来存储session，形式是键值对，名称是JSESSIONID,值是一个userid，相当于一个特殊cookie，之后的每次请求浏览器都会带着JSESSIONID，让服务端记住他。缺点：服务端上存储的session过多，会影响服务端性能； ...
2021-08-24 13:55:06
288
原创 promise例题
1、promise.then()传入的不是函数，会发生值穿透Promise.resolve(1) .then(2) .then(Promise.resolve(3)) .then(console.log)//1Promise.resolve(1) .then(function(){return 2}) .then(Promise.resolve(3)) //没有return相当于独立的promise，后续then不会接受到 .then(cons
2021-08-21 21:23:26
375
原创 判断对象是不是空对象的几种方式
1、JSON.stringify()var b = {}return JSON.stringify(b) === '{}'2、for...in for...in可以遍历对象及对象原型上的可枚举属性 注意：js中的基本包装类型的原型属性是不可枚举的，比如Object,Array,Number等function isEmpty(obj){ for(let n in obj){ return false } //排除null,undefi...
2021-08-18 18:05:13
810
原创 原生js、jQuery和vue的区别
原生js、jQuery：jQuery只是对原生js的API进行了封装，操作更加方便，但是数据和视图层没有分开，本质上还是要操作DOM实现逻辑。 vue：不仅对js的API实现了封装，还实现了其他功能，使数据和视图层分开，通过数据驱动，操作的是数据，而不是DOM，能让开发者更加关注到数据上。...
2021-08-16 10:20:22
1343
原创 解决vue项目路径不正确，自动跳转404
第一种方法：使用vuerouter钩子函数beforeEach，每次进行路由跳转时都进行判断，若页面不存在就跳转到404页面。import Error from ' 'const router = new Router({ routes:[ name: 'error', path: '/error', component: Error ]}//beforeEach每次进行路由跳转时都会执行router.beforeEach..
2021-08-14 21:54:31
11908
3
原创 几种布局方式的总结
准备面试题，突然发现自己好像对布局这块仍然有点不清楚，写篇文章记录一下。先附上一个网站：加深理解http://wow.techbrood.com/fiddle/1753一、静态布局 静态布局就是传统网页的布局方式，所有的样式都统一用px来定义宽和高。也可以设置min-width和min-height，当小于这个宽高的时候就会显示滚动条，当大于这个宽高时，内容就居中对齐。 特点：没有兼容性问题二、流式布局 流式布局就是随着屏幕的改变，页面布局没有很大的改变，但...
2021-08-13 10:43:00
616
原创 display:none和visibility:hidden的区别
一、display:none 设置了display:none的元素，会从DOM结构中消失，隐藏后的元素不占据任何空间；他是一个非继承属性，通过修改其后代元素的属性，也不能让后代元素显示出来。<body> <div> <strong>给元素设置display:none样式</strong> <p>A元素</p> <p style='display:none;'&g..
2021-08-05 19:48:03
150
原创 cookie和session的区别
HTTP是一个无连接无状态的超文本传输协议，无状态就说明了每次客户端向服务端发起请求，都是一个全新的请求，服务端不记得之前的消息记录。如果在某些特定场景下，需要服务端一直记得之前的联系，那该怎么办呢？用cookie和session来解决吧！一、cookie cookie本质就是一小段文本消息，当服务器需要知道客户端的状态时就可以给客户端颁一个cookie，之后每次客户端与服务端连接都会带上这个cookie，让服务端识别出他。cookie的内容主要包括name(名字)、value...
2021-08-02 15:42:19
180
原创 TCP的粘包问题
在socket网络程序中，TCP和UDP分别是面向连接和非面向连接的。因此TCP的socket编程，收发两端（客户端和服务器端）都要有成对的socket，因此，发送端为了将多个发往接收端的包，更有效的发到对方，使用了优化方法（Nagle算法），将多次间隔较小、数据量小的数据，合并成一个大的数据块，然后进行封包。这样，接收端就难于分辨出来了，必须提供科学的拆包机制。在这之前得先弄清楚几个概念：保护消息边界和流 保护消息边界：把数据看成一条独立的消息在网上传输，接收端也只能接收独立的消息；而...
2021-08-02 14:46:56
706
原创 CSS选择器的优先级
一、不同级别 1、!important 2、作为style属性写在标签内 3、id选择器 4、类选择器 5、标签选择器 6、通配符选择器 7、继承 8、浏览器默认样式优先级也是按照上面的顺序依次递减二、同一级别 1、后面的样式会覆盖前面的样式 2、根据引入方式的不同，优先级也不一样总结排序：内联(行内)样式 > 内部样式表 (style标签内) > 外部样式表(link标签引入)> 导入样式(@import)...
2021-08-02 10:41:42
126
原创 华为机考-删数问题
题目：有一个数组a[N]顺序存放0~N-1，要求每隔两个数删掉一个数，到末尾时循环至开头继续进行，求最后一个被删掉的数的原始下标位置。以8个数(N=7)为例:｛0，1，2，3，4，5，6，7｝，0->1->2(删除)->3->4->5(删除)->6->7->0(删除),如此循环直到最后一个数被删除。输入：每组数据为一行一个整数n(小于等于1000)，为数组成员数,如果大于1000，则对a[999]进行计算。输出：一行输出最后一个被.
2021-08-01 11:41:25
387
原创 HTTPS
因为HTTP是明文传输，所谓的明文传输就是数据从浏览器提交到服务器时没有任何的加密处理，这样就很容易造成数据被中间人劫持。所以出现了https，它是一种更加安全的http，基于SSL/TLS协议。 SSL/TLS协议主要依赖对称算法、非对称算法和hash 但是非对称加密RSA进行身份验证，仍然有隐患。主要体现在客服端拿到的公钥并不能保证是正确的公钥，也有可能是其他人（中间人）发给他的，之后这个人再设法与服务器建立可信的链接，仍然会有数据泄露的风险，因此我们需要一个机构来专门验证合法服务器...
2021-07-30 19:55:56
169
原创 promise的几个方法
1、promise.prototytype.then()：promise实例状态改变的回调函数，有两个参数：第一个是成功回调函数，第二个是失败回调函数。他会返回一个全新的promise，因此可以继续then链式调用。2、promise.prototype.catch()：失败回调函数，状态变为rejected执行。相当于promise. prototytype.then(null/undifined,rejection) 如果promise内发生了错误，但却没有定义catch()，这时运行到这...
2021-07-30 15:23:26
7704
原创 vue的单向数据流
单项数据流指的是父子组件通过props通信，父组件传数据给子组件，子组件不能直接对传递过来的数据进行修改，否则vue会有警告；主要是为了防止多个子组件都修改父组件的数据，造成错误不方便追踪。 那有什么方法可以让子组件对传递过来的父组件进行修改然后自己使用呢？ 子组件在data中定义专门的数据，把props属性值作为它的初始值，然后在方法或计算属性中更改它的值父组件内：子组件内： 1、在子组件中利用方法改变父组件传递过来的值 2、在子组件中利用方法改变...
2021-07-30 11:02:17
466
原创 DOM性能优化
DOM的操作是十分宝贵的，因为它可能会引起回流和重绘，很耗性能，接下来介绍两种方法，可以优化DOM的性能。一、DOM查询做缓存//DOM操作不做缓存//每次循环都会获取一次DOMfor(var i = 0;i < document.getElementById('list');i++){ }//DOM操作缓存//先获取DOM元素，计算类数组长度var list= document.getElementById('list')var len = list.lengt..
2021-07-23 21:57:46
139
原创 手写promise
一、什么是promise Promise是一个构造函数，用来解决传统异步操作中会出现的回调地狱情况。它接受一个函数作为参数传递，该函数参数，又接受两个函数resolve和reject作为参数； Promise函数一共有三个状态，pending、fulfilled、rejected，状态一旦改变就不能再次更改，且只能由pending=>fulfilled，pending=>rejected； resolve将状态变为fulfilled，且执行then的第一个参数，rejec...
2021-07-23 11:38:52
96
原创 类型转化一些易出错的面试题
一、如何实现下面代码var a = ???if(a == 1 && a == 2 && a == 3){ console.log(1)}//如何编写a才能打印出1 思路：要想正确打印出1，那么按照代码所示，就必须a既等于1，又等于2，又等于3，这样一看好像不太可能实现，但是我们发现a和这些数字进行比较的时候是==，会进行隐式转化，那么如果把a设计为复杂数据类型，这样每次进行隐式转化的时候都会调用valueof()方法，我们就能重写valueof().
2021-07-21 17:48:10
78
原创 weakMap和weakSet
一、weakSet1.1 什么是weakSet weakSet和Set一样，里面只能存放内容不相同的值1.2 和Set有什么区别1、weakSet内部只能存放对象类型的数据，不能存放其他类型的数据，会报错const ws = new WeakSet();ws.add(1)// TypeError: Invalid value used in weak setws.add(Symbol())// TypeError: invalid value used in weak se..
2021-07-19 15:36:01
1079
原创 JS的继承方式
一、原型继承思想：把子类构造函数的原型指向父类构造函数的实例//父类构造函数function Animal(name) { this.name = name || 'Animal'; this.sleep = function() { console.log(this.name + '正在睡觉！'); };}//原型上面的方法：Animal.prototype.eat = function(food) { console.log(this.name + '正在吃:' + foo
2021-07-16 19:29:37
65
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人