圖文詳解vue中proto文件的函數(shù)調(diào)用

更新時(shí)間：2021年08月03日 10:29:27 作者：Nie2014

這篇文章主要給大家介紹了vue中proto文件函數(shù)調(diào)用的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

1、編譯proto

在src文件夾下新建proto文件夾用以存放所有的.proto文件。在proto文件夾下打開終端，輸入如下命令：

//進(jìn)入proto文件夾執(zhí)行下列編譯，將helloworld.proto替換為當(dāng)前的.proto文件名
protoc -I=. helloworld.proto \
    --js_out=import_style=commonjs,binary:. \
    --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

一個(gè).proto文件（helloworld.proto）編譯后生成2個(gè)js文件：

helloworld_pb.js
helloworld_grpc_web_pb.js

2、編譯后的proto文件中變量及函數(shù)

.proto中函數(shù)的結(jié)構(gòu)，主要由函數(shù)及參數(shù)2部分組成：

service Greeter
{
  rpc AddEmployee(Employee) returns (EmployeeID) {} // 提交員工信息一元消息
}
//發(fā)送請(qǐng)求的數(shù)據(jù)類型結(jié)構(gòu)
message Employee
{
  string name = 1;
  int32  age = 2;
}
//返回函數(shù)處理結(jié)果的類型結(jié)構(gòu)
message EmployeeID
{
  int32 id = 1;
}

函數(shù)部分

編譯之后，名稱為“service Greeter”的服務(wù)及函數(shù)AddEmployee的定義在helloworld_grpc_web_pb.js文件中：

參數(shù)部分

Employee及EmployeeID的參數(shù)定義在helloworld_pb.js中：

1、發(fā)送請(qǐng)求的參數(shù)Employee

Employee的第一個(gè)參數(shù)name 函數(shù)形式如下（此處是請(qǐng)求參數(shù)，使用set格式）：

Employee的第二個(gè)參數(shù)age函數(shù)形式如下（此處是請(qǐng)求參數(shù)，使用set格式）：

2、返回結(jié)果參數(shù)EmployeeID

EmployeeID返回結(jié)果只有id這一個(gè)參數(shù)，函數(shù)結(jié)構(gòu)如下（此處是返回參數(shù)，使用get格式）：

調(diào)用proto中的函數(shù)

一個(gè)簡單的調(diào)用示例如下（點(diǎn)擊button按鈕，產(chǎn)生一個(gè)單擊事件get_helloworld）：

<el-button type="primary" @click="get_helloworld">
    hello_world
</el-button>

get_helloworld() {
    this.client = new GreeterClient("http://192.168.10.102:8181", null, null);

    // 創(chuàng)建請(qǐng)求參數(shù)并賦值
    var request = new Employee();
    request.setName("World");
    request.setAge(11);
    //  調(diào)用客戶端相應(yīng)的grpc方法，發(fā)送grpc請(qǐng)求，并接受后臺(tái)發(fā)送回來的返回值
    this.client.addEmployee(request, {"my-service-header": "test_service"}, (err, response) => {
        if (err) {
            console.log(
                `Unexpected error for addEmployee: code = ${err.code}` +
                `, message = "${err.message}"`
            );
        } else {  
            console.log(response.getId());  //  打印返回的信息
        }
    });
},

此時(shí)可以在控制臺(tái)中看到夠返回的ID數(shù)值。

將返回結(jié)果顯示在界面中

函數(shù)的返回結(jié)果都要以合適的形式展示在界面的控件中，此處以：

1、table控件

table控件是使用比較頻繁的數(shù)據(jù)展示控件，此處示例proto代碼如下（返回列表數(shù)據(jù)格式，且包含枚舉變量）：

rpc SelectAllCameras(SelectAllCamerasRequest) returns(SelectAllCamerasResponse){}
// 查詢所有攝像機(jī)設(shè)備
message SelectAllCamerasRequest{
  int32     page_index = 1;
  int32     page_size = 2;
  string    condition = 3;
}
//返回查詢結(jié)果，返回一個(gè)CameraInfo 的數(shù)組，CameraInfo 中又包含枚舉類型CameraBrand
message SelectAllCamerasResponse{
  CodeErr   enumErrorNo = 1;
  repeated    CameraInfo cameraArray = 2;
}
// 攝像機(jī)信息
message CameraInfo{
  string            szCameraUID         = 1; // uid
  string            szName			        =	2; // 名稱 東門口攝像機(jī)
  CameraBrand       enumCameraBrand			=	3; // 品牌
}
// 攝像機(jī)品牌
enum CameraBrand {
  DEFAULT_CAMERA_BRAND       = 0;
  HIKI_VISION                = 1;
  DAHUA                      = 2;
  UNIVIEW                    = 3;
}

1、導(dǎo)入頭文件

import { device_register_serviceClient } from "../proto/device_manage_grpc_web_pb";
import { SelectAllCamerasRequest,} from "../proto/device_manage_pb";

 <el-table :data="caminfoTable"  ref="caminfoTable" >
   <el-table-column type="index" :index="table_index" align="center" label="序號(hào)" width="50"></el-table-column>
   <el-table-column prop="UID" label="UID" width="220" align="center">
     <template slot-scope="scope">
       <span>{{scope.row.getSzcamerauid()}}</span>
     </template>
   </el-table-column>
   <el-table-column prop="szName" label="相機(jī)名" width="150" align="center">
     <template slot-scope="scope">
       <span>{{scope.row.getSzname()}}</span>
     </template>
   </el-table-column>
   <el-table-column prop="enumCameraBrand" label="相機(jī)品牌" width="120" align="center">
     <template slot-scope="scope">
       <span>{{CameraBrand[scope.row.getEnumcamerabrand()].label}}</span>
     </template>
   </el-table-column>
</el-table>

//將返回結(jié)果賦值給一個(gè)數(shù)組變量
caminfoTable:[],
//攝像機(jī)品牌,這里的CameraBrand是用在添加相機(jī)信息時(shí)，下拉框選項(xiàng)內(nèi)容的填充，此處也用來顯示具體數(shù)據(jù)
CameraBrand: [
  {value:0, label:"默認(rèn)"},
  { value: 1, label: "海*" },
  { value: 2, label: "大*" },
  { value: 3, label: "宇*" },
],

//獲取相機(jī)設(shè)備的信息
get_camerainfo_data(){
   this.client = new device_register_serviceClient("http://192.168.10.102:8181", null, null);
   var request_selectallCam = new SelectAllCamerasRequest();
   request_selectallCam.setPageIndex(this.Pagination_queryInfo.page_index);
   request_selectallCam.setPageSize(this.Pagination_queryInfo.per_page);
   this.client.selectAllCameras(request_selectallCam,{"my-service-header": "dev_manage_service"},(err,response)=>{
     if(err){
        console.log(
           `Unexpected error for selectAllCameras: code = ${err.code}` +
             `, message = "${err.message}"`
         );
     }else{
         var caminfoList = response.getCameraarrayList();
         this.Pagination_total_pages=caminfoList.length;  //求取頁碼總數(shù)
         this.caminfoTable = caminfoList;  //將返回結(jié)果賦值給table數(shù)據(jù)表變量
     }
   });
   //調(diào)整頁碼的顯示為第一頁
   this.Pagination_queryInfo.page_index=1;
 },