JavaScript nodeJS base64加密解密url参数

为了保证全段传递都后端的数据安全性,比如用户登录时输入的密码,在post发送请求中可能会直接暴露了明文。因此可能需要前端进行相应的加密传递到后端,再由后端进行解密后再继续操作。

我使用base64的加密方式对密码进行加密,不过大家都知道base64很容易就被破解了,因此,我会替换掉几个base64生成字符串中的字母,这样就可以达到别人很难破解的目的了。具体直接看代码!

<br>
//利用base64加密传输数据<br>
function base64Encryption(str) {<br>
    let base64 = Buffer.from(str, 'utf-8').toString('base64')<br>
    // 把base64源数据中的M与Q替换成其他字符串,防止别人破解<br>
    let base64Confusion = base64.replace(/\M/, '=J=')<br>
    base64Confusion = base64Confusion.replace(/\Q/, '=V=')<br>
    return base64Confusion<br>
}<br>
function base64Decrypt(str) {<br>
    // 先把base64混淆后的字符串转换为正常额base64字符串,在进行解密<br>
    let base64 = str.replace(/=J=/, 'M')<br>
    base64 = base64.replace(/=V=/, 'Q')<br>
    return Buffer.from(base64, 'base64').toString('utf-8')<br>
}<br>
// 此加密不仅可以用于用户密码加密,也可以用于url传参加密<br>
// 一下是加密一般字符串<br>
var data = '123m你好'<br>
console.log('加密:', base64Encryption(data))<br>
console.log('解密:',base64Decrypt(base64Encryption(data)))<br>

// 一下是加密url传参,如url为http://localhost/users?userName=Jack&amp;&amp;password=1234567890<br>
var userName = 'Jack'<br>
var password = '1234567890'<br>
console.log(`加密: http://localhost/users?userName=${base64Encryption(userName)}&amp;&amp;password=${base64Encryption(password)}`)<br>
// 后端解码<br>
console.log(`解密: http://localhost/users?userName=${base64Decrypt(base64Encryption(userName))}&amp;&amp;password=${base64Decrypt(base64Encryption(password))}`)<br>
// 我们可以这样进行加密连接参数的字符串, 比如字符串是userName=Jack&amp;&amp;password=1234567890<br>
var params = `userName=${userName}&amp;&amp;password=${password}`<br>
console.log(`加密:http://localhost/users?data=${base64Encryption(params)}`)<br>
// 后端解码应该是拿到data的值为dXNlck5hbWU9SmFjayYmcGFzc3dvcm=V=9=J=TIzNDU2Nzg5MA==,并解码此值并对其进行分割获取相应的数据内容<br>
console.log(`解密data:${base64Decrypt(base64Encryption(params))}, 后端分割:${base64Decrypt(base64Encryption(params)).split('&amp;&amp;')}`)<br>

利用expressJS编写reset api

expressJS是个很轻量且简单的JavaScript后端框架,基于nodeJS开发。可以利用express简单的就可以输出reset api,当然它可以连接任意数据库。

一、准备工作

1、安装nodeJS(请自行安装)

2、安装express-generator(采用全局安装)

npm install express-generator -g

3、创建项目(我采用的是ejs模板引擎)

express –view=ejs myapp

4、连接mysql,请自行安装mysql数据库,我们需要安装mysql依赖

npm i mysql

创建数据库名为chat并创建数据库表:


`CREATE TABLE IF NOT EXISTS message(
            id char(100) PRIMARY KEY,
            from_user_id int(20) NOT NULL,
            to_user_id int(20) NOT NULL,
            read_status int(1) NOT NULL DEFAULT 0,
            content text NOT NULL,
            create_time timestamp NOT NULL DEFAULT NOW()
        ) ENGINE=InnoDB DEFAULT CHARSET=utf8;`

二、数据库连接编写

继续阅读利用expressJS编写reset api

angular4 + http拦截器

http拦截器的使用主要用于http请求,比如设置http请求头,常用于header中包含token或者cookie,以及设置请求方式为 application/x-www-form-urlencoded 或 application/json等,也可以对请求的api进行拦截。

在angular4中使用 @angular/common/http进行http请求,来做拦截器,相关代码如下:

InterceptorService.ts(此处为ionic3框架使用的方法,angular4 WEB请看下一个实例代码)

继续阅读angular4 + http拦截器

ionic3搭建开发/测试环境

用IONIC3很久了,但是一直没有看到IONIC3官方的相关文档有写关于开发、测试环境的建立或者设置,由此网上找了一番,小牛试刀终于成功搭建了测试和开发环境了,下面来分享一下相关代码与配置。
首先在src目录下创建一个config目录,建立三个文件,分别是webpack.config.js、environment.prod.ts、environment.dev.ts

webpack.config.js中的代码如下:

var path = require('path');
var useDefaultConfig = require('@ionic/app-scripts/config/webpack.config.js');

module.exports = function () {
    useDefaultConfig[process.env.IONIC_ENV].resolve.alias = {
        '@environment': path.resolve(__dirname + '/environment.' + process.env.IONIC_ENV + '.ts'),
    };
    return useDefaultConfig;
};

继续阅读ionic3搭建开发/测试环境

ionic2、3双击硬件back按键退出应用

在手机设备上,经常可以看到双击手机上的返回键两次,就会提示是否要退出应用,关于官方的相关文档在这里:https://ionicframework.com/docs/api/platform/Platform/,大家可以看一下platform.registerBackButtonAction的使用方法,在ionic中的使用方式如下:
1、在src/app/app.component.ts中输入一下代码,或者自行改造一下

import { Component, ViewChild } from '@angular/core';
import { Platform, ToastController, Nav } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { TabsPage } from '../pages/tabs/tabs';
@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage = TabsPage;
  backButtonPressed: boolean = false;  //用于判断返回键是否触发
  @ViewChild(Nav) nav: Nav;
  constructor(public platform: Platform, public toastCtrl: ToastController) {
    this.initializeApp();
  }
  initializeApp() {
    this.platform.ready().then(() => {
      StatusBar.styleDefault();
      Splashscreen.hide();
      //注册返回按键事件
      this.platform.registerBackButtonAction((): any => {
        let activeVC = this.nav.getActive();
        let page = activeVC.instance;
        //当前页面非tab栏
        if (!(page instanceof TabsPage)) {
          if (!this.nav.canGoBack()) {
            return this.showExit();
          }
          return this.nav.pop();
        }
        let tabs = page.tabs;
        let activeNav = tabs.getSelected();
        if (!activeNav.canGoBack()) {
          //当前页面为tab栏,退出APP
          return this.showExit();
        }
        //当前页面为tab栏的子页面,正常返回
        return activeNav.pop();
      }, 101);
    });
  }
  //双击退出提示框,这里使用Ionic2的ToastController
  showExit() {
    if (this.backButtonPressed) this.platform.exitApp();  //当触发标志为true时,即2秒内双击返回按键则退出APP
    else {
      let toast = this.toastCtrl.create({
        message: '再按一次退出应用',
        duration: 2000,
        position: 'bottom'
      });
      toast.present();
      this.backButtonPressed = true;
      //2秒内没有再次点击返回则将触发标志标记为false
      setTimeout(() => {
        this.backButtonPressed = false;
      }, 2000)
    }
  }
}

继续阅读ionic2、3双击硬件back按键退出应用

VMware安装Mac OS High Sierra 10.12及高版本无法全屏

好久没有玩VMware了,最近使用它安装了个Mac OS High Sierra 10.12,我一直尝试在macbook上按照网上的方法将mac系统转换成相应的iso镜像,但是并没有成功安装,最终在网上找到一个叫macOS 10.12 Sierra Final by TechReviews的压缩包,此压缩包包含的并不是iso镜像,而直接是VMware的一个已经安装了macOS 10.12 Sierra的虚拟硬盘vmdk文件,使用VMware创建虚拟机的使用不用创建新的硬盘,直接选择这个.vmdk文件作为硬盘即可。下载地址可以到我分享的网盘内下载,下载后解压即可:

百度网盘:https://pan.baidu.com/s/1eCNLN3AfIjUk2-kghfbFpQ 提取码:ov5c

使用VMware安装前,请先解锁一下VMware,让其可以安装Apple Mac OS,到github上下载最新版的unlocker进行安装(没有使用过github的同学,直接点击右边的clone or download进行下载),

地址:https://github.com/DrDonk/unlocker

不过有个缺点,就是这个虚拟硬盘大小仅有80G,目前并没有找到扩充的方法,如果大家有什么方法可以提供一下,非常感谢!先住院说一下无法全屏的问题以及原因。
只要以上一切准备就绪后,你就可以启动你的VMware虚拟机啦,接着就可以看到熟悉的苹果标志,然后跟着提示一直往下走就安装完成啦。
安装完成后就算你安装了VMware tools也无法全屏,就算你根据网上的说法,到虚拟机中设置一下屏幕,也是无济于事啊。其实最主要的原因是因为14版本的VMware中的VMware tools并不能支持mac os全屏,不过之前的VMware tools版本可以支持。因此大家可以去下载VMware tools 8.5.8就可以完美全屏啦。可以到这里下载:

百度网盘:https://pan.baidu.com/s/1EoUyGlaD_PEH2mEFKAJA-g 提取码:s7s9

采用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,不论你数据是否发生改变他都会执行,并且任意一个事件都有可能触发它。因此得需要慎用,以防影响到性能

明月本无心,行人自回首。