图文详解vue中proto文件的函数调用

//进入proto文件夹执行下列编译，将helloworld.proto替换为当前的.proto文件名protoc -I=. helloworld.proto /    --js_out=import_style=commonjs,binary:. /    --grpc-web_out=import_style=commonjs,mode=grpcwebtext:.

service Greeter{  rpc AddEmployee(Employee) returns (EmployeeID) {} // 提交员工信息一元消息}//发送请求的数据类型结构message Employee{  string name = 1;  int32  age = 2;}//返回函数处理结果的类型结构message EmployeeID{  int32 id = 1;}

<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());  //  打印返回的信息        }    });},

rpc SelectAllCameras(SelectAllCamerasRequest) returns(SelectAllCamerasResponse){}// 查询所有摄像机设备message SelectAllCamerasRequest{  int32     page_index = 1;  int32     page_size = 2;  string    condition = 3;}//返回查询结果，返回一个CameraInfo 的数组，CameraInfo 中又包含枚举类型CameraBrandmessage SelectAllCamerasResponse{  CodeErr   enumErrorNo = 1;  repeated    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;}

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, 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;  //求取页码总数         this.caminfoTable = caminfoList;  //将返回结果赋值给table数据表变量     }   });   //调整页码的显示为第一页   this.Pagination_queryInfo.page_index=1; },