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()<