采用XMLHttpRequest验证URL是否有效

有时候在处理某些URL时,可能会遇到404等情况,比如我们在国内使用谷歌地图api一样,我们在请求的时候可能会发生404问题,这个时候我们又想去判断下当前url为404的话,我们则采用其他地图的api,当然我这里所说的仅仅只是一个使用场景,可能你也会遇到其他更多场景,并且也需要验证当前URL的有效性,因此我就直接采用了XMLHttpRequest的方式进行对URL的有效性进行验证。当然对于谷歌地图这个场景,我不建议大家使用这种方法啦,毕竟谷歌地图的api总是抽风,有时候可以访问有时候又不能访问,并且经常不会出现404,基本都是延时很久,所以这个方法不适用与谷歌地图与百度地图的切换判断。
代码及其简单,并且测试也通过了,大部分情况下只要遇到404页面,到能判断到是否有效

let xmlhttp = new XMLHttpRequest();
if (xmlhttp != null) {
    xmlhttp.onreadystatechange = () => {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                console.log('验证成功,URL可用')
            }
            else {
                console.log("验证失败,URL不可用,错误信息:", xmlhttp.statusText);
            }
        }
    };
    xmlhttp.open("GET", url, false);
    xmlhttp.send(null);
} else {
    console.log('你的浏览器OUT了,不支持XMLHTTP,请更换Firefox、Chrome最新版本浏览器')
}

如果你有更好的方法,请在文章后面给我留言,谢谢!

ionic2+使用Slides打造漂亮的导航条

由于之前遇到一个项目使用的ionic中的tabs来做导航条,实际在使用中,总是觉得怪怪的,并且不只是影响到使用效果,更是发生了很多令我费解的问题,由于导航级别太多、分类太复杂,从而导致了tabs的展示令人头痛。不过由于项目已经固化了,没法再进行相应修改和调整,目前也没有重构的打算。也是由于这个一个tabs,当时让我想到了使用Slides组件来打造一个导航条。大家可以先看一下效果:

Slides打造手机导航条
Slides打造手机导航条

根据Slides的滑动特性,其实还是可以做出很漂亮的导航效果来,下面直接上代码,如果对slides不是很了解的,可以查看相关官方文档https://ionicframework.com/docs/api/components/slides/Slides/ 继续阅读ionic2+使用Slides打造漂亮的导航条

angular2+数据更新但视图不更新的解决方法

最近项目中总是遇到一些莫名其妙的问题,当然这个项目已经存在已久,之前也有过这样的问题,现在感觉问题总是显得很突出,大部分问题都是由于数据更新后,视图无法及时更新而导致的,由于项目的代码原因,我就不多去深入为什么会发生这个问题了,主要的是说一下解决这个问题的方法。
场景
如果你在组件中定义了一个变量,当你使用console能将其值打印出来,可是我们能看到的视图中,这个变量并没有任何值或者改动。又或者你在一个点击事件中去改变相关变量的值,让其显示在视图上,但是当你点击事件触发后,变量的值是改变了,但是视图却为更新。这个时候你就可以使用以下几种方法

1、直接使用ngZong.run()

我们可以将某个要发生改变的变量或者方法直接放到ngZong.run()中。比如:
ngZong.run(()=>{this.closeNum()})

2、ChangeDetectorRef.detectChanges()

此方法本人使用的不多,并没有切确的深入了解这个方法,而且我在进行测试中,这个方法对我来说并未产生任何效果,如果你想要尝试一下,建议看一下官方文档https://angular.io/api/core/ChangeDetectorRef#!#detectChanges-anchor

3、直接使用ngDocheck()生命周期

我们可以将相关代码直接放到ngDocheck中,即可实现视图强制更新。但是一定要注意ngDocheck特别像setInterval,不论你数据是否发生改变他都会执行,并且任意一个事件都有可能触发它。因此得需要慎用,以防影响到性能

关于混合APP横屏、竖屏、翻转的解决方案

我们都知道,cordova或者phonegap都提供了一系列很牛的插件,为我们做开发省了不小力气,在app开发中,有一些app适合竖屏展示,某些app又适合横屏展示,因此我们得去设置它相关的config.xml

一、安卓上的横屏与竖屏

首先我们先来看一下android上的某些原生Activity属性
安卓 Activity 在设备上的显示方向。如果 Activity 是在多窗口模式下运行,系统会忽略该属性。Activity有以下几种属性值 继续阅读关于混合APP横屏、竖屏、翻转的解决方案

解决ionic3错误:No provider for NavController

有时候感觉ionic会发疯,比如今天我就遇到一个很奇葩的error,我一直在其他页面使用NavController或者Nav都未遇到任何问题,偏偏就在我目前新建的这个页面上出现了这样的一个error,No provider for NavController。
在网上寻找了很久的解决方法,尝试过直接使用app.getActiveNav没有成功,尝试过网上说的@ViewChild(‘Nav’) nav:NavController;也没有成功。后来在ionic论坛上找了相关解决方法,地址是:https://forum.ionicframework.com/t/why-cant-i-import-navcontroller-and-viewcontroller-into-service-or-app/40999/50
可以看到相关代码是这样的:

import { App, NavController } from 'ionic-angular';
constructor(
    public app: App,
    public navCtrl: NavController,
    ) {}
//此处才是最重要的代码
get navController(): NavController {
    return this.app.getRootNav();
}
testNav() {
    //这样使用get的navController
    this.navController.setRoot(Login);
 }

Java Spring-Boot开发环境配置

我以前确实玩过一些java web,并且还写过java web,但是那是很久以前的事情了,而且悲催的是我还居然没有用过一个java框架。比如spring、Struts、hibernate之类的框架,我仅仅只是听说过,并未真正研究与使用过。由于工作的需要,我需要搭建一个可以跑起来的 reset api 服务,由此想起之前朋友给我推荐的spring-boot,听说很容易,不过我折腾了一下,环境搭建就花费了我不少时间。下面我就将这过程给大家说一说,当然请先确保你的电脑已经配置好了JDK环境。

一、环境配置

1、java环境配置

JDK配置、maven配置,JDK配置网上已经说得一大片了,再说了不论是搞后端还是搞前端开发基本也离不开JDK环境了,这里主要说一下maven配置。
首先到maven官方下载一个压缩包,https://maven.apache.org/download.cgi
解压后,放到任意位置,我将其放到了/Users/ubeing/Library/maven目录中,这个是MAC开发环境,如果你是windows开发环境,那你可以放到C盘或者其他盘都可以。 继续阅读Java Spring-Boot开发环境配置

JavaScript如何判断对象是否为空

我们都知道在JavaScript中,判断一个数组是否为空,我们可以直接使用length进行判断其长度是否为>0,从而来判断数组中是否有内容。而对象却不能使用length这样的方式去判断长度。下面我们就使用两种常用方法去判断下对象。

1、JSON.stringify方法

JSON.stringify()可以将对象转换为字符串,从而我们再去比对字符串即可。如下:

let str = {}
if(JSON.stringify(str)==='{}'){
    console.log('此对象是空对象')
}else{
    console.log('此对象不是空对象')
}

2、ES6语法直接使用Object.keys

Object.keys主要是用于直接获取对象中的所有key的名称,并将其输出为一个数组。因此我们这里需要用到length来判断这个数组的长度,代码如下:

let str = {}
if(Object.keys(str).length>0){
  console.log('对象不是空对象')
}else{
  console.log('对象是空对象')
}

另外我看到有些使用for…in的去循环,但是我尝试了一下,没有成功。不建议大家使用for…in去判断

JavaScript将有相同内容的数组或对象的值进行累加

一看到这个标题,确实标题过长,不过只有长标题才能真正的说明问题。下面就使用一个实例来讲解下我到底要做什么。
其实在平时的编程中,我们可能会经常遇到如下这样的问题,就像我们的后端要从数据库中读取相同id的内容,并且合并相同id已有的值。

var arry = [{
        pid:123,
        info: '男'
    },{
        pid:123,
        info:'女'
    },{
        pid:123,
        info: '未知'
    },{
        pid:456,
        info: '东'
    },{
        pid:456,
        info:'西'
    },{
        pid:456,
        info: '南'
    },{
        pid:456,
        info: '北'
    }]

我们看到以上数组对象中,可以看到有很多个相同pid的属性值,我的目的就是将其相同的pid值的对象的info值全部合并起来,诸如
[{pid:123,info:’男/女/未知’},{pid:456,info:’东/西/南/北’}]
也就是说将相同的pid的相关内容进行合并。 继续阅读JavaScript将有相同内容的数组或对象的值进行累加

彻底关闭ubuntu提示“检测到系统程序出现问题”

ubuntu系统经常开机就会提示“检测到系统程序出现问题”的弹窗,并且还需要进行提交相关报告反馈。不过有可能仅仅只是一个很简单的错误,它就会弹出这么个窗口,但是这个错误并不会影响你的使用与操作。下面我们来看看该如何阻止这个弹窗。
这些错误报告被存放在Ubuntu中目录/var/crash中。如果你翻看这个目录的话,应该可以看到有一些以crash结尾的文件。
可以使用ls -l /var/crash/来查看相关的文件,如果有文件存在,就将其全部删除,使用如下命令进行删除

sudo rm /var/crash/*

继续阅读彻底关闭ubuntu提示“检测到系统程序出现问题”

cordova-ios4.5.x与xcode打包中遇到Error code 65 for command的解决办法

iphone X的到来又给各种打包添乱了!iOS11的到来,也导致了各种升级造成的各种问题。由于之前公司项目一直在使用cordova-4.4.0,最近为了程序能够在iphone X上能够全屏,因此使用了cordova-ios4.5.x版本。假如使用的是4.4.0版本,那么在iphone X中就会有各种适配问题。因此必须得升级为4.5.x的相关版本。但是升级后导致了打包过程中出现Error code 65 for command。这样的错误按理说是不应该出现的,但是确实就发生了,最终我再查看我的一些插件过程当中发现一个名为cordova-plugin-console的插件在cordova-ios4.5.x版本中已经包含了这个插件,由此就怀疑应该是由于插件重复而导致的问题。由此我就删除了cordova-plugin-console插件,这个过程偶尔成功过,如果我再次rm ios后再次add ios后,这个问题依然又出现了!
由此,根据各种平时处理iOS问题的经验,我得到了以下相关的解决办法!
1、删除cordova-plugin-console插件

cordova plugin rm cordova-plugin-console

2、更新pod到最新版本

cd platforms/ios
pod update

如此以来,就可以开开心心的打包iOS包了!