月度归档： 2021年10月

项目框架的网络接口封装

  • 43.2继承请求封装的逻辑，调用axios.create（）函数传入获取的输入数据类型，得到一个用于网络请求的base实例，（一个实例基于一个base请求），调用实例的request方法
  • 43.6服务器返回值可能服务器请求正常，但是在正常信息里写入不正常情况，需要在response成功里面分类，如果直接返回失败，则需要在response失败里面分类。关于token，需要在request请求成功中进行headers注入
  • 43.7拦截器实现loading加载[collapse title="基础实现"]调用ELloading.service组件服务，在请求拦截器中设置，在响应拦截器取消，需要设置loading实例[/collapse][collapse title="可选loading"]添加一个传入类型showloading。创建showloading属性。默认添加showloading属性为true。在处理具体实例调用时，请求拦截器中修改。在响应中改回默认[/
  • lcollapse]

axios教程和ui库使用

  • 42.2element plus全局引入:install+app.use()全局注册+index.css导入
  • 42.3[collapse title="element plus局部引入"]install+app.component()局部组件注册+index.css引入。[/collapse][collapse title="自动注册组件："]nstall Babel-component +配置Babel规则 [/collapse][collapse title="遍历注册+独立导出"]导入index.css 导入App类型。创建带注册数组。导出注册函数。写注册函数（传入app）（内容为遍历数组注册）[/collapse]

项目框架初始化

  • 41.2vuecli框架：快速选取，Babel，vuex,router，css-process，eslint,pretter搭建。
  • 42.3editor.config.js:配置vs的编写规范，+拓展安装
  • 42.4pretter：pretter配置风格化规范，+命令行添加指令，+拓展安装
  • 42.5eslint兼容：认识兼容插件，兼容插件配置插件。+手动配置
  • 42.6~7GitHub本地提交commit规范msg
  • 42.8vue.config.js配置三种配置方式+配置别名
  • 42.9~10配置router和vuex

typescript类和接口

  • 38.3~4类的定义和继承：类是一个包含了构造函数在内的超级构造器，更简单易懂，注意构造器内的所有属性均要赋值，定义类时直接赋值，通过构造函数在构造对象时传入赋值，继承：一个类可以继承另外一个类的所有属性，super可以使用本类的构造函数获取传入的值给父类的属性赋值。
  • 38.5多态：多个子类均继承同一个类，把这个父类作为输入要求的变量类型，就不需要写多个子类作为联合变量类型。
  • 38.6三种属性修饰:public子类可以通过父类进行访问，protect，只能通过子类暴露的接口进行访问，private，只能通过父类暴露接口进行访问。
  • 38.7readonly修饰属性：只能在初始化时写入，不可改写，但是可以改写其内部的属性
  • 38.8访问器：对于private属性，不用单独写对应的访问函数，用访问器 set name 或者get name 就可以在对象中直接访问了，无需调用函数，static静态属性访问器，通过对属性添加static修饰，直接通过类对属性进行访问，无需通过对象实例进行访问
  • 38.9抽象类：当一个函数要根据不同传入值进行不同调用时，会变得很复杂需要大量判断语句，为此我们可以把每一种情况抽象成一个单独的类，并在各类里面写出自身的实现函数，然后原先的主函数就作为一个集合他们的功能接口，返回他们各自的实现函数，这里再用多态，规定主函数的输入变量类型，就可以避免不符合规定的传入，但是还是无法避免传入一个新的用多态中的父级类构造的对象，而类不能没有函数（否则报错），但有函数就可以new一个不报错的对象（函数内部没有实现，所以不会报错但也没有结果）（我们不想这样，对于非法输入要能检测到报错），就用抽象函数代替abstract，也把父级类写为抽象类，来避免这种情况（抽象类不能new实例对象）
  • 38.10类做对象类型：用类构造对象，对象的类型就该类，反之把类型设置为某个类，就需要满足类构造对象时的要求
  • 38.11对象类型，和声明变量类型一样，可以对对象内部的各个属性进行类型声明这就是对象类型声明，有两种办法类型别名或者interface {}里面的属性和对象一致，但是跟的是变量类型，string等，类似类，这种声明叫做接口
  • 对于函数类型：函数类型使用类型别名type写法而非interface写法。
  • 38.13：对于多个接口，接口可以通过继承的办法来合并，也可以通过运算符&&来合并，
  • 39.1接口实现：针对类而言，要想只限制实现某一方法的类传入，就可以通过接口实现，对传入对象的需求是一个类，然后把一个新的不满足实现的类和标准类相实现，添加入该标准类的实现，就可以了，这样就不必继承保证类的所以参数，只满足特定的实现，但也可以传入。只调用swimming的函数，传入对象不一定是鱼类，或者鱼类的子类，只要会游就可以了，人向鱼学习（实现一下，添加swimming函数）游泳，一样可以传入。
  • 39.2type和interface对比：除非是联合类型或者函数，推荐使用interface，interface可以在原有类型别名的基础上再写入，不会导致报错。
  • 39.3擦除，使用类作为对象类型时，若手动新建的对象（非类构造）所含属性多余类，报错，但是该对象再付给用同样类做对象类型的新对象时，不报错，因为对该新对象而言检测方式是，只能多，不能少。抹去多余的在检测，检测完毕加回来
  • 39.4枚举类型，字面量类型之前可以通过类型别名写在一起，但是在函数内部却需要判断来调用，枚举类型，可以通过链式调用来使用，
  • 39.5泛型：之前我们是要求传入的类型，现在我们是要求传入传入变量的类型，若未写明，也会自动推导，当然也可以传入不同的变量类型，提前用不同字母占位即可
  • 39.6接口在泛型的运用：接口中可以不写明类型而写占位符，然后根据传入数据自动推导，当然也可以输入时写明
  • 39.7泛型现在：虽然泛型有很多好处，比如泛型可以获取更精确的变量类型，但是泛型缺乏约束，不去之前写好要求的情况，要求主动传入类型，可能导致传入一些不符合的变量，T本质上也是一个类型别名，可以让其继承某一变量别名从而进行限制。
  • 39.8模块化和命名空间：模块化和命名空间都是为了避免命名冲突的问题，事实上模块化可能使用得更多一些。命名空间是2014typescript推出的而es5在2015年引入了模块化
  • 39.9typescript声明规则，规则就是都要声明，来源于内部typescript安装自带声明，外部包安装自带声明，和自己写的声明
  • 39.10声明其他类型:在typescript中，万物皆需声明，所以.d.ts文件中可以对对象，空间，类，函数，等一系列未声明的数据进行声明，然后就可以使用了。

typescript函数详解

断言与非空断言与可选链

[collapse title="断言"]主动声明变量位某一类型，可用于强制转化数据类型[/collapse]

[collapse title="非空断言"]主动声明某一变量为非空，防止编辑报错，但无法解决实际逻辑问题

此处声明ID为非空变量避免传入unknown导致的bao'c[block]

printID(ID?:string){
  console.log(ID!.longth)
}
printID()

[/block][/collapse]

[collapse title="可选链式调用"]顾名思义在链式调用时通过？标注可能存在的属性，最底层可以忽略可选类型的存在与否，而直接调用，比如此处的type[block]

type person = {
  name:
  friend?:{
    name:
    hobby:{
      type?：
    }
  }
}
const printmsg(human:person){
  console.log(human.frind?.hobby.type)
}

[/block][/collapse]

[collapse title="？？和！！"]！！用于转化非Boolean类型为Boolean，？？用于设置默认值[block]
[/block]

[/collapse]

[collapse title="字面变量"]不给变量标志类型，时赋的值就是变量的类型，且必须和所赋值相同（意味着如果是字面量赋值，你是不可以随意更改的）字面量类型是多个组合起来，形成特地的可选输入功能，所以输入时，输入的变量要和要求的字面量一致，（如果不一致操他妈，汉字屌用没有太不精确了！）但是默认推断不会是字面量，所以要么精确设置变量类型要么就缩写变量类型。

[/collapse]

[collapse title="函数类型"]函数也是变量也有类型，无参的函数基本类型是()=>{}（括号中形参不可省略，否则会认为是any类型）[/collapse]

[collapse title="可选参数，默认参数，剩余参数"]可选参数，必须放在最后，且必须输入undefine,默认参数最好放最后，必须输入unknown，剩余参数前面加...老表示可以传入任意多个数，必须放最后[/collapse]

  • 38.1函数重载：对于联合类型 ID：string | number 在对此类变量进行加减操作的函数，需要类型缩小和类型判断过于麻烦，所以函数重载，先多次定义函数的输入的具体变量类型，string和string，number和number，然后再二次定义函数，不过此时放宽对变量类型的要求，就实现了和联合类型一样的效果，并且函数内部会自动根据输入进行运算，避免无法提前推断变量具体类型导致的错误。

typescript起步

ke去哪里学习typescript？

最好去官网网站看文档，避免版本和翻译错误

typescript的使用环境？

使用tsc编译为js文件，或安装node包直接在node环境运行（一切依赖于js和v8引擎）

typescript基础类型

包含number，string，布尔，object。

  • 数组：一个数组只包含一类元素；元组对应可以包含指定的任意一种元素，如果可以之前知道输入的元素类型推荐使用元组tuple而非any数组

typescript进阶类型

[collapse title="1.any"]any类型为主动不确定是什么类型，即保存原本js的特性[/collapse]

[collapse title="2.unkno"]unknown和any一致，最大不同在于unknown只能赋值给同类型或any类型变量，目的是防止自己无法控制的unknown变量被滥用赋值导致报错[/collapse]

[collapse title="3.void"]老朋友，表示函数没有输入或返回值（一般写在输入括号后默认不写）[/collapse]

[collapse title="4.never"]和void表示无返回值用法一样，更多用来暴露目前不存在的问题，比如变量接收到绝不可能的赋值（never变量不可能被赋值）[/collapse]

[collapse title="5.tuple"]对比数组，可以包含多种类，但每个元素都需要在定义时说明所属类[/collapse]

typescript函数补充

[collapse title="返回值"]写不写都可以，因为typescript可以自动推断出类型[/collapse]

[collapse title="内部类型"]可以通过函数上下内容推断得出类型的可以选择不写[/collapse]

[collapse title="联合类型"]联合联系就是包含多种类型的一个变量，类似于any的缩水版[block]

const prinwtID = (id:string|number){
  if( typeof id === 'string')
  console.log(获取此id长度)
}

[/block][/collapse]

[collapse title="类型别名"]联合类型写太多不好看抽出来作为一个别名[block]

typename: string | number 
typename = {
  x : string
  y : number
}

[/block]

 

[/collapse]

[collapse title="可选类型与unknown"]可选类型实质就是某类型和unknown类型的联合类型

不同的是第二种情况下必须至少输入unknown，第一种不输入是可以的[block]

printFoodName(water:?string){
 const waterFirst = water  
 console.log(waterFirst)
}
printFoodName(water:string | unknown){
const waterFirst = water 
console.log(waterFirst)
}
printFoodName(unknown)

[/block][/collapse]

 

学东西，重要的是使用

学习新知识的时候，尽管知道，但还是碍于舒适区，不敢尽快上手实际项目和制作，其实这时一个很大的错误，有三大危害。第一，一直系统地光看不学习，不实践，会给人一种直接掌握得很好的错觉。第二，比起自我感觉良好，更糟糕的是会有一种莫可名状的希望，觉得在自己看完xx系列书籍，xx教程后，事情就会有阶段性的进展，甚至成功。然而这些视频和书籍动辄两三百集数百小时起步，7，800页入门。而且往往是越好的书籍越是厚，视频越是长，这是因为他们包含了全部细枝末节的知识，同时也是他们被称之为好书而广为传道的原因。但是对于达到入门上手的新人来讲并不是件好事。

对于入门的定义我认为就是一个学习者学习该知识的目的，目的达到了，也就入门了。大多数知识最终是要落到实际操作中的，28原则，谁8谁2使用之前无法明了的。要是非要认为看完xx系列书籍视频，事情才会有所进展的话，恐怕会在一下从来不用的知识上浪费大量时间，事实上哪怕是对高频知识的使用也是在实际过程中反复忘记查阅习得的，而不是一开始就知道什么重要。

我在之前学习影视特效知识的时候就犯过不少纸上谈兵的错误，教程看得多，练的也多，软件也熟练使用，但是一直不和行业内的使用做接轨，就导致自己的技能一直无法达到入门，不仅仅是缺乏知识，因为我已经学过很多了，更多的是缺乏行业内的一些做法和套路，这些是在知识类视频中无法习得，只能靠大量实际项目练习获得的，当然除非有人真的肯传授同时及时给你纠正和反馈。

Git Hub的初步使用体验

背景：今天准备把一个本地的项目框架上传到GitHub仓库，但是遇到了一系列问题（挂代理情况）。

 

1.ssl验证问题

提示：SSL certificate problem（显示ssl认证证书问题）

网上的解决办法：直接删除ssl认证

[block]

set GIT_SSL_NO_VERIFY = true

[/block]

 

2.ssl连接问题

提示：OpenSSL SSL_read: Connection was reset, errno 10054 （网络连接问题）

网上的解决办法：先按1问题操作，然后去修改了提交时缓存空间的大小

[block]

git config --global http.postBuffer 524288000

[/block]

 

3.GitHub连接问题

提示：Failed to connect to github.com port 443:connection timed out （无法连接到GitHub）

分析：上一步修改缓存空间后，并没有解决问题，还是错误代码为10054的网络问题，于是我把网络代理设置为了全局，于是出现了这个问题。

网上的解决办法：取消代理https://gist.github.com/laispace/666dd7b27e9116faece6

[block]

git config --global --unset http.proxy
git config --global --unset https.proxy

[/block]

结果：无法解决。

4.通过配置ssh解决

提示：我发现挂代理和不挂，都会出现同样的问题，都是3的问题，所以我认为是因为一开始就没有通过ssh密钥连接上GitHub导致。于是通过ssh连接

https://segmentfault.com/a/1190000007466317

https://blog.csdn.net/u012037852/article/details/80756081

[highlight lanaguage="语言"]



[/highlight][block]


PS D:\vue3.0project\vue3.00-ts-cms> git remote add origin git@github.com:zingcz/test.git

error: remote origin already exists.

PS D:\vue3.0project\vue3.00-ts-cms> git remote add origin git@github.com:zingcz/test.git

error: remote origin already exists.

PS D:\vue3.0project\vue3.00-ts-cms> git status

On branch master

nothing to commit, working tree clean

PS D:\vue3.0project\vue3.00-ts-cms> git add

Nothing specified, nothing added.

hint: Maybe you wanted to say 'git add .'?

hint: Turn this message off by running

hint: "git config advice.addEmptyPathspec false"

PS D:\vue3.0project\vue3.00-ts-cms> git push origin master

warning: ----------------- SECURITY WARNING ----------------

warning: | TLS certificate verification has been disabled! |

warning: ---------------------------------------------------

warning: HTTPS connections may not be secure. See https://aka.ms/gcmcore-tlsverify for more information.

info: please complete authentication in your browser...

warning: ----------------- SECURITY WARNING ----------------


warning: ---------------------------------------------------

warning: HTTPS connections may not be secure. See https://aka.ms/gcmcore-tlsverify for more information.

Enumerating objects: 30, done.

Counting objects: 100% (30/30), done.

Delta compression using up to 8 threads

Compressing objects: 100% (26/26), done.

Writing objects: 100% (30/30), 107.69 KiB | 6.33 MiB/s, done.

remote: Resolving deltas: 100% (3/3), done.

* [new branch] master -> master

PS D:\vue3.0project\vue3.00-ts-cms> git clone https://github.com/zingcz/vue3.00-ts-cms.git

Cloning into 'vue3.00-ts-cms'...

remote: Enumerating objects: 30, done.

remote: Counting objects: 100% (30/30), done.

remote: Compressing objects: 100% (23/23), done.

remote: Total 30 (delta 3), reused 30 (delta 3), pack-reusedRec

Receiving objects: 100% (30/30), 107.69 KiB | 97.00 KiB/s, done.

Resolving deltas: 100% (3/3), done.


[/block]