vue 中 proto文件的函数调用

最新推荐文章于 2024-09-07 23:12:44 发布

Nie2014

最新推荐文章于 2024-09-07 23:12:44 发布

阅读量862

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Nie2014/article/details/119321700

版权

本文介绍了如何在Vue项目中编译proto文件，并详细解析了编译后的函数结构和参数部分。通过示例展示了如何调用proto中的函数，以及将返回结果在界面table控件中进行展示，特别指出在处理返回参数时的get格式用法。

摘要由CSDN通过智能技术生成

1、编译proto

在src文件夹下新建proto文件夹用以存放所有的.proto文件。在proto文件夹下打开终端，输入如下命令：

//进入proto文件夹执行下列编译，将helloworld.proto替换为当前的.proto文件名
protoc -I=. helloworld.proto \
    --js_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()<