liweibo348的博客

原创 TypeScript中感叹号!的使用

TypeScript中感叹号!的使用TS中通常感叹号这样用：//例1let a :string | null |undefinedlet b :stringb=a //错误b=a!//正确，a！表示a排除null undefined类型 //例2 function myFunc(maybeString: string | undefined | null) {const onlyString: string = maybeString; //Errorconst igno

原创 IONIC4新特性-生命周期方法

TheCanActivateandCanDeactivateinterfaces can be used to implement the same type of logic that the removed eventsionViewCanEnterandionViewCanLeavedid.例子：@Injectable()export class AuthGuard implements CanActivate { constructor(private authS...

原创 vuex中getters用法详解

vuex中getters其实就是做数据加工的，可看成与computed计算属性一样的功能，即做一些数据的处理加工。例子：import gs from "@/service/goods";export default { state: { slider: [], keys: [], goodsInfo: {} }, mutations: { ...

原创 vuex中mapActions用法详解

一般而言，我们使用this.$store.dispatch('xxx')来触发action操作，有多少action需要被触发，就需要写多少个this.$store.dispatch('')方法；从而更加简便的方式出现了，他就是mapActions，mapActions就是将组件中的事件函数映射为对应的action，其中事件函数名称与action名称应该是一样的，写法如下:mapAct...

原创 vue中多选框使用以及值监控

原创 vue中属性或函数前有$符号，代表什么？

Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来。例如：var data = { a: 1 }var vm = new Vue({ el: '#example', data: data})vm.$data === data // => truevm.$el === document.getElementById('examp...

原创 mybatis代码生成器过程

1. 在pom文件中引入代码生成器依赖；2. 在项目中配置代码生成器对应的xml文件（关键）；3.在maven中plugins中双击mybatis-generator生成代码。代码生成好之后，如何来调用呢？controller->service->map（代码生成器生成）如何知道调用map中哪个方法呢？...

原创 如何在腾讯云部署自己的springboot项目？

1 win10中安装winScp软件，并登陆远程的腾讯云服务器。2 登录后，会显示对应系统的各个文件夹目录，3 cd usr/local/sortware sortware是自己创建的文件夹，把下载好的jdk拖入sortware文件夹，再ls，再tar -zxvf jdk-XXX.tar.gz4 cd bin ls会看到很多Java工具（可以使用...

原创 一步解决android studio中编写xml代码或者Java代码时提示功能失效！

只需简单一步操作：关闭android studio。进入C:\Users\你的用户名\.AndroidStudio3.2\system这个目录，把system下的文件夹及文件全部删除。重新用android studio打开项目即可。...

原创 ionic4（angular）中如何引入第三方js代码库？

1 把js文件放到src/assets目录下。例如我的js文件为 remogeo.js2 在src目录下的index.html中增加如下语句： <script type="text/javascript" src="assets/remogeo.js"></script>3 在需要调用js代码的地方作如何声明：declare var Remo...

原创 mac os终端输入命令总提示command not found解决办法，亲测有效

1. 输入”’cd ~/ ”’进入当前用户的home目录2. 创建bash_profile执行命令:touch .bash_profile3. 打开并编辑bash_profile 执行命令open .bash_profile4. 在打开的记事本中会显示之前配置过的path, 修改记事本内容,在记事本中添加如下路径：export PATH=/usr/local/opt/c...

原创 css实现水平垂直居中

实现水平+垂直居中，也就是在中央：（1）单行行内元素：父元素设置：text-align:center，display：table-cell;vertical-align:middle,在这里，图片，文字，都是一样的操作&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt...

原创 js中扩展运算符...的用法

...就是扩展运算符，他的写法是es6中 的新写法。如：let a = [1,2,3], let b =[4][...a,b]的值为[1,2,3,4]https://juejin.im/post/5ad88219f265da505546692f

原创 npm ERR! Unexpected end of JSON input while parsing near '...nd-index-1.0.2.tgz"

进入到你新建的项目中：按照如此啊步骤执行：npm cache clean --forcenpm updatenpm installng buildng serve

原创 ngclass用法

1.[ngClass]="{true:'s2',false:'s1'}[ enable == true ]"                            其中s1  s2 为样式 2.[ngClass]="{'hidden':enable}"       hidden为自己写的样式。enable为true或false...

原创 css使得某元素居中显示怎么做？

在某元素的父元素中这样设置：justify-content:center;//水平居中显示align-items:center;//垂直居中显示display:-webkit-flex;//上面两个居中显示的属性必须配合flex属性一起使用display: flex;...

原创 宝塔安装配置最全过程记录

我的服务器是阿里云的centos。步骤如下：1  按照对应的系统安装即可：Centos安装脚本 yum install -y wget &amp;&amp; wget -O install.sh http://download.bt.cn/install/install_6.0.sh &amp;&amp; sh install.shUbuntu/Deepin安装脚本 wget -...

原创 ionic中的button组件中的文字为英文时自动变成大写怎么处理？

加上style="text-transform: none;"就会显示你输入的原本的内容。&lt;button ion-button style="text-transform: none;"&gt;Submit&lt;/button&gt;

原创 ionic中改变组件的背景色与组件中的文字的颜色

在theme中的sass中：添加   twitter: ( base: #55acee, contrast: #ffffff )  Base用作背景颜色，对比度充当大多数组件的文本颜色。这样可以更灵活地控制样式。

原创 ionic项目打包过程中，添加android平台出错

见文章：https://stackoverflow.com/questions/35451207/cordova-error-failed-to-fetch-platform-android/45174553#45174553 适应我的解决方法：There seems to be an error with android@6.2.x and later. I had the same...

原创 Redux中Action，Store，reducer举例

一般在ts逻辑代码里会通过Store的dispatch()方法发送一个Action对象，Action对象中第一个参数是一个动作类型类型，第二个参数是payload即自己设置的当该动作发生时携带的值，然后reducer对这个Action进行处理，reducer中第一个参数是原本的状态值，第二个参数是Action，该函数做的事就是改变原本的状态值。如：station和train是ts代码中事件响应...

原创 angular管道-number管道

看例子：2.1-4 的意思是：2表示数字的整数部分是两位，1-4表示数字的小数部分位数最少是一位，最多是4位，尽量往多的算。要是pi的值取为3.1415926的话，那么被管道格式化后的值为：03.1416...

原创 angular中websocket用法示例

用法架构如下：websocket相比较http请求，它是一个长连接，且请求与返回数据可以同时进行，http的话，请求与返回数据就是单向的。

原创 async管道（异步管道）自动订阅流的用法

下面以一个http请求数据的例子说明： 1.不用async时管道的代码： 2。使用async管道自动订阅流: 用法就是在布局文件中加入async异步管道，这样就可以实现自动订阅流的功能，从而在ts代码中就不用手动调用subscribe进行订阅Observable流。...

原创 表单验证时错误提示写法示例

 布局文件中箭头指着的mobile就是ts文件中验证器代码中return中key为mobile这个值，这两个mobile是一样的，布局文件中hasError（'mobile','mobile'）第二个参数mobile是formcontrolName的值。其他的都是类似的写法。...

原创 angular表单校验器

angular有自带的校验器，如 required  minLength....等等。还可以自定义校验器，下面自定义了两个校验器，首先是校验单个表单项的，再就是校验多个表单项的。  这就是用FormBuilder的好处，可以方便的在FormControl，FromGroup....中添加校验器。...

原创 响应式表单中用FormBuilder构建数据模型更方便！

没用FormBuilder之前： 用了之后：FormBuilder通过自构造函数中注入的方式来进行使用。

原创 响应式表单示例

两步：1.在ts代码中写好数据模型。2.在布局文件中用对应的指令把数据模型与布局中的dom联系起来。看代码：   这三个类的作用范围：FormGroup最大，旗下有FormControl，FormArray。FormGroup也可以嵌套放FormGroup。FormArray下可以有FormControl。总之，数据模型的最开始是需要有FormG...

原创 响应式表单

首先，要用到响应式表单，则需要在AppModule中手动引入，代码如下： 响应式表单中有三个类，用这几个类在ts文件中写好数据模型，再通过其中的指令把模型和布局文件关联上： 区分两种表单：看指令，若是form开头的指令是响应式表单，若是以ng开头的指令是模板式表单。且只有模板式表单中可以用模板本地变量（#name形式）注意：上图的指令中以name结尾的指令，...

原创 模板式表单与响应式表单关系

   上图左边是模板式表单中的指令，右图是对应的响应式表单的类。一 一对应。  如何在布局文件中区分是哪种表单？看指令，若是form开头的指令是响应式表单，若是以ng开头的指令是模板式表单。且只有模板式表单中可以用模板本地变量（#name形式）...

原创 模板式表单

简介：在模板中（布局文件）常用的指令有：ngForm  ngModel  ngModelGroup。示例如下：加了ngform指令，整个表单的处理就交给angular处理了。加了ngModel指令，表单项中的值才会真正的写入，别的地方才能真正地调用到，注意ngModel指令必须写name，当然这种指令有两种写法，如上图。在ngModel外面可以套一层ngModelGroup指令...

原创 angular中的双向绑定 与 输入属性和输出属性的关系

输入属性 @Input()，简单理解为从父组件传递数据到子组件。输出属性@Output()，简单理解为从子组件传递数据到父组件。这样就构成了双向的数据绑定。下面看代码示例：app-stars是子组件，newRating是父组件的变量，要想让布局中rating的变化影响到newRating的变化，需要在子组件中把rating的变化作为一个事件发射出去，代码为第二个图片中的输出属性@O...

原创 运用响应式编程，实现输入框的值在时间间断超过500毫秒再更新输入框的值（debounceTime()）

 searchinput就是一个事件流，调用valueChanges返回值为Observable对象，在被观察者被订阅前调用了debounceTime函数，作用是实现输入框的值在时间间断超过500毫秒再更新输入框的值，否则不更新。其实就是先不订阅，先把需要处理的事情结束后 再订阅。...

原创 html属性绑定介绍

大概包含三种：  这些都是我们经常用的，只是不晓得它是html属性。   

原创 html属性与dom属性区别：

html属性中的值是不变的，dom属性的值是变化的，那么angular中的事件绑定，属性绑定（差值表达式：{{}}这种形式）其实是dom属性的一套东西，为何？因为绑定的东西是可变的 ，html属性又不是可变的，所以只能用dom属性。 ...

原创 使用工厂和值声明提供器

提供器一般的格式为：providers：[provider:xxx,useClass:xxxxxx]工厂和值声明在提供器中的使用就是改变useClass，即写为：providers：[provider:xxx,useFactory:xxxxxx],                                                                      ...

原创 angular中的服务注意点

依赖注入，注入的就是一个服务，其实就是一个类。依赖注入的过程就是实例化这个类，即实例化这个服务，怎么实例化呢？那就需要提供器providers来提供了。生成一个服务的命令：ng g service shared/productservice   //在文件夹shared下生成一个productservice  服务 这是服务中的代码片段，第一行的@Injectable（）表示在...

原创 提供器providers注意点。

图中连接在一起的四个箭头指向的为一个东西，就是token，他在代码中是不变的，当需求发生变化，要注入其他的类时，只需要改变useClass的值，useClass对应的类就是所需要的功能类。这样就实现了充分解耦，也方便自己随便写个测试的功能类注入进程序中，以方便自己加快开发速度，而不用等到需要的测试类真正写好才能进行下一步。提供器的作用：就是实例化服务类，以供依赖注入。提供器的作用域...

原创 angular-依赖注入-概要

angular中，依赖注入的唯一方法就是在构造函数中。依赖注入：Dependency Injection,简称DI控制反转：IOCDI与IOC是angular依赖的一体两面，IOC把代码的控制权交给外部，运用IOC思想的框架叫IOC容器，angular就是一个IOC容器。要达到控制反转的目的，就需要使用依赖注入。下面就是依赖注入的使用：providers中表示需要依赖注入的...

原创 angular中的插座即RouteOutlet的深入理解

RouteOutlet插座在布局代码中的位置决定了组件的位置，在app.component.html中，如下：那么哪些组件显示在&lt;router-outlet&gt;&lt;/router-outlet&gt;之后呢？就是配置中出现的组件，如下：上面代码中出现了两个组件，他们都会显示在插座的位置。除非配置代码中有辅助路由出现，即有别的插座（即兄弟插座），那么组件的显示地方就...