vue中使用protobuf

vue中使用protobuf

什么是protobuf？

官方解释为：

协议缓冲区是用于序列化结构化数据的灵活，高效的自动化机制 - 思考XML，但更小，更快，更简单。您可以定义一次数据的结构，然后您可以使用特殊的源代码轻松地将结构化数据写入各种数据流并使用各种语言读取和读取数据。您甚至可以更新您的数据结构，而不会中断根据“旧”格式编译的已部署程序。
特点：

更简单
是3到10倍小
速度要快20到100倍
不太模糊
生成更易于以编程方式使用的数据访问类

代码

在github上写了个demo
demo地址（https://github.com/rsl140/work_notes_demo/tree/master/proto_demo） 有需要的可以下载下来跑一下就理解了。PS:如果觉得有用 请给我个小星星 (笔芯~)

配置环境变量

由于公司用的是win10 只需要将下载的文件地址添加到path即可
Mac与window命令唯一的区别就是需要将protoc改成protoc.exe 前提是需要添加环境变量
配置环境可参考这篇文章(https://www.jianshu.com/p/e63082e9188d)

编写proto文件

为了确保前后一致，下面是后台写给我的一个测试proto，我司后台是java

syntax = "proto2";//protobuf版本
option java_package = "com.test.protobuf";
option java_outer_classname = "PersonMessage";
message Person {
  required int32 id = 1;
  optional string name = 2;
  optional string email = 3;
  repeated string list = 4;
  extensions 100 to 1000;//允许扩展的ID
}

message PersonTree {
  optional string id = 1;
  optional string title = 2;
  repeated PersonTree childs = 3;
}

extend Person {
  optional int32 count = 101;
  optional int32 likes_cnt= 102;
}

message PersonEx {
  optional int32 id = 1;
  extend Person {
    optional int32 px = 103;
    optional int32 py= 104;
  }
  optional Person p = 2;
}

使用vue-cli构建一个工程目录

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

安装插件：npm install axios element-ui google-protobuf --save

编译proto为JS

进入awesome.proto的存放路径 使用如下命令
protoc.exe --js_out=import_style=commonjs,binary:. awesome.proto

会生成一个awesome_pb.js文件
点击查看awesome_pb.js其实可以看到里面是生成好的方法。只需要在页面中引入JS调用即可
之后我们将这个文件引入页面，当然你也可以考虑全局引用

protobufferTest () {
      var message = new messages.Person()
      message.setId(23)
      message.setName('asd')
      var bytes = message.serializeBinary()
      
      console.log(bytes)
      let uploadDatas = new FormData()
      var blob = new Blob([bytes], {type: 'application/octet-stream'})

      uploadDatas.append('protobuf', blob)
      
      this.axios.post('/test', uploadDatas)
        .then(function (response) {
          console.log(response)

          var message2 = messages.PersonTree.deserializeBinary(response.data)
          console.log(message2.getId())
        })
        .catch(function (error) {
          console.log(error)
        })
      // console.log(bytes)
    }

向后端传值

因为FormData支持两种方式传输string和blob所以将bytes存入blob中
前端获取数据
对axios的默认传输方式做个更改
axios.defaults.responseType = ‘arraybuffer’

protobufferTest () {
      var message = new messages.Person()
      message.setId(23)
      message.setName('asd')
      var bytes = message.serializeBinary()
      
      console.log(bytes)
      let uploadDatas = new FormData()
      var blob = new Blob([bytes], {type: 'application/octet-stream'})

      uploadDatas.append('protobuf', blob)
      
      this.axios.post('/test', uploadDatas)
        .then(function (response) {
          console.log(response)

          var message2 = messages.PersonTree.deserializeBinary(response.data)
          console.log(message2.getId())
        })
        .catch(function (error) {
          console.log(error)
        })
      // console.log(bytes)
    }

完整项目内容

1，安装插件：npm install axios element-ui google-protobuf --save
2，在src/assets目录下新建proto文件夹，proto文件夹下新建 awesome.proto文件 内容为

syntax = "proto2";//protobuf版本
option java_package = "com.test.protobuf";
option java_outer_classname = "PersonMessage";
message Person {
  required int32 id = 1;
  optional string name = 2;
  optional string email = 3;
  repeated string list = 4;
  extensions 100 to 1000;//允许扩展的ID
}

message PersonTree {
  optional string id = 1;
  optional string title = 2;
  repeated PersonTree childs = 3;
}

extend Person {
  optional int32 count = 101;
  optional int32 likes_cnt= 102;
}

message PersonEx {
  optional int32 id = 1;
  extend Person {
    optional int32 px = 103;
    optional int32 py= 104;
  }
  optional Person p = 2;
}

3，生成 awesome_pb.js文件

进入awesome.proto的存放路径 使用如下命令
protoc.exe --js_out=import_style=commonjs,binary:. awesome.proto

会生成一个awesome_pb.js文件
点击查看awesome_pb.js其实可以看到里面是生成好的方法。只需要在页面中引入JS调用即可
之后我们将这个文件引入页面，当然你也可以考虑全局引用

这个时候就需要用到环境变量
mac以及具体用法请参考(https://www.jianshu.com/p/e63082e9188d)这篇文章
我是win10电脑
下载protobuf的编译器 （https://github.com/protocolbuffers/protobuf/releases）

找到符合自己的电脑文件

将protoc拷贝到awesome.proto所在目录下面，执行如下命令
protoc --js_out=import_style=commonjs,binary:./ awesome.proto

4，在main.js中全局引用

// 挂载为全局 也可以按需引用import awesome from './assets/proto/awesome_pb.js' 
import awesome from './assets/proto/awesome_pb.js'
Vue.prototype.awesome = awesome

5，引入自己的项目

protobufferTest () {
      var message = new messages.Person()
      message.setId(23)
      message.setName('asd')
      var bytes = message.serializeBinary()
      
      console.log(bytes)
      let uploadDatas = new FormData()
      var blob = new Blob([bytes], {type: 'application/octet-stream'})

      uploadDatas.append('protobuf', blob)
      
      this.axios.post('/test', uploadDatas)
        .then(function (response) {
          console.log(response)

          var message2 = messages.PersonTree.deserializeBinary(response.data)
          console.log(message2.getId())
        })
        .catch(function (error) {
          console.log(error)
        })
      // console.log(bytes)
    }