1、編譯proto

在src資料夾下新建proto資料夾用以存放所有的.proto檔案。在proto資料夾下開啟終端，輸入如下命令：

//進入proto資料夾執行下列編譯，將hellowowww.cppcns.comrld.proto替換為當前的.proto檔名
protoc -I=. helloworld.proto \
    --_out=import_style=commonjs,binary:. \
    --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

一個.proto檔案（helloworld.proto）編譯後生成2個js檔案：

• helloworld_pb.js
• helloworld_grpc_web_pb.js

2、編譯後的proto檔案中變數及函式

.proto中函式的結構，主要由函式及引數2部分組成：

service Greeter
{
  rpc AddEmployee(Employee) returns (EmployeeID) {} // 提交員工資訊一元訊息
}
//傳送請求的資料型別結構
message Employee
{
  string name = 1;
  int32  age = 2;
}
//返回函式處理結果的型別結構
message EmployeeID
{
  int32 id = 1;
}

函式部分

編譯之後，名稱為“service Greeter”的服務及函式AddEmployee的定義在helloworld_grpc_web_pb.js檔案中：

引數部分

Employee及EmployeeID的引數定義在helloworld_pb.js中：

1、傳送請求的引數Employee

Employee的第一個引數name 函式形式如下（此處是請求引數，使用set格式）：

Employee的第二個引數age函式形式如下（此處是請求引數，使用set格式）：

2、返回結果引數EmployeeID

EmployeeID返回結果只有id這一個引數，函式結構如下（此處是返回引數，使用get格式）：

呼叫proto中的函式

一個簡單的呼叫示例如下（點選button按鈕，產生一個單擊事件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);

    // 建立請求引數並賦值
    var request = new Employee();
    request.setName("World");
    request.setAge(11);
    //  呼叫客戶端相應的grpc方法，傳送grpc請求，並接受後臺傳送回來的返回值
    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());  //  列印返回的資訊
        }
    });
},

此時可以在控制檯中看到夠返回的ID數值。

將返回結果顯示在介面中

函式的返回結果都要以合適的形式展示在介面的控制元件中，此處以：

1、table控制元件

table控制元件是使用比較頻繁的資料展示控制元件，此處示例proto程式碼如下（返回列表資料格式，且包含列舉變數）：

rpc SelectAllCameras(SelectAllCamerasRequest) returns(SelectAllCamerasResponse){}
// 查詢所有攝像機裝置
message SelectAllCamerasRequest{
  int32     page_index = 1;
  int32     page_size = 2;
  string    condition = 3;
}
//返回查詢結果，返回一個CameraInfo 的陣列，CameraInfo 中又包含列舉型別CameraBrand
message SelectAllCawww.cppcns.commerasResponse{
  CodeErr   enumErrorNo = 1;
  repeatehttp://www.cppcns.comd    CameraInfo cameraArray = 2;
}
// 攝像機資訊
message CameraInfo{
  string            szCameraUID         = 1; // uid
  string            szName			        =	2; // 名稱 東門口攝像機
  CameraBrand       enumCameraBrand			=	3; // 品牌
}
// 攝像機品牌
enum CameraBrand {
  DEFAULT_CAMERA_BRAND       = 0;
  HIKI_VISION                = 1;
  DAHUA                      = 2;
  UNIVIEW                    = 3;
}

1、匯入標頭檔案

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="序號" 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="相機名" width="150" align="center">
     <template slot-scope="scope">
       <span>{{scope.row.getSzname()}}</span>
     </template>
   </el-table-column>
   <el-table-column prop="enumCameraBrand" label="相機品牌" width="120" align="center">
     <template slot-scope="scope">
       <span>{{CameraBrand[scope.row.getEnumcamerabrand()].label}}</span>
     </template>
   </el-table-column>
</el-table>

//將返回結果賦值給一個數組變數
caminfoTable:[],//攝像機品牌,這裡的CameraBrand是用在新增相機資訊時，下拉框選項內容的填充，此處也用來顯示具體資料
CameraBrand: [
  {value:0,label:"預設"},{ value: 1,label: "海*" },{ value: 2,label: "大*" },{ value: 3,label: "宇*" },],

//獲取相機裝置的資訊
get_camerainfo_data(){
   this.client = new device_register_serviceClient("http://192.168.10.102:8181",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"},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;  //求取頁碼總數
         this.caminfoTable = caminfoList;  //將返回結果賦值給table資料表變數
     }
   });
   //調整頁碼的顯示為第一頁
   this.Pagination_queryInfo.page_index=1;
 },

總結

到此這篇關於中proto檔案函式呼叫的文章就介紹到這了,更多相關vue proto檔案函式呼叫內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！