Shulou(Shulou.com)06/01 Report--

This article focuses on "how to use protobuf in Vue". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor learn "how to use protobuf in Vue".

Protobuf is a language-independent, platform-independent, extensible serialized data structure protocol introduced by google, similar to XML, but smaller, faster and simpler than XML. Protobuf supports almost most current languages, such as JavaScript

Install protobufjs

Cnpm I-S protobufjs

Note: the current version of protobufjs is 6.11.2

Create a new proto directory under the project src directory, and put the test.proto file given by the backend into it.

Syntax = "proto3"; / / the first line specifies that the proto3 syntax is being used: if you don't specify this, the compiler will use proto2. The specified syntax line must be the first line of the non-empty, non-comment file message Address {string province = 1; string city = 2; string county = 3;}

Open a dos window and execute the following command to convert the proto file to a js file. Execute for about 15 seconds. After successful execution, the proto.js file will be created in the src/proto folder.

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

Note: the-w parameter specifies the wrapper that packages the js, which is commonjs. The .proto file can generate not only js files, but also json files. It is usually easier to package as a js module, because vue is packaged in a production environment with only files such as html,css,js. The command to generate the json file is:

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

Introduce proto.js:

Import protoRoot from "@ / proto/proto.js"

First print to see the protoRoot content:

Basic use:

Mainimport protoRoot from "@ / proto/proto.js"; export default {data () {return {};}, mounted () {let testobj = protoRoot.lookup ("Address"). Create (); testobj.province = "Sichuan Province"; testobj.city = "Chengdu"; testobj.county = "China"; console.log ("testobj:", testobj) / / encode data let testObjBuffer = protoRoot.lookup ("Address") .encode (testobj). Finish (); console.log ("testObjBuffer:", testObjBuffer); / / decode data let testdata = protoRoot.lookup ("Address") .decode (testObjBuffer); console.log ("testdata:", testdata);},}

For future convenience, we can add commands to the script of package.json:

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

After updating the proto file later, only npm run proto is needed to regenerate the latest proto.js

When initiating a request using axios, you need to be careful to set the request type of axios to use arraybuffer:

Import axios from 'axios'const httpService = axios.create ({timeout: 45000, method:' post', headers: {'Xmurf Requestedwishful:' XMLHttpRequest', 'Content-Type':' application/octet-stream'}, responseType: 'arraybuffer'}) so far, I believe you have a better understanding of "how to use protobuf in Vue". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.