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

喜欢ヅ旅行 2022-05-09 02:33 273阅读 0赞

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

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

### （一）准备阶段 ###

*  1.到百度云官网注册，几秒就可以，这个不需要审核，不像腾讯开发者认证好几天，注册然后登陆
 *  百度云官网：[https://cloud.baidu.com/?from=console][https_cloud.baidu.com_from_console]
 *  2.按照下面截图，产品>人工智能>文字识别，我们找到文字识别：  
    ![70 1][]
 *  3.点击【立即使用】：  
    ![70 2][]
 *  4.然后点击【创建应用】，填写名称，描述，非常快，不需要审核
 *  5.这里我们主要是为了得到 API Key 和 Secret Key  
    ![70 3][]

### （二）生成签名 ###

*  这里不必按照官方文档写的用服务器去发请求，设置一堆请求头
 *  直接将下面地址替换自己刚才的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；
 *  **【注意】：第二行可能还有，这个要拷贝下来，存起来备用**  
    ![在这里插入图片描述][70 4]
 *  温馨提示：Access Token的有效期为30天（以秒为单位），请您集成时注意在程序中定期请求新的token

### 在 HBuilder 搭建 mui 项目 ###

*  如果你还没有在 HBuilder 配置 php 服务器，请参考：[HBuilder+wampserver配置PHP外置web服务器][HBuilder_wampserver_PHP_web]
 *  在 HBuilder 【新建】>【移动app】>【模板选择含MUI的模板】
 *  打开 index.html 文件
 *  新建目录命名PHP，新建 test.php 文件，在目录下再新建 img 目录
 *  **【特别注意】：新手的话你要知道请求 php 服务器，是绝对不允许通过什么 …/ 返回上级目录，下级目录访问的，因为php 服务器的端口和你 HTML web 服务器是不一样的，我就别这个坑过，要是想在感觉上实现前后端分离，也可以创建一个新的项目，这里没必要因为只有一个 php 文件**
 *   *  现在我们有了下面目录了  
        ![在这里插入图片描述][70 5]
 *  打开 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查看 截图：**  
    ![在这里插入图片描述][70 6]
 *  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>
    			
    			<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_-07-HBuilder_]

### 更多文章链接：[MUI 框架][MUI] ###

--------------------

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

[70]: /images/20220509/4b5d9fc9b3ab4908beaffd56babc18ab.png
[https_cloud.baidu.com_from_console]: https://cloud.baidu.com/?from=console
[70 1]: /images/20220509/b1adbb4bcd2345ac9f3d2c39e2e7f9a3.png
[70 2]: /images/20220509/b9ffc8523452406eb4efe8d94505f734.png
[70 3]: /images/20220509/9a09ddbf1fbe412abcf62d4f491447ee.png
[70 4]: /images/20220509/1705d7e55c564222997afc5ea3bdb607.png
[HBuilder_wampserver_PHP_web]: https://blog.csdn.net/qq_40147863/article/details/81356662
[70 5]: /images/20220509/8e8fa5f298534996bbcea2549d25187e.png
[70 6]: /images/20220509/3d7da76b64d14ca59b9f040b11b6378f.png
[MUI_-07-HBuilder_]: https://blog.csdn.net/qq_40147863/article/details/82842959
[MUI]: https://blog.csdn.net/qq_40147863/article/category/8079041