overFlow

overFlow 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

overFlow 赞了文章 · 2018-09-29

学习ES6笔记──工作中常用到的ES6语法

一、let和const

在JavaScript中咱们以前主要用关键var来定义变量,ES6之后,新增了定义变量的两个关键字,分别是let和const。
对于变量来说,在ES5中var定义的变量会提升到作用域中所有的函数与语句前面,而ES6中let定义的变量则不会,let声明的变量会在其相应的代码块中建立一个暂时性死区,直至变量被声明。
let和const都能够声明块级作用域,用法和var是类似的,let的特点是不会变量提升,而是被锁在当前块中。

一个非常简单的例子:

function test() {
if(true) {
  console.log(a)//TDZ,俗称临时死区,用来描述变量不提升的现象
  let a = 1
}
}
test()  // a is not defined

function test() {
    if(true) {
      let a = 1
    }
    console.log(a)
}    
test() // a is not defined

唯一正确的使用方法:先声明,再访问。

function test() {
    if(true) {
      let a = 1
      console.log(a)
    }
}
test() // 1

const
声明常量,一旦声明,不可更改,而且常量必须初始化赋值。
const虽然是常量,不允许修改默认赋值,但如果定义的是对象Object,那么可以修改对象内部的属性值。

const type = {
  a: 1
}
type.a = 2 //没有直接修改type的值,而是修改type.a的属性值,这是允许的。
console.log(type) // {a: 2}

const和let的异同点
相同点:const和let都是在当前块内有效,执行到块外会被销毁,也不存在变量提升(TDZ),不能重复声明。
不同点:const不能再赋值,let声明的变量可以重复赋值。
const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

块级作用域的使用场景
除了上面提到的常用声明方式,我们还可以在循环中使用,最出名的一道面试题:循环中定时器闭包的考题
在for循环中使用var声明的循环变量,会跳出循环体污染当前的函数。

for(var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i) //5, 5, 5, 5, 5
  }, 0)
}
console.log(i) //5 i跳出循环体污染外部函数

//将var改成let之后
for(let i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i) // 0,1,2,3,4
  }, 0)
}
console.log(i)//i is not defined i无法污染外部函数

在实际开发中,我们选择使用var、let还是const,取决于我们的变量是不是需要更新,通常我们希望变量保证不被恶意修改,而使用大量的const。使用const声明,声明一个对象的时候,也推荐使用const,当你需要修改声明的变量值时,使用let,var能用的场景都可以使用let替代。

symbol
ES6 以前,我们知道5种基本数据类型分别是Undefined,Null,Boolean,Number以及String,然后加上一种引用类型Object构成了JavaScript中所有的数据类型,但是ES6出来之后,新增了一种数据类型,名叫symbol,像它的名字表露的一样,意味着独一无二,意思是每个 Symbol类型都是独一无二的,不与其它 Symbol 重复。
可以通过调用 Symbol() 方法将创建一个新的 Symbol 类型的值,这个值独一无二,不与任何值相等。

var mySymbol=Symbol();
console.log(typeof mySymbol) //"symbol"

二、字符串

ES6字符串新增的方法

UTF-16码位:ES6强制使用UTF-16字符串编码。关于UTF-16的解释请自行百度了解。

codePointAt():该方法支持UTF-16,接受编码单元的位置而非字符串位置作为参数,返回与字符串中给定位置对应的码位,即一个整数值。

String.fromCodePoiont():作用与codePointAt相反,检索字符串中某个字符的码位,也可以根据指定的码位生成一个字符。

normalize():提供Unicode的标准形式,接受一个可选的字符串参数,指明应用某种Unicode标准形式。

在ES6中,新增了3个新方法。每个方法都接收2个参数,需要检测的子字符串,以及开始匹配的索引位置。

模板字符串
字符串是JavaScript中基本类型之一,应该算是除了对象之外是使用最为频繁的类型吧,字符串中包含了例如substr,replace,indexOf,slice等等诸多方法,ES6引入了模板字符串的特性,用反引号来表示,可以表示多行字符串以及做到文本插值(利用模板占位符)。

// 以前的多行字符串我们这么写:
console.log("hello world 1\n\
hello cala");
// "hello world
// hello cala"

//有了模板字符串之后
console.log(`hello world
string text line 2`);
// "hello world
// hello cala"

可以用${}来表示模板占位符,可以将你已经定义好的变量传进括弧中,例如:

var name="cala";
var age=22;
console.log(`hello,I'am ${name},my age is ${age}`)
//hello,I'am cala,my age is 22

includes(str, index):如果在字符串中检测到指定文本,返回true,否则false。

let t = 'abcdefg'
if(t.includes('cde')) {
  console.log(2)
}
//true

startsWith(str, index):如果在字符串起始部分检测到指定文本,返回true,否则返回false。

let t = 'abcdefg'
if(t.startsWith('ab')) {
  console.log(2)
}
//true

endsWith(str, index):如果在字符串的结束部分检测到指定文本,返回true,否则返回false。

let t = 'abcdefg'
if(t.endsWith('fg')) {
  console.log(2)
}
//true

如果你只是需要匹配字符串中是否包含某子字符串,那么推荐使用新增的方法,如果需要找到匹配字符串的位置,使用indexOf()。

三、函数

函数的默认参数
在ES5中,我们给函数传参数,然后在函数体内设置默认值,如下面这种方式。

function a(num, callback) {
  num = num || 6
  callback = callback || function (data) {console.log('ES5: ', data)}
  callback(num * num)
}
a() //ES5: 36,不传参输出默认值

//你还可以这样使用callback
a(10, function(data) {
  console.log(data * 10) // 1000, 传参输出新数值
})

在ES6中,我们使用新的默认值写法

function a(num = 6, callback = function (data) {console.log('ES6: ', data)}) {
  callback(num * num)
}

a() //ES6: 36, 不传参输出默认值

a(10, function(data) {
  console.log(data * 10) // 1000,传参输出新数值
})

四、箭头函数(=>)

(箭头函数比较重要,现在简单提一下,迟一点有空专门写一篇箭头函数的文章。)

const arr = [5, 10]
const s = arr.reduce((sum, item) => sum + item)
console.log(s) // 15

箭头函数中this的使用跟普通函数也不一样,在JavaScript的普通函数中,都会有一个自己的this值,主要分为:
普通函数:
1、函数作为全局函数被调用时,this指向全局对象
2、函数作为对象中的方法被调用时,this指向该对象
3、函数作为构造函数的时候,this指向构造函数new出来的新对象
4、还可以通过call,apply,bind改变this的指向
箭头函数:
1、箭头函数没有this,函数内部的this来自于父级最近的非箭头函数,并且不能改变this的指向。
2、箭头函数没有super
3、箭头函数没有arguments
4、箭头函数没有new.target绑定。
5、不能使用new
6、没有原型
7、不支持重复的命名参数。

箭头函数的简单理解

1、箭头函数的左边表示输入的参数,右边表示输出的结果。

const s = a => a
console.log(s(2)) // 2

2、在箭头函数中,this属于词法作用域,直接由上下文确定,对于普通函数中指向不定的this,箭头函数中处理this无疑更加简单,如下:

//ES5普通函数
function Man(){
  this.age=22;
  return function(){
    this.age+1;
  }
}
var cala=new Man();
console.log(cala())//undefined

//ES6箭头函数
function Man(){
  this.age=22;
  return () => this.age+1;
}
var cala=new Man();
console.log(cala())//23

3、箭头函数中没有arguments(我们可以用rest参数替代),也没有原型,也不能使用new 关键字,例如:

//没有arguments
var foo=(a,b)=>{return arguments[0]*arguments[1]}
console.log(foo(3,5))
//arguments is not defined

//没有原型
var Obj = () => {};
console.log(Obj.prototype); 
// undefined

//不能使用new 关键字
var Obj = () => {"hello world"};
var o = new Obj(); 
// TypeError: Obj is not a constructor

4、箭头函数给数组排序

const arr = [10, 50, 30, 40, 20]
const s = arr.sort((a, b) => a - b)
console.log(s) // [10,20,30,40,50]

尾调用优化
尾调用是指在函数return的时候调用一个新的函数,由于尾调用的实现需要存储到内存中,在一个循环体中,如果存在函数的尾调用,你的内存可能爆满或溢出。

ES6中,引擎会帮你做好尾调用的优化工作,你不需要自己优化,但需要满足下面3个要求:
1、函数不是闭包
2、尾调用是函数最后一条语句
3、尾调用结果作为函数返回

尾调用实际用途——递归函数优化
在ES5时代,我们不推荐使用递归,因为递归会影响性能。
但是有了尾调用优化之后,递归函数的性能有了提升。

//新型尾优化写法
"use strict";  
function a(n, p = 1) {
  if(n <= 1) {
    return 1 * p
  }
  let s = n * p
  return a(n - 1, s)
}
//求 1 x 2 x 3的阶乘
let sum = a(3)
console.log(sum) // 6

五、ES6对象新增方法

Object.assign()
Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
Object.assign 方法只会拷贝源对象自身的并且可枚举的属性到目标对象。该方法使用源对象的[[Get]]和目标对象的[[Set]],所以它会调用相关 getter 和 setter。因此,它分配属性,而不仅仅是复制或定义新的属性。如果合并源包含getter,这可能使其不适合将新属性合并到原型中。为了将属性定义(包括其可枚举性)复制到原型,应使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
String类型和 Symbol 类型的属性都会被拷贝。
合并对象

var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。

合并具有相同属性的对象

var o1 = { a: 1, b: 1, c: 1 };
var o2 = { b: 2, c: 2 };
var o3 = { c: 3 };
var obj = Object.assign({}, o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }

六、Map和Set

Map和Set都叫做集合,但是他们也有所不同。Set常被用来检查对象中是否存在某个键名,Map集合常被用来获取已存的信息。
Set是有序列表,含有相互独立的非重复值。
Array和Set对比
都是一个存储多值的容器,两者可以互相转换,但是在使用场景上有区别。如下:
Array的indexOf方法比Set的has方法效率低下
Set不含有重复值(可以利用这个特性实现对一个数组的去重)
Set通过delete方法删除某个值,而Array只能通过splice。两者的使用方便程度前者更优
Array的很多新方法map、filter、some、every等是Set没有的(但是通过两者可以互相转换来使用)
Object和Map对比
Object是字符串-值,Map是值-值
Object键为string类型,Map的键是任意类型
手动计算Object尺寸,Map.size可以获取尺寸
Map的排序是插入顺序
Object有原型,所以映射中有一些缺省的键。可以理解为Map=Object.create(null)

Set操作集合

let set = new Set()
// Set转化为数组
let arr = Array.from(set)
let arr = [...set]
// 实例属性(继承自Set)
set.constructor === Set 
set.size 
// 操作方法
set.add(1) // 添加一个值
set.delete(1) //删除一个值
set.has(1) //判断是否有这个值(Array中的indexOf)
set.clear() //清除所有值
// 获取用于遍历的成员方法(Set的遍历顺序就是插入顺序)
set.keys() // 返回键名的遍历器
set.values() // 返回键值得遍历器
set.entries() // 返回键值对的遍历器
set.forEach() // 循环遍历每个值(和Array的方法一致)
for (let key of set.keys()){}
for (let val of set.values()){}
for (let entry of set.entries()){}
// 使用数组方法来处理set值
set = new Set(arr)
set = new Set([...set].map((x) => x = x * 2))
set = new Set([...set].filter((x) => x > 2))

Map的方法集合

let map = new Map()
// 实例属性(继承自Map)
map.constructor === Map
map.size
// 操作方法
map.set(1,2)
map.get(1)
map.delete(1)
map.has(1)
map.clear()
// 遍历方法
map.keys()
map.values()
map.entries()
map.forEach()
// Map和数组的转换
map = new Map([['key','val'],[2,1]]) // 要求双成员数组
let arr = [...map]
// 值得注意的是Map的键是跟内存绑定的
map.set([1], 's')
map.get([1])
let arr = [1]
let arr1 = [1]
map.set(arr, 's')
map.get(arr)
map.set(arr1, 's')
map.get(arr1)

想要深入理解Set和Map,可以查看《深入理解:ES6中的Set和Map数据结构,Map与其它数据结构的互相转换》

七、迭代器(Iterator)

1、entries() 返回迭代器:返回键值对

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.entries()) {
  console.log(v)
}
// [0, 'a'] [1, 'b'] [2, 'c']

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.entries()) {
  console.log(v)
}
// ['a', 'a'] ['b', 'b'] ['c', 'c']

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.entries()) {
  console.log(v)
}
// ['a', 'a'] ['b', 'b']

2、values() 返回迭代器:返回键值对的value

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.values()) {
  console.log(v)
}
//'a' 'b' 'c'

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.values()) {
  console.log(v)
}
// 'a' 'b' 'c'

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.values()) {
  console.log(v)
}
// 'a' 'b'

3、keys() 返回迭代器:返回键值对的key

//数组
const arr = ['a', 'b', 'c'];
for(let v of arr.keys()) {
  console.log(v)
}
// 0 1 2

//Set
const arr = new Set(['a', 'b', 'c']);
for(let v of arr.keys()) {
  console.log(v)
}
// 'a' 'b' 'c'

//Map
const arr = new Map();
arr.set('a', 'a');
arr.set('b', 'b');
for(let v of arr.keys()) {
  console.log(v)
}
// 'a' 'b'

虽然上面列举了3种内建的迭代器方法,但是不同集合的类型还有自己默认的迭代器,在for of中,数组和Set的默认迭代器是values(),Map的默认迭代器是entries()。

for of循环解构

对象本身不支持迭代,但是我们可以自己添加一个生成器,返回一个key,value的迭代器,然后使用for of循环解构key和value。

const obj = {
  a: 1,
  b: 2,
  *[Symbol.iterator]() {
    for(let i in obj) {
      yield [i, obj[i]]
    }
  }
}
for(let [key, value] of obj) {
  console.log(key, value)
}
// 'a' 1, 'b' 2

字符串迭代器

const str = 'abc';
for(let v of str) {
  console.log(v)
}
// 'a' 'b' 'c'

ES6给数组添加了几个新方法:find()、findIndex()、fill()、copyWithin()

1、find():传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它,并且终止搜索。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.find(n => typeof n === "number")) // 1

2、findIndex():传入一个回调函数,找到数组中符合当前搜索规则的第一个元素,返回它的下标,终止搜索。

const arr = [1, "2", 3, 3, "2"]
console.log(arr.findIndex(n => typeof n === "number")) // 0

3、fill():用新元素替换掉数组内的元素,可以指定替换下标范围。

arr.fill(value, start, end)

4、copyWithin():选择数组的某个下标,从该位置开始复制数组元素,默认从0开始复制。也可以指定要复制的元素范围。

arr.copyWithin(target, start, end)

const arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(3)) // [1,2,3,1,2] 从下标为3的元素开始,复制数组,所以4, 5被替换成1, 2

const arr1 = [1, 2, 3, 4, 5]
console.log(arr1.copyWithin(3, 1)) // [1,2,3,2,3] 从下标为3的元素开始,复制数组,指定复制的第一个元素下标为1,所以4, 5被替换成2, 3

const arr2 = [1, 2, 3, 4, 5]
console.log(arr2.copyWithin(3, 1, 2)) // [1,2,3,2,5] 从下标为3的元素开始,复制数组,指定复制的第一个元素下标为1,结束位置为2,所以4被替换成2

ES6中类class、Promise与异步编程、代理(Proxy)和反射(Reflection)API,这几块内容比较复杂,以后有机会再详细写。

PS: 写的太匆忙了,难免有错漏的地方。

查看原文

赞 492 收藏 394 评论 6

overFlow 赞了文章 · 2018-09-29

JavaScript ES6  让我们写得少,做得多

JavaScript ES6 带来了新的语法和新的强大功能,使您的代码更现代,更易读。它允许您编写更少的代码并执行更多操作。 ES6 向我们介绍了许多强大的功能,如箭头函数,模板字符串,对象结构,模块等,让我们来看看。

const and let

const 是 ES6 中用于声明变量的新关键字。 const 比 var 更强大。使用后,无法重新分配变量。换句话说,它是一个不可变的变量,除非它与对象一起使用。

这对于定位选择器非常有用。例如,当我们有一个触发事件的按钮时,或者当您想在 JavaScript 中选择 HTML 元素时,请使用 const 而不是 var。这是因为 var 会被提升,当不想重新分配变量时,最好使用 const。

// ES5
var MyBtn = document.getElementId('mybtn');

// ES6
const MyBtn = document.getElementById('mybtn');

在上面的代码中,const 不会更改,也不能重新分配。如果您尝试为其赋予新值,则会返回错误。

let name = "Said";
    name = "Rick";

console.log(name); // Rick

let 可以重新分配并获得新的价值。它创建了一个可变变量。

let 与 const 相同,因为两者都是块级作用域,这意味着该变量仅在其块级范围内可用。

箭头函数

箭头函数非常棒,使您的代码更具可读性,更具结构性,并且看起来像现代代码,而不是使用这个:

// ES5
function myFunc(name) {
  return 'Hello ' + name;
}
console.log(myFunc('said'));  // Hello said

而使用 ES6 的写法:

// ES6 Arrow function
const myFunc = name => {
  return `Hi ${name}`;
}
console.log(myFunc('Said')); // Hi Said

// 或者不要 return 关键字
const myFunc = name => `Hi ${name}`;

console.log(myFunc('Said'));// Hi Said

如您所见,箭头功能似乎更具可读性和清洁性!您将不再需要使用旧语法。

此外,您可以使用箭头功能与 map,filter 和 reduce 内置函数。

const myArray = ['tony', 'Sara', 'Said', 5];

// ES5
let Arr1 = myArray.map(function(item) {
  return item;
});
console.log(Arr1);// ["tony", "Sara", "Said", 5]

// ES6
let Arr2 = myArray.map(item => item);
console.log(Arr2);// ["tony", "Sara", "Said", 5]

带箭头的 map 函数看起来比 ES5 中的 map 更清晰可读。使用 ES6,您可以编写更短的代码,你也可以用相同的方法使用 reduce 和 filter。

模板字符串

模板字符串非常酷,当我们想在字符串中使用变量时我们不必使用加号(+)运算符来连接字符串。

旧语法:

// ES5
function myFunc1(name, age) {
  return 'Hi ' + name + ' Your age is ' + age + ' year old';
}
console.log(myFunc('Said', 22)); // Hi Said, Your age is 22 year old

用 ES6 新语法:

// ES6
const myFunc = (name, age) => {
  return `Hi ${name}, Your age is ${age} year old`;
}
// or
const myFunc = (name, age) => `Hi ${name}, Your age is ${age} year old`;

console.log(myFunc1('Said', 22)); // Hi Said, Your age is 22 year old

很简单!这是旧语法和 ES6 之间的巨大差异。使用字符串时,ES6 中的文字字符串看起来比 ES5 更有条理,结构更好。

默认参数

当您忘记编写参数时,它不会返回未定义的错误,因为该参数已在默认值中定义。因此,当您使用遗漏参数运行函数时,它将采用默认参数的值,并且不会返回错误!

看看这个例子:

const myFunc = (name, age) => `Hi ${name}, Your age is ${age} year old`;

console.log(myFunc('Said')); // Hi Said, Your age is undefined year old

上面的函数返回 undefined,因为我们忘了给它第二个参数 age。

但是如果我们使用默认参数,当我们忘记分配参数时,它将使用它的默认值,将不会返回 undefined!

const myFunc = (name, age = 22) => `Hi ${name}, Your age is ${age} year old`;

console.log(myFunc('Said')); // Hi Said, Your age is 22 year old

如您所见,即使我们错过了第二个参数,该函数也会返回一个值。现在使用默认参数我们可以提前处理错误。

数组和对象解构

解构使得将数组或对象的值分配给新变量更容易。

旧语法:

const contacts = {
  name: 'said',
  famillyName: 'Hayani',
  age: 22
};

let name = contacts.name;
let famillyName = contacts.famillyName;
let myAge = contacts.age;

console.log(name); // said
console.log(famillyName); // Hayani
console.log(myAge); // 22

ES6 新语法:

const contacts = {
  name: 'said',
  famillyName: 'Hayani',
  age: 22
};

let {name, famillyName, age} = contacts;

console.log(name); // said
console.log(famillyName); // Hayani
console.log(age); // 22

使用 ES5,我们必须为每个变量分配每个值。使用 ES6,我们只需将我们的值放在大括号中以获取对象的任何属性。

注意:如果指定的变量与属性名称不同,则返回 undefined。例如,如果属性的名称是 name,我们将其分配给 username变量,它将返回undefined。

我们总是必须将变量命名为与属性名称相同。但是如果我们想要重命名变量,我们可以使用冒号:代替。

const contacts = {
  name: 'said',
  famillyName: 'Hayani',
  age: 22
};

let {name:otherName, famillyName, myAge} = contacts;

console.log(otherName);// said

对于数组,我们使用与对象相同的语法。我们只需用方括号替换花括号。

const Arr = ['Lionel', 'John', 'Layla', 20];

let [value1, value2, value3] = Arr;
console.log(value1); // Lionel
console.log(value2); // John
console.log(value3); // Layla

Import and export

在 JavaScript 应用程序中使用 import 和 export 使其更强大。它们允许您创建单独的可重用组件。

如果您熟悉任何 JavaScript MVC 框架,您将看到他们使用 import 和 export 出来在大多数时间处理组件。那么它们如何真正起作用呢?

很简单! export 允许您导出要在另一个 JavaScript 组件中使用的模块。我们使用 import 导入该模块以在我们的组件中使用它。

例如,我们有两个文件。第一个名为 detailComponent.js,第二个名为 homeComponent.js。

在 detailComponent.js 中,我们将导出 detail 函数。

// ES6 
export default function detail(name, age) {
  return `Hello ${name}, your age is ${age} year old!`;
}

如果我们想在 homeComponent.js 中使用此函数,我们将只使用 import

import { detail } from './detailComponent';

console.log(detail('Said', 20)); // Hello Said, your age is 20 year old!

如果我们要导入多个模块,我们只需将它们放在大括号内。

import {detail, userProfile, getPosts} from './detailComponent';
console.log(detail('Said', 20)); 
console.log(userProfile); 
console.log(getPosts)); 

Promis

Promise 是 ES6 的新功能。这是编写异步代码的方法。例如,当我们想要从 API 获取数据时,可以使用它,或者当我们有一个需要时间执行的函数时。Promise 使解决问题更容易,所以让我们创建我们的第一个 Promise!

const myPromise = () => {
  return new Promise((resolve, reject) => {
    resolve('Hi the Promise execute successfully');
  })
}
console.log(myPromise()); // Promise {<resolved>: "Hi the Promise execute successfully"}

如果您登录控制台,它将返回一个 Promise。因此,如果我们想在获取数据后执行一个函数,我们将使用 Promise。 Promise有两个参数: resolve 和 reject 来处理预期的错误。

注意:fetch函数返回一个Promise本身!

const url='https://jsonplaceholder.typicode.com/posts';
const getData=(url)=>{
  return fetch(url);
}
getData(url).
then(data=> data.json()).
then(result=> console.log(result));

现在,如果您登录控制台,它将返回一个数据数组。

Rest 参数和 Spread 运算符

Rest 参数用于获取数组的参数,并返回一个新数组。

const arr = ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?'];

// 通过解构获取值
const [val1, val2, val3, ...rest] = arr;

const Func = (restOfArr) => {
  return restOfArr.filter(item => {return item}).join(" ");
}

console.log(Func(rest)); // Hi Said How are you?
const arr = ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?'];

const Func = (...anArray) => anArray;

console.log(Func(arr)); //  ['said', 20, 'Javascript enthusiast', 'Hi', 'Said', 'How are you?']

spread 运算符与 rest 参数具有相同的语法,但是 spread 运算符采用数组本身而不仅仅是参数。我们可以使用 Spread 参数来获取数组的值,而不是使用 for 循环或任何其他方法。

const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?'];
const Func=(...anArray)=>{
  return anArray;
}
console.log(Func(arr)); //["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"

Class

类是面向对象编程(OOP)的核心。它们使您的代码更安全和封装。使用类可以为代码提供一个很好的结构并使其保持面向对象。

class myClass {
  constructor() {
  }
}

要创建一个类,请使用 class 关键字,后跟带有两个大括号的类的名称。

class myClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const user = new myClass('Said', 22);
console.log(user.name); // Said
cosnole.log(user.age); // 22

现在我们可以使用 new 关键字访问类方法和属性。

class myClass{
    constructor(name,age){
    this.name=name;
    this.age=age;
}
}
const Home= new myClass("said",20);
console.log(Home.name)//  said

要从其他类继承,请使用 extends 关键字,后跟要继承的类的名称。

class myClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    cosnole.log(`Hi ${this.name} your age is ${this.age} `);
  }
}

// 继承 myClass 方法和属性
class UserProfile extends myClass {
  username() {
    console.log(this.name);
  }
}

const profile = new UserProfile('Said', 22);
profile.sayHello();// Hi Said your age is 22;
profile.username();// Said
查看原文

赞 5 收藏 2 评论 1

overFlow 赞了文章 · 2018-09-29

2018年Android的保活方案效果统计

一、常见保活方案

1、监听广播:监听全局的静态广播,比如时间更新的广播、开机广播、解锁屏、网络状态、解锁加锁亮屏暗屏(3.1版本),高版本需要应用开机后运行一次才能监听这些系统广播,目前此方案失效。可以更换思路,做APP启动后的保活(监听广播启动保活的前台服务)

2、定时器、JobScheduler:假如应用被系统杀死,那么定时器则失效,此方案失效。JobService在5.0,5.1,6.0作用很大,7.0时候有一定影响(可以在电源管理中给APP授权)

3、双进程(NDK方式Fork子进程)、双Service守护:高版本已失效,5.0起系统回收策略改成进程组。双Service方案也改成了应用被杀,任何后台Service无法正常状态运行

4、提高Service优先级:只能一定程度上缓解Service被立马回收

二、保活

  • 1、AIDL方式单进程、双进程方式保活Service
  • 2、降低oom_adj的值:常驻通知栏(可通过启动另外一个服务关闭Notification,不对oom_adj值有影响)、使用”1像素“的Activity覆盖在getWindow()的view上、循环播放无声音频(黑科技,7.0下杀不掉)
  • 3、监听锁屏广播:使Activity始终保持前台
  • 4、使用自定义锁屏界面:覆盖了系统锁屏界面。
  • 5、通过android:process属性来为Service创建一个进程
  • 6、跳转到系统白名单界面让用户自己添加app进入白名单

三、复活

  • 1、JobScheduler:原理类似定时器,5.0,5.1,6.0作用很大,7.0时候有一定影响(可以在电源管理中给APP授权)
  • 2、推送互相唤醒复活:极光、友盟、以及各大厂商的推送
  • 3、同派系APP广播互相唤醒:比如今日头条系、阿里系
方案实现效果统计

1、双进程守护方案(基于onStartCommand() return START_STICKY)

  • 1、原生5.0、5.1:原生任务栏滑动清理app,Service会被杀掉,然后被拉起,接着一直存活
  • 2、金立F100(5.1):一键清理直接杀掉整个app,包括双守护进程。不手动清理情况下,经测试能锁屏存活至少40分钟
  • 3、华为畅享5x(6.0):一键清理直接杀掉整个app,包括双守护进程。不手动清理下,锁屏只存活10s。结论:双进程守护方案失效。
  • 4、美图m8s(7.1.1):一键清理直接杀掉整个app,包括双守护进程。不清理情况下,锁屏会有被杀过程(9分钟左右被杀),之后重新复活,之后不断被干掉然后又重新复活。结论:双守护进程可在后台不断拉起Service。
  • 5、原生7.0:任务栏清除APP后,Service存活。使用此方案后Service照样存活。
  • 6、LG V30+(7.1.2):不加双进程守护的时候,一键清理无法杀掉服务。加了此方案之后也不能杀掉服务,锁屏存活(测试观察大于50分钟)
  • 7、小米8(8.1):一键清理直接干掉app并且包括双守护进程。不清理情况下,不加守护进程方案与加守护进程方案Service会一直存活,12分钟左右closed。结论:此方案没有起作用

结论:除了华为此方案无效以及未更改底层的厂商不起作用外(START_STICKY字段就可以保持Service不被杀)。此方案可以与其他方案混合使用

2、监听锁屏广播打开1像素Activity(基于onStartCommand() return START_STICKY)
  • 1、原生5.0、5.1:锁屏后3s服务被干掉然后重启(START_STICKY字段起作用)
  • 2、华为畅享5x(6.0):锁屏只存活4s。结论:方案失效。
  • 3、美图m8s(7.1.1):同原生5.0
  • 4、原生7.0:同美图m8s。
  • 5、LG V30+(7.1.2):锁屏后情况跟不加情况一致,服务一致保持运行,结论:此方案不起作用
  • 6、小米8(8.1):关屏过2s之后app全部被干掉。结论:此方案没有起作用

结论:此方案无效果

3、故意在后台播放无声的音乐(基于onStartCommand() return START_STICKY)

  • 1、原生5.0、5.1:锁屏后3s服务被干掉然后重启(START_STICKY字段起作用)
  • 2、华为畅享5x(6.0):一键清理后服务依然存活,需要单独清理才可杀掉服务,锁屏8分钟后依然存活。结论:此方案适用
  • 3、美图m8s(7.1.1):同5.0
  • 4、原生7.0:任务管理器中关闭APP后服务被干掉,大概过3s会重新复活(同仅START_STICKY字段模式)。结论:看不出此方案有没有其作用
  • 5、LG V30+(7.1.2):使用此方案前后效果一致。结论:此方案不起作用
  • 6、小米8(8.1):一键清理可以杀掉服务。锁屏后保活超过20分钟

结论:成功对华为手机保活。小米8下也成功突破20分钟

4、使用JobScheduler唤醒Service(基于onStartCommand() return START_STICKY)

  • 1、原生5.0、5.1:任务管理器中干掉APP,服务会在周期时间后重新启动。结论:此方案起作用
  • 2、华为畅享5x(6.0):一键清理直接杀掉APP,过12s左右会自动重启服务,JobScheduler起作用
  • 3、美图m8s(7.1.1):一键清理直接杀掉APP,无法自动重启
  • 4、原生7.0:同美图m8s(7.1.1)
  • 5、小米8(8.1):同美图m8s(7.1.1)

结论:只对5.0,5.1、6.0起作用

5、混合使用的效果,并且在通知栏弹出通知

  • 1、原生5.0、5.1:任务管理器中干掉APP,服务会在周期时间后重新启动。锁屏超过11分钟存活
  • 2、华为畅享5x(6.0):一键清理后服务依然存活,需要单独清理才可杀掉服务。结论:方案适用。
  • 3、美图m8s(7.1.1):一键清理APP会被杀掉。正常情况下锁屏后服务依然存活。
  • 4、原生7.0:任务管理器中关闭APP后服务被干掉,过2s会重新复活
  • 5、小米8(8.1):一键清理可以杀掉服务,锁屏下后台保活时间超过38分钟
  • 6、荣耀10(8.0):一键清理杀掉服务,锁屏下后台保活时间超过23分钟

结论:高版本情况下可以使用弹出通知栏、双进程、无声音乐提高后台服务的保活概率

实现具体过程

一、双进程实现方案

使用AIDL绑定方式新建2个Service优先级(防止服务同时被系统杀死)不一样的守护进程互相拉起对方,并在每一个守护进程的ServiceConnection的绑定回调里判断保活Service是否需要重新拉起和对守护线程进行重新绑定。

1、新建一个AIDL文件

KeepAliveConnection
interface KeepAliveConnection  {
}

2、新建一个服务类StepService,onBind()方法返回new KeepAliveConnection.Stub()对象,并在ServiceConnection的绑定回调中对守护进程服务类GuardService的启动和绑定。


/**
 * 主进程 双进程通讯
 *
 * @author LiGuangMin
 * @time Created by 2018/8/17 11:26
 */
public class StepService extends Service {

    private final static String TAG = StepService.class.getSimpleName();
    private ServiceConnection mServiceConnection = new ServiceConnection() {
        @Override
        public void onServiceConnected(ComponentName componentName, IBinder iBinder) {
            Logger.d(TAG, "StepService:建立链接");
            boolean isServiceRunning = ServiceAliveUtils.isServiceAlice();
            if (!isServiceRunning) {
                Intent i = new Intent(StepService.this, DownloadService.class);
                startService(i);
            }
        }

        @Override
        public void onServiceDisconnected(ComponentName componentName) {
            // 断开链接
            startService(new Intent(StepService.this, GuardService.class));
            // 重新绑定
            bindService(new Intent(StepService.this, GuardService.class), mServiceConnection, Context.BIND_IMPORTANT);
        }
    };

    @Nullable
    @Override
    public IBinder onBind(Intent intent) {
        return new KeepAliveConnection.Stub() {
        };
    }

    @Override
    public int onStartCommand(Intent intent, int flags, int startId) {
        startForeground(1, new Notification());
        // 绑定建立链接
        bindService(new Intent(this, GuardService.class), mServiceConnection, Context.BIND_IMPORTANT);
        return START_STICKY;
    }

}

3、对守护进程GuardService进行和2一样的处理

/**
 * 守护进程 双进程通讯
 *
 * @author LiGuangMin
 * @time Created by 2018/8/17 11:27
 */
public class GuardService extends Service {
    private final static String TAG = GuardService.class.getSimpleName();
    private ServiceConnection mServiceConnection = new ServiceConnection() {
        @Override
        public void onServiceConnected(ComponentName componentName, IBinder iBinder) {
            Logger.d(TAG, "GuardService:建立链接");
            boolean isServiceRunning = ServiceAliveUtils.isServiceAlice();
            if (!isServiceRunning) {
                Intent i = new Intent(GuardService.this, DownloadService.class);
                startService(i);
            }
        }

        @Override
        public void onServiceDisconnected(ComponentName componentName) {
            // 断开链接
            startService(new Intent(GuardService.this, StepService.class));
            // 重新绑定
            bindService(new Intent(GuardService.this, StepService.class), mServiceConnection, Context.BIND_IMPORTANT);
        }
    };

    @Nullable
    @Override
    public IBinder onBind(Intent intent) {
        return new KeepAliveConnection.Stub() {
        };
    }

    @Override
    public int onStartCommand(Intent intent, int flags, int startId) {
        startForeground(1, new Notification());
        // 绑定建立链接
        bindService(new Intent(this, StepService.class), mServiceConnection, Context.BIND_IMPORTANT);
        return START_STICKY;
    }

}

4、在Activity中在启动需要保活的DownloadService服务后然后启动保活的双进程

public class MainActivity extends AppCompatActivity {
    private TextView mShowTimeTv;
    private DownloadService.DownloadBinder mDownloadBinder;
    private ServiceConnection mServiceConnection = new ServiceConnection() {
        @Override
        public void onServiceConnected(ComponentName name, IBinder service) {
            mDownloadBinder = (DownloadService.DownloadBinder) service;
            mDownloadBinder.setOnTimeChangeListener(new DownloadService.OnTimeChangeListener() {
                @Override
                public void showTime(final String time) {
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            mShowTimeTv.setText(time);
                        }
                    });
                }
            });
        }

        @Override
        public void onServiceDisconnected(ComponentName name) {
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Intent intent = new Intent(this, DownloadService.class);
        startService(intent);
        bindService(intent, mServiceConnection, Context.BIND_AUTO_CREATE);
        //双守护线程,优先级不一样
        startAllServices();
    }

    @Override
    public void onContentChanged() {
        super.onContentChanged();
        mShowTimeTv = findViewById(R.id.tv_show_time);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        unbindService(mServiceConnection);
    }

    /**
     * 开启所有守护Service
     */
    private void startAllServices() {
        startService(new Intent(this, StepService.class));
        startService(new Intent(this, GuardService.class));
    }
}

二、监听到锁屏广播后使用“1”像素Activity提升优先级

1、该Activity的View只要设置为1像素然后设置在Window对象上即可。在Activity的onDestroy周期中进行保活服务的存活判断从而唤醒服务。"1像素"Activity如下

public class SinglePixelActivity extends AppCompatActivity {
    private static final String TAG = SinglePixelActivity.class.getSimpleName();

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Window mWindow = getWindow();
        mWindow.setGravity(Gravity.LEFT | Gravity.TOP);
        WindowManager.LayoutParams attrParams = mWindow.getAttributes();
        attrParams.x = 0;
        attrParams.y = 0;
        attrParams.height = 1;
        attrParams.width = 1;
        mWindow.setAttributes(attrParams);
        ScreenManager.getInstance(this).setSingleActivity(this);
    }

    @Override
    protected void onDestroy() {
        if (!SystemUtils.isAppAlive(this, Constant.PACKAGE_NAME)) {
            Intent intentAlive = new Intent(this, DownloadService.class);
            startService(intentAlive);
        }
        super.onDestroy();
    }
}

2、对广播进行监听,封装为一个ScreenReceiverUtil类,进行锁屏解锁的广播动态注册监听

public class ScreenReceiverUtil {
    private Context mContext;
    private SreenBroadcastReceiver mScreenReceiver;
    private SreenStateListener mStateReceiverListener;

    public ScreenReceiverUtil(Context mContext) {
        this.mContext = mContext;
    }

    public void setScreenReceiverListener(SreenStateListener mStateReceiverListener) {
        this.mStateReceiverListener = mStateReceiverListener;
        // 动态启动广播接收器
        this.mScreenReceiver = new SreenBroadcastReceiver();
        IntentFilter filter = new IntentFilter();
        filter.addAction(Intent.ACTION_SCREEN_ON);
        filter.addAction(Intent.ACTION_SCREEN_OFF);
        filter.addAction(Intent.ACTION_USER_PRESENT);
        mContext.registerReceiver(mScreenReceiver, filter);
    }

    public void stopScreenReceiverListener() {
        mContext.unregisterReceiver(mScreenReceiver);
    }

    /**
     * 监听sreen状态对外回调接口
     */
    public interface SreenStateListener {
        void onSreenOn();

        void onSreenOff();

        void onUserPresent();
    }

    public class SreenBroadcastReceiver extends BroadcastReceiver {
        @Override
        public void onReceive(Context context, Intent intent) {
            String action = intent.getAction();
            if (mStateReceiverListener == null) {
                return;
            }
            if (Intent.ACTION_SCREEN_ON.equals(action)) { // 开屏
                mStateReceiverListener.onSreenOn();
            } else if (Intent.ACTION_SCREEN_OFF.equals(action)) { // 锁屏
                mStateReceiverListener.onSreenOff();
            } else if (Intent.ACTION_USER_PRESENT.equals(action)) { // 解锁
                mStateReceiverListener.onUserPresent();
            }
        }
    }
}

3、对1像素Activity进行防止内存泄露的处理,新建一个ScreenManager类

public class ScreenManager {
    private static final String TAG = ScreenManager.class.getSimpleName();
    private static ScreenManager sInstance;
    private Context mContext;
    private WeakReference<Activity> mActivity;

    private ScreenManager(Context mContext) {
        this.mContext = mContext;
    }

    public static ScreenManager getInstance(Context context) {
        if (sInstance == null) {
            sInstance = new ScreenManager(context);
        }
        return sInstance;
    }

    /** 获得SinglePixelActivity的引用
     * @param activity
     */
    public void setSingleActivity(Activity activity) {
        mActivity = new WeakReference<>(activity);
    }

    /**
     * 启动SinglePixelActivity
     */
    public void startActivity() {
        Intent intent = new Intent(mContext, SinglePixelActivity.class);
        intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        mContext.startActivity(intent);
    }

    /**
     * 结束SinglePixelActivity
     */
    public void finishActivity() {
        if (mActivity != null) {
            Activity activity = mActivity.get();
            if (activity != null) {
                activity.finish();
            }
        }
    }
}

4、对1像素的Style进行特殊处理,在style文件中新建一个SingleActivityStyle

<style name="SingleActivityStyle" parent="android:Theme.Holo.Light.NoActionBar">
        <item name="android:windowBackground">@android:color/transparent</item>
        <item name="android:windowFrame">@null</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowIsFloating">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:backgroundDimEnabled">false</item>
        <item name="android:windowAnimationStyle">@null</item>
        <item name="android:windowDisablePreview">true</item>
        <item name="android:windowNoDisplay">false</item>

5、让SinglePixelActivity使用singleInstance启动模式,在manifest文件中

 <activity
            android:name=".activity.SinglePixelActivity"
            android:configChanges="keyboardHidden|orientation|screenSize|navigation|keyboard"
            android:excludeFromRecents="true"
            android:finishOnTaskLaunch="false"
            android:launchMode="singleInstance"
            android:theme="@style/SingleActivityStyle" />

6、在保活服务类DownloadService中对监听的广播进行注册和对SinglePixelActivity进行控制

public class DownloadService extends Service {
    public static final int NOTICE_ID = 100;
    private static final String TAG = DownloadService.class.getSimpleName();
    private DownloadBinder mDownloadBinder;
    private NotificationCompat.Builder mBuilderProgress;
    private NotificationManager mNotificationManager;

    private ScreenReceiverUtil mScreenListener;
    private ScreenManager mScreenManager;
    private Timer mRunTimer;

    private int mTimeSec;
    private int mTimeMin;
    private int mTimeHour;

    private ScreenReceiverUtil.SreenStateListener mScreenListenerer = new ScreenReceiverUtil.SreenStateListener() {
        @Override
        public void onSreenOn() {
            mScreenManager.finishActivity();
            Logger.d(TAG, "关闭了1像素Activity");
        }

        @Override
        public void onSreenOff() {
            mScreenManager.startActivity();
            Logger.d(TAG, "打开了1像素Activity");
        }

        @Override
        public void onUserPresent() {
        }
    };
    private OnTimeChangeListener mOnTimeChangeListener;

    @Override
    public void onCreate() {
        super.onCreate();

//        注册锁屏广播监听器
        mScreenListener = new ScreenReceiverUtil(this);
        mScreenManager = ScreenManager.getInstance(this);
        mScreenListener.setScreenReceiverListener(mScreenListenerer);
        
        mDownloadBinder = new DownloadBinder();
        mNotificationManager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
    }

    @Override
    public int onStartCommand(Intent intent, int flags, int startId) {
        Logger.d(TAG, "onStartCommand");
        startRunTimer();
        return START_STICKY;
    }

    @Nullable
    @Override
    public IBinder onBind(Intent intent) {

        return mDownloadBinder;
    }

    @Override
    public boolean onUnbind(Intent intent) {
        Logger.d(TAG, "onUnbind");
        return super.onUnbind(intent);
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        NotificationManager mManager = (NotificationManager) getSystemService(NOTIFICATION_SERVICE);
        if (mManager == null) {
            return;
        }
        mManager.cancel(NOTICE_ID);
        stopRunTimer();
//        mScreenListener.stopScreenReceiverListener();
    }


    private void startRunTimer() {
        TimerTask mTask = new TimerTask() {
            @Override
            public void run() {
                mTimeSec++;
                if (mTimeSec == 60) {
                    mTimeSec = 0;
                    mTimeMin++;
                }
                if (mTimeMin == 60) {
                    mTimeMin = 0;
                    mTimeHour++;
                }
                if (mTimeHour == 24) {
                    mTimeSec = 0;
                    mTimeMin = 0;
                    mTimeHour = 0;
                }
                String time = "时间为:" + mTimeHour + " : " + mTimeMin + " : " + mTimeSec;
                if (mOnTimeChangeListener != null) {
                    mOnTimeChangeListener.showTime(time);
                }
                Logger.d(TAG, time);
            }
        };
        mRunTimer = new Timer();
        // 每隔1s更新一下时间
        mRunTimer.schedule(mTask, 1000, 1000);
    }

    private void stopRunTimer() {
        if (mRunTimer != null) {
            mRunTimer.cancel();
            mRunTimer = null;
        }
        mTimeSec = 0;
        mTimeMin = 0;
        mTimeHour = 0;
        Logger.d(TAG, "时间为:" + mTimeHour + " : " + mTimeMin + " : " + mTimeSec);
    }

    public interface OnTimeChangeListener {
        void showTime(String time);
    }

    public class DownloadBinder extends Binder {
        public void setOnTimeChangeListener(OnTimeChangeListener onTimeChangeListener) {
            mOnTimeChangeListener = onTimeChangeListener;
        }
    }
}

3、在后台播放音乐

1、准备一段无声的音频,新建一个播放音乐的Service类,将播放模式改为无限循环播放。在其onDestroy方法中对自己重新启动。

public class PlayerMusicService extends Service {
    private final static String TAG = PlayerMusicService.class.getSimpleName();
    private MediaPlayer mMediaPlayer;

    @Nullable
    @Override
    public IBinder onBind(Intent intent) {
        return null;
    }

    @Override
    public void onCreate() {
        super.onCreate();
        Logger.d(TAG, TAG + "---->onCreate,启动服务");
        mMediaPlayer = MediaPlayer.create(getApplicationContext(), R.raw.silent);
        mMediaPlayer.setLooping(true);
    }

    @Override
    public int onStartCommand(Intent intent, int flags, int startId) {
        new Thread(new Runnable() {
            @Override
            public void run() {
                startPlayMusic();
            }
        }).start();
        return START_STICKY;
    }

    private void startPlayMusic() {
        if (mMediaPlayer != null) {
            Logger.d(TAG, "启动后台播放音乐");
            mMediaPlayer.start();
        }
    }

    private void stopPlayMusic() {
        if (mMediaPlayer != null) {
            Logger.d(TAG, "关闭后台播放音乐");
            mMediaPlayer.stop();
        }
    }

    @Override
    public void onDestroy() {
        super.onDestroy();
        stopPlayMusic();
        Logger.d(TAG, TAG + "---->onCreate,停止服务");
        // 重启自己
        Intent intent = new Intent(getApplicationContext(), PlayerMusicService.class);
        startService(intent);
    }
}

2、 在保活的DownloadServie服务类的onCreate方法中对PlayerMusicService进行启动

 Intent intent = new Intent(this, PlayerMusicService.class);
 startService(intent);

3、在Manifest文件中进行注册

  <service
            android:name=".service.PlayerMusicService"
            android:enabled="true"
            android:exported="true"
            android:process=":music_service" />

4、使用JobScheduler唤醒Service

1、新建一个继承自JobService的ScheduleService类,在其onStartJob回调中对DownloadService进行存活的判断来重启。

public class ScheduleService extends JobService {
    private static final String TAG = ScheduleService.class.getSimpleName();

    @Override
    public boolean onStartJob(JobParameters params) {

        boolean isServiceRunning = ServiceAliveUtils.isServiceAlice();
        if (!isServiceRunning) {
            Intent i = new Intent(this, DownloadService.class);
            startService(i);
            Logger.d(TAG, "ScheduleService启动了DownloadService");
        }
        jobFinished(params, false);
        return false;
    }

    @Override
    public boolean onStopJob(JobParameters params) {
        return false;
    }
}

2、 在DownloadService服务类中进行JobScheduler的注册和使用

 /**
     * 使用JobScheduler进行保活
     */
    private void useJobServiceForKeepAlive() {
        JobScheduler jobScheduler = (JobScheduler) getSystemService(Context.JOB_SCHEDULER_SERVICE);
        if (jobScheduler == null) {
            return;
        }
        jobScheduler.cancelAll();
        JobInfo.Builder builder =
            new JobInfo.Builder(1024, new ComponentName(getPackageName(), ScheduleService.class.getName()));
        //周期设置为了2s
        builder.setPeriodic(1000 * 2);
        builder.setPersisted(true);
        builder.setRequiredNetworkType(JobInfo.NETWORK_TYPE_ANY);
        int schedule = jobScheduler.schedule(builder.build());
        if (schedule <= 0) {
            Logger.w(TAG, "schedule error!");
        }
    }

3、在manifest文件中进行权限设置

 <service
            android:name=".service.ScheduleService"
            android:enabled="true"
            android:exported="true"
     android:permission="android.permission.BIND_JOB_SERVICE" />

关于推送类拉活

根据华为官方文档集成HUAWEI Push

  • 1、华为畅玩5X(6.0):APP全部进程被杀死时可以被拉起。
  • 2、华为nove 3e(8.0):APP全部进程被杀死时无法被拉起,能收到推送。
  • 3、华为荣耀10(8.1):同2

结论:理论情况下,华为推送应该可以拉起华为机器才对,感觉是我没花钱的原因

补充:ServiceAliveUtils 类如下
public class ServiceAliveUtils {

    public static boolean isServiceAlice() {
        boolean isServiceRunning = false;
        ActivityManager manager =
            (ActivityManager) MyApplication.getMyApplication().getSystemService(Context.ACTIVITY_SERVICE);
        if (manager == null) {
            return true;
        }
        for (ActivityManager.RunningServiceInfo service : manager.getRunningServices(Integer.MAX_VALUE)) {
            if ("demo.lgm.com.keepalivedemo.service.DownloadService".equals(service.service.getClassName())) {
                isServiceRunning = true;
            }
        }
        return isServiceRunning;
    }
}

作者:minminaya
链接:https://www.jianshu.com/p/b53...

阅读更多

做后台是选择Java 、Go ,还是 PHP?

NDK项目实战—高仿360手机助手之卸载监听

AndroidUtils:Android开发不得不收藏的Utils

(Android)面试题级答案(精选版)

Google开发者大会:你不得不知的Tensorflow小技巧

相信自己,没有做不到的,只有想不到的

在这里获得的不仅仅是技术!

查看原文

赞 16 收藏 9 评论 6

overFlow 赞了文章 · 2018-09-28

判断iOS和Android及PC端

在做移动端时,想起用navigator.userAgent来对浏览器类型进行判断,查了点资料,在这里总结下
还有一个就是移动端的缩放问题,在meta标签中进行设置,对部分浏览器进行强制性的限制

1.navigator的一些常用属性

  • navigator为window对象的一个属性,指向了一个包含浏览器相关信息的对象
navigator.appVersion 浏览器的版本号 
navigator.language 浏览器使用的语言 
navigator.userAgent 浏览器的userAgent信息
其中userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值。

2.较常见的ios端、Android端及PC端的判断

  • 简单点的
/* 判断浏览器类型 */
let userAgent = navigator.userAgent;
/* 判断手机型号 */
let app = navigator.appVersion;
/* Android 终端 */
let isAndroid = userAgent.indexOf('Android');
/* ios终端 */
let isMac = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
  • 封装性的
/* 判断各类型方法 */
const browser = {
   version: function() {
       const userAgent = navigator.userAgent;
       return {
           /* 判断是否是ios */
           ios: !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
           /* 判断是否是Android */
           android: userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1,

           /* 判断是否是移动端 */
           mobilePhone: !!userAgent.match(/AppleWebKit.*Mobile.*/),

           /* IE内核 */
           trident: userAgent.indexOf('Trident') > -1,
           /* opera内核 */
           presto: userAgent.indexOf('Presto') > -1,
           /* 苹果、谷歌内核 */
           webkit: userAgent.indexOf('AppleWebKit') > -1,
           /* 火狐内核 */
           gecko: userAgent.indexOf('Gecko') > -1 && userAgent.indexOf('KHTML') == -1,


           /* 判断是否是IPone手机或者QQHD浏览器 */
           iphone: userAgent.indexOf('iPhone') > -1,
           /* 判断是否是iPad */
           iPad: userAgent.indexOf('iPad') > -1,

           /* 判断是否是web应用程序(能够让用户完成某些特定任务的网站),没有头部和底部 */
           webApp: userAgent.indexOf('Safari'),
           /* 是否是微信 */
           weixin: userAgent.indexOf('MicroMessenger'),
           /* QQ */
           QQ: userAgent.match(/\sQQ/i) == ' qq',
      }
   }(),
   /* 判断浏览器使用的语言:navigator.language除IE浏览器外的浏览器使用的语言, 
    * navigator.browserLanguageIE浏览器使用的语言 
    */
   browserLanguage: (navigator.language || navigator.browserLanguage).toLowerCase()
};
if(browser.version.ios || browser.version.android || browser.version.mobilePhone) {
  console.log('是移动端');
}

3.meta标签设置

  • 如对浏览器进行强制全屏的设置(UC全屏),webapp模式等
<meta charset="UTF-8">
<!-- 视图窗口,移动端特属的标签 -->
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- 是否启动webapp功能,会删除默认的苹果工具栏和菜单栏 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 忽略页面中的数字识别为电话号码,email识别 -->
<meta name="format-decoration" content="telephone=no,email=no">
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
正在努力学习中,若对你的学习有帮助,留下你的印记呗(点个赞咯^_^)
查看原文

赞 88 收藏 68 评论 0

overFlow 赞了文章 · 2018-09-27

前端每日实战:145# 视频演示如何用纯 CSS 创作一个电源开关控件

图片描述

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/PdMyJd

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/c648Nu7

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

定义 dom,包含 3 个元素,分别代表 input 控件、开关和灯光:

<input type="checkbox" class="toggle">
<div class="switch"></div>
<div class="light"></div>

居中显示:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
}

定义控件的样式,把控件的设置为透明,使其不可见,但仍可与用户交互。其中字号大小是变量,因为 input 控件的字号与正文字号不同,所以需要单独设置:

body {
    font-size: var(--font-size);
}

:root {
    --font-size: 16px;
}

.toggle {
    position: absolute;
    font-size: var(--font-size); 
    width: 5em;
    height: 8em;
    margin: 0;
    filter: opacity(0);
    cursor: pointer;
    z-index: 2;
}

设置开关的轮廓:

.switch {
    position: absolute;
    width: 5em;
    height: 8em;
    border-radius: 1.2em;
    background: linear-gradient(#d2d4d6, white);
}

用阴影使开关变得立体:

.switch {
    box-shadow: 
        inset 0 -0.2em 0.4em rgba(212, 212, 212, 0.75), 
        inset 0 -0.8em 0 0.1em rgba(156, 156, 156, 0.85), 
        0 0 0 0.1em rgba(116, 116, 116, 0.8), 
        0 0.6em 0.6em rgba(41, 41, 41, 0.3), 
        0 0 0 0.4em #d4d7d8;
}

用伪元素设置 onoff 文本,目前是处于 off 状态:

.toggle ~ .switch::before,
.toggle ~ .switch::after {
    position: absolute;
    width: 100%;
    text-align: center;
    font-size: 1.4em;
    font-family: sans-serif;
    text-transform: uppercase;
}

.toggle ~ .switch::before {
    content: '|';
    bottom: 1em;
    color: rgba(0, 0, 0, 0.5);
    text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.8);
}

.toggle ~ .switch::after {
    content: 'O';
    top: 0.6em;
    color: rgba(0, 0, 0, 0.45);
    text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.4);
}

input 控件设置为 checked状态,以便设置处于 on 状态的样式:

<input type="checkbox" checked="checked" class="toggle">

设置处于 on 状态的开关样式:

.toggle:checked ~ .switch {
    background: linear-gradient(#a1a2a3, #f0f0f0);
    box-shadow: 
        inset 0 0.2em 0.4em rgba(212, 205, 199, 0.75), 
        inset 0 0.8em 0 0.1em rgba(255, 255, 255, 0.77), 
        0 0 0 0.1em rgba(116, 116, 118, 0.8), 
        0 -0.2em 0.2em rgba(41, 41, 41, 0.18), 
        0 0 0 0.4em #d4d7d8;
}

设置处于 on 状态的文本样式:

.toggle:checked ~ .switch::before {
    bottom: 0.3em;
    text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
}

.toggle:checked ~ .switch::after {
    top: 1.2em;
    text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.15);
}

接下来设置灯光效果。
先设置处于 off 状态的黑暗效果:

.toggle ~ .light {
    width: 100vw;
    height: 100vh;
    background-color: #0a0a16;
    z-index: 1;
    filter: opacity(0.7);
}

再设置处于 on 状态的明亮效果:

.toggle:checked ~ .light {
    filter: opacity(0);
}

大功告成!

查看原文

赞 23 收藏 11 评论 5

overFlow 赞了回答 · 2018-09-21

解决网站附件批量打包下载如何实现

找到解决办法:利用Nginx的第三方模块mod_zip实现

转博客:利用Nginx第三方模块,实现附件打包下载

关注 0 回答 4

overFlow 赞了文章 · 2018-08-27

急速JavaScript全栈教程

image.png

自从一年前发布了Vuejs小书的电子书,也有些日子没有碰过它们了,现在因为项目的缘故,需要使用JavaScript全栈开发。所以,我得把这个全栈环境搭建起来。

整个系列,是会采用我的一贯风格,就是不疾不徐,娓娓道来,学习完毕,你可以掌握我提到的全系列的知识,并且得到一个可以直接拷贝的代码模板,并把它用到你的项目中。

完成操练下来,得半小时到一个小时吧。腾出你的时间再来学习。

前端的复杂度

很多人是看不起JavaScript开发的。这玩意不就是玩具嘛,一些脚本和标签而已。说这话的时候,他们可能是就翘起二郎腿的,或者抱着膀子的。

然而,前端因为还在快速发展,因此很多东西在变,构造环境的选择比较多,技术种类也不少,很多事情得自己做。因此它其实并不比那么简单的。这篇文章的图,可以窥视到前端复杂的一角了。Modern Frontend Developer in 2018

我看了不少资料,很多都是讲解这张图中的一个技术,讲解全栈的肯定是有的,但是往往过于复杂。本文试图通过一组文章,把JavaScript的全栈开发做一个全景的展示,力图使用一个案例,全须全尾的贯穿整个系列,便于初学者对技术的急速理解。

大纲

所以,文章会包括这些:

  1. 使用Vuejs脚手架,快速搭建一个CRD用户界面。会使用vuex管理状态,使用vue-router管理路由。
  2. 使用Mongodb存储和提供后端CRD服务。
  3. 使用Nodejs搭建后端CRD服务。
  4. 使用Fecth|Axios访问后端CRD服务
  5. 使用bulfy的美化组件的方法
  6. 整合全栈服务

其中的CRD指的是Create、Read、Delete。针对的数据对象,就是一个Todo对象,看起来是这样的:

{id:1,subject:"Loving"}

如果是多个数据对象,看起来是这样的:

[
  {id:1,subject:"Loving"},
  {id:1,subject:"Writing"},
  {id:1,subject:"Preying"}
]

这个看起来很简单平实的JS对象,会在一组组函数、模块和对象之间流动,甚至跨越网络边界,从内存到硬盘。它会被存储在Mongodb内,也会从Mongodb提取出来,在用户界面、HTTP客户端,HTTP服务器传递。

整个App看起来就是一台机器,可以说代码在运转这个机器,但是也不妨说是数据在驱动这个它。

使用Vuejs脚手架,快速搭建Todo App界面

我们给自己命题,做一个TODO应用,它看起来是这样的:

clipboard.png

用户可以看到一个编辑框,和一个清单。

  1. 在编辑框内加入新的todo项目,按回车即可加入到列表
  2. 列表内每个项目有一个按钮,点击按钮,可以删除当前项目

环境要求

说起来搭建JS全栈开发环境,涉及到的东西真的不少。大的选择是这样的:

  1. 前端采用Vuejs
  2. 后端采用Nodejs
  3. 存储使用Mongodb。

大的选择定了,小的配套也就跟着来,前端配套的话需要一系列的技术,特别是前端,对应着Vuejs,配套管理路由、状态、组件的都有相应的技术手段。自己搭配的话,还是非常麻烦的。

幸好Vuejs还有一个前端脚手架工具vue-cli,它可以把以上的组件整合起来到一个工程内。一个最为基础的vue-cli工程脚手架的创建,现在得需要160M左右的空间占用。在我的电脑和网络情况下,需要2分半的时间才会完成。

前端 Vuejs

  1. vue-router,前端路由管理
  2. vuex,前端数据管理,专业一点的说法,就是状态管理,这些数据,可能是属性,数组,对象等等,可以跨组件访问,而不像是data函数那样提供的数据只能被本组件访问,可以想到,稍微大一点的前端工程都必须前端状态管理的。
  3. axios,前端HTTP访问,以promise的形式,封装了类似fetch,AJAX的能力
  4. buefy,前端微型框架,可以使用自定义标签使用自定义组件,并且CSS框架为Bulma
  5. Bulma,尽管使用了微框架,只是让对CSS framework的了解降到最低,但是不是说就不需要了解了。还是得学习的。Bulma相对于老牌的Bootstrap,是不需要依赖于JS框架,也没有任何JS代码,因此可以和任何一框架很好的结合,比如这里的Vuejs。这就是我选择它的原因

后端 cli-service

为了给前端开发提供工具链和开发便利性,我们常常需要webpack&babel。有了它们,就可以使用ES6的语法,以及代码更新后自动刷新等。这些都是非常便利的特性,用了就离不开的。有了vue-cli,对webpack&babel的了解可以降到最低,但是也不能不学,稍微需要一些定制的配置,也是必须要掌握的,起码得知道如何启动一个开发服务器,已经发布build,还有把前端服务经过proxyChain跳转到后端服务去等等。所幸是在这个教程内,你不需要学习太多就可以把案例跑起来。

App Server + Mongodb

接下来看后端,一般习惯就是使用Nodejs+Express.js的搭配。这个没有多少说的,都是老东西了。为了访问Mongodb,也需要一套框架,基于Callback的,或者基于Promise+Await+Async的,也是需要选择的。

为了便于理解,我会用一个最小的案例完成整个开发过程,就是案例在现实中并不存在,但是也是有用的,就是你可以当它们是模板,直接拷贝代码,然后填充你的内容。天下代码一大抄嘛,没有什么不对的,毕竟这些写代码是最快的。这个案例的数据模型就是对一个{id,name}的对象进行CRD(创建删除列表)。

安装运行环境

安装环境相对简单,特别是如果使用Mac OS X的话。有一些工具链可以帮助快速搭建环境。当然Windows也并不多麻烦就是了,它常常提供的是一个安装程序,大部分时间,你需要的就是点击下一步。

这里以MAC为例,讲解安装。

mongodb

安装和运行Mongodb Daemon:

brew install mongodb
mongodb

访问验证,首先执行Mongodb Shell:

mongo

输入命令,查询数据库清单:

> show dbs
local           0.000GB

能够看到这些信息,说明mongodb安装成功。

Node.js

安装并验证:

$brew install nodejs
$node -v
10.7.0

能够看到这些信息,说明Node.js安装成功。

开始前端编码

安装编码环境

首先安装vue-cli,方法和一般的NPM模块一样的,我们安装的版本是3.0:

npm i @vue/cli 

查看版本:

vue -V
3.0.0

看到如下信息,说明成功。然后创建App的脚手架代码:

vue create todoapp

注意,在此创建过程中,命令行会指示你做出选择,我们会选择Manual select feature,然后选择router和vuex,其他不选。然后并执行此代码:

cd todoapp
npm run serve

可以在浏览器中访问localhost:8080看到Vue的启动画面。说明创建脚手架成功。

此时,vue-cli已经帮助安装了vuex和router的模块依赖。本节一次性的安装全部剩余的全部NPM依赖,免得以后用一个安装一个,麻烦而且啰嗦。

  npm install buefy --save
npm install axios --save 

buefy是一个基于Bulma的Vuejs用户界面组件库。这次的UI的CSS方案,使用Bulma,Vuejs如果想要以定制组件的形式去使用它的话,那么需要安装Buefy模块。实际上,我研究过Bulma和Bootstrap,还写了一本免费的电子书,我觉得Bulma相对于Bootstrap的优势在于1.不依赖任何JS框架2.用户接口设计更加简明。这就是我现在选择使用Bulma的原因。

Axios是一个封装了HTTPClient的库,提供了promise接口。我们使用它访问后端的HTTP Server的数据。之前提到的数据对象,就是由Axios提取到客户端,也会是通过Axios把数据对象提交到服务器的。

前端编码

首先,我们从状态开始。我们之前提到的Vuex,是Vuejs管理状态的官方插件。所谓的状态,就是应用程序的数据对象们。也就是我们提到的Todo对象和Todo对象集合。我们在App用户界面上看到的很多数据都是来自于状态对象。状态对象在src/store.js。不仅仅是的应用状态信息,还有和对这些的操作函数。既然需要一个todo项目清单,因此应该加入如下代码:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const defaultTodo = [
      {id:1,subject:'Eating'},
      {id:2,subject:'Loving'},
      {id:3,subject:'Preying'},
    ]
function indexById(todos,id){
  for (var i = 0; i < todos.length; i++) {
    if (id == todos[i].id)
      return i
  }
  return -1
}
import axios from 'axios'
export default new Vuex.Store({
  state: {
    msg:'Todo App',
    todos:defaultTodo
  },
  mutations: {
    add(state,subject){
      var todo = {id:subject,subject:subject}
      state.todos.push(todo)
    },
    remove(state,id){
      state.todos.splice(indexById(state.todos,id),1)
    },
    reload(state){
      state.todos = defaultTodo
    }
  },
  actions: {
  add: (context, link) => {
      context.commit("add", link)
    },
    remove: (context, link) => {
      context.commit("remove", link)
    },
    reload: (context) => {
      context.commit("reload")
    }
  }
})

其中的state.todos属性,就是我们的主要的数据对象了。state.msg这是提供了一个App的标题字符串。mutations属性内是对数据修改提供的方法,比如

  1. 我们需要添加一个todo,使用add()方法,相应的
  2. 删除一个todo,使用remove()方法
  3. 刷新一个todo列表,就会使用load()方法

有时候,对数据的修改可能是比较消耗时间的,因此为了避免阻塞客户端的主线程,这个对象也提供了异步的方法,actions对象内就是对应修改操作的异步方法,这里的方法功能上和mutations一致,但是是异步的。Vuex提供了类似:

context.commit()

的语法,提供和actions和mutations方法的对接。第一个参数是mutations的方法名称,之后的参数最为mutations方法的参数传递给mutations方法。

特别说下,mutations内的add()方法,其中用户界面会提供一个Todo.subject属性,而ID是需要自动生成的,我们这里临时使用subject的值作为id,就是一个偷懒,只要subject不要输入重复,也暂时可以蒙混过关。因为知道本项目内的后台存储会采用Mongodb,在Mongodb内插入一个新的对象后,会自动生成一个ID,我们的Todo对象的id会采用这个ID。这里就没有必要自己生成了。

在src/views/home.vue内,粘贴为如下代码:

<template>
  <div class="home">
    <h1>{{msg}}</h1>
    <NewTodo></NewTodo>
    <TodoList></TodoList>
  </div>
</template>
<script>
import NewTodo from '@/components/NewTodo.vue'
import TodoList from '@/components/TodoList.vue'
import {mapState,mapActions} from 'vuex'
export default {
  name: 'home',
  computed:mapState(['todos','msg']),
  components: {
    TodoList,NewTodo
  },
  data(){
      return{newtodo:''}
  },
  methods:{
      ...mapActions([
      'remove',
      'add'
    ]),
      add1:function(){
          this.add(this.newtodo)
          this.newtodo = ''
      }
  }
}
</script>

...mapState,mapActions的解说。

就是说,我们这个Todo App划分为为两个组件,其中一个组件负责显示编辑框,并接受回车事件,把新的Todo项目加入到应用状态内。另外一个组件负责显示全部Todo项目,并接受删除事件,删除指定的Todo项目。它们分别是NewTodo组件和TodoList组件:

<NewTodo></NewTodo>
<TodoList></TodoList>

这两个组件的代码实现,分别在文件src/components/NewTodo.vuesrc/components/TodoList.vue内。NewTodo代码:

<template>
  <div class="home">
    <form @submit.prevent="add1">
        <input type="text" name="newTodo" placeholder="new todo" v-model="newtodo">
    </form>
  </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
  name: 'newtodo',
  computed:mapState(['todos','msg']),
  data(){
      return{newtodo:''}
  },
  methods:{
      ...mapActions([
      'add'
    ]),
      add1:function(){
          this.add(this.newtodo)
          this.newtodo = ''
      }
  }
}
</script>

TodoList代码:

<template>
  <div class="hello">
    <ul>
      <li v-for="(todo,index) in todos" v-bind:key="todo.id">
        {{todo.subject}}<button @click="remove(todo.id)" class="rm">remove</button>
      </li>
    </ul>
  </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
  name: 'todolist',
  computed:mapState(['todos','msg']),
  components: {
  },
  methods:{
    ...mapActions([
      'remove','reload'
    ])
  },
  mounted(){
    this.reload()
  }
}
</script>
<style scoped>
</style>

在src/main.js文件内,添加如下代码,引入Buefy:

import Buefy from 'buefy'
import 'buefy/lib/buefy.css'
Vue.use(Buefy)

现在可以使用Buefy组件了。我们可以把NewTodo组件内的标准的input变成组件化的input,把标签换成b-input即可。代码如下:

<b-input type="text" name="newTodo" placeholder="new todo" v-model="newtodo"></b-input>

现在看浏览器,input变成了比较有吸引力的Bulma风格的控件了。
访问网络使用axios。需要首先找到src/home.vue在代码的开头部分引用此库:

import axios from 'axios'

在Vue单页组件内使用此库了。比如在src/home.vue内代码对象中加入新方法:

mounted(){
  var url  = 'https://api.coindesk.com/v1/bpi/currentprice.json'
  axios ({
        url:url,
        method: 'get',
    })
    .then( res => {console.log(res.data.chartName)} )
    .catch( err => cosole.error(err))
}

我们来看看适应效果。启动cli-service:

npm run serve

然后打开浏览器,输入地址localhost:8080,如果可以在浏览器内看到我们期望的用户界面,并且都可以看到console打印了Bitcoin,那么就说明用户界面代码和初步的访问HTTP网络的axios代码以及状态管理功能都是成功了的。

后端编码

现在,我们已经可以看到UI了,但是用户界面内的数据来自于客户端,而不是来自于服务器。我们的数据当然应该来源于服务器的了。因此我们需要启动给一个自己的服务器,这个服务器可以接受客户在界面上录入的新的Todo对象,也可以提供后端数据库内的Todo清单。

为了测试的目的,常常需要准备一个todo应用的后台JSON服务,可以通过HTTP方式,提供todo项目的增加删除修改和查询。

这样的服务器,使用了nodejs作为服务器端,并且使用了两个node模块,可以使用npm安装它们:

npm install express body-parser

body-parser是一个中间件,可以解析请求内容并把解析结果放到req.body属性内。最常见的做法就是解析json内容。

代码如下(文件名为:jsonserver.js):

  var express = require('express');
  var app = express();
  var path = require('path')
  var bodyParser = require('body-parser')
  app.use(bodyParser.json())
  var todos = []
  var public = path.join(__dirname, '/')
  app.use('/',express.static(public))
  const defaultTodo = [
    {id:1,subject:'Eating'},
    {id:2,subject:'Loving'},
    {id:3,subject:'Preying'},
  ]
  function rs(){
    todos = defaultTodo
  }
  function indexById(id){
    for (var i = 0; i < todos.length; i++) {
      if (id ==todos[i].id)return i
    }
    return -1
  }
  rs()
  app.delete('/api/todo/:id', function (req, res) {
    var userkey = +req.params.id
    todos.splice(indexById(userkey),1)
    res.end( JSON.stringify(todos));
    rs()
  })
  app.get('/api/todos', function (req, res) {
    res.end( JSON.stringify(todos));
  })
  app.post('/api/todo', function (req, res) {
    todos.push(req.body)
    res.end(JSON.stringify(todos))
    rs()
  })
  var server = app.listen(8081, function () {
    var host = server.address().address
    var port = server.address().port
    console.log("listening at http://%s:%s", host, port)
  })

可以使用命令执行:

node jsonserver.js

Curl命令验证

可以通过curl命令验证服务的有效性:

  1. GET操作

     $curl http://localhost:8081/todo/1
     $curl http://localhost:8081/todos
    
  2. DELETE操作

      $ curl -X "DELETE" http://localhost:8081/api/todo/1
    
  3. POST操作

    $curl -X POST  -H "Content-Type: application/json" -d '{"subject":"s4"}' http://localhost:8081/api/todo
    

前端HTML验证

创建一个index.html文件,并放置到和jsonserver.js代码同一目录,代码如下:

<a href='/todos'>todos</a>
<a href='/todo/1'>todo/1</a>
<button onclick='remove()'>remove 1</button>
<button onclick='create()'>create</button>
<script>
  function remove(){
    fetch (
      '/api/todo/1',
      {
        method: 'DELETE',
      }
    )
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
  function create(){
    fetch (
      '/api/todo',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({id: "4", subject: "s4"})
      }
    )
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
</script>

可以提供创建,删除,列表的测试,其中部分结果在console内显示。

说起来,JS访问HTTP的库真的是不少,这里 提到的库都有9种。其中的fetch api使用起来非常的简洁趁手,可是它不支持IE。如果你需要支持IE的话,使用Axios更好。这就是为什么Vuejs官方推荐Axios的原因吧:

The Fetch API is a powerful native API for these types of requests. You may have heard that one of the benefits of the Fetch API is that you don’t need to load an external resource in order to use it, which is true! Except… that it’s not fully supported yet, so you will still need to use a polyfill. There are also some gotchas when working with this API, which is why many prefer to use axios for now. This may very well change in the future though.

axios访问方法

相比fetch,使用axios必须依赖于外部文件。为了方便,我们直接使用unpkg网站提供的库文件。

axios的语法和fetch的大同小异,看着也是比较简洁美观的。以下代码,把create和remove函数的内部实现换掉,其他不变。

<script data-original="https://unpkg.com/axios/dist/axios.min.js"></script>
<a href='/todos'>todos</a>
<a href='/todo/1'>todo/1</a>
<button onclick='remove()'>remove 1</button>
<button onclick='create()'>create</button>
<script>
  function remove(){
    axios ({
        url:'/api/todo/1',
        method: 'DELETE',
    })
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
  function create(){
    axios ({
        method: 'POST',
        url:'/api/todo',
        headers: {
          'Content-Type': 'application/json'
        },
        data: JSON.stringify({subject: "s4"})
    })
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
</script>

现在,后端也是可以跑起来了的。

整合:前端后端

建立cli-service到App Server的通道

每次执行命令:npm run serve,都会启动vue定制脚手架的服务器代码,它会提供不少方便开发的特性。但是我希望一部分URL可以转发到我自己的服务器内。比如把所有的/api打头的URL全部转过来。只要在工程根目录内加入此文件vue.config.js,录入如下内容:

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8181",
        secure: false
      }
    }
  }
};

我们自己的测试服务器在这里:

var http = require('http');
http.createServer(function (req, res) {
  res.write('Hello World!'); 
  res.end(); 
}).listen(8181); 

我们的定制服务器,就可以监听8181的本地机器端口,等待客户端的匹配的URL转发过来,并转发我们服务器的响应代码到客户端。

但是正常开发过程中,是需要自己的服务器端代码的,如何在利用Vue脚手架服务器的方便性的基础上,加入自己的代码呢。做法是另外做一个定制的服务器,然后让vue定制脚手架的服务器转发URL到此服务器。

为了测试的目的,我们把函数mounted修改为:

mounted(){
  var url  = '/api/1'
  axios ({
        url:url,
        method: 'get',
    })
    .then( res => {console.log(res.data)} )
    .catch( err => console.error(err))
}

即可看到浏览器console内打印Hello World!

整合前端到后端

我们已经通过配置,要求cli-service转移全部api打头的URL到App Server。只要在工程根目录内加入此文件vue.config.js,录入如下内容:

module.exports = {
  devServer: {
    proxy: {
      "/api/*": {
        target: "http://localhost:8181/api",
        secure: false
      }
    }
  }
};

现在,我们可以修改前端的Axios使用代码,分别替代前端代码的数据装入、数据删除、数据添加的代码,让这些代码可以支持网络操作。为了避免网络操作代码和业务逻辑代码混合在一起,我决定包装三个网络操作函数,并把它们放置到src/store.js文件内:


import axios from 'axios'
function httpadd(subject,cb){
  axios ({
        method: 'POST',
        url:'/api/todo',
        headers:[{'Content-Type':'application/json'}],
        data: {subject:subject}
      })
      .then( res => cb(res.data))
      .catch( err => console.error(err))
}
function httpremove(id,cb){
  axios ({
        url:'/api/todo/'+id,
        method: 'delete',
      })
      .then( res => {
          cb()
      })
      .catch( err => console.error(err))
}
function httpreload(cb){
  axios ({
        url:'/api/todos',
        method: 'get',
      })
      .then( res => {
          cb(res.data)
      })
      .catch( err => console.error(err))
}

分别完成添加、删除、查找的任务,当完成工作后,都会调用一个callback函数,在此函数内,可以消费访问网络后得到的响应数据。

然后把文件内src/store.js的mutations对象改成如下代码:

 mutations: {
  add(state,subject){
    httpadd(subject,function(todo){
      state.todos.push(todo)
    })
  },
  remove(state,id){
    httpremove(id,function(){
      state.todos.splice(indexById(state.todos,id),1)  
    })
  },
  reload(state){
    httpreload(function(todos){
      // console.log(todos)
      state.todos = todos
    })
    // state.todos = defaultTodo
  }
},

最后,在TodoList内加入一个新函数,并通过mapActions引入src/store.js的load()函数到当前对象内:

  methods:{
    ...mapActions([
      'remove','load'
    ])
  },
  mounted(){
    this.load()
  }

以便在启动后调用this.load()装入它。

整合:后端和数据库

要完成后端到数据库的整合,需要做如下的修改:

  1. 原本在后端App Server内Todo数据数组,现在应该从Mongodb获得
  2. 原本在添加Todo对象的时候只是添加到AppServer对象内,现在需要同时写入Mongodb
  3. 原本在删除时只是从数组删除,现在需要同时在Mongodb内删除

因此,现在我们需要添加三个函数,分别做针对Mongodb的获取清单、添加和删除的工作:

var mongo = require('mongodb')
function insertDoc(subject,callback){
  const connectionString = 'mongodb://localhost:27017';
  (async () => {
      const client = await MongoClient.connect(connectionString,
          { useNewUrlParser: true });
      const dbo = client.db('todos');
      try {
         var res = await dbo.collection('todo').insertOne(
          {subject:subject})
         callback(undefined,res.insertedId)
      }
      catch(err){
        callback(err)
      }
      finally {
          client.close();
      }
  })().catch(err => console.error(err));
}
function deleteDoc(_id,callback){
  const MongoClient = mongo.MongoClient;
  const connectionString = 'mongodb://localhost:27017';
  (async () => {
      const client = await MongoClient.connect(connectionString,
          { useNewUrlParser: true });
      const dbo = client.db('todos');
      try {
              var myquery = {_id:new mongo.ObjectID(_id)}
              var r = await dbo.collection("todo").deleteMany(myquery)
        }
        catch(err){
        callback(err)
      }
      finally {
            client.close();
            callback()
        }
  })().catch(err => console.error(err));
}
function allDoc(callback){
  const MongoClient = mongo.MongoClient;
  const connectionString = 'mongodb://localhost:27017';
  (async () => {
      const client = await MongoClient.connect(connectionString,
          { useNewUrlParser: true });
      const dbo = client.db('todos');
      try {
             var r = await dbo.collection("todo").find().toArray()
             var ts = []
             for (var i = 0; i < r.length; i++) {
               ts.push({id:r[i]._id,subject:r[i].subject})
             }
             callback(undefined,ts)
        }
        catch(err){
        callback(err)
      }
      finally {
            client.close();
        }
  })().catch(err => console.error(err));
}

这三个函数的功能和使用方法如下:

  1. 函数allDoc会从Mongodb内获取全部todo集合,并通过callback传递这个集合给调用者函数。
  2. 函数deleteDoc会从Mongodb内删除指定id的todo条目,完成删除后,通过callback通知调用者。
  3. 函数deleteDoc会向Mongodb内添加一个todo条目,完成添加后,通过callback通知调用者,并传递新的todo对象给调用者。

这里的代码本身并不复杂,但是因为涉及到如何访问Mongodb,因此涉及到比较多的概念,这里不做具体的解释,你可以先把它们用起来。如果完成了本教程后,希望对Mongodb的访问做具体了解的话,可以查看后文附录的“Mongodb快速参考”。

并且和App Server对应的代码接驳,把原来的路由代码替换如下:

app.delete('/api/todo/:id', function (req, res) {
  var userkey = req.params.id
  deleteDoc(userkey,function(){
    todos.splice(indexById(userkey),1)
    res.end( JSON.stringify(todos));
  })
})
app.get('/api/todos', function (req, res) {
  allDoc(function(err,todos){
    res.end( JSON.stringify(todos));  
  })
})
app.post('/api/todo', function (req, res) {
  insertDoc(req.body.subject,function(err,_id){
    var obj ={id:_id,subject:req.body.subject}
  todos.push(obj)
  res.end(JSON.stringify(obj))
    rs()
  })
})

 

Mongodb快速参考

本文会把一个对象todo对象(有属性{id,name})存储到Mongodb,做查询删除的测试(Create Remove Delete = CRD)。这个测试包括使用Mongodb Shell,使用CallBack古典风格的访问代码,以及使用Await/Async的现代风格的代码。完成这个这个验证后,就可以掌握最初步的Mongodb了。

我使用的Nodejs是10.7 。操作系统环境为Mac OS X High Sierra。

准备环境

安装和运行Mongodb Daemon

brew install mongodb
mongodb

访问验证

首先执行Mongodb Shell:

mongo

输入命令,查询数据库清单:

> show dbs
local           0.000GB

创建一个数据库

use todos

(若database不存在,则会创建一个,此时若不做任何操作直接退出,则MongoDB会删除该数据库)

db.todos.insert({id:1,name:"reco"})
db.todos.insert({id:2,name:"rita"})

查询 :

db.todos.find()

{ "_id" : ObjectId("5b727c0846b6c71a98d3af52"), "id" : 1, "name" : "reco" }
{ "_id" : ObjectId("5b727c7046b6c71a98d3af53"), "id" : 2, "name" : "reta" }

删除记录:

db.todo.remove({id:1})

删除数据库

db.todo.drop()

使用nodejs方式访问Mongodb

使用nodejs执行类似Shell对对象的CRD,代码如下:

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/todos";
MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  console.log("Database created!");
  var dbo = db.db("todos");
  // var myobj = { id: 1, name: "reco" };
  // dbo.collection("todo").insertOne(myobj, function(err, res) {
  //   if (err) throw err;
  //   console.log("1 document inserted");
  //   db.close();
  // });
   var myobj = [
    { id: 1, name: 'reco'},
    { id: 2, name: 'rita'},
  ];
  dbo.collection("todo").insertMany(myobj, function(err, res) {
    if (err) throw err;
    console.log("Number of documents inserted: " + res.insertedCount);
    dbo.collection("todo").find({}).toArray(function(err, result) {
      if (err) throw err;
      console.log(result);
        var myquery = { id: 1 };
      dbo.collection("todo").deleteMany(myquery, function(err, obj) {
        if (err) throw err;
        console.log("document deleted");
        db.close();
      });
    });    
  });
})

代码非常简单,无需更多解释。此代码使用了mongodb模块,需要首先安装:


npm init -y
npm i mongodb --save

然后使用node index.js运行即可看到效果:

Database created!
Number of documents inserted: 2
[ { _id: 5b72ab9e3245f169ef5f43d2, id: 1, name: 'reco' },
  { _id: 5b72ab9e3245f169ef5f43d3, id: 2, name: 'rita' } ]
document deleted

利用高级异步特性

使用Await/Async特性,可以有效的减少代码中的回调地狱现象。同样的功能,可以使用这样的代码:

const MongoClient = require('mongodb').MongoClient;
const connectionString = 'mongodb://localhost:27017';
(async () => {
    const client = await MongoClient.connect(connectionString,
        { useNewUrlParser: true });
    const dbo = client.db('todos');
    try {
       var res = await dbo.collection('todo').insertMany(
        [{id:1,name:"reco"}, {id:2,name:"rita"}]);
       console.log("Number of documents inserted: " + res.insertedCount);
       var r = await dbo.collection("todo").find().toArray()
       console.log(r);
       var myquery = { id: 1 };
     var r = await dbo.collection("todo").deleteMany(myquery)
     console.log("document deleted");
    }
    finally {
        client.close();
    }
})().catch(err => console.error(err));

执行此代码,输出如下:

Number of documents inserted: 2
[ { _id: 5b72ae8a1c674a6ac1c5aa6e, id: 1, name: 'reco' },
  { _id: 5b72ae8a1c674a6ac1c5aa6f, id: 2, name: 'rita' } ]
document deleted

Vuejs快速参考

Vuejs本身要学的还真不少,这也是我会编写一本书来介绍它的原因。但是说到入门的话,我倒是写过一篇简单的介绍文章。不妨去阅读看看。

上面的文章,也就对Vuejs了解个大概,提起一个兴趣。如果真的想要学习Vuejs的话,还是得看书的。这里也放一个我的书的广告,欢迎参阅。

clipboard.png

购买

问题索引

麻雀虽小五脏俱全,虽然是一个小小的示例的应用,但是每样技术也都需要用到,遇到的技术问题也是要一个个的解决的。这里列出我遇到的问题,作为索引,也算记录我在写作过程中解决的问题,也可以作为你学习完毕后的一个查漏补缺的索引,在这里重新看到问题,然后使用代码验证自己对问题的理解和学习。

  1. 使用Nodejs如何搭建一个RESTFUL的服务?
  • 如何把cli-service中来自客户端但是需要去应用服务器的URL访问转移到应用服务器?
  • 如何解析前端提交的Json?
  • 如何打包Json到响应内?
  • 如何创建一个唯一的ID?本来是用于创建一个唯一ID,这样就不必使用MongoDB生成的ObjectID了,因此插入效率会更高。但是,最后还是按惯例采用了Mongo的了。
  1. 如何加入新的单页组件?
  • 在哪里插入获取服务端数据的代码?
  1. 如何使用Buefy?
  • 在Vuejs应用中内使用Buefy?
  • 在Vuejs单页组件内使用Buefy?
  • 如何关闭input的自动完成特性?这个自动完成每次当你输入的时候,都会显示一个曾经的输入的列表,真的很烦。
  1. 如何在组件之间共享状态?
  • 为何需要共享前端状态?
  • 如何区别使用同步和异步状态操作?
  • 如何映射状态操作到组件内,以方便组件对方法的调用?
  1. 如何访问Mongo?
  • 如何安装Mongo,并快速验证Mongo?
  • 如何命令行插入、删除、列表一个Collection?
  • 有哪些访问Mongo的Nodejs库,差别在哪里?
  • 如何使用Await风格的代码做插入删除和列表?
  • 如何获取插入项目后的项目ID?
  • 如何使用ObjectId查询对应的项目?
  1. 如何访问网络,包括curl、axios、fetch等几种方法?
  • 如何提交Get请求?
  • 如何提交Put请求?
  • 如何在Body内提交json?
  • 如何指定请求头内容类型为json?
  • 如何获取响应中的Json数据?

参考文章

这个App虽然很小,但是并非一次写成的,我之前已经完成了若干个更加细小的、特定方面的文章,也写了一些代码。当然外部参考肯定也是不少,特别是Medium和Stack Overflow网站,对我支持很多。这里列出关键的一些参考文章。

  1. 这里会使用vuex管理状态,之前有写过文章,到底Vuex是什么,阅读量和评价还不少呢。当然,我举例的案例,有些勉强,为了用而用,实际案例并不需要Vuex,使用组件内状态即可。
  2. 使用Mongodb存储和提供后端CRD服务
  3. 使用Nodejs搭建{id,name}的对象的后端CRD服务。计划参考之前我自己的2篇文章和一个SO关于如何在AJAX内创建PUT请求的问答
  1. 使用Fecth|Axios访问后端CRD服务。此文章列举了几种访问网络库的方法,给了我一个全局的视野,因此我很受益于它。[Fetch vs. Axios.js for making http requests

](https://medium.com/@thejasonf...

  1. 使用buefy的美化组件的方法。这个很小众了,因此就只能看看官方文档了。
查看原文

赞 270 收藏 205 评论 10

overFlow 赞了文章 · 2018-08-27

急速JavaScript全栈教程

image.png

自从一年前发布了Vuejs小书的电子书,也有些日子没有碰过它们了,现在因为项目的缘故,需要使用JavaScript全栈开发。所以,我得把这个全栈环境搭建起来。

整个系列,是会采用我的一贯风格,就是不疾不徐,娓娓道来,学习完毕,你可以掌握我提到的全系列的知识,并且得到一个可以直接拷贝的代码模板,并把它用到你的项目中。

完成操练下来,得半小时到一个小时吧。腾出你的时间再来学习。

前端的复杂度

很多人是看不起JavaScript开发的。这玩意不就是玩具嘛,一些脚本和标签而已。说这话的时候,他们可能是就翘起二郎腿的,或者抱着膀子的。

然而,前端因为还在快速发展,因此很多东西在变,构造环境的选择比较多,技术种类也不少,很多事情得自己做。因此它其实并不比那么简单的。这篇文章的图,可以窥视到前端复杂的一角了。Modern Frontend Developer in 2018

我看了不少资料,很多都是讲解这张图中的一个技术,讲解全栈的肯定是有的,但是往往过于复杂。本文试图通过一组文章,把JavaScript的全栈开发做一个全景的展示,力图使用一个案例,全须全尾的贯穿整个系列,便于初学者对技术的急速理解。

大纲

所以,文章会包括这些:

  1. 使用Vuejs脚手架,快速搭建一个CRD用户界面。会使用vuex管理状态,使用vue-router管理路由。
  2. 使用Mongodb存储和提供后端CRD服务。
  3. 使用Nodejs搭建后端CRD服务。
  4. 使用Fecth|Axios访问后端CRD服务
  5. 使用bulfy的美化组件的方法
  6. 整合全栈服务

其中的CRD指的是Create、Read、Delete。针对的数据对象,就是一个Todo对象,看起来是这样的:

{id:1,subject:"Loving"}

如果是多个数据对象,看起来是这样的:

[
  {id:1,subject:"Loving"},
  {id:1,subject:"Writing"},
  {id:1,subject:"Preying"}
]

这个看起来很简单平实的JS对象,会在一组组函数、模块和对象之间流动,甚至跨越网络边界,从内存到硬盘。它会被存储在Mongodb内,也会从Mongodb提取出来,在用户界面、HTTP客户端,HTTP服务器传递。

整个App看起来就是一台机器,可以说代码在运转这个机器,但是也不妨说是数据在驱动这个它。

使用Vuejs脚手架,快速搭建Todo App界面

我们给自己命题,做一个TODO应用,它看起来是这样的:

clipboard.png

用户可以看到一个编辑框,和一个清单。

  1. 在编辑框内加入新的todo项目,按回车即可加入到列表
  2. 列表内每个项目有一个按钮,点击按钮,可以删除当前项目

环境要求

说起来搭建JS全栈开发环境,涉及到的东西真的不少。大的选择是这样的:

  1. 前端采用Vuejs
  2. 后端采用Nodejs
  3. 存储使用Mongodb。

大的选择定了,小的配套也就跟着来,前端配套的话需要一系列的技术,特别是前端,对应着Vuejs,配套管理路由、状态、组件的都有相应的技术手段。自己搭配的话,还是非常麻烦的。

幸好Vuejs还有一个前端脚手架工具vue-cli,它可以把以上的组件整合起来到一个工程内。一个最为基础的vue-cli工程脚手架的创建,现在得需要160M左右的空间占用。在我的电脑和网络情况下,需要2分半的时间才会完成。

前端 Vuejs

  1. vue-router,前端路由管理
  2. vuex,前端数据管理,专业一点的说法,就是状态管理,这些数据,可能是属性,数组,对象等等,可以跨组件访问,而不像是data函数那样提供的数据只能被本组件访问,可以想到,稍微大一点的前端工程都必须前端状态管理的。
  3. axios,前端HTTP访问,以promise的形式,封装了类似fetch,AJAX的能力
  4. buefy,前端微型框架,可以使用自定义标签使用自定义组件,并且CSS框架为Bulma
  5. Bulma,尽管使用了微框架,只是让对CSS framework的了解降到最低,但是不是说就不需要了解了。还是得学习的。Bulma相对于老牌的Bootstrap,是不需要依赖于JS框架,也没有任何JS代码,因此可以和任何一框架很好的结合,比如这里的Vuejs。这就是我选择它的原因

后端 cli-service

为了给前端开发提供工具链和开发便利性,我们常常需要webpack&babel。有了它们,就可以使用ES6的语法,以及代码更新后自动刷新等。这些都是非常便利的特性,用了就离不开的。有了vue-cli,对webpack&babel的了解可以降到最低,但是也不能不学,稍微需要一些定制的配置,也是必须要掌握的,起码得知道如何启动一个开发服务器,已经发布build,还有把前端服务经过proxyChain跳转到后端服务去等等。所幸是在这个教程内,你不需要学习太多就可以把案例跑起来。

App Server + Mongodb

接下来看后端,一般习惯就是使用Nodejs+Express.js的搭配。这个没有多少说的,都是老东西了。为了访问Mongodb,也需要一套框架,基于Callback的,或者基于Promise+Await+Async的,也是需要选择的。

为了便于理解,我会用一个最小的案例完成整个开发过程,就是案例在现实中并不存在,但是也是有用的,就是你可以当它们是模板,直接拷贝代码,然后填充你的内容。天下代码一大抄嘛,没有什么不对的,毕竟这些写代码是最快的。这个案例的数据模型就是对一个{id,name}的对象进行CRD(创建删除列表)。

安装运行环境

安装环境相对简单,特别是如果使用Mac OS X的话。有一些工具链可以帮助快速搭建环境。当然Windows也并不多麻烦就是了,它常常提供的是一个安装程序,大部分时间,你需要的就是点击下一步。

这里以MAC为例,讲解安装。

mongodb

安装和运行Mongodb Daemon:

brew install mongodb
mongodb

访问验证,首先执行Mongodb Shell:

mongo

输入命令,查询数据库清单:

> show dbs
local           0.000GB

能够看到这些信息,说明mongodb安装成功。

Node.js

安装并验证:

$brew install nodejs
$node -v
10.7.0

能够看到这些信息,说明Node.js安装成功。

开始前端编码

安装编码环境

首先安装vue-cli,方法和一般的NPM模块一样的,我们安装的版本是3.0:

npm i @vue/cli 

查看版本:

vue -V
3.0.0

看到如下信息,说明成功。然后创建App的脚手架代码:

vue create todoapp

注意,在此创建过程中,命令行会指示你做出选择,我们会选择Manual select feature,然后选择router和vuex,其他不选。然后并执行此代码:

cd todoapp
npm run serve

可以在浏览器中访问localhost:8080看到Vue的启动画面。说明创建脚手架成功。

此时,vue-cli已经帮助安装了vuex和router的模块依赖。本节一次性的安装全部剩余的全部NPM依赖,免得以后用一个安装一个,麻烦而且啰嗦。

  npm install buefy --save
npm install axios --save 

buefy是一个基于Bulma的Vuejs用户界面组件库。这次的UI的CSS方案,使用Bulma,Vuejs如果想要以定制组件的形式去使用它的话,那么需要安装Buefy模块。实际上,我研究过Bulma和Bootstrap,还写了一本免费的电子书,我觉得Bulma相对于Bootstrap的优势在于1.不依赖任何JS框架2.用户接口设计更加简明。这就是我现在选择使用Bulma的原因。

Axios是一个封装了HTTPClient的库,提供了promise接口。我们使用它访问后端的HTTP Server的数据。之前提到的数据对象,就是由Axios提取到客户端,也会是通过Axios把数据对象提交到服务器的。

前端编码

首先,我们从状态开始。我们之前提到的Vuex,是Vuejs管理状态的官方插件。所谓的状态,就是应用程序的数据对象们。也就是我们提到的Todo对象和Todo对象集合。我们在App用户界面上看到的很多数据都是来自于状态对象。状态对象在src/store.js。不仅仅是的应用状态信息,还有和对这些的操作函数。既然需要一个todo项目清单,因此应该加入如下代码:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const defaultTodo = [
      {id:1,subject:'Eating'},
      {id:2,subject:'Loving'},
      {id:3,subject:'Preying'},
    ]
function indexById(todos,id){
  for (var i = 0; i < todos.length; i++) {
    if (id == todos[i].id)
      return i
  }
  return -1
}
import axios from 'axios'
export default new Vuex.Store({
  state: {
    msg:'Todo App',
    todos:defaultTodo
  },
  mutations: {
    add(state,subject){
      var todo = {id:subject,subject:subject}
      state.todos.push(todo)
    },
    remove(state,id){
      state.todos.splice(indexById(state.todos,id),1)
    },
    reload(state){
      state.todos = defaultTodo
    }
  },
  actions: {
  add: (context, link) => {
      context.commit("add", link)
    },
    remove: (context, link) => {
      context.commit("remove", link)
    },
    reload: (context) => {
      context.commit("reload")
    }
  }
})

其中的state.todos属性,就是我们的主要的数据对象了。state.msg这是提供了一个App的标题字符串。mutations属性内是对数据修改提供的方法,比如

  1. 我们需要添加一个todo,使用add()方法,相应的
  2. 删除一个todo,使用remove()方法
  3. 刷新一个todo列表,就会使用load()方法

有时候,对数据的修改可能是比较消耗时间的,因此为了避免阻塞客户端的主线程,这个对象也提供了异步的方法,actions对象内就是对应修改操作的异步方法,这里的方法功能上和mutations一致,但是是异步的。Vuex提供了类似:

context.commit()

的语法,提供和actions和mutations方法的对接。第一个参数是mutations的方法名称,之后的参数最为mutations方法的参数传递给mutations方法。

特别说下,mutations内的add()方法,其中用户界面会提供一个Todo.subject属性,而ID是需要自动生成的,我们这里临时使用subject的值作为id,就是一个偷懒,只要subject不要输入重复,也暂时可以蒙混过关。因为知道本项目内的后台存储会采用Mongodb,在Mongodb内插入一个新的对象后,会自动生成一个ID,我们的Todo对象的id会采用这个ID。这里就没有必要自己生成了。

在src/views/home.vue内,粘贴为如下代码:

<template>
  <div class="home">
    <h1>{{msg}}</h1>
    <NewTodo></NewTodo>
    <TodoList></TodoList>
  </div>
</template>
<script>
import NewTodo from '@/components/NewTodo.vue'
import TodoList from '@/components/TodoList.vue'
import {mapState,mapActions} from 'vuex'
export default {
  name: 'home',
  computed:mapState(['todos','msg']),
  components: {
    TodoList,NewTodo
  },
  data(){
      return{newtodo:''}
  },
  methods:{
      ...mapActions([
      'remove',
      'add'
    ]),
      add1:function(){
          this.add(this.newtodo)
          this.newtodo = ''
      }
  }
}
</script>

...mapState,mapActions的解说。

就是说,我们这个Todo App划分为为两个组件,其中一个组件负责显示编辑框,并接受回车事件,把新的Todo项目加入到应用状态内。另外一个组件负责显示全部Todo项目,并接受删除事件,删除指定的Todo项目。它们分别是NewTodo组件和TodoList组件:

<NewTodo></NewTodo>
<TodoList></TodoList>

这两个组件的代码实现,分别在文件src/components/NewTodo.vuesrc/components/TodoList.vue内。NewTodo代码:

<template>
  <div class="home">
    <form @submit.prevent="add1">
        <input type="text" name="newTodo" placeholder="new todo" v-model="newtodo">
    </form>
  </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
  name: 'newtodo',
  computed:mapState(['todos','msg']),
  data(){
      return{newtodo:''}
  },
  methods:{
      ...mapActions([
      'add'
    ]),
      add1:function(){
          this.add(this.newtodo)
          this.newtodo = ''
      }
  }
}
</script>

TodoList代码:

<template>
  <div class="hello">
    <ul>
      <li v-for="(todo,index) in todos" v-bind:key="todo.id">
        {{todo.subject}}<button @click="remove(todo.id)" class="rm">remove</button>
      </li>
    </ul>
  </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
  name: 'todolist',
  computed:mapState(['todos','msg']),
  components: {
  },
  methods:{
    ...mapActions([
      'remove','reload'
    ])
  },
  mounted(){
    this.reload()
  }
}
</script>
<style scoped>
</style>

在src/main.js文件内,添加如下代码,引入Buefy:

import Buefy from 'buefy'
import 'buefy/lib/buefy.css'
Vue.use(Buefy)

现在可以使用Buefy组件了。我们可以把NewTodo组件内的标准的input变成组件化的input,把标签换成b-input即可。代码如下:

<b-input type="text" name="newTodo" placeholder="new todo" v-model="newtodo"></b-input>

现在看浏览器,input变成了比较有吸引力的Bulma风格的控件了。
访问网络使用axios。需要首先找到src/home.vue在代码的开头部分引用此库:

import axios from 'axios'

在Vue单页组件内使用此库了。比如在src/home.vue内代码对象中加入新方法:

mounted(){
  var url  = 'https://api.coindesk.com/v1/bpi/currentprice.json'
  axios ({
        url:url,
        method: 'get',
    })
    .then( res => {console.log(res.data.chartName)} )
    .catch( err => cosole.error(err))
}

我们来看看适应效果。启动cli-service:

npm run serve

然后打开浏览器,输入地址localhost:8080,如果可以在浏览器内看到我们期望的用户界面,并且都可以看到console打印了Bitcoin,那么就说明用户界面代码和初步的访问HTTP网络的axios代码以及状态管理功能都是成功了的。

后端编码

现在,我们已经可以看到UI了,但是用户界面内的数据来自于客户端,而不是来自于服务器。我们的数据当然应该来源于服务器的了。因此我们需要启动给一个自己的服务器,这个服务器可以接受客户在界面上录入的新的Todo对象,也可以提供后端数据库内的Todo清单。

为了测试的目的,常常需要准备一个todo应用的后台JSON服务,可以通过HTTP方式,提供todo项目的增加删除修改和查询。

这样的服务器,使用了nodejs作为服务器端,并且使用了两个node模块,可以使用npm安装它们:

npm install express body-parser

body-parser是一个中间件,可以解析请求内容并把解析结果放到req.body属性内。最常见的做法就是解析json内容。

代码如下(文件名为:jsonserver.js):

  var express = require('express');
  var app = express();
  var path = require('path')
  var bodyParser = require('body-parser')
  app.use(bodyParser.json())
  var todos = []
  var public = path.join(__dirname, '/')
  app.use('/',express.static(public))
  const defaultTodo = [
    {id:1,subject:'Eating'},
    {id:2,subject:'Loving'},
    {id:3,subject:'Preying'},
  ]
  function rs(){
    todos = defaultTodo
  }
  function indexById(id){
    for (var i = 0; i < todos.length; i++) {
      if (id ==todos[i].id)return i
    }
    return -1
  }
  rs()
  app.delete('/api/todo/:id', function (req, res) {
    var userkey = +req.params.id
    todos.splice(indexById(userkey),1)
    res.end( JSON.stringify(todos));
    rs()
  })
  app.get('/api/todos', function (req, res) {
    res.end( JSON.stringify(todos));
  })
  app.post('/api/todo', function (req, res) {
    todos.push(req.body)
    res.end(JSON.stringify(todos))
    rs()
  })
  var server = app.listen(8081, function () {
    var host = server.address().address
    var port = server.address().port
    console.log("listening at http://%s:%s", host, port)
  })

可以使用命令执行:

node jsonserver.js

Curl命令验证

可以通过curl命令验证服务的有效性:

  1. GET操作

     $curl http://localhost:8081/todo/1
     $curl http://localhost:8081/todos
    
  2. DELETE操作

      $ curl -X "DELETE" http://localhost:8081/api/todo/1
    
  3. POST操作

    $curl -X POST  -H "Content-Type: application/json" -d '{"subject":"s4"}' http://localhost:8081/api/todo
    

前端HTML验证

创建一个index.html文件,并放置到和jsonserver.js代码同一目录,代码如下:

<a href='/todos'>todos</a>
<a href='/todo/1'>todo/1</a>
<button onclick='remove()'>remove 1</button>
<button onclick='create()'>create</button>
<script>
  function remove(){
    fetch (
      '/api/todo/1',
      {
        method: 'DELETE',
      }
    )
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
  function create(){
    fetch (
      '/api/todo',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({id: "4", subject: "s4"})
      }
    )
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
</script>

可以提供创建,删除,列表的测试,其中部分结果在console内显示。

说起来,JS访问HTTP的库真的是不少,这里 提到的库都有9种。其中的fetch api使用起来非常的简洁趁手,可是它不支持IE。如果你需要支持IE的话,使用Axios更好。这就是为什么Vuejs官方推荐Axios的原因吧:

The Fetch API is a powerful native API for these types of requests. You may have heard that one of the benefits of the Fetch API is that you don’t need to load an external resource in order to use it, which is true! Except… that it’s not fully supported yet, so you will still need to use a polyfill. There are also some gotchas when working with this API, which is why many prefer to use axios for now. This may very well change in the future though.

axios访问方法

相比fetch,使用axios必须依赖于外部文件。为了方便,我们直接使用unpkg网站提供的库文件。

axios的语法和fetch的大同小异,看着也是比较简洁美观的。以下代码,把create和remove函数的内部实现换掉,其他不变。

<script data-original="https://unpkg.com/axios/dist/axios.min.js"></script>
<a href='/todos'>todos</a>
<a href='/todo/1'>todo/1</a>
<button onclick='remove()'>remove 1</button>
<button onclick='create()'>create</button>
<script>
  function remove(){
    axios ({
        url:'/api/todo/1',
        method: 'DELETE',
    })
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
  function create(){
    axios ({
        method: 'POST',
        url:'/api/todo',
        headers: {
          'Content-Type': 'application/json'
        },
        data: JSON.stringify({subject: "s4"})
    })
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
</script>

现在,后端也是可以跑起来了的。

整合:前端后端

建立cli-service到App Server的通道

每次执行命令:npm run serve,都会启动vue定制脚手架的服务器代码,它会提供不少方便开发的特性。但是我希望一部分URL可以转发到我自己的服务器内。比如把所有的/api打头的URL全部转过来。只要在工程根目录内加入此文件vue.config.js,录入如下内容:

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8181",
        secure: false
      }
    }
  }
};

我们自己的测试服务器在这里:

var http = require('http');
http.createServer(function (req, res) {
  res.write('Hello World!'); 
  res.end(); 
}).listen(8181); 

我们的定制服务器,就可以监听8181的本地机器端口,等待客户端的匹配的URL转发过来,并转发我们服务器的响应代码到客户端。

但是正常开发过程中,是需要自己的服务器端代码的,如何在利用Vue脚手架服务器的方便性的基础上,加入自己的代码呢。做法是另外做一个定制的服务器,然后让vue定制脚手架的服务器转发URL到此服务器。

为了测试的目的,我们把函数mounted修改为:

mounted(){
  var url  = '/api/1'
  axios ({
        url:url,
        method: 'get',
    })
    .then( res => {console.log(res.data)} )
    .catch( err => console.error(err))
}

即可看到浏览器console内打印Hello World!

整合前端到后端

我们已经通过配置,要求cli-service转移全部api打头的URL到App Server。只要在工程根目录内加入此文件vue.config.js,录入如下内容:

module.exports = {
  devServer: {
    proxy: {
      "/api/*": {
        target: "http://localhost:8181/api",
        secure: false
      }
    }
  }
};

现在,我们可以修改前端的Axios使用代码,分别替代前端代码的数据装入、数据删除、数据添加的代码,让这些代码可以支持网络操作。为了避免网络操作代码和业务逻辑代码混合在一起,我决定包装三个网络操作函数,并把它们放置到src/store.js文件内:


import axios from 'axios'
function httpadd(subject,cb){
  axios ({
        method: 'POST',
        url:'/api/todo',
        headers:[{'Content-Type':'application/json'}],
        data: {subject:subject}
      })
      .then( res => cb(res.data))
      .catch( err => console.error(err))
}
function httpremove(id,cb){
  axios ({
        url:'/api/todo/'+id,
        method: 'delete',
      })
      .then( res => {
          cb()
      })
      .catch( err => console.error(err))
}
function httpreload(cb){
  axios ({
        url:'/api/todos',
        method: 'get',
      })
      .then( res => {
          cb(res.data)
      })
      .catch( err => console.error(err))
}

分别完成添加、删除、查找的任务,当完成工作后,都会调用一个callback函数,在此函数内,可以消费访问网络后得到的响应数据。

然后把文件内src/store.js的mutations对象改成如下代码:

 mutations: {
  add(state,subject){
    httpadd(subject,function(todo){
      state.todos.push(todo)
    })
  },
  remove(state,id){
    httpremove(id,function(){
      state.todos.splice(indexById(state.todos,id),1)  
    })
  },
  reload(state){
    httpreload(function(todos){
      // console.log(todos)
      state.todos = todos
    })
    // state.todos = defaultTodo
  }
},

最后,在TodoList内加入一个新函数,并通过mapActions引入src/store.js的load()函数到当前对象内:

  methods:{
    ...mapActions([
      'remove','load'
    ])
  },
  mounted(){
    this.load()
  }

以便在启动后调用this.load()装入它。

整合:后端和数据库

要完成后端到数据库的整合,需要做如下的修改:

  1. 原本在后端App Server内Todo数据数组,现在应该从Mongodb获得
  2. 原本在添加Todo对象的时候只是添加到AppServer对象内,现在需要同时写入Mongodb
  3. 原本在删除时只是从数组删除,现在需要同时在Mongodb内删除

因此,现在我们需要添加三个函数,分别做针对Mongodb的获取清单、添加和删除的工作:

var mongo = require('mongodb')
function insertDoc(subject,callback){
  const connectionString = 'mongodb://localhost:27017';
  (async () => {
      const client = await MongoClient.connect(connectionString,
          { useNewUrlParser: true });
      const dbo = client.db('todos');
      try {
         var res = await dbo.collection('todo').insertOne(
          {subject:subject})
         callback(undefined,res.insertedId)
      }
      catch(err){
        callback(err)
      }
      finally {
          client.close();
      }
  })().catch(err => console.error(err));
}
function deleteDoc(_id,callback){
  const MongoClient = mongo.MongoClient;
  const connectionString = 'mongodb://localhost:27017';
  (async () => {
      const client = await MongoClient.connect(connectionString,
          { useNewUrlParser: true });
      const dbo = client.db('todos');
      try {
              var myquery = {_id:new mongo.ObjectID(_id)}
              var r = await dbo.collection("todo").deleteMany(myquery)
        }
        catch(err){
        callback(err)
      }
      finally {
            client.close();
            callback()
        }
  })().catch(err => console.error(err));
}
function allDoc(callback){
  const MongoClient = mongo.MongoClient;
  const connectionString = 'mongodb://localhost:27017';
  (async () => {
      const client = await MongoClient.connect(connectionString,
          { useNewUrlParser: true });
      const dbo = client.db('todos');
      try {
             var r = await dbo.collection("todo").find().toArray()
             var ts = []
             for (var i = 0; i < r.length; i++) {
               ts.push({id:r[i]._id,subject:r[i].subject})
             }
             callback(undefined,ts)
        }
        catch(err){
        callback(err)
      }
      finally {
            client.close();
        }
  })().catch(err => console.error(err));
}

这三个函数的功能和使用方法如下:

  1. 函数allDoc会从Mongodb内获取全部todo集合,并通过callback传递这个集合给调用者函数。
  2. 函数deleteDoc会从Mongodb内删除指定id的todo条目,完成删除后,通过callback通知调用者。
  3. 函数deleteDoc会向Mongodb内添加一个todo条目,完成添加后,通过callback通知调用者,并传递新的todo对象给调用者。

这里的代码本身并不复杂,但是因为涉及到如何访问Mongodb,因此涉及到比较多的概念,这里不做具体的解释,你可以先把它们用起来。如果完成了本教程后,希望对Mongodb的访问做具体了解的话,可以查看后文附录的“Mongodb快速参考”。

并且和App Server对应的代码接驳,把原来的路由代码替换如下:

app.delete('/api/todo/:id', function (req, res) {
  var userkey = req.params.id
  deleteDoc(userkey,function(){
    todos.splice(indexById(userkey),1)
    res.end( JSON.stringify(todos));
  })
})
app.get('/api/todos', function (req, res) {
  allDoc(function(err,todos){
    res.end( JSON.stringify(todos));  
  })
})
app.post('/api/todo', function (req, res) {
  insertDoc(req.body.subject,function(err,_id){
    var obj ={id:_id,subject:req.body.subject}
  todos.push(obj)
  res.end(JSON.stringify(obj))
    rs()
  })
})

 

Mongodb快速参考

本文会把一个对象todo对象(有属性{id,name})存储到Mongodb,做查询删除的测试(Create Remove Delete = CRD)。这个测试包括使用Mongodb Shell,使用CallBack古典风格的访问代码,以及使用Await/Async的现代风格的代码。完成这个这个验证后,就可以掌握最初步的Mongodb了。

我使用的Nodejs是10.7 。操作系统环境为Mac OS X High Sierra。

准备环境

安装和运行Mongodb Daemon

brew install mongodb
mongodb

访问验证

首先执行Mongodb Shell:

mongo

输入命令,查询数据库清单:

> show dbs
local           0.000GB

创建一个数据库

use todos

(若database不存在,则会创建一个,此时若不做任何操作直接退出,则MongoDB会删除该数据库)

db.todos.insert({id:1,name:"reco"})
db.todos.insert({id:2,name:"rita"})

查询 :

db.todos.find()

{ "_id" : ObjectId("5b727c0846b6c71a98d3af52"), "id" : 1, "name" : "reco" }
{ "_id" : ObjectId("5b727c7046b6c71a98d3af53"), "id" : 2, "name" : "reta" }

删除记录:

db.todo.remove({id:1})

删除数据库

db.todo.drop()

使用nodejs方式访问Mongodb

使用nodejs执行类似Shell对对象的CRD,代码如下:

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/todos";
MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  console.log("Database created!");
  var dbo = db.db("todos");
  // var myobj = { id: 1, name: "reco" };
  // dbo.collection("todo").insertOne(myobj, function(err, res) {
  //   if (err) throw err;
  //   console.log("1 document inserted");
  //   db.close();
  // });
   var myobj = [
    { id: 1, name: 'reco'},
    { id: 2, name: 'rita'},
  ];
  dbo.collection("todo").insertMany(myobj, function(err, res) {
    if (err) throw err;
    console.log("Number of documents inserted: " + res.insertedCount);
    dbo.collection("todo").find({}).toArray(function(err, result) {
      if (err) throw err;
      console.log(result);
        var myquery = { id: 1 };
      dbo.collection("todo").deleteMany(myquery, function(err, obj) {
        if (err) throw err;
        console.log("document deleted");
        db.close();
      });
    });    
  });
})

代码非常简单,无需更多解释。此代码使用了mongodb模块,需要首先安装:


npm init -y
npm i mongodb --save

然后使用node index.js运行即可看到效果:

Database created!
Number of documents inserted: 2
[ { _id: 5b72ab9e3245f169ef5f43d2, id: 1, name: 'reco' },
  { _id: 5b72ab9e3245f169ef5f43d3, id: 2, name: 'rita' } ]
document deleted

利用高级异步特性

使用Await/Async特性,可以有效的减少代码中的回调地狱现象。同样的功能,可以使用这样的代码:

const MongoClient = require('mongodb').MongoClient;
const connectionString = 'mongodb://localhost:27017';
(async () => {
    const client = await MongoClient.connect(connectionString,
        { useNewUrlParser: true });
    const dbo = client.db('todos');
    try {
       var res = await dbo.collection('todo').insertMany(
        [{id:1,name:"reco"}, {id:2,name:"rita"}]);
       console.log("Number of documents inserted: " + res.insertedCount);
       var r = await dbo.collection("todo").find().toArray()
       console.log(r);
       var myquery = { id: 1 };
     var r = await dbo.collection("todo").deleteMany(myquery)
     console.log("document deleted");
    }
    finally {
        client.close();
    }
})().catch(err => console.error(err));

执行此代码,输出如下:

Number of documents inserted: 2
[ { _id: 5b72ae8a1c674a6ac1c5aa6e, id: 1, name: 'reco' },
  { _id: 5b72ae8a1c674a6ac1c5aa6f, id: 2, name: 'rita' } ]
document deleted

Vuejs快速参考

Vuejs本身要学的还真不少,这也是我会编写一本书来介绍它的原因。但是说到入门的话,我倒是写过一篇简单的介绍文章。不妨去阅读看看。

上面的文章,也就对Vuejs了解个大概,提起一个兴趣。如果真的想要学习Vuejs的话,还是得看书的。这里也放一个我的书的广告,欢迎参阅。

clipboard.png

购买

问题索引

麻雀虽小五脏俱全,虽然是一个小小的示例的应用,但是每样技术也都需要用到,遇到的技术问题也是要一个个的解决的。这里列出我遇到的问题,作为索引,也算记录我在写作过程中解决的问题,也可以作为你学习完毕后的一个查漏补缺的索引,在这里重新看到问题,然后使用代码验证自己对问题的理解和学习。

  1. 使用Nodejs如何搭建一个RESTFUL的服务?
  • 如何把cli-service中来自客户端但是需要去应用服务器的URL访问转移到应用服务器?
  • 如何解析前端提交的Json?
  • 如何打包Json到响应内?
  • 如何创建一个唯一的ID?本来是用于创建一个唯一ID,这样就不必使用MongoDB生成的ObjectID了,因此插入效率会更高。但是,最后还是按惯例采用了Mongo的了。
  1. 如何加入新的单页组件?
  • 在哪里插入获取服务端数据的代码?
  1. 如何使用Buefy?
  • 在Vuejs应用中内使用Buefy?
  • 在Vuejs单页组件内使用Buefy?
  • 如何关闭input的自动完成特性?这个自动完成每次当你输入的时候,都会显示一个曾经的输入的列表,真的很烦。
  1. 如何在组件之间共享状态?
  • 为何需要共享前端状态?
  • 如何区别使用同步和异步状态操作?
  • 如何映射状态操作到组件内,以方便组件对方法的调用?
  1. 如何访问Mongo?
  • 如何安装Mongo,并快速验证Mongo?
  • 如何命令行插入、删除、列表一个Collection?
  • 有哪些访问Mongo的Nodejs库,差别在哪里?
  • 如何使用Await风格的代码做插入删除和列表?
  • 如何获取插入项目后的项目ID?
  • 如何使用ObjectId查询对应的项目?
  1. 如何访问网络,包括curl、axios、fetch等几种方法?
  • 如何提交Get请求?
  • 如何提交Put请求?
  • 如何在Body内提交json?
  • 如何指定请求头内容类型为json?
  • 如何获取响应中的Json数据?

参考文章

这个App虽然很小,但是并非一次写成的,我之前已经完成了若干个更加细小的、特定方面的文章,也写了一些代码。当然外部参考肯定也是不少,特别是Medium和Stack Overflow网站,对我支持很多。这里列出关键的一些参考文章。

  1. 这里会使用vuex管理状态,之前有写过文章,到底Vuex是什么,阅读量和评价还不少呢。当然,我举例的案例,有些勉强,为了用而用,实际案例并不需要Vuex,使用组件内状态即可。
  2. 使用Mongodb存储和提供后端CRD服务
  3. 使用Nodejs搭建{id,name}的对象的后端CRD服务。计划参考之前我自己的2篇文章和一个SO关于如何在AJAX内创建PUT请求的问答
  1. 使用Fecth|Axios访问后端CRD服务。此文章列举了几种访问网络库的方法,给了我一个全局的视野,因此我很受益于它。[Fetch vs. Axios.js for making http requests

](https://medium.com/@thejasonf...

  1. 使用buefy的美化组件的方法。这个很小众了,因此就只能看看官方文档了。
查看原文

赞 270 收藏 205 评论 10

overFlow 赞了文章 · 2018-08-27

急速JavaScript全栈教程

image.png

自从一年前发布了Vuejs小书的电子书,也有些日子没有碰过它们了,现在因为项目的缘故,需要使用JavaScript全栈开发。所以,我得把这个全栈环境搭建起来。

整个系列,是会采用我的一贯风格,就是不疾不徐,娓娓道来,学习完毕,你可以掌握我提到的全系列的知识,并且得到一个可以直接拷贝的代码模板,并把它用到你的项目中。

完成操练下来,得半小时到一个小时吧。腾出你的时间再来学习。

前端的复杂度

很多人是看不起JavaScript开发的。这玩意不就是玩具嘛,一些脚本和标签而已。说这话的时候,他们可能是就翘起二郎腿的,或者抱着膀子的。

然而,前端因为还在快速发展,因此很多东西在变,构造环境的选择比较多,技术种类也不少,很多事情得自己做。因此它其实并不比那么简单的。这篇文章的图,可以窥视到前端复杂的一角了。Modern Frontend Developer in 2018

我看了不少资料,很多都是讲解这张图中的一个技术,讲解全栈的肯定是有的,但是往往过于复杂。本文试图通过一组文章,把JavaScript的全栈开发做一个全景的展示,力图使用一个案例,全须全尾的贯穿整个系列,便于初学者对技术的急速理解。

大纲

所以,文章会包括这些:

  1. 使用Vuejs脚手架,快速搭建一个CRD用户界面。会使用vuex管理状态,使用vue-router管理路由。
  2. 使用Mongodb存储和提供后端CRD服务。
  3. 使用Nodejs搭建后端CRD服务。
  4. 使用Fecth|Axios访问后端CRD服务
  5. 使用bulfy的美化组件的方法
  6. 整合全栈服务

其中的CRD指的是Create、Read、Delete。针对的数据对象,就是一个Todo对象,看起来是这样的:

{id:1,subject:"Loving"}

如果是多个数据对象,看起来是这样的:

[
  {id:1,subject:"Loving"},
  {id:1,subject:"Writing"},
  {id:1,subject:"Preying"}
]

这个看起来很简单平实的JS对象,会在一组组函数、模块和对象之间流动,甚至跨越网络边界,从内存到硬盘。它会被存储在Mongodb内,也会从Mongodb提取出来,在用户界面、HTTP客户端,HTTP服务器传递。

整个App看起来就是一台机器,可以说代码在运转这个机器,但是也不妨说是数据在驱动这个它。

使用Vuejs脚手架,快速搭建Todo App界面

我们给自己命题,做一个TODO应用,它看起来是这样的:

clipboard.png

用户可以看到一个编辑框,和一个清单。

  1. 在编辑框内加入新的todo项目,按回车即可加入到列表
  2. 列表内每个项目有一个按钮,点击按钮,可以删除当前项目

环境要求

说起来搭建JS全栈开发环境,涉及到的东西真的不少。大的选择是这样的:

  1. 前端采用Vuejs
  2. 后端采用Nodejs
  3. 存储使用Mongodb。

大的选择定了,小的配套也就跟着来,前端配套的话需要一系列的技术,特别是前端,对应着Vuejs,配套管理路由、状态、组件的都有相应的技术手段。自己搭配的话,还是非常麻烦的。

幸好Vuejs还有一个前端脚手架工具vue-cli,它可以把以上的组件整合起来到一个工程内。一个最为基础的vue-cli工程脚手架的创建,现在得需要160M左右的空间占用。在我的电脑和网络情况下,需要2分半的时间才会完成。

前端 Vuejs

  1. vue-router,前端路由管理
  2. vuex,前端数据管理,专业一点的说法,就是状态管理,这些数据,可能是属性,数组,对象等等,可以跨组件访问,而不像是data函数那样提供的数据只能被本组件访问,可以想到,稍微大一点的前端工程都必须前端状态管理的。
  3. axios,前端HTTP访问,以promise的形式,封装了类似fetch,AJAX的能力
  4. buefy,前端微型框架,可以使用自定义标签使用自定义组件,并且CSS框架为Bulma
  5. Bulma,尽管使用了微框架,只是让对CSS framework的了解降到最低,但是不是说就不需要了解了。还是得学习的。Bulma相对于老牌的Bootstrap,是不需要依赖于JS框架,也没有任何JS代码,因此可以和任何一框架很好的结合,比如这里的Vuejs。这就是我选择它的原因

后端 cli-service

为了给前端开发提供工具链和开发便利性,我们常常需要webpack&babel。有了它们,就可以使用ES6的语法,以及代码更新后自动刷新等。这些都是非常便利的特性,用了就离不开的。有了vue-cli,对webpack&babel的了解可以降到最低,但是也不能不学,稍微需要一些定制的配置,也是必须要掌握的,起码得知道如何启动一个开发服务器,已经发布build,还有把前端服务经过proxyChain跳转到后端服务去等等。所幸是在这个教程内,你不需要学习太多就可以把案例跑起来。

App Server + Mongodb

接下来看后端,一般习惯就是使用Nodejs+Express.js的搭配。这个没有多少说的,都是老东西了。为了访问Mongodb,也需要一套框架,基于Callback的,或者基于Promise+Await+Async的,也是需要选择的。

为了便于理解,我会用一个最小的案例完成整个开发过程,就是案例在现实中并不存在,但是也是有用的,就是你可以当它们是模板,直接拷贝代码,然后填充你的内容。天下代码一大抄嘛,没有什么不对的,毕竟这些写代码是最快的。这个案例的数据模型就是对一个{id,name}的对象进行CRD(创建删除列表)。

安装运行环境

安装环境相对简单,特别是如果使用Mac OS X的话。有一些工具链可以帮助快速搭建环境。当然Windows也并不多麻烦就是了,它常常提供的是一个安装程序,大部分时间,你需要的就是点击下一步。

这里以MAC为例,讲解安装。

mongodb

安装和运行Mongodb Daemon:

brew install mongodb
mongodb

访问验证,首先执行Mongodb Shell:

mongo

输入命令,查询数据库清单:

> show dbs
local           0.000GB

能够看到这些信息,说明mongodb安装成功。

Node.js

安装并验证:

$brew install nodejs
$node -v
10.7.0

能够看到这些信息,说明Node.js安装成功。

开始前端编码

安装编码环境

首先安装vue-cli,方法和一般的NPM模块一样的,我们安装的版本是3.0:

npm i @vue/cli 

查看版本:

vue -V
3.0.0

看到如下信息,说明成功。然后创建App的脚手架代码:

vue create todoapp

注意,在此创建过程中,命令行会指示你做出选择,我们会选择Manual select feature,然后选择router和vuex,其他不选。然后并执行此代码:

cd todoapp
npm run serve

可以在浏览器中访问localhost:8080看到Vue的启动画面。说明创建脚手架成功。

此时,vue-cli已经帮助安装了vuex和router的模块依赖。本节一次性的安装全部剩余的全部NPM依赖,免得以后用一个安装一个,麻烦而且啰嗦。

  npm install buefy --save
npm install axios --save 

buefy是一个基于Bulma的Vuejs用户界面组件库。这次的UI的CSS方案,使用Bulma,Vuejs如果想要以定制组件的形式去使用它的话,那么需要安装Buefy模块。实际上,我研究过Bulma和Bootstrap,还写了一本免费的电子书,我觉得Bulma相对于Bootstrap的优势在于1.不依赖任何JS框架2.用户接口设计更加简明。这就是我现在选择使用Bulma的原因。

Axios是一个封装了HTTPClient的库,提供了promise接口。我们使用它访问后端的HTTP Server的数据。之前提到的数据对象,就是由Axios提取到客户端,也会是通过Axios把数据对象提交到服务器的。

前端编码

首先,我们从状态开始。我们之前提到的Vuex,是Vuejs管理状态的官方插件。所谓的状态,就是应用程序的数据对象们。也就是我们提到的Todo对象和Todo对象集合。我们在App用户界面上看到的很多数据都是来自于状态对象。状态对象在src/store.js。不仅仅是的应用状态信息,还有和对这些的操作函数。既然需要一个todo项目清单,因此应该加入如下代码:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const defaultTodo = [
      {id:1,subject:'Eating'},
      {id:2,subject:'Loving'},
      {id:3,subject:'Preying'},
    ]
function indexById(todos,id){
  for (var i = 0; i < todos.length; i++) {
    if (id == todos[i].id)
      return i
  }
  return -1
}
import axios from 'axios'
export default new Vuex.Store({
  state: {
    msg:'Todo App',
    todos:defaultTodo
  },
  mutations: {
    add(state,subject){
      var todo = {id:subject,subject:subject}
      state.todos.push(todo)
    },
    remove(state,id){
      state.todos.splice(indexById(state.todos,id),1)
    },
    reload(state){
      state.todos = defaultTodo
    }
  },
  actions: {
  add: (context, link) => {
      context.commit("add", link)
    },
    remove: (context, link) => {
      context.commit("remove", link)
    },
    reload: (context) => {
      context.commit("reload")
    }
  }
})

其中的state.todos属性,就是我们的主要的数据对象了。state.msg这是提供了一个App的标题字符串。mutations属性内是对数据修改提供的方法,比如

  1. 我们需要添加一个todo,使用add()方法,相应的
  2. 删除一个todo,使用remove()方法
  3. 刷新一个todo列表,就会使用load()方法

有时候,对数据的修改可能是比较消耗时间的,因此为了避免阻塞客户端的主线程,这个对象也提供了异步的方法,actions对象内就是对应修改操作的异步方法,这里的方法功能上和mutations一致,但是是异步的。Vuex提供了类似:

context.commit()

的语法,提供和actions和mutations方法的对接。第一个参数是mutations的方法名称,之后的参数最为mutations方法的参数传递给mutations方法。

特别说下,mutations内的add()方法,其中用户界面会提供一个Todo.subject属性,而ID是需要自动生成的,我们这里临时使用subject的值作为id,就是一个偷懒,只要subject不要输入重复,也暂时可以蒙混过关。因为知道本项目内的后台存储会采用Mongodb,在Mongodb内插入一个新的对象后,会自动生成一个ID,我们的Todo对象的id会采用这个ID。这里就没有必要自己生成了。

在src/views/home.vue内,粘贴为如下代码:

<template>
  <div class="home">
    <h1>{{msg}}</h1>
    <NewTodo></NewTodo>
    <TodoList></TodoList>
  </div>
</template>
<script>
import NewTodo from '@/components/NewTodo.vue'
import TodoList from '@/components/TodoList.vue'
import {mapState,mapActions} from 'vuex'
export default {
  name: 'home',
  computed:mapState(['todos','msg']),
  components: {
    TodoList,NewTodo
  },
  data(){
      return{newtodo:''}
  },
  methods:{
      ...mapActions([
      'remove',
      'add'
    ]),
      add1:function(){
          this.add(this.newtodo)
          this.newtodo = ''
      }
  }
}
</script>

...mapState,mapActions的解说。

就是说,我们这个Todo App划分为为两个组件,其中一个组件负责显示编辑框,并接受回车事件,把新的Todo项目加入到应用状态内。另外一个组件负责显示全部Todo项目,并接受删除事件,删除指定的Todo项目。它们分别是NewTodo组件和TodoList组件:

<NewTodo></NewTodo>
<TodoList></TodoList>

这两个组件的代码实现,分别在文件src/components/NewTodo.vuesrc/components/TodoList.vue内。NewTodo代码:

<template>
  <div class="home">
    <form @submit.prevent="add1">
        <input type="text" name="newTodo" placeholder="new todo" v-model="newtodo">
    </form>
  </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
  name: 'newtodo',
  computed:mapState(['todos','msg']),
  data(){
      return{newtodo:''}
  },
  methods:{
      ...mapActions([
      'add'
    ]),
      add1:function(){
          this.add(this.newtodo)
          this.newtodo = ''
      }
  }
}
</script>

TodoList代码:

<template>
  <div class="hello">
    <ul>
      <li v-for="(todo,index) in todos" v-bind:key="todo.id">
        {{todo.subject}}<button @click="remove(todo.id)" class="rm">remove</button>
      </li>
    </ul>
  </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
  name: 'todolist',
  computed:mapState(['todos','msg']),
  components: {
  },
  methods:{
    ...mapActions([
      'remove','reload'
    ])
  },
  mounted(){
    this.reload()
  }
}
</script>
<style scoped>
</style>

在src/main.js文件内,添加如下代码,引入Buefy:

import Buefy from 'buefy'
import 'buefy/lib/buefy.css'
Vue.use(Buefy)

现在可以使用Buefy组件了。我们可以把NewTodo组件内的标准的input变成组件化的input,把标签换成b-input即可。代码如下:

<b-input type="text" name="newTodo" placeholder="new todo" v-model="newtodo"></b-input>

现在看浏览器,input变成了比较有吸引力的Bulma风格的控件了。
访问网络使用axios。需要首先找到src/home.vue在代码的开头部分引用此库:

import axios from 'axios'

在Vue单页组件内使用此库了。比如在src/home.vue内代码对象中加入新方法:

mounted(){
  var url  = 'https://api.coindesk.com/v1/bpi/currentprice.json'
  axios ({
        url:url,
        method: 'get',
    })
    .then( res => {console.log(res.data.chartName)} )
    .catch( err => cosole.error(err))
}

我们来看看适应效果。启动cli-service:

npm run serve

然后打开浏览器,输入地址localhost:8080,如果可以在浏览器内看到我们期望的用户界面,并且都可以看到console打印了Bitcoin,那么就说明用户界面代码和初步的访问HTTP网络的axios代码以及状态管理功能都是成功了的。

后端编码

现在,我们已经可以看到UI了,但是用户界面内的数据来自于客户端,而不是来自于服务器。我们的数据当然应该来源于服务器的了。因此我们需要启动给一个自己的服务器,这个服务器可以接受客户在界面上录入的新的Todo对象,也可以提供后端数据库内的Todo清单。

为了测试的目的,常常需要准备一个todo应用的后台JSON服务,可以通过HTTP方式,提供todo项目的增加删除修改和查询。

这样的服务器,使用了nodejs作为服务器端,并且使用了两个node模块,可以使用npm安装它们:

npm install express body-parser

body-parser是一个中间件,可以解析请求内容并把解析结果放到req.body属性内。最常见的做法就是解析json内容。

代码如下(文件名为:jsonserver.js):

  var express = require('express');
  var app = express();
  var path = require('path')
  var bodyParser = require('body-parser')
  app.use(bodyParser.json())
  var todos = []
  var public = path.join(__dirname, '/')
  app.use('/',express.static(public))
  const defaultTodo = [
    {id:1,subject:'Eating'},
    {id:2,subject:'Loving'},
    {id:3,subject:'Preying'},
  ]
  function rs(){
    todos = defaultTodo
  }
  function indexById(id){
    for (var i = 0; i < todos.length; i++) {
      if (id ==todos[i].id)return i
    }
    return -1
  }
  rs()
  app.delete('/api/todo/:id', function (req, res) {
    var userkey = +req.params.id
    todos.splice(indexById(userkey),1)
    res.end( JSON.stringify(todos));
    rs()
  })
  app.get('/api/todos', function (req, res) {
    res.end( JSON.stringify(todos));
  })
  app.post('/api/todo', function (req, res) {
    todos.push(req.body)
    res.end(JSON.stringify(todos))
    rs()
  })
  var server = app.listen(8081, function () {
    var host = server.address().address
    var port = server.address().port
    console.log("listening at http://%s:%s", host, port)
  })

可以使用命令执行:

node jsonserver.js

Curl命令验证

可以通过curl命令验证服务的有效性:

  1. GET操作

     $curl http://localhost:8081/todo/1
     $curl http://localhost:8081/todos
    
  2. DELETE操作

      $ curl -X "DELETE" http://localhost:8081/api/todo/1
    
  3. POST操作

    $curl -X POST  -H "Content-Type: application/json" -d '{"subject":"s4"}' http://localhost:8081/api/todo
    

前端HTML验证

创建一个index.html文件,并放置到和jsonserver.js代码同一目录,代码如下:

<a href='/todos'>todos</a>
<a href='/todo/1'>todo/1</a>
<button onclick='remove()'>remove 1</button>
<button onclick='create()'>create</button>
<script>
  function remove(){
    fetch (
      '/api/todo/1',
      {
        method: 'DELETE',
      }
    )
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
  function create(){
    fetch (
      '/api/todo',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({id: "4", subject: "s4"})
      }
    )
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
</script>

可以提供创建,删除,列表的测试,其中部分结果在console内显示。

说起来,JS访问HTTP的库真的是不少,这里 提到的库都有9种。其中的fetch api使用起来非常的简洁趁手,可是它不支持IE。如果你需要支持IE的话,使用Axios更好。这就是为什么Vuejs官方推荐Axios的原因吧:

The Fetch API is a powerful native API for these types of requests. You may have heard that one of the benefits of the Fetch API is that you don’t need to load an external resource in order to use it, which is true! Except… that it’s not fully supported yet, so you will still need to use a polyfill. There are also some gotchas when working with this API, which is why many prefer to use axios for now. This may very well change in the future though.

axios访问方法

相比fetch,使用axios必须依赖于外部文件。为了方便,我们直接使用unpkg网站提供的库文件。

axios的语法和fetch的大同小异,看着也是比较简洁美观的。以下代码,把create和remove函数的内部实现换掉,其他不变。

<script data-original="https://unpkg.com/axios/dist/axios.min.js"></script>
<a href='/todos'>todos</a>
<a href='/todo/1'>todo/1</a>
<button onclick='remove()'>remove 1</button>
<button onclick='create()'>create</button>
<script>
  function remove(){
    axios ({
        url:'/api/todo/1',
        method: 'DELETE',
    })
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
  function create(){
    axios ({
        method: 'POST',
        url:'/api/todo',
        headers: {
          'Content-Type': 'application/json'
        },
        data: JSON.stringify({subject: "s4"})
    })
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
</script>

现在,后端也是可以跑起来了的。

整合:前端后端

建立cli-service到App Server的通道

每次执行命令:npm run serve,都会启动vue定制脚手架的服务器代码,它会提供不少方便开发的特性。但是我希望一部分URL可以转发到我自己的服务器内。比如把所有的/api打头的URL全部转过来。只要在工程根目录内加入此文件vue.config.js,录入如下内容:

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8181",
        secure: false
      }
    }
  }
};

我们自己的测试服务器在这里:

var http = require('http');
http.createServer(function (req, res) {
  res.write('Hello World!'); 
  res.end(); 
}).listen(8181); 

我们的定制服务器,就可以监听8181的本地机器端口,等待客户端的匹配的URL转发过来,并转发我们服务器的响应代码到客户端。

但是正常开发过程中,是需要自己的服务器端代码的,如何在利用Vue脚手架服务器的方便性的基础上,加入自己的代码呢。做法是另外做一个定制的服务器,然后让vue定制脚手架的服务器转发URL到此服务器。

为了测试的目的,我们把函数mounted修改为:

mounted(){
  var url  = '/api/1'
  axios ({
        url:url,
        method: 'get',
    })
    .then( res => {console.log(res.data)} )
    .catch( err => console.error(err))
}

即可看到浏览器console内打印Hello World!

整合前端到后端

我们已经通过配置,要求cli-service转移全部api打头的URL到App Server。只要在工程根目录内加入此文件vue.config.js,录入如下内容:

module.exports = {
  devServer: {
    proxy: {
      "/api/*": {
        target: "http://localhost:8181/api",
        secure: false
      }
    }
  }
};

现在,我们可以修改前端的Axios使用代码,分别替代前端代码的数据装入、数据删除、数据添加的代码,让这些代码可以支持网络操作。为了避免网络操作代码和业务逻辑代码混合在一起,我决定包装三个网络操作函数,并把它们放置到src/store.js文件内:


import axios from 'axios'
function httpadd(subject,cb){
  axios ({
        method: 'POST',
        url:'/api/todo',
        headers:[{'Content-Type':'application/json'}],
        data: {subject:subject}
      })
      .then( res => cb(res.data))
      .catch( err => console.error(err))
}
function httpremove(id,cb){
  axios ({
        url:'/api/todo/'+id,
        method: 'delete',
      })
      .then( res => {
          cb()
      })
      .catch( err => console.error(err))
}
function httpreload(cb){
  axios ({
        url:'/api/todos',
        method: 'get',
      })
      .then( res => {
          cb(res.data)
      })
      .catch( err => console.error(err))
}

分别完成添加、删除、查找的任务,当完成工作后,都会调用一个callback函数,在此函数内,可以消费访问网络后得到的响应数据。

然后把文件内src/store.js的mutations对象改成如下代码:

 mutations: {
  add(state,subject){
    httpadd(subject,function(todo){
      state.todos.push(todo)
    })
  },
  remove(state,id){
    httpremove(id,function(){
      state.todos.splice(indexById(state.todos,id),1)  
    })
  },
  reload(state){
    httpreload(function(todos){
      // console.log(todos)
      state.todos = todos
    })
    // state.todos = defaultTodo
  }
},

最后,在TodoList内加入一个新函数,并通过mapActions引入src/store.js的load()函数到当前对象内:

  methods:{
    ...mapActions([
      'remove','load'
    ])
  },
  mounted(){
    this.load()
  }

以便在启动后调用this.load()装入它。

整合:后端和数据库

要完成后端到数据库的整合,需要做如下的修改:

  1. 原本在后端App Server内Todo数据数组,现在应该从Mongodb获得
  2. 原本在添加Todo对象的时候只是添加到AppServer对象内,现在需要同时写入Mongodb
  3. 原本在删除时只是从数组删除,现在需要同时在Mongodb内删除

因此,现在我们需要添加三个函数,分别做针对Mongodb的获取清单、添加和删除的工作:

var mongo = require('mongodb')
function insertDoc(subject,callback){
  const connectionString = 'mongodb://localhost:27017';
  (async () => {
      const client = await MongoClient.connect(connectionString,
          { useNewUrlParser: true });
      const dbo = client.db('todos');
      try {
         var res = await dbo.collection('todo').insertOne(
          {subject:subject})
         callback(undefined,res.insertedId)
      }
      catch(err){
        callback(err)
      }
      finally {
          client.close();
      }
  })().catch(err => console.error(err));
}
function deleteDoc(_id,callback){
  const MongoClient = mongo.MongoClient;
  const connectionString = 'mongodb://localhost:27017';
  (async () => {
      const client = await MongoClient.connect(connectionString,
          { useNewUrlParser: true });
      const dbo = client.db('todos');
      try {
              var myquery = {_id:new mongo.ObjectID(_id)}
              var r = await dbo.collection("todo").deleteMany(myquery)
        }
        catch(err){
        callback(err)
      }
      finally {
            client.close();
            callback()
        }
  })().catch(err => console.error(err));
}
function allDoc(callback){
  const MongoClient = mongo.MongoClient;
  const connectionString = 'mongodb://localhost:27017';
  (async () => {
      const client = await MongoClient.connect(connectionString,
          { useNewUrlParser: true });
      const dbo = client.db('todos');
      try {
             var r = await dbo.collection("todo").find().toArray()
             var ts = []
             for (var i = 0; i < r.length; i++) {
               ts.push({id:r[i]._id,subject:r[i].subject})
             }
             callback(undefined,ts)
        }
        catch(err){
        callback(err)
      }
      finally {
            client.close();
        }
  })().catch(err => console.error(err));
}

这三个函数的功能和使用方法如下:

  1. 函数allDoc会从Mongodb内获取全部todo集合,并通过callback传递这个集合给调用者函数。
  2. 函数deleteDoc会从Mongodb内删除指定id的todo条目,完成删除后,通过callback通知调用者。
  3. 函数deleteDoc会向Mongodb内添加一个todo条目,完成添加后,通过callback通知调用者,并传递新的todo对象给调用者。

这里的代码本身并不复杂,但是因为涉及到如何访问Mongodb,因此涉及到比较多的概念,这里不做具体的解释,你可以先把它们用起来。如果完成了本教程后,希望对Mongodb的访问做具体了解的话,可以查看后文附录的“Mongodb快速参考”。

并且和App Server对应的代码接驳,把原来的路由代码替换如下:

app.delete('/api/todo/:id', function (req, res) {
  var userkey = req.params.id
  deleteDoc(userkey,function(){
    todos.splice(indexById(userkey),1)
    res.end( JSON.stringify(todos));
  })
})
app.get('/api/todos', function (req, res) {
  allDoc(function(err,todos){
    res.end( JSON.stringify(todos));  
  })
})
app.post('/api/todo', function (req, res) {
  insertDoc(req.body.subject,function(err,_id){
    var obj ={id:_id,subject:req.body.subject}
  todos.push(obj)
  res.end(JSON.stringify(obj))
    rs()
  })
})

 

Mongodb快速参考

本文会把一个对象todo对象(有属性{id,name})存储到Mongodb,做查询删除的测试(Create Remove Delete = CRD)。这个测试包括使用Mongodb Shell,使用CallBack古典风格的访问代码,以及使用Await/Async的现代风格的代码。完成这个这个验证后,就可以掌握最初步的Mongodb了。

我使用的Nodejs是10.7 。操作系统环境为Mac OS X High Sierra。

准备环境

安装和运行Mongodb Daemon

brew install mongodb
mongodb

访问验证

首先执行Mongodb Shell:

mongo

输入命令,查询数据库清单:

> show dbs
local           0.000GB

创建一个数据库

use todos

(若database不存在,则会创建一个,此时若不做任何操作直接退出,则MongoDB会删除该数据库)

db.todos.insert({id:1,name:"reco"})
db.todos.insert({id:2,name:"rita"})

查询 :

db.todos.find()

{ "_id" : ObjectId("5b727c0846b6c71a98d3af52"), "id" : 1, "name" : "reco" }
{ "_id" : ObjectId("5b727c7046b6c71a98d3af53"), "id" : 2, "name" : "reta" }

删除记录:

db.todo.remove({id:1})

删除数据库

db.todo.drop()

使用nodejs方式访问Mongodb

使用nodejs执行类似Shell对对象的CRD,代码如下:

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/todos";
MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  console.log("Database created!");
  var dbo = db.db("todos");
  // var myobj = { id: 1, name: "reco" };
  // dbo.collection("todo").insertOne(myobj, function(err, res) {
  //   if (err) throw err;
  //   console.log("1 document inserted");
  //   db.close();
  // });
   var myobj = [
    { id: 1, name: 'reco'},
    { id: 2, name: 'rita'},
  ];
  dbo.collection("todo").insertMany(myobj, function(err, res) {
    if (err) throw err;
    console.log("Number of documents inserted: " + res.insertedCount);
    dbo.collection("todo").find({}).toArray(function(err, result) {
      if (err) throw err;
      console.log(result);
        var myquery = { id: 1 };
      dbo.collection("todo").deleteMany(myquery, function(err, obj) {
        if (err) throw err;
        console.log("document deleted");
        db.close();
      });
    });    
  });
})

代码非常简单,无需更多解释。此代码使用了mongodb模块,需要首先安装:


npm init -y
npm i mongodb --save

然后使用node index.js运行即可看到效果:

Database created!
Number of documents inserted: 2
[ { _id: 5b72ab9e3245f169ef5f43d2, id: 1, name: 'reco' },
  { _id: 5b72ab9e3245f169ef5f43d3, id: 2, name: 'rita' } ]
document deleted

利用高级异步特性

使用Await/Async特性,可以有效的减少代码中的回调地狱现象。同样的功能,可以使用这样的代码:

const MongoClient = require('mongodb').MongoClient;
const connectionString = 'mongodb://localhost:27017';
(async () => {
    const client = await MongoClient.connect(connectionString,
        { useNewUrlParser: true });
    const dbo = client.db('todos');
    try {
       var res = await dbo.collection('todo').insertMany(
        [{id:1,name:"reco"}, {id:2,name:"rita"}]);
       console.log("Number of documents inserted: " + res.insertedCount);
       var r = await dbo.collection("todo").find().toArray()
       console.log(r);
       var myquery = { id: 1 };
     var r = await dbo.collection("todo").deleteMany(myquery)
     console.log("document deleted");
    }
    finally {
        client.close();
    }
})().catch(err => console.error(err));

执行此代码,输出如下:

Number of documents inserted: 2
[ { _id: 5b72ae8a1c674a6ac1c5aa6e, id: 1, name: 'reco' },
  { _id: 5b72ae8a1c674a6ac1c5aa6f, id: 2, name: 'rita' } ]
document deleted

Vuejs快速参考

Vuejs本身要学的还真不少,这也是我会编写一本书来介绍它的原因。但是说到入门的话,我倒是写过一篇简单的介绍文章。不妨去阅读看看。

上面的文章,也就对Vuejs了解个大概,提起一个兴趣。如果真的想要学习Vuejs的话,还是得看书的。这里也放一个我的书的广告,欢迎参阅。

clipboard.png

购买

问题索引

麻雀虽小五脏俱全,虽然是一个小小的示例的应用,但是每样技术也都需要用到,遇到的技术问题也是要一个个的解决的。这里列出我遇到的问题,作为索引,也算记录我在写作过程中解决的问题,也可以作为你学习完毕后的一个查漏补缺的索引,在这里重新看到问题,然后使用代码验证自己对问题的理解和学习。

  1. 使用Nodejs如何搭建一个RESTFUL的服务?
  • 如何把cli-service中来自客户端但是需要去应用服务器的URL访问转移到应用服务器?
  • 如何解析前端提交的Json?
  • 如何打包Json到响应内?
  • 如何创建一个唯一的ID?本来是用于创建一个唯一ID,这样就不必使用MongoDB生成的ObjectID了,因此插入效率会更高。但是,最后还是按惯例采用了Mongo的了。
  1. 如何加入新的单页组件?
  • 在哪里插入获取服务端数据的代码?
  1. 如何使用Buefy?
  • 在Vuejs应用中内使用Buefy?
  • 在Vuejs单页组件内使用Buefy?
  • 如何关闭input的自动完成特性?这个自动完成每次当你输入的时候,都会显示一个曾经的输入的列表,真的很烦。
  1. 如何在组件之间共享状态?
  • 为何需要共享前端状态?
  • 如何区别使用同步和异步状态操作?
  • 如何映射状态操作到组件内,以方便组件对方法的调用?
  1. 如何访问Mongo?
  • 如何安装Mongo,并快速验证Mongo?
  • 如何命令行插入、删除、列表一个Collection?
  • 有哪些访问Mongo的Nodejs库,差别在哪里?
  • 如何使用Await风格的代码做插入删除和列表?
  • 如何获取插入项目后的项目ID?
  • 如何使用ObjectId查询对应的项目?
  1. 如何访问网络,包括curl、axios、fetch等几种方法?
  • 如何提交Get请求?
  • 如何提交Put请求?
  • 如何在Body内提交json?
  • 如何指定请求头内容类型为json?
  • 如何获取响应中的Json数据?

参考文章

这个App虽然很小,但是并非一次写成的,我之前已经完成了若干个更加细小的、特定方面的文章,也写了一些代码。当然外部参考肯定也是不少,特别是Medium和Stack Overflow网站,对我支持很多。这里列出关键的一些参考文章。

  1. 这里会使用vuex管理状态,之前有写过文章,到底Vuex是什么,阅读量和评价还不少呢。当然,我举例的案例,有些勉强,为了用而用,实际案例并不需要Vuex,使用组件内状态即可。
  2. 使用Mongodb存储和提供后端CRD服务
  3. 使用Nodejs搭建{id,name}的对象的后端CRD服务。计划参考之前我自己的2篇文章和一个SO关于如何在AJAX内创建PUT请求的问答
  1. 使用Fecth|Axios访问后端CRD服务。此文章列举了几种访问网络库的方法,给了我一个全局的视野,因此我很受益于它。[Fetch vs. Axios.js for making http requests

](https://medium.com/@thejasonf...

  1. 使用buefy的美化组件的方法。这个很小众了,因此就只能看看官方文档了。
查看原文

赞 270 收藏 205 评论 10

overFlow 赞了文章 · 2018-08-27

急速JavaScript全栈教程

image.png

自从一年前发布了Vuejs小书的电子书,也有些日子没有碰过它们了,现在因为项目的缘故,需要使用JavaScript全栈开发。所以,我得把这个全栈环境搭建起来。

整个系列,是会采用我的一贯风格,就是不疾不徐,娓娓道来,学习完毕,你可以掌握我提到的全系列的知识,并且得到一个可以直接拷贝的代码模板,并把它用到你的项目中。

完成操练下来,得半小时到一个小时吧。腾出你的时间再来学习。

前端的复杂度

很多人是看不起JavaScript开发的。这玩意不就是玩具嘛,一些脚本和标签而已。说这话的时候,他们可能是就翘起二郎腿的,或者抱着膀子的。

然而,前端因为还在快速发展,因此很多东西在变,构造环境的选择比较多,技术种类也不少,很多事情得自己做。因此它其实并不比那么简单的。这篇文章的图,可以窥视到前端复杂的一角了。Modern Frontend Developer in 2018

我看了不少资料,很多都是讲解这张图中的一个技术,讲解全栈的肯定是有的,但是往往过于复杂。本文试图通过一组文章,把JavaScript的全栈开发做一个全景的展示,力图使用一个案例,全须全尾的贯穿整个系列,便于初学者对技术的急速理解。

大纲

所以,文章会包括这些:

  1. 使用Vuejs脚手架,快速搭建一个CRD用户界面。会使用vuex管理状态,使用vue-router管理路由。
  2. 使用Mongodb存储和提供后端CRD服务。
  3. 使用Nodejs搭建后端CRD服务。
  4. 使用Fecth|Axios访问后端CRD服务
  5. 使用bulfy的美化组件的方法
  6. 整合全栈服务

其中的CRD指的是Create、Read、Delete。针对的数据对象,就是一个Todo对象,看起来是这样的:

{id:1,subject:"Loving"}

如果是多个数据对象,看起来是这样的:

[
  {id:1,subject:"Loving"},
  {id:1,subject:"Writing"},
  {id:1,subject:"Preying"}
]

这个看起来很简单平实的JS对象,会在一组组函数、模块和对象之间流动,甚至跨越网络边界,从内存到硬盘。它会被存储在Mongodb内,也会从Mongodb提取出来,在用户界面、HTTP客户端,HTTP服务器传递。

整个App看起来就是一台机器,可以说代码在运转这个机器,但是也不妨说是数据在驱动这个它。

使用Vuejs脚手架,快速搭建Todo App界面

我们给自己命题,做一个TODO应用,它看起来是这样的:

clipboard.png

用户可以看到一个编辑框,和一个清单。

  1. 在编辑框内加入新的todo项目,按回车即可加入到列表
  2. 列表内每个项目有一个按钮,点击按钮,可以删除当前项目

环境要求

说起来搭建JS全栈开发环境,涉及到的东西真的不少。大的选择是这样的:

  1. 前端采用Vuejs
  2. 后端采用Nodejs
  3. 存储使用Mongodb。

大的选择定了,小的配套也就跟着来,前端配套的话需要一系列的技术,特别是前端,对应着Vuejs,配套管理路由、状态、组件的都有相应的技术手段。自己搭配的话,还是非常麻烦的。

幸好Vuejs还有一个前端脚手架工具vue-cli,它可以把以上的组件整合起来到一个工程内。一个最为基础的vue-cli工程脚手架的创建,现在得需要160M左右的空间占用。在我的电脑和网络情况下,需要2分半的时间才会完成。

前端 Vuejs

  1. vue-router,前端路由管理
  2. vuex,前端数据管理,专业一点的说法,就是状态管理,这些数据,可能是属性,数组,对象等等,可以跨组件访问,而不像是data函数那样提供的数据只能被本组件访问,可以想到,稍微大一点的前端工程都必须前端状态管理的。
  3. axios,前端HTTP访问,以promise的形式,封装了类似fetch,AJAX的能力
  4. buefy,前端微型框架,可以使用自定义标签使用自定义组件,并且CSS框架为Bulma
  5. Bulma,尽管使用了微框架,只是让对CSS framework的了解降到最低,但是不是说就不需要了解了。还是得学习的。Bulma相对于老牌的Bootstrap,是不需要依赖于JS框架,也没有任何JS代码,因此可以和任何一框架很好的结合,比如这里的Vuejs。这就是我选择它的原因

后端 cli-service

为了给前端开发提供工具链和开发便利性,我们常常需要webpack&babel。有了它们,就可以使用ES6的语法,以及代码更新后自动刷新等。这些都是非常便利的特性,用了就离不开的。有了vue-cli,对webpack&babel的了解可以降到最低,但是也不能不学,稍微需要一些定制的配置,也是必须要掌握的,起码得知道如何启动一个开发服务器,已经发布build,还有把前端服务经过proxyChain跳转到后端服务去等等。所幸是在这个教程内,你不需要学习太多就可以把案例跑起来。

App Server + Mongodb

接下来看后端,一般习惯就是使用Nodejs+Express.js的搭配。这个没有多少说的,都是老东西了。为了访问Mongodb,也需要一套框架,基于Callback的,或者基于Promise+Await+Async的,也是需要选择的。

为了便于理解,我会用一个最小的案例完成整个开发过程,就是案例在现实中并不存在,但是也是有用的,就是你可以当它们是模板,直接拷贝代码,然后填充你的内容。天下代码一大抄嘛,没有什么不对的,毕竟这些写代码是最快的。这个案例的数据模型就是对一个{id,name}的对象进行CRD(创建删除列表)。

安装运行环境

安装环境相对简单,特别是如果使用Mac OS X的话。有一些工具链可以帮助快速搭建环境。当然Windows也并不多麻烦就是了,它常常提供的是一个安装程序,大部分时间,你需要的就是点击下一步。

这里以MAC为例,讲解安装。

mongodb

安装和运行Mongodb Daemon:

brew install mongodb
mongodb

访问验证,首先执行Mongodb Shell:

mongo

输入命令,查询数据库清单:

> show dbs
local           0.000GB

能够看到这些信息,说明mongodb安装成功。

Node.js

安装并验证:

$brew install nodejs
$node -v
10.7.0

能够看到这些信息,说明Node.js安装成功。

开始前端编码

安装编码环境

首先安装vue-cli,方法和一般的NPM模块一样的,我们安装的版本是3.0:

npm i @vue/cli 

查看版本:

vue -V
3.0.0

看到如下信息,说明成功。然后创建App的脚手架代码:

vue create todoapp

注意,在此创建过程中,命令行会指示你做出选择,我们会选择Manual select feature,然后选择router和vuex,其他不选。然后并执行此代码:

cd todoapp
npm run serve

可以在浏览器中访问localhost:8080看到Vue的启动画面。说明创建脚手架成功。

此时,vue-cli已经帮助安装了vuex和router的模块依赖。本节一次性的安装全部剩余的全部NPM依赖,免得以后用一个安装一个,麻烦而且啰嗦。

  npm install buefy --save
npm install axios --save 

buefy是一个基于Bulma的Vuejs用户界面组件库。这次的UI的CSS方案,使用Bulma,Vuejs如果想要以定制组件的形式去使用它的话,那么需要安装Buefy模块。实际上,我研究过Bulma和Bootstrap,还写了一本免费的电子书,我觉得Bulma相对于Bootstrap的优势在于1.不依赖任何JS框架2.用户接口设计更加简明。这就是我现在选择使用Bulma的原因。

Axios是一个封装了HTTPClient的库,提供了promise接口。我们使用它访问后端的HTTP Server的数据。之前提到的数据对象,就是由Axios提取到客户端,也会是通过Axios把数据对象提交到服务器的。

前端编码

首先,我们从状态开始。我们之前提到的Vuex,是Vuejs管理状态的官方插件。所谓的状态,就是应用程序的数据对象们。也就是我们提到的Todo对象和Todo对象集合。我们在App用户界面上看到的很多数据都是来自于状态对象。状态对象在src/store.js。不仅仅是的应用状态信息,还有和对这些的操作函数。既然需要一个todo项目清单,因此应该加入如下代码:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const defaultTodo = [
      {id:1,subject:'Eating'},
      {id:2,subject:'Loving'},
      {id:3,subject:'Preying'},
    ]
function indexById(todos,id){
  for (var i = 0; i < todos.length; i++) {
    if (id == todos[i].id)
      return i
  }
  return -1
}
import axios from 'axios'
export default new Vuex.Store({
  state: {
    msg:'Todo App',
    todos:defaultTodo
  },
  mutations: {
    add(state,subject){
      var todo = {id:subject,subject:subject}
      state.todos.push(todo)
    },
    remove(state,id){
      state.todos.splice(indexById(state.todos,id),1)
    },
    reload(state){
      state.todos = defaultTodo
    }
  },
  actions: {
  add: (context, link) => {
      context.commit("add", link)
    },
    remove: (context, link) => {
      context.commit("remove", link)
    },
    reload: (context) => {
      context.commit("reload")
    }
  }
})

其中的state.todos属性,就是我们的主要的数据对象了。state.msg这是提供了一个App的标题字符串。mutations属性内是对数据修改提供的方法,比如

  1. 我们需要添加一个todo,使用add()方法,相应的
  2. 删除一个todo,使用remove()方法
  3. 刷新一个todo列表,就会使用load()方法

有时候,对数据的修改可能是比较消耗时间的,因此为了避免阻塞客户端的主线程,这个对象也提供了异步的方法,actions对象内就是对应修改操作的异步方法,这里的方法功能上和mutations一致,但是是异步的。Vuex提供了类似:

context.commit()

的语法,提供和actions和mutations方法的对接。第一个参数是mutations的方法名称,之后的参数最为mutations方法的参数传递给mutations方法。

特别说下,mutations内的add()方法,其中用户界面会提供一个Todo.subject属性,而ID是需要自动生成的,我们这里临时使用subject的值作为id,就是一个偷懒,只要subject不要输入重复,也暂时可以蒙混过关。因为知道本项目内的后台存储会采用Mongodb,在Mongodb内插入一个新的对象后,会自动生成一个ID,我们的Todo对象的id会采用这个ID。这里就没有必要自己生成了。

在src/views/home.vue内,粘贴为如下代码:

<template>
  <div class="home">
    <h1>{{msg}}</h1>
    <NewTodo></NewTodo>
    <TodoList></TodoList>
  </div>
</template>
<script>
import NewTodo from '@/components/NewTodo.vue'
import TodoList from '@/components/TodoList.vue'
import {mapState,mapActions} from 'vuex'
export default {
  name: 'home',
  computed:mapState(['todos','msg']),
  components: {
    TodoList,NewTodo
  },
  data(){
      return{newtodo:''}
  },
  methods:{
      ...mapActions([
      'remove',
      'add'
    ]),
      add1:function(){
          this.add(this.newtodo)
          this.newtodo = ''
      }
  }
}
</script>

...mapState,mapActions的解说。

就是说,我们这个Todo App划分为为两个组件,其中一个组件负责显示编辑框,并接受回车事件,把新的Todo项目加入到应用状态内。另外一个组件负责显示全部Todo项目,并接受删除事件,删除指定的Todo项目。它们分别是NewTodo组件和TodoList组件:

<NewTodo></NewTodo>
<TodoList></TodoList>

这两个组件的代码实现,分别在文件src/components/NewTodo.vuesrc/components/TodoList.vue内。NewTodo代码:

<template>
  <div class="home">
    <form @submit.prevent="add1">
        <input type="text" name="newTodo" placeholder="new todo" v-model="newtodo">
    </form>
  </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
  name: 'newtodo',
  computed:mapState(['todos','msg']),
  data(){
      return{newtodo:''}
  },
  methods:{
      ...mapActions([
      'add'
    ]),
      add1:function(){
          this.add(this.newtodo)
          this.newtodo = ''
      }
  }
}
</script>

TodoList代码:

<template>
  <div class="hello">
    <ul>
      <li v-for="(todo,index) in todos" v-bind:key="todo.id">
        {{todo.subject}}<button @click="remove(todo.id)" class="rm">remove</button>
      </li>
    </ul>
  </div>
</template>
<script>
import {mapState,mapActions} from 'vuex'
export default {
  name: 'todolist',
  computed:mapState(['todos','msg']),
  components: {
  },
  methods:{
    ...mapActions([
      'remove','reload'
    ])
  },
  mounted(){
    this.reload()
  }
}
</script>
<style scoped>
</style>

在src/main.js文件内,添加如下代码,引入Buefy:

import Buefy from 'buefy'
import 'buefy/lib/buefy.css'
Vue.use(Buefy)

现在可以使用Buefy组件了。我们可以把NewTodo组件内的标准的input变成组件化的input,把标签换成b-input即可。代码如下:

<b-input type="text" name="newTodo" placeholder="new todo" v-model="newtodo"></b-input>

现在看浏览器,input变成了比较有吸引力的Bulma风格的控件了。
访问网络使用axios。需要首先找到src/home.vue在代码的开头部分引用此库:

import axios from 'axios'

在Vue单页组件内使用此库了。比如在src/home.vue内代码对象中加入新方法:

mounted(){
  var url  = 'https://api.coindesk.com/v1/bpi/currentprice.json'
  axios ({
        url:url,
        method: 'get',
    })
    .then( res => {console.log(res.data.chartName)} )
    .catch( err => cosole.error(err))
}

我们来看看适应效果。启动cli-service:

npm run serve

然后打开浏览器,输入地址localhost:8080,如果可以在浏览器内看到我们期望的用户界面,并且都可以看到console打印了Bitcoin,那么就说明用户界面代码和初步的访问HTTP网络的axios代码以及状态管理功能都是成功了的。

后端编码

现在,我们已经可以看到UI了,但是用户界面内的数据来自于客户端,而不是来自于服务器。我们的数据当然应该来源于服务器的了。因此我们需要启动给一个自己的服务器,这个服务器可以接受客户在界面上录入的新的Todo对象,也可以提供后端数据库内的Todo清单。

为了测试的目的,常常需要准备一个todo应用的后台JSON服务,可以通过HTTP方式,提供todo项目的增加删除修改和查询。

这样的服务器,使用了nodejs作为服务器端,并且使用了两个node模块,可以使用npm安装它们:

npm install express body-parser

body-parser是一个中间件,可以解析请求内容并把解析结果放到req.body属性内。最常见的做法就是解析json内容。

代码如下(文件名为:jsonserver.js):

  var express = require('express');
  var app = express();
  var path = require('path')
  var bodyParser = require('body-parser')
  app.use(bodyParser.json())
  var todos = []
  var public = path.join(__dirname, '/')
  app.use('/',express.static(public))
  const defaultTodo = [
    {id:1,subject:'Eating'},
    {id:2,subject:'Loving'},
    {id:3,subject:'Preying'},
  ]
  function rs(){
    todos = defaultTodo
  }
  function indexById(id){
    for (var i = 0; i < todos.length; i++) {
      if (id ==todos[i].id)return i
    }
    return -1
  }
  rs()
  app.delete('/api/todo/:id', function (req, res) {
    var userkey = +req.params.id
    todos.splice(indexById(userkey),1)
    res.end( JSON.stringify(todos));
    rs()
  })
  app.get('/api/todos', function (req, res) {
    res.end( JSON.stringify(todos));
  })
  app.post('/api/todo', function (req, res) {
    todos.push(req.body)
    res.end(JSON.stringify(todos))
    rs()
  })
  var server = app.listen(8081, function () {
    var host = server.address().address
    var port = server.address().port
    console.log("listening at http://%s:%s", host, port)
  })

可以使用命令执行:

node jsonserver.js

Curl命令验证

可以通过curl命令验证服务的有效性:

  1. GET操作

     $curl http://localhost:8081/todo/1
     $curl http://localhost:8081/todos
    
  2. DELETE操作

      $ curl -X "DELETE" http://localhost:8081/api/todo/1
    
  3. POST操作

    $curl -X POST  -H "Content-Type: application/json" -d '{"subject":"s4"}' http://localhost:8081/api/todo
    

前端HTML验证

创建一个index.html文件,并放置到和jsonserver.js代码同一目录,代码如下:

<a href='/todos'>todos</a>
<a href='/todo/1'>todo/1</a>
<button onclick='remove()'>remove 1</button>
<button onclick='create()'>create</button>
<script>
  function remove(){
    fetch (
      '/api/todo/1',
      {
        method: 'DELETE',
      }
    )
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
  function create(){
    fetch (
      '/api/todo',
      {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({id: "4", subject: "s4"})
      }
    )
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
</script>

可以提供创建,删除,列表的测试,其中部分结果在console内显示。

说起来,JS访问HTTP的库真的是不少,这里 提到的库都有9种。其中的fetch api使用起来非常的简洁趁手,可是它不支持IE。如果你需要支持IE的话,使用Axios更好。这就是为什么Vuejs官方推荐Axios的原因吧:

The Fetch API is a powerful native API for these types of requests. You may have heard that one of the benefits of the Fetch API is that you don’t need to load an external resource in order to use it, which is true! Except… that it’s not fully supported yet, so you will still need to use a polyfill. There are also some gotchas when working with this API, which is why many prefer to use axios for now. This may very well change in the future though.

axios访问方法

相比fetch,使用axios必须依赖于外部文件。为了方便,我们直接使用unpkg网站提供的库文件。

axios的语法和fetch的大同小异,看着也是比较简洁美观的。以下代码,把create和remove函数的内部实现换掉,其他不变。

<script data-original="https://unpkg.com/axios/dist/axios.min.js"></script>
<a href='/todos'>todos</a>
<a href='/todo/1'>todo/1</a>
<button onclick='remove()'>remove 1</button>
<button onclick='create()'>create</button>
<script>
  function remove(){
    axios ({
        url:'/api/todo/1',
        method: 'DELETE',
    })
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
  function create(){
    axios ({
        method: 'POST',
        url:'/api/todo',
        headers: {
          'Content-Type': 'application/json'
        },
        data: JSON.stringify({subject: "s4"})
    })
    .then( res => console.log(res.json()))
    .catch( err => cosole.error(err))
  }
</script>

现在,后端也是可以跑起来了的。

整合:前端后端

建立cli-service到App Server的通道

每次执行命令:npm run serve,都会启动vue定制脚手架的服务器代码,它会提供不少方便开发的特性。但是我希望一部分URL可以转发到我自己的服务器内。比如把所有的/api打头的URL全部转过来。只要在工程根目录内加入此文件vue.config.js,录入如下内容:

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:8181",
        secure: false
      }
    }
  }
};

我们自己的测试服务器在这里:

var http = require('http');
http.createServer(function (req, res) {
  res.write('Hello World!'); 
  res.end(); 
}).listen(8181); 

我们的定制服务器,就可以监听8181的本地机器端口,等待客户端的匹配的URL转发过来,并转发我们服务器的响应代码到客户端。

但是正常开发过程中,是需要自己的服务器端代码的,如何在利用Vue脚手架服务器的方便性的基础上,加入自己的代码呢。做法是另外做一个定制的服务器,然后让vue定制脚手架的服务器转发URL到此服务器。

为了测试的目的,我们把函数mounted修改为:

mounted(){
  var url  = '/api/1'
  axios ({
        url:url,
        method: 'get',
    })
    .then( res => {console.log(res.data)} )
    .catch( err => console.error(err))
}

即可看到浏览器console内打印Hello World!

整合前端到后端

我们已经通过配置,要求cli-service转移全部api打头的URL到App Server。只要在工程根目录内加入此文件vue.config.js,录入如下内容:

module.exports = {
  devServer: {
    proxy: {
      "/api/*": {
        target: "http://localhost:8181/api",
        secure: false
      }
    }
  }
};

现在,我们可以修改前端的Axios使用代码,分别替代前端代码的数据装入、数据删除、数据添加的代码,让这些代码可以支持网络操作。为了避免网络操作代码和业务逻辑代码混合在一起,我决定包装三个网络操作函数,并把它们放置到src/store.js文件内:


import axios from 'axios'
function httpadd(subject,cb){
  axios ({
        method: 'POST',
        url:'/api/todo',
        headers:[{'Content-Type':'application/json'}],
        data: {subject:subject}
      })
      .then( res => cb(res.data))
      .catch( err => console.error(err))
}
function httpremove(id,cb){
  axios ({
        url:'/api/todo/'+id,
        method: 'delete',
      })
      .then( res => {
          cb()
      })
      .catch( err => console.error(err))
}
function httpreload(cb){
  axios ({
        url:'/api/todos',
        method: 'get',
      })
      .then( res => {
          cb(res.data)
      })
      .catch( err => console.error(err))
}

分别完成添加、删除、查找的任务,当完成工作后,都会调用一个callback函数,在此函数内,可以消费访问网络后得到的响应数据。

然后把文件内src/store.js的mutations对象改成如下代码:

 mutations: {
  add(state,subject){
    httpadd(subject,function(todo){
      state.todos.push(todo)
    })
  },
  remove(state,id){
    httpremove(id,function(){
      state.todos.splice(indexById(state.todos,id),1)  
    })
  },
  reload(state){
    httpreload(function(todos){
      // console.log(todos)
      state.todos = todos
    })
    // state.todos = defaultTodo
  }
},

最后,在TodoList内加入一个新函数,并通过mapActions引入src/store.js的load()函数到当前对象内:

  methods:{
    ...mapActions([
      'remove','load'
    ])
  },
  mounted(){
    this.load()
  }

以便在启动后调用this.load()装入它。

整合:后端和数据库

要完成后端到数据库的整合,需要做如下的修改:

  1. 原本在后端App Server内Todo数据数组,现在应该从Mongodb获得
  2. 原本在添加Todo对象的时候只是添加到AppServer对象内,现在需要同时写入Mongodb
  3. 原本在删除时只是从数组删除,现在需要同时在Mongodb内删除

因此,现在我们需要添加三个函数,分别做针对Mongodb的获取清单、添加和删除的工作:

var mongo = require('mongodb')
function insertDoc(subject,callback){
  const connectionString = 'mongodb://localhost:27017';
  (async () => {
      const client = await MongoClient.connect(connectionString,
          { useNewUrlParser: true });
      const dbo = client.db('todos');
      try {
         var res = await dbo.collection('todo').insertOne(
          {subject:subject})
         callback(undefined,res.insertedId)
      }
      catch(err){
        callback(err)
      }
      finally {
          client.close();
      }
  })().catch(err => console.error(err));
}
function deleteDoc(_id,callback){
  const MongoClient = mongo.MongoClient;
  const connectionString = 'mongodb://localhost:27017';
  (async () => {
      const client = await MongoClient.connect(connectionString,
          { useNewUrlParser: true });
      const dbo = client.db('todos');
      try {
              var myquery = {_id:new mongo.ObjectID(_id)}
              var r = await dbo.collection("todo").deleteMany(myquery)
        }
        catch(err){
        callback(err)
      }
      finally {
            client.close();
            callback()
        }
  })().catch(err => console.error(err));
}
function allDoc(callback){
  const MongoClient = mongo.MongoClient;
  const connectionString = 'mongodb://localhost:27017';
  (async () => {
      const client = await MongoClient.connect(connectionString,
          { useNewUrlParser: true });
      const dbo = client.db('todos');
      try {
             var r = await dbo.collection("todo").find().toArray()
             var ts = []
             for (var i = 0; i < r.length; i++) {
               ts.push({id:r[i]._id,subject:r[i].subject})
             }
             callback(undefined,ts)
        }
        catch(err){
        callback(err)
      }
      finally {
            client.close();
        }
  })().catch(err => console.error(err));
}

这三个函数的功能和使用方法如下:

  1. 函数allDoc会从Mongodb内获取全部todo集合,并通过callback传递这个集合给调用者函数。
  2. 函数deleteDoc会从Mongodb内删除指定id的todo条目,完成删除后,通过callback通知调用者。
  3. 函数deleteDoc会向Mongodb内添加一个todo条目,完成添加后,通过callback通知调用者,并传递新的todo对象给调用者。

这里的代码本身并不复杂,但是因为涉及到如何访问Mongodb,因此涉及到比较多的概念,这里不做具体的解释,你可以先把它们用起来。如果完成了本教程后,希望对Mongodb的访问做具体了解的话,可以查看后文附录的“Mongodb快速参考”。

并且和App Server对应的代码接驳,把原来的路由代码替换如下:

app.delete('/api/todo/:id', function (req, res) {
  var userkey = req.params.id
  deleteDoc(userkey,function(){
    todos.splice(indexById(userkey),1)
    res.end( JSON.stringify(todos));
  })
})
app.get('/api/todos', function (req, res) {
  allDoc(function(err,todos){
    res.end( JSON.stringify(todos));  
  })
})
app.post('/api/todo', function (req, res) {
  insertDoc(req.body.subject,function(err,_id){
    var obj ={id:_id,subject:req.body.subject}
  todos.push(obj)
  res.end(JSON.stringify(obj))
    rs()
  })
})

 

Mongodb快速参考

本文会把一个对象todo对象(有属性{id,name})存储到Mongodb,做查询删除的测试(Create Remove Delete = CRD)。这个测试包括使用Mongodb Shell,使用CallBack古典风格的访问代码,以及使用Await/Async的现代风格的代码。完成这个这个验证后,就可以掌握最初步的Mongodb了。

我使用的Nodejs是10.7 。操作系统环境为Mac OS X High Sierra。

准备环境

安装和运行Mongodb Daemon

brew install mongodb
mongodb

访问验证

首先执行Mongodb Shell:

mongo

输入命令,查询数据库清单:

> show dbs
local           0.000GB

创建一个数据库

use todos

(若database不存在,则会创建一个,此时若不做任何操作直接退出,则MongoDB会删除该数据库)

db.todos.insert({id:1,name:"reco"})
db.todos.insert({id:2,name:"rita"})

查询 :

db.todos.find()

{ "_id" : ObjectId("5b727c0846b6c71a98d3af52"), "id" : 1, "name" : "reco" }
{ "_id" : ObjectId("5b727c7046b6c71a98d3af53"), "id" : 2, "name" : "reta" }

删除记录:

db.todo.remove({id:1})

删除数据库

db.todo.drop()

使用nodejs方式访问Mongodb

使用nodejs执行类似Shell对对象的CRD,代码如下:

var MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/todos";
MongoClient.connect(url, function(err, db) {
  if (err) throw err;
  console.log("Database created!");
  var dbo = db.db("todos");
  // var myobj = { id: 1, name: "reco" };
  // dbo.collection("todo").insertOne(myobj, function(err, res) {
  //   if (err) throw err;
  //   console.log("1 document inserted");
  //   db.close();
  // });
   var myobj = [
    { id: 1, name: 'reco'},
    { id: 2, name: 'rita'},
  ];
  dbo.collection("todo").insertMany(myobj, function(err, res) {
    if (err) throw err;
    console.log("Number of documents inserted: " + res.insertedCount);
    dbo.collection("todo").find({}).toArray(function(err, result) {
      if (err) throw err;
      console.log(result);
        var myquery = { id: 1 };
      dbo.collection("todo").deleteMany(myquery, function(err, obj) {
        if (err) throw err;
        console.log("document deleted");
        db.close();
      });
    });    
  });
})

代码非常简单,无需更多解释。此代码使用了mongodb模块,需要首先安装:


npm init -y
npm i mongodb --save

然后使用node index.js运行即可看到效果:

Database created!
Number of documents inserted: 2
[ { _id: 5b72ab9e3245f169ef5f43d2, id: 1, name: 'reco' },
  { _id: 5b72ab9e3245f169ef5f43d3, id: 2, name: 'rita' } ]
document deleted

利用高级异步特性

使用Await/Async特性,可以有效的减少代码中的回调地狱现象。同样的功能,可以使用这样的代码:

const MongoClient = require('mongodb').MongoClient;
const connectionString = 'mongodb://localhost:27017';
(async () => {
    const client = await MongoClient.connect(connectionString,
        { useNewUrlParser: true });
    const dbo = client.db('todos');
    try {
       var res = await dbo.collection('todo').insertMany(
        [{id:1,name:"reco"}, {id:2,name:"rita"}]);
       console.log("Number of documents inserted: " + res.insertedCount);
       var r = await dbo.collection("todo").find().toArray()
       console.log(r);
       var myquery = { id: 1 };
     var r = await dbo.collection("todo").deleteMany(myquery)
     console.log("document deleted");
    }
    finally {
        client.close();
    }
})().catch(err => console.error(err));

执行此代码,输出如下:

Number of documents inserted: 2
[ { _id: 5b72ae8a1c674a6ac1c5aa6e, id: 1, name: 'reco' },
  { _id: 5b72ae8a1c674a6ac1c5aa6f, id: 2, name: 'rita' } ]
document deleted

Vuejs快速参考

Vuejs本身要学的还真不少,这也是我会编写一本书来介绍它的原因。但是说到入门的话,我倒是写过一篇简单的介绍文章。不妨去阅读看看。

上面的文章,也就对Vuejs了解个大概,提起一个兴趣。如果真的想要学习Vuejs的话,还是得看书的。这里也放一个我的书的广告,欢迎参阅。

clipboard.png

购买

问题索引

麻雀虽小五脏俱全,虽然是一个小小的示例的应用,但是每样技术也都需要用到,遇到的技术问题也是要一个个的解决的。这里列出我遇到的问题,作为索引,也算记录我在写作过程中解决的问题,也可以作为你学习完毕后的一个查漏补缺的索引,在这里重新看到问题,然后使用代码验证自己对问题的理解和学习。

  1. 使用Nodejs如何搭建一个RESTFUL的服务?
  • 如何把cli-service中来自客户端但是需要去应用服务器的URL访问转移到应用服务器?
  • 如何解析前端提交的Json?
  • 如何打包Json到响应内?
  • 如何创建一个唯一的ID?本来是用于创建一个唯一ID,这样就不必使用MongoDB生成的ObjectID了,因此插入效率会更高。但是,最后还是按惯例采用了Mongo的了。
  1. 如何加入新的单页组件?
  • 在哪里插入获取服务端数据的代码?
  1. 如何使用Buefy?
  • 在Vuejs应用中内使用Buefy?
  • 在Vuejs单页组件内使用Buefy?
  • 如何关闭input的自动完成特性?这个自动完成每次当你输入的时候,都会显示一个曾经的输入的列表,真的很烦。
  1. 如何在组件之间共享状态?
  • 为何需要共享前端状态?
  • 如何区别使用同步和异步状态操作?
  • 如何映射状态操作到组件内,以方便组件对方法的调用?
  1. 如何访问Mongo?
  • 如何安装Mongo,并快速验证Mongo?
  • 如何命令行插入、删除、列表一个Collection?
  • 有哪些访问Mongo的Nodejs库,差别在哪里?
  • 如何使用Await风格的代码做插入删除和列表?
  • 如何获取插入项目后的项目ID?
  • 如何使用ObjectId查询对应的项目?
  1. 如何访问网络,包括curl、axios、fetch等几种方法?
  • 如何提交Get请求?
  • 如何提交Put请求?
  • 如何在Body内提交json?
  • 如何指定请求头内容类型为json?
  • 如何获取响应中的Json数据?

参考文章

这个App虽然很小,但是并非一次写成的,我之前已经完成了若干个更加细小的、特定方面的文章,也写了一些代码。当然外部参考肯定也是不少,特别是Medium和Stack Overflow网站,对我支持很多。这里列出关键的一些参考文章。

  1. 这里会使用vuex管理状态,之前有写过文章,到底Vuex是什么,阅读量和评价还不少呢。当然,我举例的案例,有些勉强,为了用而用,实际案例并不需要Vuex,使用组件内状态即可。
  2. 使用Mongodb存储和提供后端CRD服务
  3. 使用Nodejs搭建{id,name}的对象的后端CRD服务。计划参考之前我自己的2篇文章和一个SO关于如何在AJAX内创建PUT请求的问答
  1. 使用Fecth|Axios访问后端CRD服务。此文章列举了几种访问网络库的方法,给了我一个全局的视野,因此我很受益于它。[Fetch vs. Axios.js for making http requests

](https://medium.com/@thejasonf...

  1. 使用buefy的美化组件的方法。这个很小众了,因此就只能看看官方文档了。
查看原文

赞 270 收藏 205 评论 10

认证与成就

  • 获得 15 次点赞
  • 获得 6 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 6 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2018-03-14
个人主页被 448 人浏览