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>

运行

更多文章链接：MUI 框架

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

MUI框架-11-MUI前端 +php后台接入百度文字识别API的更多相关文章

  1. 关于java后台接入百度地图返回参数为{"status":211,"message":"APP SN校验失败"}的解决方法

    1.关于百度地图,天气预报,微信公众平台等一系列权威机构java接入的认识: a.首先要认识到的是这些信息都属于外部接口,我们在进行接入的时候一定要注意到这些接口的参数设置,稍微一不留神就会出现接入失 ...

  2. 基于MUI框架+HTML5PLUS 开发 iOS和Android 应用程序(APP)

    目录 事前准备 创建项目 利用MUI写一个简单的页面 关于文件打包 事前准备 # 软件 HBuilder X Web开发IDE 下载地址:https://www.dcloud.io/hbuilderx ...

  3. .netcore+vue+elementUI 前后端分离---支持前端、后台业务代码扩展的快速开发框架

    框架采用.NetCore + Vue前后端分离,并且支持前端.后台代码业务动态扩展,框架内置了一套有着20多种属性配置的代码生成器,可灵活配置生成的代码,代码生成器界面配置完成即可生成单表(主表)的增 ...

  4. Vue接入百度地图显示及相关操作

    Vue接入百度地图的API 首先你要有一个百度地图的key就是CK 申请网址:http://lbsyun.baidu.com/index.php?title=jspopular/guide/getke ...

  5. MUI框架-09-MUI 与后台数据交互

    MUI框架-09-MUI 与后台数据交互 本篇介绍使用 art-template 和原生 MUI 的数据交互 mui.ajax 来实现 我们大家都知道,想要数据交互就要有数据,每次当我们发送请求,我们 ...

  6. MUI框架-10-MUI 数据交互-跳转详情页面

    MUI框架-10-MUI 数据交互-跳转详情页面 上一篇介绍了如何实现数据交互,给别人的 API 发送 ajax 请求,我们得到数据,再使用 art-template 模板引擎拼接 HTML,最终实现 ...

  7. 跨平台移动端APP开发---简单高效的MUI框架

    MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...

  8. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP

      前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...

  9. mui框架上下拉加载

    mui框架被定位为“最接近原生体验的移动App的UI框架”. 写下mui框架中常用的两个功能,下拉刷新和上拉加载,没有后台交互,用js写假数据模拟,下面直接上代码. <!DOCTYPE html ...

随机推荐

  1. [转] ELK 之 Logstash

    [From] https://blog.csdn.net/iguyue/article/details/77006201 ELK 之 Logstash 简介: ELK 之 LogstashLogsta ...

  2. pull强制覆盖本地

    今天我总结的是在项目中经常用到的Git命令,上传和下拉文件. 当然在进行上传和下拉操作之前,你首先要做的就是将本地和Git库连接起来. 连接命令: git remote add origin + 你G ...

  3. deepin安装php5.6

    sudo su -echo "deb http://ppa.launchpad.net/ondrej/php/ubuntu xenial main" | tee -a /etc/a ...

  4. DesUtils工具类

    public final class DesUtils { private static final String DES = "DES"; private static fina ...

  5. nginx设置开机自启动

    每次启动nginx服务都需要到安装目录下的/sbin下面,感觉挺麻烦的. 下面介绍一下如何在Linux(CentOS)系统上,设置nginx开机自启动. 1 用脚本管理nginx服务 第一步:在/et ...

  6. Struts2 Validate

    1.自定义action继承ActionSupport 2.复写validate方法,因为ActionSupport实现了Validate这个借口,而这个借口中定义了validate方法 3.当请求时, ...

  7. leetcode:N-Queens 问题

    一.N-QueensII class Solution { public: int totalNQueens(int n) { ; vector<); dfs(,n,total,v); retu ...

  8. An Introduction to Computer Thinking

    1.Die Grundlage des Computers 1.1 Binärzahl in die Dezimalzahl umsetzen Bereiten nach Gewicht,dann b ...

  9. CNN理解与实现

    CNN理解与实现 组成部分 Convolution Layer Pool Layer: Max-pooling layer Average-pooling layer Full Connected(F ...

  10. echart.js 参数解释

    Data参数 获取容器对象 var canvas = document.getElementById("myCanvas"); 渲染 var ctx = canvas.getCon ...