自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

BraveWangDev

有分享,才有进步

原创 全栈笔记更新目录

前言今天是2019年7月14日,周日怀着对技术的渴望,对未来的憧憬,和最近半年的困扰,在2天前写下了”2019年中的一些感想” 经过两天的睡前思考,我决定尽快的把这一步迈出来,写一份自己的学习笔记在这份笔记中,希望能尽可能全面的将所有知识点都覆盖到,渐进式的持续完善每一个部分这次从前端开始,这篇"全技术栈更新目录”将作为整套笔记的目录和入口持续维护PS:我更新的可能会有些慢,但会持续...

2019-07-14 11:53:52 200

原创 2019年中的一些感想

前言:最近半年都没怎么更新博客,今天来写点儿东西,简单聊聊这半年之前有一些更新计划没有如期进行,例如早先的SpringBoot教程,在我看来重头戏还没有开始就拖更了,原因有很多,直接原因是由于公司项目的紧迫,每天加班,后来工作重心的转移使我不再有时间继续更新这部分内容,虽然有些遗憾,但不管怎样,我肯定还是会继续的最近半年有一些事情困扰这我,也是我决定写下这篇博客的原因最近半年:...

2019-07-11 20:13:34 330 2

原创 IOC容器简介

前言上一篇我们对Spring进行了一个简单的概述了解到Spring框架的两大核心模块:IOC容器和AOP源码分析首先从IOC容器开始,之后再来看AOP这一篇我们先来了解一下什么是IOC容器,以及IOC容器的功能依赖反转1)正常开发模式(非依赖反转)正常的,合作对象的引用或依赖关系的管理由具体对象来完成(持有被引用的对象),这导致了代码高度耦合并且降低了代码的可测试性...

2019-10-24 11:30:40 84

原创 一步一步实现中后台管理平台模板-14-Vue开发工具配置和使用Vetur, ESLint, Prettier, StyleLint

一,前言上一篇解决了IE浏览器兼容问题到目前已经更新了13篇,但对于开发工具的配置和使用还只字未提一方面开发工具越早启用越好,有利于代码规范和开发体验的优化而不写一些有问题的代码就办法表现出开发工具的效果和好处到目前位置,其实已经有意无意的加入了一些"有问题"的代码本篇,就来介绍Vue开发中实用且能够有效提高开发效率,保证编码规范的工具二,常用开发工具首先就是IDE的选择,随...

2019-10-10 13:51:19 317

原创 一步一步实现中后台管理平台模板-13-解决IE浏览器兼容性问题

一,前言上一篇,介绍了ECharts封装,响应式,刷新问题及vue-echarts的使用,以及IE兼容性问题这一篇,就来着重解决目前项目存在的IE兼容性问题二,IE兼容性问题Vue官方文档描述支持IE8+,因为Vue使用了IE8无法模拟的ECMAScript 5 特性1)IE浏览器的兼容性问题多数由于ES6语法不支持导致,如 Promise,Symbol IE8不识别vue中的...

2019-10-08 02:06:18 313

原创 一步一步实现中后台管理平台模板-12-ECharts封装和响应式,刷新问题及vue-echarts的使用

一,前言有一段时间没有更新<<基于Vue的后台管理模板>>专栏了看了一眼,最近的一次更新还是在8月23日,算起来也间隔了1个多月中间这段时间一直在看TypeScript,做了些笔记,并做了一次TS的学习分享目前是十一长假期间,在TS告一段落后,回过头来继续连载后台管理模板我又熟悉了一遍之前的更新进度:创建项目->集成UI库实现按需加载->创建后台管...

2019-10-06 22:52:25 386

原创 TypeScript实战-26-Jest单元测试

一,前言babel-jest不能进行语法检查ts-jest支持语法检查二,jest安装和配置安装包并配置脚本:"scripts": { "test": "jest" }, "devDependencies": { "@types/jest": "^24.0.15", "jest": "^24.8.0", "ts-jest": "^24.0.2"...

2019-09-25 12:42:59 426

原创 TypeScript实战-25-ESLint代码检测

一,前言使用Vue和React开发时,通常使用ESLint做代码检测TypeScript有自己的检查工具TSLint但由于ESLint在Vue和React的影响及更好的性能TypeScript也决定使用ESLint做TS的代码检测工具二,ESLintTypeScript + ESLint:TypeScript编译器主要做两件事,即类型检查和语言转换 1,类型检查 2,语言转换...

2019-09-25 09:38:39 1826

原创 TypeScript实战-24-TS的编译工具

一,前言前面的工程中,为了将ts文件编译称为js文件,使用了webpack-loader:ts-loaderwebpack.base.config.js:module: { // loader rules: [ { test: /\.tsx?$/, use: [{ loader:...

2019-09-24 19:24:48 268

原创 TypeScript实战-23-使用模块和声明文件

一,前言在TS中引入类库和编写声明文件二,引入外部类库类库分别为3类:全局类库模块类库UMD类库以jQuery为例,属于UMD类库既可全局方式引用(配合webpack插件),也可以模块化方式引入import $ from 'jquery' // 报错:找不到模块jQuery使用js编写,在TS中不能直接使用,需要编写声明文件,对外暴露API三,声明文件对于非TS的类...

2019-09-24 01:00:11 145

原创 TypeScript实战-22-声明合并

一,前言本篇介绍TS中的重复命名的声明合并1,声明合并定义2,接口的声明合并及对接口成员的要求3,命名空间的声明合并4,命名空间和函数的声明合并5,命名空间和类的声明合并6,命名空间和枚举的声明合并二,声明合并声明合并:编译器会将程序中多个具有相同名称的声明合并为一个声明优势:可以将程序中散落在各处的重名声明合并在一起三,接口的声明合并接口的声明合并是TS中...

2019-09-24 00:13:53 200

原创 TypeScript实战-21-TS的命名空间

一,前言在js中,为了避免对全局的污染,可以使用命名空间,在模块化被广泛使用后,命名空间就很少被使用了上一篇介绍了TS的模块化,虽然在模块中不再及需要考虑全局污染的问题但如果使用了全局类库,仍需要使用命名空间本篇介绍TS的命名空间二,命名空间的定义使用namespace关键字声明TS命名空间在命名空间内可定义任意变量,仅能在命名空间下可见如果要使命名空间内的变量全局可见,...

2019-09-23 22:44:54 278

原创 TypeScript实战-20-TS模块化

一,前言在JS的项目中,随着工程的不断增大,为了便于管理和模块复用,产生了很多模块化解决方案如CommonJS,AMD,CMD及ES模块,目前最常用的是ES6的模块,CommonJS模块TS对这两种模块系统都有比较好的支持二,ES6模块导出src下新建es6文件夹,并创建a.ts, b.ts, c.ts文件三者关系为:c依赖a, a依赖b(使用a.ts演示导出,c.ts演示导出)...

2019-09-23 21:42:57 359

原创 TypeScript实战-19-TS高级类型-条件类型

一,前言本偏介绍TS另一种高级类型-条件类型二,条件类型条件类型是一种由条件表达式所决定的类型条件类型使类型具有了不唯一性,同样增加了语言的灵活性声明:T extends U ? X : Y若类型T可被赋值给类型U,那么结果类型就是X类型,否则就是Y类型// 条件类型type TypeName<T> = T extends string ? 'str...

2019-09-20 21:00:01 516

原创 TypeScript实战-18-TS高级类型-映射类型

一,前言本篇介绍TS的另一个高级类型-映射类型二,映射类型映射类型:TS允许将一个类型映射成另外一个类型将一个接口的所有属性映射为只读:// 定义接口Objinterface Obj { a: number b: string c: boolean}// 使用类型别名定义类型ReadonlyObjtype ReadonlyObj = Readonl...

2019-09-20 19:34:56 924

原创 TypeScript实战-17-TS高级类型-索引类型

一,前言本篇介绍TS的另一个高级类型-索引类型从对象中获取一些属性的值,然后建立一个集合et obj = { a: 1, b: 2, c: 3}// 获取对象中的指定属性的值集合function getValues(obj: any, keys: string[]) { return keys.map(key => obj[key])}// ...

2019-09-20 18:30:48 894

原创 TypeScript实战-16-TS高级类型-联合类型

一,前言上一篇介绍了TS高级类型-交叉类型本篇介绍另一个TS高级类型-联合类型联合类型并不陌生,之前已经接触过多次了二,联合类型联合类型:声明时,类型可能为多个类型中的一种,但不能确定是哪一种let a: number | string = 1let b: number | string = "1"三,字面量联合类型字面量类型:不仅限定变量类型,还限定变量的取值范...

2019-09-20 17:19:31 848

原创 TypeScript实战-15-TS高级类型-交叉类型

一,前言TS高级类型,指TS为保证语言的灵活性,所引入的语言特性这些语言特性有助于开发者应对复杂多变的开发场景二,交叉类型交叉类型:将多个类型合并成为一个新的类型,新类型具有所有类型的特性应用场景:由于交叉类型具有所有类型的特性,所以非常适合对象混入的场景语法:类型A & 类型B举例:// 定义两个接口interface AInterface { ...

2019-09-19 09:32:16 341

原创 TypeScript实战-14-TS的类型检查机制-类型保护机制

一,前言二,类型保护的场景定义Java和JavaScript两个类和一个类型枚举,包含强类型和弱类型两个类包含各自的打印方法但方法名不相同根据type获取对应实例// 类型保护enum Type { Strong, Week }class Java { helloJava() { console.log("Hello Java") }}c...

2019-09-18 17:00:04 250

原创 TypeScript实战-13-TS的类型检查机制-各种类型之间的兼容性

一,前言本篇只要讨论TS不同类型的兼容性类型兼容经常发生在接口,函数和类中二,类型兼容如果类型A可以被赋值给类型B,那么就可以说类型B兼容类型A如果 : B(目标类型) = A(源类型) , 则 : 类型B兼容类型A之前的例子中,我们就遇到过number和null的兼容问题:在strictNullChecks = false时(默认true),字符串变量是可以被赋值为null类...

2019-09-18 10:06:09 316 2

原创 TypeScript实战-12-TS的类型检查机制-类型推断

一,前言前面的例子中,已经多少接触了TS的类型检查机制,例如可以利用TS自动推断出返回值类型省略返回值类型的书写二,TS类型检查机制类型检查机制:TypeScript编译器在做类型检查时,使用的原则和表现的行为类型检查机制的作用:辅助开发,提高开发效率TS类型检查机制包含:1)类型推断2)类型兼容性3)类型保护三,类型推断不需要指定变量类型或函数的返回值类型,...

2019-09-16 10:36:06 1342

原创 TypeScript实战-11-泛型

一,前言TS为ES新增了一个面向对象语言的重要概念:泛型泛型允许同一个函数或类支持多种数据类型,极大提升了代码的灵活性和复用性二,泛型之前一个可以打印多种数据类型的log函数方法1:函数重载// 函数重载function log(value: string): string;function log(value: number): number;function log(v...

2019-09-16 09:10:51 158

原创 TypeScript实战-10-TS中类和接口的关系

一,前言前边分别介绍了TS的类和接口本篇结合类和接口的知识,对类和接口之间的关系进行梳理总结二,接口对类的约束作用接口能够对类的成员属性和类型进行约束(且只能约束类的公有成员)接口对类成员的约束:注意:类必须实现接口中声明的全部属性和方法,类可以新增独有的属性和方法接口只能约束类的公有成员结论:所以接口只能约束类的公有成员二,接口的继承-接口继承接口接口和...

2019-09-16 00:56:58 157

原创 TypeScript实战-09-抽象类和多态

一,前言在ES中,并没有引入面向对象语言中抽象类的概念,而TS对这部分特性进行了扩展本篇介绍TS中的抽象类和多态二,抽象类的定义抽象类只能被继承,不能被实例化定义抽象类使用abstract关键字定义抽象类,并验证抽象类不可被实例化三,抽象类的继承继承抽象类,需要在子类中调用super方法四,使用抽象类实现方法复用在抽象类中可以定义方法(可以有具体实现,也可以是抽象方...

2019-09-15 23:26:25 118

原创 TypeScript实战-08-TS类的声明和实现,类的继承和成员修饰符

一,前言基于原型prototype的JS,一直在模拟面向对象,后来ES6引入了class关键字,使JS能够像传统面向对象语言一样创建一个类在TS中,对ES6的类进行了增强,引入了更多特性二,定义一个类使用TS定义一个类:class Dog { constructor(name: string) { this.name = name; } na...

2019-09-12 17:00:25 981

原创 TypeScript实战-07-函数相关知识梳理

一,前言本篇对函数相关知识进行梳理1,函数的4种定义方式2,TS对函数参数的要求3,函数参数-可选参数,默认值,剩余参数4,函数重载二,函数的4种定义方式// 使用function定义函数function add1 (x: number, y: number) { return x + y;}// 通过一个变量定义一个函数类型let add2: (x: numbe...

2019-09-12 11:08:26 88

原创 TypeScript实战-06-TS接口之函数类型接口

一,前言上篇介绍了TS接口的对象类型接口本篇介绍TS的另一种接口:函数类型接口二,函数定义方式1,在TS中,可以使用一个变量直接定义函数:// 1,使用变量定义函数let add: (x: number, y: number) => number2,还可以使用接口来定义函数:// 2,使用接口定义函数interface Add { (x: number, y: nu...

2019-09-12 10:15:05 340

原创 TypeScript实战-05-TS接口之对象类型接口

一,前言TS新增了一个重要概念:接口,分为对象类型接口和函数类型接口二,接口示例接口可以约束对象,函数,类的结构和类型,是一种代码协作必须遵守的契约接口的定义方式:使用interface关键字以查询图书商品列表接口API为例:// 接口声明:API协议约定返回格式interface ResponseData { resCode: number; resDat...

2019-09-12 01:31:52 200

原创 TypeScript实战-04-TS枚举类型

一,前言上一篇介绍了TS的基本数据类型本篇介绍TS新增的枚举数据类型二,枚举的应用场景在JS中没有枚举类型,如果需要根据不同的订单状态执行不同操作:function getXXXByOrderStatus(status) { if(status == 1){ // do somthing }else if(status == 2){ /...

2019-09-11 20:25:31 684

原创 TypeScript实战-03-TS基本数据类型介绍和使用

前言上一篇,搭建了简单的TS项目模板本篇对TS基本数据类型进行介绍和使用二,TS的数据类型ES6的数据类型:6种基本数据类型 Boolean Number String Symbol undefined null三种引用类型 Array Function ObjectTS在ES6基础上,新增了一下数据类型 void any never 元组 枚举...

2019-09-11 13:33:02 504

原创 TypeScript实战-02-环境搭建HelloWorld

一,前言创建TypeScript的HelloWorld程序,对TS建立感性认知环境: nodeJsIDE: VSCode二,创建项目1,新建ts_in_action文件夹,并执行npm命令,生成package.json:npm init -yBravedeMacBook-Pro:ts-in-action brave$ npm init -yWrote to /Users/b...

2019-09-10 15:40:22 189

原创 TypeScript实战-01-TypeScript简介

JS的发展及广泛应用JS存在的问题TS的出现及优势为什么要使用TSTS简单示例和编译

2019-09-05 16:58:59 390

原创 一步一步实现中后台管理平台模板-11-Vuex模块化最佳实践及状态持久化

本篇将使用Vuex对vue-framework-admin项目做状态管理1,为什么需要状态管理2,Vuex的运行机制3,Vuex的配置和使用4,Vuex的模块化最佳实践5,Vuex的持久化6,代码下载

2019-08-23 15:58:12 491

原创 一步一步实现中后台管理平台模板-10-项目多环境及proxy代理配置

一,前言上一篇,封装了Axios并使用mockjs模拟了登录接口的调用项目在不同环境下是存在差异的,例如:生产环境和测试环境的BaseUrl地址不同本地调试接口时,需要解决浏览器跨域问题为了处理好各个环境间的差异,就需要做多环境配置本篇,实现项目的多环境配置及配置proxy代理解决浏览器跨域问题二,多环境设计由于本项目暂未提供接口API,且无prd部署环境为了模拟多环境,...

2019-08-13 14:25:20 229

原创 一步一步实现中后台管理平台模板-09-封装Axios及本地Mock的配置和使用

一,前言上一篇为vue-framework-admin制作了了登录页面,模拟登录接口api的异步调用将用户信息保存到localStorge中.登录成功进入首页Header显示localStorge数据退出时,重载当前页面,触发路由守卫,根据用户登录状态决定跳转页面首先,登录接口是使用promise模拟的,目前虽然真实没有后台API,但可以使用mock其次,真实API或使用mock都需要...

2019-08-12 10:57:28 187

原创 一步一步实现中后台管理平台模板-08-登录页和用户信息保存

一,前言上一篇,完善了Header组件,添加了用户信息的显示和退出功能用户信息(昵称+头像)都是写死的,线上应用肯定是通过登录获取到用户信息这一篇,制作一个简单的登录页面,模拟接口异步调用(用户信息写死json对象)将用户信息暂时保存到本地存储localStorge中,Header组件读取用户信息显示登出时,清空localStorge本地存储,登出状态不能通过URL直接进入主界面在路...

2019-08-10 17:51:52 411

原创 一步一步实现中后台管理平台模板-07-完善Header组件

一,前言目前后台管理平台框架已经基本搭建好了前面我们完成了后台管理平台框架的布局,路由,菜单,以及根据路由配置动态递归的生成菜单后面要做登录登出功能,登录功能需要使用Axios访问API(这里会用到mock做本地假接口的调用)登录后的用户信息还需要保存到Vuex中,页面的用户信息和头像数据需要取自Vuex还有后台管理特有的角色和权限控制,分为菜单权限和细粒度更高的事件权限,以及权限管理...

2019-08-09 14:18:58 193

原创 一步一步实现中后台管理平台模板-06-面包屑与菜单路由的联动及跳转

一,前言上一篇,实现了根据路由配置动态生成菜单,目前点击菜单能够实现内容区视图切换显示但面包屑组件尚未实现与路由联动和点击跳转的效果面包屑:主要起到一个导航的功能,可以告诉用户当前在哪里,并且可以实现快速跳转功能本篇将对面包屑组件进行完善,实现面包屑与菜单路由的联动及跳转功能二,实现思路主要利用$route.matched,获取路由的匹配过程,并在面包屑组件上渲染显示,添加跳转功...

2019-08-09 10:00:45 647

原创 一步一步实现中后台管理平台模板-05-根据路由配置动态生成菜单

一,前言上一篇,为vue-framework-admin添加了路由配置,实现了点击菜单切换内容显示本篇将实现根据路由配置动态生成菜单功能首先菜单(路由)的层级是不固定的,有可能是1级2级3级或更多其次,并不是所有路由都会渲染都菜单上:如登录注册404,订单详情,分布表单等这就需要对路由配置信息进行递归处理,并跳过不需要显示在菜单中的路由配置项,另外,菜单的图标,名称也都需要在路由中...

2019-08-08 21:59:24 353

原创 一步一步实现中后台管理平台模板-04-添加路由配置:登录,注册,菜单,404和nprogress使用

一,前言上一篇,添加了vue-framework-admin后台管理页面的布局在后台管理的布局中,当左侧菜单被点击时,内容区域需切换至对应页面进行显示这就需要路由,本篇对项目添加路由配置,包括菜单路由和登录注册404页面路由二,删除无用代码设置路由,使内容显示区域根据选中菜单进行切换内容部分由<Content /> 改为<router-view>,并删除Co...

2019-08-08 17:31:42 296

提示
确定要删除当前文章?
取消 删除