如何在Vue中使用protobuf
protobuf是由google推出的和語(yǔ)言無(wú)關(guān)和平臺(tái)無(wú)關(guān)，可擴(kuò)展的序列化數(shù)據(jù)結(jié)構(gòu)協(xié)議，類(lèi)似于XML，但是比XML更小、更快、更簡(jiǎn)單。protobuf幾乎支持當(dāng)前的大部分語(yǔ)言，如JavaScript
安裝protobufjs
cnpm i -S protobufjs
注意：當(dāng)前protobufjs的版本為：6.11.2
在項(xiàng)目src目錄下新建proto目錄，把后端給的test.proto文件放進(jìn)去
syntax = "proto3";//第一行指定了正在使用proto3語(yǔ)法：如果你沒(méi)有指定這個(gè)，編譯器會(huì)使用proto2。這個(gè)指定語(yǔ)法行必須是文件的非空非注釋的第一行
?
message Address
{
? ? ?string province ?= 1;
? ? ?string city = 2;
? ? ?string county = 3;
}打開(kāi)dos窗口，執(zhí)行以下命令將proto文件轉(zhuǎn)換成js文件。大概執(zhí)行15秒，執(zhí)行成功后會(huì)在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模塊比較好用，因?yàn)関ue在生產(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 = "中國(guó)";
? ? 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ā)起請(qǐng)求時(shí)，需要注意設(shè)置axios的請(qǐng)求類(lèi)型使用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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中el-date-picker type=daterange日期清空時(shí)不回顯的解決
這篇文章主要介紹了vue中el-date-picker type=daterange日期清空時(shí)不回顯的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
詳解如何在Vue項(xiàng)目中導(dǎo)出Excel
這篇文章主要介紹了如何在Vue項(xiàng)目中導(dǎo)出Excel，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue3.0+ts引入詳細(xì)步驟以及語(yǔ)法校驗(yàn)報(bào)錯(cuò)問(wèn)題解決辦法
Vue?3.0是一個(gè)非常流行的JavaScript框架,不僅易于學(xué)習(xí)和使用,而且可以與許多UI框架集成,下面這篇文章主要給大家介紹了關(guān)于vue3.0+ts引入詳細(xì)步驟以及語(yǔ)法校驗(yàn)報(bào)錯(cuò)問(wèn)題的解決辦法,需要的朋友可以參考下2024-01-01
vue中使用極驗(yàn)驗(yàn)證碼的方法（附demo）
這篇文章主要介紹了vue中使用極驗(yàn)驗(yàn)證碼的方法（附demo）本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12
Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確問(wèn)題解析
在近期開(kāi)發(fā)中,需要將1920*1080放到更大像素大屏上演示,所以需要使用到transform來(lái)對(duì)頁(yè)面進(jìn)行縮放,但是此時(shí)發(fā)現(xiàn)彈框定位出錯(cuò)問(wèn)題,無(wú)法準(zhǔn)備定位到實(shí)際位置,本文給大家分享Vue中ElementUI結(jié)合transform使用時(shí)彈框定位不準(zhǔn)確解決方法,感興趣的朋友一起看看吧2024-01-01
使用Vue3新特性構(gòu)建動(dòng)態(tài)表單的方法詳解
傳統(tǒng)的表單開(kāi)發(fā)通常需要編寫(xiě)大量的重復(fù)代碼,例如處理用戶輸入、驗(yàn)證數(shù)據(jù)、更新 UI 等等,為了簡(jiǎn)化開(kāi)發(fā),我們可以借助 Vue 3 的新特性,例如組合式 API 和 ref 對(duì)象,所以本文我們將一起學(xué)習(xí)如何使用 Vue 3 的新特性構(gòu)建一個(gè)更加靈活、可擴(kuò)展的動(dòng)態(tài)表單2024-06-06
vue 設(shè)置 input 為不可以編輯的實(shí)現(xiàn)方法
今天小編就為大家分享一篇vue 設(shè)置 input 為不可以編輯的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
vue3中ace-editor的簡(jiǎn)單使用方法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3中ace-editor簡(jiǎn)單使用的相關(guān)資料,ace-editor是一種代碼編輯器,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-10-10
webpack項(xiàng)目調(diào)試以及獨(dú)立打包配置文件的方法
下面小編就為大家分享一篇webpack項(xiàng)目調(diào)試以及獨(dú)立打包配置文件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue?element修改el-select控件長(zhǎng)度style=“width:XXpx“不生效的解決
這篇文章主要介紹了vue?element修改el-select控件長(zhǎng)度style=“width:XXpx“不生效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07