RegExp正则学习

正则匹配规则:

\d : 匹配一个数字
\w : 可以匹配一个字母或数字
. : 可以匹配任意字符
* : 表示任意个字符(包括0个)
+ : 表示至少一个字符
? : 表示0个或1个字符
{n} : 表示n个字符
{n,m} : 表示n-m个字符
[] : 表示范围
A|B : 可以匹配A或B
^ : 表示行的开头
$ : 表示行的结束

更多请移步 【廖雪峰博客】

使用win10的Hyper-V安装centOS 7

  1. 打开系统的Hyper-V
    进入控制面板,添加/删除程序中,找到打开/关闭windows功能,勾选.freamwork 3.5 及Hyper-V,确定后,系统会自动安装。
  2. 在系统菜单中找到Hyper-V,并打开

  3. 创建虚拟机,根据提示,进行(傻瓜式)添加虚拟机,注意一点,在本人尝试中,选择第一代和第二代的时候,我首先选择了第二代,以为第二代要比第一代TBU(高大上)一些,但是谁知,第二代在加载系统.iso文件的时候,根本没办法读取,进步了安装过程,只能……重来,选择了第一代。

  4. 到centOS官网上下载相应的系统,本人选择的是centOS minimal 7.X版本的,因为这个要比完整版小很多,相当于windows中的纯净版。

  5. 下载完成后,在添加的虚拟机中添加光盘驱动器,然后选择对应的系统.iso文件,点击开机,即可进入到安装系统界面,然后就是下一步->又一个傻瓜式的过程,不过要注意几点,就是在选择安装地方的时候,要记得去点击一下,然后选择你添加的虚拟磁盘,这样才能进入安装,否则无法进行安装。在安装过程中,要注意看某些选项中有红点点,然后就对应点击进去设置一下……

  6. 当系统安装成功后,就可以进入到系统了。然后就开始进行网络的配置。
    网络的配置需要先在虚拟机配置界面添加一个虚拟交换机,在虚拟机管理界面中,找到虚拟交换机管理器,点击,然后对应添加一个,连接类型选择外部网络,然后选择你物理机的网卡,然后确定即可。然后到添加的虚拟机中,进行对应的网络设置,设置 -> 网络适配器 -> 选择你添加的虚拟网络适配器,这时候,你的物理机可能无法进行连接外网了,然后到网络配置中,对应修改两个网卡的ip配置即可。
    然后就是centOS系统的网络配置,设置一个固定IP地址,然后,你可以选择性关闭防火墙,要不然,会出现很多问题……不想去纠结防火墙怎么设置就直接关闭!

  7. 至此,就可以通过物理机,使用ssh方式连接虚拟机centOS了。


下面是一些应用的设置

  1. centos minimal vim配色
    首先进行vim的安装
    [code lang=”bash”]
    yum -y install vim-enhanced
    [/code]
    安装完成后,可以在
    [code lang=”bash”]
    /usr/share/vim/vim72/colors
    [/code]
    下查看当前的配色方案有哪些。
    切换到 ~ 目录下,添加 .vimrc 文件,里面对应添加
    [code lang=”bash”]
    colorscheme darkblue
    [/code]
    其中,darkblue为配色方案,可以根据自己喜好和colors下的文件名选择。

打开 /etc/bashrc 文件,并在其中添加
[code lang=”bash”]
alias vi=’vim'(给vim起个别名叫vi…)
[/code]
然后运行
[code lang=”bash”]
source/etc/bashrc
[/code]

即可完成使用vi test.js 或者 vim test.js 都可以,并且有语法高亮显示的vim了。

What is fuck RESTful

人人都在说RESTful,那到底什么是RESTful呢?RESTful是一种架构,一种http的架构。

  1. 使用客户/服务器模型。客户和服务器之间通过一个统一的接口来互相通讯。
  2. 层次化的系统。在一个REST系统中,客户端并不会固定地与一个服务器打交道。
  3. 无状态。在一个REST系统中,服务端并不会保存有关客户的任何状态。也就是说,客户端自身负责用户状态的维持,并在每次发送请求时都需要提供足够的信息。
  4. 可缓存。REST系统需要能够恰当地缓存请求,以尽量减少服务端和客户端之间的信息传输,以提高性能。
  5. 统一的接口。一个REST系统需要使用一个统一的接口来完成子系统之间以及服务与用户之间的交互。这使得REST系统中的各个子系统可以独自完成演化。

如果一个系统满足了上面所列出的五条约束,那么该系统就被称为是RESTful的。

详情,可阅读这哥的博客:Amber-Garden

论注释的重要性

好的注释,不仅能够让你的代码可读性更高,而且还能让你减少很多的工作量,比如能够根据注释,快速生成API文档。以下就是使用JSDoc快速生成API的方法。

首先安装JSDoc,安装命令如下:
npm install jsdoc –g

安装完成后,使用jsdoc –v 如果出现以下内容,说明安装成功

接下来,进入到项目目录下面,如果你的源代码放在根目录的src/目录下,那再根目录下新建conf.json文件,做为JSDoc的配置文件,并向里面添加以下内容:
[code lang=”js”]
{
“tags”: {
“allowUnknownTags”: true,
“dictionaries”: [“jsdoc”,”closure”]
},
“source”: {
“includePattern”: “.+\\.js(doc)?$”,
“excludePattern”: “(^|\\/|\\\\)_”
},
“plugins”: [],
“templates”: {
“cleverLinks”: false,
“monospaceLinks”: false
}
}
[/code]

用命令行打开根目录,使用以下命令即可生成API文档:
jsdoc src –r –c conf.json –d api

如果生成的API文档没有你代码里面相应的注释内容,说明注释内容不符合规范,具体规范可查阅JSDoc的API文档,http://www.css88.com/doc/jsdoc/
以下为vue的基本注释规范:

执行 jsdoc src –r –c conf.json –d api 即可生成对应的API文档,效果如下:

到此,你该知道良好的注释,是有多么的有用了吧?

git 常用命令

日常使用

[code lang=”bash”]

#查看当前仓库状态
$ git status

#添加所有修改的文件 || 添加指定文件或目录 到本地仓库队列中
$ git add . || git add filePath

#提交add完成的文件到本地仓库
$ git commit -m “这里是提交注释”

#再次查看当前啥情况
$ git status

#拉取远程仓库到本地仓库进行合并操作,
#此处如果远程仓库的有其他人修改并提交过相同的文件,则会出现冲突,
#git会自动进行合并操作,如果不能自动合并,则要进行手动合并,
#对相关文件进行合并后,再次返回第一条命令,如此反复
$ git pull || git pull origin master

#提交本地仓库到远程仓库
$ git push || git push origin master

[/code]

进阶使用

[code lang=”bash”]
git checkout . #本地所有修改的。没有的提交的,都返回到原来的状态
git stash #把所有没有提交的修改暂存到stash里面。可用git stash pop回复。
git reset –hard HASH #返回到某个节点,不保留修改。
git reset –soft HASH #返回到某个节点。保留修改
git clean -df #返回到某个节点
git clean 参数
    -n 显示 将要 删除的 文件 和 目录
    -f 删除 文件
    -df 删除 文件 和 目录
[/code]
也可以使用:
git checkout . && git clean -xdf
来进行全部恢复

git分支创建与切换

[code lang=text]
$ git checkout -b dev
Switched to a new branch ‘dev’
[/code]

创建并切换到dev分支
相当于

[code lang=text]
$ git branch dev
$ git checkout dev
Switched to branch ‘dev’
[/code]

查看当前所在分支

[code lang=text]
$ git branch
* dev
master
[/code]

‘*’表示的就是当前所在分支

查看远程分支
$ git branch -a

【当合并代码出现冲突,出现rebase的时候…】
查看丢失的commit记录
git reflog

通过丢失的commit新建一个branch分支
git checkout -b dev 5aw24s2

切换到主分支
git branch master

合并分支
git merge dev

删除dev分支
git branch -d dev

查看文件修改记录
$ git log 文件路径
查看某次提交所修改的内容
$ git show hashID
或者
$ git show hashID 文件路径

虚拟dom的运用

  • 最近的开发中,遇到一个很头疼的事情,使用HTML5的canvas画布绘图的时候,画布要加载的数据很多,要进行不同画布之间进行切换时候,每一次切换,都要进行重新调用加载的方法,因为数据量大的问题,导致加载速度很慢。对于这个问题,进行了以下方面思考:

  1. 对多画面的加载,进行分布式加载。就是把以上要加载的东西,进行每一个小块的加载,然后利用js的回调机制,让画布列表先加载起来,然后在根据对应的画布,进行画布的数据加载。这个方法能够解决很大一部分的问题,其实总的加载时间是差不多的,但是把画布先加载起来,或者先把主要的东西加载给用户看,让用户觉得已经加载完了,但是其实并没有,剩下的是在回调中进行着,然后当用户反映过来时,已经悄悄的加载完成了。这个方法也有一个问题,就是当一个画布中的数据量很大,那它加载的时间还是会很慢。特别是多画面进行快速切换的时候,每一个切换要等待3-5秒左右,这个让用户体验度大打折扣。

  2. 然后就想到了一种加载一次,就能够一直使用的方法,不需要再进行反复加载。实现的大概思路是这样的:先把要添加的画布都初始化出来,但是不放到页面中,先保存至内存当中,把对应的数据进行load进去,当要显示对应画面的时候,就把对应的画面取出来,然后放到指定的div当中去。这样实现的好处是,不需要每次要显示的时候都要去调用load方法,然后需要进行对应画布的数据修改的时候,可以在看不到的时候就进行修改,因为把所有的数据都保存在内存当中,修改起来是很快的。当然,这也存在一个问题,就是当画面很多的时候,浏览器占用的内存就会很大,而且一直保持着那么大(当然,也有一定好处,就是不会而外增加)。

 

xlsx.js学习

最近遇到个问题,为了让用户能够快速的上传数据,需要在开发的系统当中使用上传excel文件,一开始很是头疼,各种查资料都是搞不懂是个什么玩意,到底怎么实现也不清楚,经过认真研究后,终于找到了解决的办法,那就是使用了前端xlsx.js这个库。
开始做的时候,根据自己的理解,要进行excel数据的导入操作,那必须先进行文件的上传,然后在进行文件的读取,并把excel文件里面的数据解析出来。可看了xlsx.js的示例,发现它并没有进行上传的操作,而是直接就把文件解析出来了,且可以解析成原生excel格式、json格式还有其他类型格式,我主要用json格式来进行传输,所以主要研究了json格式。
具体实现如下:
1、前端页面中引用xlsx.js文件,xlsx.js文件下载
2、html中添加input标签,这里有两种方式,如果要用直接的选择文件空间,可以直接使用
的形式来进行操作,如果要用其它的按钮或者空间,可以把file空间设置为隐藏,,然后在通过js调用,触发此file控件的click事件即可。
3、监听file空间的change事件,并进行文件读取及解析
这里还用到的是HTML5中的FileReader()方法,此方法具体内容可自行进行百度。
实现的具体代码如下:

var X = XLSX;
var xl = document.getElementById('xlf');
if(xl.addEventListener){
    console.log(222);
    xl.addEventListener('change', function(e){
        var files = e.target.files;
        var f = files[0];
        var reader = new FileReader();
        var result = {};
        reader.onload = function(e) {
            var data = e.target.result;
            var wb = X.read(data, {type: 'binary'});
            wb.SheetNames.forEach(function(sheetName) {
                var roa = X.utils.sheet_to_row_object_array(wb.Sheets[sheetName]);
                if(roa.length > 0){
                    result[sheetName] = roa;
                }
            });
            var res = JSON.stringify(result, 2, 2);
            console.log(11);
            importExcle(result);
        };
        reader.readAsBinaryString(f);
    });
}

importExcle方法可对数据进行处理,如上传到服务器,或者输出到指定地方。

Vue学习

最近有时间学习vue.js,什么是vue.js,就不在此叙述,官网为 vue.js官网
直接进入主题:
1. 使用webpack进行vue.js项目搭建
首先要安装webpack工具,要全局安装:

# 全局安装 webpack
$ npm install webpack -g
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

这样,就创建好了一个基本的vue.js的项目。默认端口为8080,在本机上访问http://localhost:8080即可看到主页面。

  1. 使用vue-router插件实现路由功能
    进入到my-project目录下,使用以下命令进行安装vue-router插件安装
    $ npm install vue-router –save-dev
    此处需要添加 —save-dev 的原因,是把此插件包安装到当前目录下的node_modules下,且把相关的安装信息添加到package.json文件的devDependencies字段里,方便包管理。

    (1) 在src目录下,新建routers.js文件,并添加以下内容

export default {
  '/': 'Home',
  '/about': 'About',
  '/svg': 'Svg'
}

(2) src中添加pages目录,用以存放页面文件
(3) 在main.js中代码修改如下

import Vue from 'vue'
import routes from './routes'
const app = new Vue({
  el: '#app',
  data: {
    currentRoute: window.location.pathname
  },
  computed: {
    ViewComponent () {
      const matchingView = routes[this.currentRoute]
      return matchingView
        ? require('./pages/' + matchingView + '.vue')
        : require('./pages/404.vue')
    }
  },
  render (h) {
    return h(this.ViewComponent)
  }
})
window.addEventListener('popstate', () => {
  app.currentRoute = window.location.pathname
})

(4) src中添加layouts目录,用以存放页面综合布局页面。
(5) pages文件夹下新建Home.vue文件,代码如下:

<template>
  <main-layout>
    <p>Welcome home</p>
  </main-layout>
</template>
<script>
  import MainLayout from '../layouts/Main.vue'
  export default {
    components: {
      MainLayout
    }
  }
</script>

(6) layouts目录下新建main.vue文件,代码如下:

<template>
  <div class="container">
    <ul>
      <li>
        <v-link href="/">Home</v-link>
        <v-link href="/about">About</v-link>
        <v-link href="/svg">Svg</v-link>
      </li>
    </ul>
    <slot></slot>
  </div>
</template>
<script>
  import VLink from '../components/VLink.vue'
  export default {
    components: {
      VLink
    }
  }
</script>
<style scoped>
  .container {
    max-width: 700px;
    min-height: 800px;
    margin: 0 auto;
    padding: 15px 30px;
    background: #f9f7f5;
  }
</style>

(7) components目录下新建VLink.vue文件,代码如下:

<template>
  <a
    v-bind:href="href"
    v-bind:class="{ active: isActive }"
    v-on:click="go"
  >
    <slot></slot>
  </a>
</template>
<script>
  import routes from '../routes'
  export default {
    props: {
      href: String,
      required: true
    },
    computed: {
      isActive () {
        return this.href === this.$root.currentRoute
      }
    },
    methods: {
      go (event) {
        event.preventDefault()
        this.$root.currentRoute = this.href
        window.history.pushState(
          null,
          routes[this.href],
          this.href
        )
      }
    }
  }
</script>
<style scoped>
  .active {
    color: cornflowerblue;
  }
</style>

(8) 至此,根目录下运行npm run dev 命令即可项目启动,并自动在浏览器中打开http://localhost:8080页面,即可看到效果,如下:
Vue.js

项目演示地址:http://dw.webshao.com/
github项目地址:https://github.com/Garens/vue

MySQL 5.7.14安装教程

Mysql 5.7.14安装教程

相比之前的mysql版本,5.7版本的mysql,可以说是改变得面目全非,不熟悉的人,安装起来就是完全不知头脑,我也是各种寻求网上教程,才得以解脱。下面就把我的受虐过程分享,让更多得人免受此版本数据库的困扰。

  1. 首先,它是要依赖.net framework的,而且是4.0版本。下面是一个能用的版本链接:
    http://libs.webshao.com/soft/tool/Microsoft.NET.exe

  2. 然后点击msi的安装包,可以看到下面这样的效果:
    MySQL安装1
    此处为保险起见,直接选择full安装,要不然后面步骤就不是一样了。只是说,完全安装的话,就会安装了一些乱七八糟的东西,但此处先不叙说其它安装。

  3. 然后下一步出现这样的界面
    MySQL安装2

  4. 此处要是你直接Next的话,将会出现这样的画面
    MySQL安装3
    所以只能进行execute,先把该装的装上吧!

    后面是一系列的下一步安装,最终会进入到mysql的配置文件配置。那里可以直接添加用户名和密码,也可以后期再进行添加,只是后期的话,没有图形界面,要进入命令模式了。

  5. 安装好后,要进行一些参数的设置,要不然用起来很不舒服。
    首先进行用户名、密码及一系列的设置。如果在配置过程输入过,那可忽略。新版本的MySQL的用户密码不再是password字段,改为了authentication_string字段,当然,设置密码的方法还是一样:
    (1)Cmd进入MySQL:cmd -> mysql –uroot –p
    此处如果无法使用mysql命令,自行环境变量配置。
    MySQL安装4

    如果首次使用,没有设置过用户名密码,则直接回车,设置过,则输入密码进入。
    (2)修改密码和允许外部访问:
    update user set host=”%”,authentication_string=password(‘root’) where user=’root’;
    然后刷新权限:
    FLUSH PRIVILEGES;

    即可用新密码登录,而且其他电脑也能访问了。

    (3)设置最大存储
    寻找到my.ini配置文件,如果在安装目录找不到,那就到C:\ProgramData 目录下面找,记事本打开,在最后添加一下内容:
    [mysqld]
    port=3306
    explicit_defaults_for_timestamp = TRUE
    max_allowed_packet = 64M
    tmp_table_size = 64M
    max_heap_table_size = 64M

    重启服务,单字段存储的内容就可达到64M了,否则数据一大了以后,就会导致崩溃无法添加的现象。

  6. 有的是解压好的安装文件,那就把MySQL添加到系统服务里面
    进入MySQL目录下的bin目录下,
    可先进行初始化
    bin\mysqld –defaults-file=d:\mysql57\my.ini –initialize
    再进行安装服务:
    运行mysqld –install MySQL defaults-file=d:\mysql57\my.ini
    即可安装服务
    MySQL安装5

    最后,提供个MySQL的安装包
    http://libs.webshao.com/soft/tool/mysql-installer-community-5.7.14.0.msi

Webpack学习

Webpack的命令及操作

  1. 首先安装webpack
    Npm install webpack –save-dev

  2. 使用webpack可以打包文件,基本打包方法为:
    webpack hello.js hello.bundle.js
    把hello.js打包为hello.bundle.js

  3. 把相关文件引入到hello.js中,再次打包:
    require(‘./world.js’)
    require(‘./style.css’)

    如果引入了css样式文件,需要安装css-loader,需要把样式也添加到页面当中,需要引入style-loader
    npm install css-loader style-loader –save-dev
    修改require为require(‘style-loader!css-loader!./style.css’)

    或者在打包命令中直接输入
    webpack hello.js hello.boudle.js –module-bind ‘css=style-loader!css-loader’

  4. 自动更新,热加载
    在命令后面添加 –watch 即可实现文件修改后自动编译

  5. webpack的配置文件

module.exports = {
    entry:’./src/script/main.js’,               //需要打包的主文件
    output:{
           path:’./dist/js’,                             //输出路径
           filename:’boudle.js’          //输出文件
    }
}

如果需要定义打包过程的参数,可在npm的package.json文件的script标签中指定,如:
“webpack”:”webpack –config webpack.config.js –progress –display-modules –colors –display-reason” //指定配置文件,看到打包过程,看到打包模块,字是彩色的,打包原因
然后运行npm run webpack 即可。

Entry可以为一个单独的文件或者一个数组,或者对象。
对应的output的filename即可为一个固定文件名或者传入[name],[hash],[chunkhash]

  1. html-webpack-plugin 插件
    (1) 在webpack的配置文件中引入插件;
    var htmlWebpackPlugin = require(‘html-webpack-plugin’);
    (2) 加入plugin参数,内容为:
Plugins:[
    New htmlWebpackPlugin({
        filename:’index-[hash].html’,           //自定义名称
            template: ‘index.html’,              //自定义模板
            inject: ‘head’,                      //自定义存放地方head,body,true,false
            minify: {                            //压缩代码
                removeComments: true,          //删除注释
                collapseWhitespace: true         //删除空格
            }
    })
]