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

API · 發表 2018-09-29 19:35:51

摘要：版權宣告：本文為博主原創文章，禁止轉載。https://blog.csdn.net/qq_40147863/article/details/82901894 MUI框架-11-MUI前端 +php後臺接入百度文字識別API 這裡後臺不止一種...

版權宣告：本文為博主原創文章，禁止轉載。https://blog.csdn.net/qq_40147863/article/details/82901894

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

這裡後臺不止一種，Python，Java，PHP，Node，C++，C# 都可以
這裡使用的是 php 來介紹，已經解決所有問題，因為處理很多錯誤，可能會比較複雜，請大家堅持按步驟來，
大概流程就是：前端傳送 Ajax 請求，php 後臺實現文字識別，並將識別後的文字返回到前端頁面
先放上效果圖：

（一）準備階段

1.到百度雲官網註冊，幾秒就可以，這個不需要稽核，不像騰訊開發者認證好幾天，註冊然後登陸
百度雲官網：ofollow,noindex" target="_blank">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 框架

- 本筆記不允許任何個人和組織轉載