MUI框架-11-MUI前端 +php後臺接入百度文字識別API

時間 2019-11-17

標籤 mui 框架前端 php 後臺百度文字識別 api 欄目 PHP 简体版

原文原文鏈接

MUI框架-11-MUI前端 +php後臺接入百度文字識別API

這裏後臺不止一種，Python，Java，PHP，Node，C++，C# 均可以
這裏使用的是 php 來介紹，已經解決全部問題，由於處理不少錯誤，可能會比較複雜，請你們堅持按步驟來，
大概流程就是：前端發送 Ajax 請求，php 後臺實現文字識別，並將識別後的文字返回到前端頁面
先放上效果圖：

（一）準備階段

1.到百度雲官網註冊，幾秒就能夠，這個不須要審覈，不像騰訊開發者認證好幾天，註冊而後登錄
百度雲官網：https://cloud.baidu.com/?from=console
2.按照下面截圖，產品>人工智能>文字識別，咱們找到文字識別：
3.點擊【當即使用】：
4.而後點擊【建立應用】，填寫名稱，描述，很是快，不須要審覈
5.這裏咱們主要是爲了獲得 API Key 和 Secret Key

（二）生成簽名

這裏沒必要按照官方文檔寫的用服務器去發請求，設置一堆請求頭
直接將下面地址替換本身剛纔的API Key 和 Secret Key，而後打開瀏覽器訪問：

https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【官網獲取的AK】&client_secret=【官網獲取的SK】

而後會返回 json 格式的數據，access_token：要獲取的Access Token；
【注意】：第二行可能還有，這個要拷貝下來，存起來備用
舒適提示：Access Token的有效期爲30天（以秒爲單位），請您集成時注意在程序中按期請求新的token

在 HBuilder 搭建 mui 項目

若是你尚未在 HBuilder 配置 php 服務器，請參考：HBuilder+wampserver配置PHP外置web服務器
在 HBuilder 【新建】>【移動app】>【模板選擇含MUI的模板】
打開 index.html 文件
新建目錄命名PHP，新建 test.php 文件，在目錄下再新建 img 目錄
【特別注意】：新手的話你要知道請求 php 服務器，是絕對不容許經過什麼 ../ 返回上級目錄，下級目錄訪問的，由於php 服務器的端口和你 HTML web 服務器是不同的，我就別這個坑過，要是想在感受上實現先後端分離，也能夠建立一個新的項目，這裏不必由於只有一個 php 文件
- 如今咱們有了下面目錄了
打開 test.php 粘貼下面代碼
1.替換本身從瀏覽器獲取的access_token，2.替換本身圖片路徑：
test.php 文件代碼：

<?php
/**
 * 發起http post請求(REST API), 並獲取REST請求的結果
 * @param string $url
 * @param string $param
 * @return - http response body if succeeds, else false.
 * 
 */

 function request_post($url = '', $param = '')
{
    if (empty($url) || empty($param)) {
        return false;
    }

    $postUrl = $url;
    $curlPost = $param;
    // 初始化curl
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $postUrl);
    curl_setopt($curl, CURLOPT_HEADER, 0);
    // 要求結果爲字符串且輸出到屏幕上
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    // post提交方式
    curl_setopt($curl, CURLOPT_POST, 1);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $curlPost);
    // 運行curl
    $data = curl_exec($curl);
    curl_close($curl);

    return $data;
}

//替換本身從瀏覽器獲取的access_token 
$url = 'https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic?access_token=【本身的access_token】';

//圖片只能是本題圖片，替換本身的圖片
$img = file_get_contents('img/chi1.jpg');
$img = base64_encode($img);
$bodys = array(
    "image" => $img
);
$res = request_post($url, $bodys);

echo $res;
//var_dump($res);

?>

而後咱們就能夠寫前端頁面了，打開 index.html，粘貼下面代碼：
替換本身 test.php 文件在 web 瀏覽器的路徑，而後把本機127.0.0.1替換成 ipv4地址，cmd 輸入ipv4查看截圖：
index.html 文件代碼

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title></title>
        <script src="js/mui.min.js"></script>
        <link href="css/mui.min.css" rel="stylesheet" />
        <script type="text/javascript" charset="utf-8">
            mui.init();
        </script>
    </head>

    <body>
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">百度文字識別</h1>
        </header>
        <div class="mui-content">
            <br>
            <button id="queren" type="button" style="background-color: brown;color: #eeeeee;">發送請求</button>
            <!--空的h2 用來存放返回的數據-->
            <hr>
            <p id="res" style="font-size: larger;"> </p>
        </div>
        
        

        <!--處理請求-->
        <script type="text/javascript">
            var upload = function(c, d) {
                "use strict";
                var $c = document.querySelector(c),
                    $d = document.querySelector(d),
                    file = $c.files[0],
                    //預覽框
                    reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function(e) {
                    $d.setAttribute("src", e.target.result);
                };
            };

            var btn = document.getElementById("queren");
            //監聽點擊事件
            btn.addEventListener("tap", function() {
                //ajax
                
                //替換本身 test.php 文件在 web 瀏覽器的路徑
                //用本身的 ipv4 地址，cmd 獲取ipconfig 獲取 
                mui.ajax('http://10.160.62.75/myphp/mui/php/test.php', {

                    dataType: 'json', //服務器返回json格式數據
                    type: 'get', //HTTP請求類型
                    timeout: 10000, //超時時間設置爲10秒；
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    success: function(data) {
                        //服務器返回響應，根據響應結果，分析是否登陸成功；
                        
                        //這裏要對本身的數據進行處理
                        var html = " ";
                        for(var i = 0; i < data.words_result_num; i++){
 
                          html = html + data.words_result[i].words;
                         
                        };
                         
                        console.log(html)
                        document.getElementById("res").innerHTML = html;

                    },
                    error: function(xhr, type, errorThrown) {
                        //異常處理；
                        console.log(type);
                    }
                });
            });
            //觸發submit按鈕的點擊事件

            mui.trigger(btn, 'tap');
        </script>

    </body>

</html>