Vue の proto ファイルの関数呼び出しのグラフィカルな説明

//proto フォルダーに入り、helloworld.proto を現在の .proto ファイル名に置き換えて次のコンパイルを実行します。protoc -I=. helloworld.proto \
    --js_out=import_style=commonjs、バイナリ:。\
    --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

サービスグリーター
{
  rpc AddEmployee(Employee) は (EmployeeID) を返します {} // 従業員情報の単項メッセージを送信します}
//送信要求データ型構造メッセージ従業員
{
  文字列名 = 1;
  int32 年齢 = 2;
}
//関数処理結果メッセージのEmployeeIDの型構造を返す
{
  int32 id = 1;
}

<el-button type="primary" @click="get_helloworld">
    こんにちは世界
</el-button>

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

    // リクエストパラメータを作成し、値を割り当てます var request = new Employee();
    リクエストの名前を設定します。
    リクエスト.setAge(11);
    // クライアントの対応する grpc メソッドを呼び出し、grpc リクエストを送信し、バックエンドから返された戻り値を受信します。this.client.addEmployee(request, {"my-service-header": "test_service"}, (err, response) => {
        もし（エラー）{
            コンソール.log(
                `addEmployee の予期しないエラー: code = ${err.code}` +
                `、メッセージ = "${err.message}"`
            );
        } それ以外 {  
            console.log(response.getId()); // 返された情報を出力します}
    });
},

rpc SelectAllCameras(SelectAllCamerasRequest) は (SelectAllCamerasResponse) を返します{}
// すべてのカメラデバイスを照会するメッセージ SelectAllCamerasRequest{
  int32 ページインデックス = 1;
  int32 ページサイズ = 2;
  文字列条件 = 3;
}
//クエリ結果を返し、列挙型CameraBrandを含むCameraInfoの配列を返します
メッセージSelectAllCamerasResponse{
  CodeErr列挙エラー番号 = 1;
  繰り返し CameraInfo cameraArray = 2;
}
// カメラ情報メッセージ CameraInfo{
  文字列 szCameraUID = 1; // uid
  string szName = 2; // 名前 Dongmenkou Camera CameraBrand enumCameraBrand = 3; // ブランド}
// カメラブランド enum CameraBrand {
  デフォルト_カメラ_ブランド = 0;
  HIKI_VISION = 1;
  大化 = 2;
  ユニビュー = 3;
}

「../proto/device_manage_grpc_web_pb」から{ device_register_serviceClient }をインポートします。
「../proto/device_manage_pb」から {SelectAllCamerasRequest,} をインポートします。

 <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">
     <テンプレート スロット スコープ="スコープ">
       <span>{{scope.row.getSzcamerauid()}}</span>
     </テンプレート>
   </el-table-column>
   <el-table-column prop="szName" label="カメラ名" width="150" align="center">
     <テンプレート スロット スコープ="スコープ">
       <span>{{scope.row.getSzname()}}</span>
     </テンプレート>
   </el-table-column>
   <el-table-column prop="enumCameraBrand" label="カメラブランド" width="120" align="center">
     <テンプレート スロット スコープ="スコープ">
       <span>{{カメラブランド[scope.row.getEnumcamerabrand()].label}}</span>
     </テンプレート>
   </el-table-column>
</el-table>

//返された結果を配列変数caminfoTable:[]に代入します。
// カメラのブランド。ここでの CameraBrand は、カメラ情報を追加するときにドロップダウン ボックスのオプションを入力するために使用され、特定のデータを表示するためにも使用されます。CameraBrand: [
  {値:0、ラベル:"デフォルト"},
  { 値: 1、ラベル: "sea*" },
  { 値: 2、ラベル: "Big*" },
  { 値: 3, ラベル: "宇*" },
]、

//カメラデバイスの情報を取得する get_camerainfo_data(){
   this.client = 新しい device_register_serviceClient("http://192.168.10.102:8181", null, null);
   var request_selectallCam = 新しい 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)=>{
     もしエラーが起きたら
        コンソール.log(
           `selectAllCameras の予期しないエラー: code = ${err.code}` +
             `、メッセージ = "${err.message}"`
         );
     }それ以外{
         var caminfoList = response.getCameraarrayList();
         this.Pagination_total_pages = caminfoList.length; // ページの総数を取得します this.caminfoTable = caminfoList; // 返された結果をテーブルデータテーブル変数に割り当てます}
   });
   //最初のページが表示されるようにページ番号を調整します this.Pagination_queryInfo.page_index=1;
 },