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>
運行
- 【注意】：只能在安卓手機或者模擬器運行才，app 前端頁面才有效
- 關於模擬器：MUI框架-07-HBuilder+夜神安卓模擬器 配置
更多文章鏈接：MUI 框架
- 本筆記不允許任何個人和組織轉載