MUI框架-11-MUI前端 +php后台接入百度文字识别API
2019-11-29

MUI框架-11-MUI前端 +php后台接入百度文字识别API

这里后台不止一种,Python,Java,PHP,Node,C++,C# 都可以这里使用的是 php 来介绍,已经解决所有问题,因为处理很多错误,可能会比较复杂,请大家坚持按步骤来,大概流程就是:前端发送 Ajax 请求,php 后台实现文字识别,并将识别后的文字返回到前端页面先放上效果图:

(一)准备阶段

1.到百度云官网注册,几秒就可以,这个不需要审核,不像腾讯开发者认证好几天,注册然后登陆百度云官网:https://cloud.baidu.com/?from=console2.按照下面截图,产品>人工智能>文字识别,我们找到文字识别: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 > <a ></a> <h1 >百度文字识别</h1> </header> <div > <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 框架


本笔记不允许任何个人和组织转载