快捷導(dǎo)航

如何在Vue中使用protobuf

更新時間：2022年03月29日 16:35:05 作者：~疆

這篇文章主要介紹了如何在Vue中使用protobuf，protobuf是由google推出的和語言無關(guān)和平臺無關(guān)，幾乎支持當(dāng)前的大部分語言，如JavaScript,下文更多相關(guān)介紹需要的小伙伴可以參考一下

protobuf是由google推出的和語言無關(guān)和平臺無關(guān)，可擴展的序列化數(shù)據(jù)結(jié)構(gòu)協(xié)議，類似于XML，但是比XML更小、更快、更簡單。protobuf幾乎支持當(dāng)前的大部分語言，如JavaScript

安裝protobufjs

cnpm i -S protobufjs

注意：當(dāng)前protobufjs的版本為：6.11.2

在項目src目錄下新建proto目錄，把后端給的test.proto文件放進去

syntax = "proto3";//第一行指定了正在使用proto3語法：如果你沒有指定這個，編譯器會使用proto2。這個指定語法行必須是文件的非空非注釋的第一行
?
message Address
{
? ? ?string province ?= 1;
? ? ?string city = 2;
? ? ?string county = 3;
}

打開dos窗口，執(zhí)行以下命令將proto文件轉(zhuǎn)換成js文件。大概執(zhí)行15秒，執(zhí)行成功后會在src/proto文件夾中創(chuàng)建proto.js文件

npx pbjs -t json-module -w commonjs -o src/proto/proto.js src/proto/*.proto

注意：-w參數(shù)可以指定打包js的包裝器，這里用的是commonjs 。.proto文件除了可以生成js文件，還可以生成json文件。通常打包成js模塊比較好用，因為vue在生產(chǎn)環(huán)境中打包后只有html,css,js等文件。生成json文件的命令為：

npx pbjs -t json src/proto/*.proto > src/proto/proto.json

引入proto.js：

import protoRoot from "@/proto/proto.js";

先打印看看protoRoot內(nèi)容：

基本使用：

<template>
? <div class="main">main</div>
</template>
<script>
import protoRoot from "@/proto/proto.js";
export default {
? data() {
? ? return {};
? },
? mounted() {
? ? let testobj = protoRoot.lookup("Address").create();
? ? testobj.province = "四川省";
? ? testobj.city = "成都市";
? ? testobj.county = "中國";
? ? console.log("testobj:", testobj);
?
? ? //encode數(shù)據(jù)
? ? let testObjBuffer = protoRoot.lookup("Address").encode(testobj).finish();
? ? console.log("testObjBuffer:", testObjBuffer);
?
? ? //decode數(shù)據(jù)
? ? let testdata = protoRoot.lookup("Address").decode(testObjBuffer);
? ? console.log("testdata：", testdata);
? },
};
</script>

為以后方便使用，我們可將命令添加到package.json的script中：

"proto": "pbjs -t json-module -w commonjs -o src/proto/proto.js ?src/proto/*.proto"

以后更新proto文件后，只需要npm run proto即可重新生成最新的proto.js

使用axios發(fā)起請求時，需要注意設(shè)置axios的請求類型使用arraybuffer：

import axios from 'axios'
const httpService = axios.create({
? timeout: 45000,
? method: 'post',
? headers: {
? ? 'X-Requested-With': 'XMLHttpRequest',
? ? 'Content-Type': 'application/octet-stream'
? },
? responseType: 'arraybuffer'
})

到此這篇關(guān)于如何在Vue中使用protobuf的文章就介紹到這了,更多相關(guān)Vue使用protobuf內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: