个人文章-编程思维

一.SSR 简介SSR(Server-Side Rendering)并不是什么新奇的概念,前后端分层之前很长的一段时间里都是以服务端渲染为主(JSP、PHP),在服务端生成完整的 HTML 页面——《前端渲染模式的探索》我们之所以要在服务端完成组件渲染工作,就是因为其有性能与可访问性两大优势二.两大优势性能与 CSR模式相比,SSR 的性能优势体现在 2 方面:-网络链路-省去了客户端二次请求数据

个人文章-编程思维

某些场景下,我们拿到的键名与预期的键名不符,这个时候就需要替换键名来得到我们想要的内容let obj = [ { id:1, title:'zs' }, { id:2, title:'ls' } ]; // 但是我们实际想要的效果是: {id:1,name:'zs'} // 此时可以把对象转为string 然后使用字符串方法替换 conso

个人文章-编程思维

NProgress.js 官网:https://ricostacruz.com/nprogress/安装方式:npm install nprogress使用方法在router 的index.js文件下引入// 引入NProgress进度条 import NProgress from 'nprogress' import 'nprogress/nprogress.css' router.befor

个人文章-编程思维

实现效果在导出表格数据的时候,通常分为两种情况页面列表数据导出接口返回数据导出这里主要介绍接口返回数据导出,关于页面的列表数据导出,请看另一篇:vue3+element表格数据导出接口返回数据导出,通常需要请求后端接口获取数据,接口返回的数据基本上是乱码的,需要先处理乱码的数据,否则导出来的文件是损坏的,如下看到这种返回信息,表格数据基本上是已经拿到了,现在只需要做一下数据的处理即可导出表格。解决

个人文章-编程思维

接口接口也相当于语法规范,在使用ts编写的时候,需要注重的就是数据类型以及语法规范,恰好这里提供了一个接口,在进行传值的时候,传值的类型以及字段必须符合我们预期的类型规范才可以,下面是代码演示语法:interface 接口名 { 参数名 : 数据类型 } ,例如: interface IPerson { username : string } // 接口:是一种能力,一种约束而已

个人文章-编程思维

在ts中定义基础类型, 语法 : let 变量名 : 数据类型 = 值 // 布尔类型 ----boolean let flag : boolean = true flag = false在赋值的时候,不能赋值定义外的数据类型,例如 flag = 100 // 报错报错,不能将数字复制给 boolean 类型。 有了这个例子,我们就很容易推断出其他的数据类型是怎么定义的 数

个人文章-编程思维

数组在ts中,定义数组类型语法: <font color=red>let 变量名 : 数据类型[] = [值1,值2,值3]let arr1 : number[] = [1,2,3,4] console.log(arr1); // 输出 [1,2,3,4]此外数字类型的定义还可以使用泛型,关于泛型的内容,下面只是做一个数组类型的演示,详细的请看后续关于泛型的篇章。泛型定义数组的写法:&

个人文章-编程思维

ts中,枚举类型就是,枚举里面的每个数据值都可以叫做元素,每个元素都有自己的编号,编号是从0开始的,依次递增加1 , 语法: enum 枚举名 {} 此处定义一个枚举类型,例如:enum Color{ red, // 0 green, // 1 blue // 2 }在枚举类型中,属性的位置默认是从0开始的,color中red是第一个,默认位置为0,所以依

个人文章-编程思维

any类型any类型,在ts中是一个万能类型,它可以替代所有类型,也就是说定义了any类型,就不用担心ts的类型束缚,但如果所有的类型都使用any那么ts就失去了它的作用,我们使用ts就是为了规范类型,any的主要使用场景是当一个值不确定的时候使用,此外要避免滥用any类型。语法:let 变量名 : any = 值let str : any = 100 console.log(str); //

个人文章-编程思维

object是一个对象,在ts中定义对象类型的语法为:let 变量名 :object = { }在object类型中,对象内部定义的值是不受类型约束的,只要是一个object类型即可,例如:let obj : object = { name : '艺术概论', // 字符串 price : 999 // 数字 } console.log(obj); // {name: '

个人文章-编程思维

联合类型在实际开发中,我们接收的变量可能不是一个固定的数据类型,而是动态的多个数据类型,此时用单个固定的数据类型去接收很明显是不行的,为了解决这种可能会接收多个不同数据类型的变量就需要用到联合类型。联合类型表示取值可以为多种类型中的一种。语法:let 变量名 : 数据类型 | 数据类型2 = 值let str : string | number = '世界现代设计史' console.log(s

个人文章-编程思维

在使用函数的时候,通常会给函数传值,或者给函数一个返回值调用,这个时候就会涉及到函数类型。函数类型分为两个方面:1、函数参数2、函数返回值语法: function 函数名( 参数 : 参数类型 ) : 返回值类型 { return 返回值 }函数有几种不同的写法,分别为:声明函数、匿名函数。声明函数: 也称为函数声明、命名函数,下面是声明函数的写法: function add ( x : nu

个人文章-编程思维

class可以用来做数据的存储与回显,能将页面的数据分离出来并提取到class内,函数也可以抽离到class,实例化class进行调用。ts中的class类与js的class类基本相同,不同点在于ts的class有数据类型约束,在使用class的时候,必须遵循定义的数据类型约束,class中有一个constructor,它可以更改class的属性值,实例化class进行传值的时候,传入的值也必须符

个人文章-编程思维

在开发中有些功能是通用的,而且逻辑大致相同,像这种东西可以封成一个组件,比较常用的就是函数封装,组件封装,组件封装是需要引入到页面使用的,所以通常它会有一些自己的方法,父子组件可以通过一些值来进行关联,这种方式也就是我们所说的组件传值,vue3+ts的组件传值其实就是组件传值加上了数据类型约束,并没有什么区别。这里主要介绍vue3的setup语法糖组件传值,以删除功能为例子,父子组件主要用到def

个人文章-编程思维

可选参数--默认参数在ts中定义的数据类型,某些情况下只需要传入定义数据类型的一部分参数,比如:id 、name、age、address,此时需要修改用户的名称,那么只需要传入id、name就够了;某些情况下需要修改用户的所有信息,需要传入全部参数;可以定义两个接口分别接收,但在这里定义一个接口也可以做到,此处用的就是可选参数和默认参数。语法:属性名 ?: 数据类型 = 值// lastName

个人文章-编程思维

泛型给函数或者属性定义类型的时候,类型是固定的,当业务发生变动时可能不好维护,例如:函数类型固定为string,后续需求更改不好维护,比如需要传入number类型,那么这个函数就不适用了function add( val : string) : string{ return val }为了解决这个问题,可以使用泛型,在调用的时候确定它是什么类型泛型:在定义函数、接口、类的时候不能预先确定