MUI框架-11-MUI前端 + 後臺接入百度文字識別API
阿新 • • 發佈：2018-12-12
MUI框架-11-MUI前端 +php後臺接入百度文字識別API
- 這裡後臺不止一種，Python，Java，PHP，Node，C++，C# 都可以
- 這裡使用的是 php 來介紹，已經解決所有問題，因為處理很多錯誤，可能會比較複雜，請大家堅持按步驟來，
- 大概流程就是：前端傳送 Ajax 請求，php 後臺實現文字識別，並將識別後的文字返回到前端頁面
- 先放上效果圖：
（一）準備階段
- 1.到百度雲官網註冊，幾秒就可以，這個不需要稽核，不像騰訊開發者認證好幾天，註冊然後登陸
- 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 【新建】>【移動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>