美文网首页
ionic3 百度AI 探索

ionic3 百度AI 探索

作者: 夜风SAI | 来源:发表于2018-12-02 11:19 被阅读20次

    前言

    最近好久都没写简书了,今天抽空更新一下简书,不知道还有没有人记得我哈~
    以自然语言为例,一步一步照着我的做吧

    创建应用

    在百度AI创建一个开发者账号,并创建一个应用就可以了。我们可以在控制台直接获取API KeySecret Key

    控制台

    token获取

    百度AI文档地址
    token是通过你的API KeySecret Key自动生成的,通过token,接口可以确认我们的身份,所以我们首先生成token吧。这里我用的是nodejs,直接上代码:

    //获取token
    var https = require('https');
    var qs = require('querystring');
    
    const param = qs.stringify({
        'grant_type': 'client_credentials',
        'client_id': '您的 Api Key',
        'client_secret': '您的 Secret Key'
    });
    
    https.get(
        {
            hostname: 'aip.baidubce.com',
            path: '/oauth/2.0/token?' + param,
            agent: false
        },
        function (res) {
            // 在标准输出中查看运行结果
            res.pipe(process.stdout);
        }
    );
    

    完成之后在命令行里直接复制token保存下来就行了

    发起请求

    某些细节在官方文档没有提及,特别是刚接触Ionic3的同学来说。所以我这里写了个示例:
    xx.html

    //text为你所想发送的数据
    <button ion-button (click)="post(' 你好,世界')">发送</button>
    

    xx.ts

    //还有一些其他的已省略
    import { HttpClient } from '@angular/common/http';
    
    export class AiPage {
        basicUrl: string = '/rpc/2.0/nlp/v1/depparser?charset=UTF-8&access_token=';
        token:string='你的token';
        constructor(public http: HttpClient) {}
        post(text) {
            var url=this.basicUrl+this.token;
            var body={
                "text":text
            }
            var options={
                headers:{
                    'Content-Type':'application/json',
                },
            }
            this.http.post(url,body,options).subscribe(data => {
                console.log(data);
            })
        }
    }
    

    跨域问题

    老生常谈,这里我就不解释为什么会有跨域问题了,我只告诉你怎么解决。在ionic.config.json里面配置代理即可

    {
        "name": "AI",
        "integrations": {},
        "type": "ionic-angular",
        "proxies": [
            {
                "path": "/rpc",
                "proxyUrl": "https://aip.baidubce.com/rpc"
            }
        ]
    }
    

    效果预览

    效果预览

    结语

    还有不懂的同学可以访问我的Github,好了,今天就到这里了。

    相关文章

      网友评论

          本文标题:ionic3 百度AI 探索

          本文链接:https://www.haomeiwen.com/subject/tbqjcqtx.html