Posted on | Edited on | In

ProtoBuf.js 使用技巧

在NodeJS中玩转Protocol Buffer

1
2
3
4
5
6
7
// awesome.proto
package awesomepackage;
syntax = "proto3";

message AwesomeMessage {
    string awesome_field = 1; // becomes awesomeField
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<html>
  <script src="http://cdn.rawgit.com/dcodeIO/protobuf.js/6.7.0/dist/protobuf.js"></script>
  <script>
    // writing
    protobuf.load("awesome.proto", function(err, root) {
        if (err)
            throw err;

        // Obtain a message type
        var AwesomeMessage = root.lookupType("awesomepackage.AwesomeMessage");

        // Exemplary payload
        var payload = { awesomeField: "AwesomeString", test:"test" };

        // Verify the payload if necessary (i.e. when possibly incomplete or invalid)
        var errMsg = AwesomeMessage.verify(payload);
        if (errMsg)
            throw Error(errMsg);

        // Create a new message
        var message = AwesomeMessage.fromObject(payload); // or use .fromObject if conversion is necessary

        // Encode a message to an Uint8Array (browser) or Buffer (node)
        var buffer = AwesomeMessage.encode(message).finish();
        // ... do something with buffer

        // Decode an Uint8Array (browser) or Buffer (node) to a message
        var message = AwesomeMessage.decode(buffer);
        // ... do something with message

        // If the application uses length-delimited buffers, there is also encodeDelimited and decodeDelimited.

        // Maybe convert the message back to a plain object
        var object = AwesomeMessage.toObject(message, {
            longs: String,
            enums: String,
            bytes: String,
            // see ConversionOptions
        });
    });
  </script>
</html>

Posted on | Edited on | In

Angular 大致结构:

  • Modules: 模块
  • Components: 组件
  • Templates: 模板
  • Metadata: 元数据
  • Data binding: 数据绑定
  • Directives: 指令
  • Services: 服务
  • Dependency injection: 依赖注入

开始

下载 Angular CLI

npm install -g @angular/cli

新的项目

npm new PROJECT_NAME

添加 Prefix

添加 sass

Relative path to Style files

常用 Commands

Scaffold Usage
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Guard ng g guard my-new-guard
Interface ng g interface my-new-interface
Enum ng g enum my-new-enum
Module ng g module my-module
Routing + update ng g module my-module --routing --module="home/home.module"

项目结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
.
+-- package.json
+-- src
|   +-- app
|       +-- home
|           +-- navbar 只有在这页面用的 component
|               +-- navbar.component.html
|               +-- navbar.component.scss
|               +-- navbar.component.ts
|           +-- home.component.html
|           +-- home.component.scss
|           +-- home.component.ts 
|           +-- home.module.ts 导入 component 和 路由
|           +-- home-routing.module.ts 每个页面有他自己的路由
|       +-- core
|           +-- item
|               +-- item.component.html
|               +-- item.component.scss
|               +-- item.component.ts
|               +-- item.service.ts
|               +-- item.module.ts
|           +-- todo
|               +-- todo.service.ts
|               +-- todo.module.ts
|           +-- core.module.ts 导入 todo 和 item 并导出
|   +-- assets
|   +-- environments
|   +-- (locales) i18n 多语言
|   +-- style
|   +-- (mock) 测试
|   +-- index.html
|   +-- main.ts 导入页面 home (路由会自动导入)
+-- ...

其他

Directive: 指令

Angular 1 中的 attribute 类型的 directive

在外面插入 <标签>

参考 angular.io;

Data binding: 数据绑定

1
2
3
<li>{{hero.name}}</li>
<hero-detail [hero]="selectedHero"></hero-detail>
<li (click)="selectHero(hero)"></li>

Services: 服务

这里可以定义全部应用里面所需要的, 数据, 方法等…

Dependency injection: 依赖注入

测试

karma 全局变量

1
2


获取私有变量

1
component["variable_name"]

Posted on | Edited on | In
  • tmp: 保存临时文件
  • dist: 编译好的文件
  • src: 原文件
1
2
3
4
5
6
7
8
9
10
11
12
13
.
+- tmp
|  +- final.js
|
+- dist
|  +- final.min.js
|
+- src
|  +- module1.js
|  +- module2.js
|  +- module3.js
|
index.html

Posted on | Edited on | In

下载安装 PostgreSQL

用安装包下载

下载;

安装后会出现以下几个软件:

  • sql shell (psql): 终端
  • pgAdmin 4: 数据库 GUI
  • reload configuration: 重置设置
  • aplicacion stack builder: 下载其他的插件用的

Mac 用户用 brew

brew install

输入命令

打开 sql shell;

⚠️ SQL 语句一定要用 “;” 结尾

⚠️ 如果没有用 “;” 结尾当终端 箭头是 “->” 这样的时候说明当前操作还没结束, 输入 “;” 或者 ctrl+c 来结束.

创建数据库

CREATE DATABASE dbname;

显示全部数据库

\l

选择数据库

c 数据库名字

基本 SQL 语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
# 创建新表 
CREATE TABLE user_tbl(name VARCHAR(20), signup_date DATE);
# 插入数据 
INSERT INTO user_tbl(name, signup_date) VALUES('张三', '2013-12-22');
# 选择记录 
SELECT * FROM user_tbl;
# 更新数据 
UPDATE user_tbl set name = '李四' WHERE name = '张三';
# 删除记录 
DELETE FROM user_tbl WHERE name = '李四' ;
# 添加栏位 
ALTER TABLE user_tbl ADD email VARCHAR(40);
# 更新结构 
ALTER TABLE user_tbl ALTER COLUMN signup_date SET NOT NULL;
# 更名栏位 
ALTER TABLE user_tbl RENAME COLUMN signup_date TO signup;
# 删除栏位 
ALTER TABLE user_tbl DROP COLUMN email;
# 表格更名 
ALTER TABLE user_tbl RENAME TO backup_tbl;
# 删除表格 
DROP TABLE IF EXISTS backup_tbl;
1
2
# 插入数据的时返回数据
INSERT INTO user_tbl(name, signup_date) VALUES('张三', '2013-12-22') RETURNING *;

创建新的表单

1
2
3
4
5
6
7
CREATE TABLE colors(
	color_id bigserial PRIMARY KEY NOT NULL,
	hexa bigint NOT NULL, 
	description test,
	created_timestamp timestamp DEFAULT CURRENT_TIMESTAMP, 
	modified_timestamp timestamp DEFAULT CURRENT_TIMESTAMP
);

最好的数据类型使用

全部数据类型

参考;

varchar 或者 text

使用text 参考;

自动增加 Primay key

请用 bigserial, serial 或者 smailserial 在创建列的时候

自动更新时间

参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
CREATE TABLE product (
id INT NOT NULL,
modified_timestamp TIMESTAMP DEFAULT 'now'::timestamp
);

#provided the field is named the same thing in all tables that use this, you can use a centralized function
CREATE FUNCTION update_modified_timestamp_column() RETURNS trigger
    LANGUAGE plpgsql
    AS $$
  BEGIN
    NEW.modified_timestamp = NOW();
    RETURN NEW;
  END;
$$;

CREATE TRIGGER product_update_modified_timestamp 
BEFORE UPDATE ON product 
FOR EACH ROW EXECUTE PROCEDURE update_modified_timestamp_column();

Posted on | Edited on | In

参考 runoob

参考英语版

安装 MongoDB

安装指南

开启 Mongod

mongo 服务器

sudo mongod

开启 Mongo shell

mongo

数据库操作

显示数据库

show dbs

创建/选择数据库

use DATABASE_NAME

删除数据库

第一切换到你想要删除的数据库

use DATABASE_NAME

删除数据库

db.dropDatabase()

collection(合集) 操作

显示 collection

show collections

创建 collection

在 MongoDB 里面不需要创建合集

db.createCollection(NAME, OPTIONS)

Option 限制这个 collection 的大小, index 等… Options 参考.

删除 collection

db.COLLECTION_NAME.drop()

插入文档

db.COLLECTION_NAME.insert(JSON)

查询

db.COLLECTION_NAME.find()

操作 格式 范例 RDBMS中的类似语句
等于 {:} db.col.find({“by”:”菜鸟教程”}).pretty() where by = ‘菜鸟教程’
小于 {:{$lt:}} db.col.find({“likes”:{$lt:50}}).pretty() where likes < 50
小于或等于 {:{$lte:}} db.col.find({“likes”:{$lte:50}}).pretty() where likes <= 50
大于 {:{$gt:}} db.col.find({“likes”:{$gt:50}}).pretty() where likes > 50
大于或等于 {:{$gte:}} db.col.find({“likes”:{$gte:50}}).pretty() where likes >= 50
不等于 {:{$ne:}} db.col.find({“likes”:{$ne:50}}).pretty() where likes != 50

更新

更多参考

db.COLLECTION_NAME.update(SELECTION_CRITERIA, UPDATED_DATA)

例子:

db.COLLECTION_NAME.update({'title':'MongoDB 教程'},{$set:{'title':'MongoDB'}})

删除文档

语法:

db.COLLECTION_NAME.remove(DELLETION_CRITTERIA)

例子:

db.mycol.remove({'title':'MongoDB Overview'})

删除一个:

db.COLLECTION_NAME.remove(DELETION_CRITERIA,1)

删除全部:

db.mycol.remove();

pretty

让输出好看点, 点击这里来查看效果

Posted on | Edited on | In

javascript Decorator (装饰)

参考

先我们来理解一下在 javascript 类下面声明一个属性.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

class Cat{
    //创建一个属性
    meow(){
        return `${this.name} says Meow!`;
    }
}

// 上面的代码等于在在javascript内部执行 已下代码.
Object.defineProperty(Cat.prototype, 'meow', {
    value: function(){return `${this.name} says Meow!`;},
    enumerable: false,
    configurable: true,
    writable: true
});

Object.defineProperty(target, name, descriptor) 接受3个参数. 分别是(对象, 属性名字, descriptor); 在 descriptor 里面可以声明这个属性的特性, 比如说它的值, 是否可以覆盖等…
参考 MDN

装饰符就是想上面的例子一样改变一个属性的特性, 打个比方:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function readonly(target, name, descriptor){
  // descriptor对象原来的值如下
  // {
  //   value: specifiedFunction,
  //   enumerable: false,
  //   configurable: true,
  //   writable: true
  // };
  descriptor.writable = false;
  return descriptor;
}

class Cat{
    @readonly
    meow(){
        return `${this.name} says Meow!`;
    }
}