Node.js + MySQL 实现曾删改查，上传图片， sms服务～

2019-04-12

源码戳这里

假设您已经安装了 Node.js，创建目录以保存应用程序，并将其设置为工作目录。

Read More

Express 搭建 服务端 实现简单 api 交互

2019-04-05

安装

假设您已经安装了 Node.js，创建目录以保存应用程序，并将其设置为工作目录。

1
2
$ mkdir myapp
$ cd myapp

Read More

glup + ts

2019-03-28

安装

假设您已经安装了 Node.js，创建目录以保存应用程序，并将其设置为工作目录。

创建简单工程
我们首先创建一个新目录。 命名为tsDemo，也可以使用任何你喜欢的名字。

Read More

gulp + vueJs

2019-03-20

本篇只会讲解 vue 部分，对gulp 不熟悉的朋友，敬请移步glup 实现 实时重载刷新篇。

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

尝试 Vue.js 先创建一个 .html 文件，然后通过如下方式引入 Vue：

1
2
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

1
2
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

这里不得不提及的 MVVM 戳这里，数据驱动视图 是vueJs最大的特点，让我们先创建本地数据模型， 或者 通过AJAX 解析 后端 数据。

Read More

git 命令

2019-03-18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

git branch -a.    // 查看远程分支

git branch        // 查看本地分支

<!-- more -->

git branch -d name  // 删除本地分支

git tag       	  // 查看标签

git tag -a v1.4 -m 'my version 1.4' // 签署标签

git checkout -b  name   // 从当前分支签出新分支

git merge master         //  合并master 到当前分支

git branch -a | grep -v -w -E 'master|document' | sed 's/remotes\/origin\///g' | xargs  // 查看排除master|document 后的线上分支

git push origin --delete master document // 删除 线上分支

Read More

Vue、MVVM、MVC、双向绑定

2019-03-15

一、MVVM双向数据绑定

Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。

【模型】指的是后端传递的数据。
【视图】指的是所看到的⻚面。
【视图模型】mvvm模式的核⼼，它是连接view和model的桥梁梁。

它有两个⽅方向：

1、是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的⻚面。实现的方式是：数据绑定。
2、是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个⽅向都实现的，我们称之为数据的双向绑定。

总结： 在MVVM的框架下视图和模型是不能直接通信的。 它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发⽣变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

Read More

Javascript 面试题

2019-03-10

1,javascript获取字符串中出现最多的字符

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var str = 'afaafdff';
var obj ={};											//定义一个obj对象
//利用str.charAt(i)进行字符串截取  
for(var i=0;i<str.length;i++){
	if(!obj[str.charAt(i)]){        //判断对象中是否有这个字符
		obj[str.charAt(i)] = 1;				//没有就保存一个
	}else{
		obj[str.charAt(i)]++;					//有的话就加一
	}
}
var time = 0,index = '';
//用打擂算法循环输出obj中保存的数据
for(var i in obj){							 //i都代表着obj对象的键值(也就是字符)				
	if(obj[i]>time){
		time = obj[i];
		index = i;
	}
}
alert('次数'+time +',字符：'+index)

Read More

glup 实现 实时重载刷新

2019-03-05

安装依赖

1
2
npm init //初始化 项目
npm install --save-dev browser-sync gulp //安装必要依赖

Read More

Regular expression

2019-02-28

以分割URL为例，记录一点正则表达式的用法～

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var parse_url = /^(?:([A-Za-z]+):)?(\/{0,3})([0-9.\-A-Za-z]+)(?::(\d+))?(?:\/([^?#]*))?(?:\?([^#]*))?(?:#(.*))?$/;
var url = "http://www.ora.com:80/goodparts?q#fragment";
var result = parse_url.exec(url);
var names = ['url','scheme','slash','host','port','path','query','hash'];
var blanks = '        ';
for (var i = names.length - 1; i >= 0; i--) {
	console.log(names[i] + ':' + blanks.substring(names[i].length), result[i])
}
这段代码产生如下结果：
hash:     fragment
query:    q
path:     goodparts
port:     80
host:     www.ora.com
slash:    //
scheme:   http
url:      http://www.ora.com/goodparts?q#fragment

Read More

SVG实现可控圆环进度条 扫描效果

2019-02-26

移动端做一个 loadiing 加载的图标，跟以往沿用的都不太一样，是一个圆环进度条，圆环进度条也就罢了，还得能用百分比控制。

具体思路是 使用svg + css3 动画实现进度条的效果，代码如下：

1
2
3
4
<svg class="svg" xmlns="http://www.w3.org/200/svg" height="150" width="110">
    <circle cx="55" cy="55" r="50" fill="none" stroke="grey" stroke-width="5" stroke-linecap="round"/>
    <circle class="progress_circle" id="J_progress_bar" cx="55" cy="55" r="50" fill="none" stroke-dasharray="" stroke="#4cc4fc" stroke-width="15"/>
</svg>

Read More