Five识图终于结项了--拍照识图

七天的学习、开发，虽然时间只是短短的七天，项目也是简简单单的，甚至可以说是简陋。但是真切的经历过，却恍若隔世。现在记录下来希望我，可以继续的坚持着努力，向着目标前行。

项目启动准备

统一环境

因为我们是团队开发，所以需要统一大家的编程环境，防止出现各种工具版本不兼容的问题。

JDK1.8.5
eclipse4.6
tomcat8.5
HBuilder2.0.1
SVN1.9
axure8.0

需求分析

1. 首先用百度脑图进行技术分解和项目分解。
   

2. 由于我们小组成员是学生，每个人学习的进度不太一样，所以小组内进行技术评定，确定我们小组的能力级别。

3. 选择我们小组要实现的模块。

   app部分
   * 登录界面+登录功能
   * 注册界面+注册功能
   * 拍照\结果显示界面+用手机拍照、相册选择，显示扫描结果功能
   * 功能选择界面+识别果蔬、花草、动物、菜品功能
   * 欢迎页面

   后台部分
   * 登录注册
   * 分析数据、处理数据
   * 与云服务器对接
   * ajax与app对接

前端设计

1. 先用axure设计出五个页面的框架。
2. 我使用HBuilder提供的mui框架¹，简单的实现了五个界面，成员a负责收集图片、矢量图、字体等资源，成员b对细节出做了些许修改。
3. 登录注册添加相应js实现用ajax向后台请求，并返回相应结果。

$("#btn_register").click(function() {
			mui.ajax('http://localhost:8080/AiBdServer5/userController/login.action', {
				data: {
					"username": $("#username").val(),
					"password": $("#password").val()
				},
				type: 'post',
				crossDomain: true,
				success: function(data) {  
					mui.alert("注册成功")
				},
				error: function(xhr, type, errorThrown) {
					console.log(type);
				}
			});
	});

4. 功能选择界面我选择了用九宫格展示功能模块，由于要在拍照界面接收功能选择界面传来的参数,故使用js进行接收与处理。

function setValue(url){
	localStorage.setItem("key","value");
	location.href=url;
}

function getValue(){
	return localStorage.getItem("key");
}

5. 拍照界面button点击后将弹出设定好的选项按钮供调用相机var camera = plus.camera.getCamera();或是调用相册plus.gallery.pick(function(e){}）。
6. 最后再用ajax提交到后端。
7. HBuilder连接手机运行调试的时候，我的充电线经常掉线，我推测是用的太频繁，导致接口有点问题，接触不良，建议连接用单独的线，或者新一点的。

后台设计

1. 首先搭建springMVC的框架，建立service、controller、util、base几个包，分别装相应的类。
2. 在controller中加入一个接收前端图片、调用后台类的AI控制类，一个响应用户登录注册的用户控制类。防止用户直接访问后台，提升安全性。
3. 在service中加入文件处理类，负责将接收到的图片处理，然后再调用相应业务的服务类，并返回业务结果；相应识别业务相应的类，用不同的请求，代码可复用。
4. base中存放各种业务需要访问的url，ak，sk，方便调用。
5. util中则是引用别人封装好的类如base64Util、HttpUtil、FileUilt。

云服务器使用

这次我们选用的是百度云服务的人工智能的图片识别，进入创建你想要的模块以后，直接查阅api文档。
总体流程是，先用TokenService请求token²，然后在相应业务的服务类中使用官方文档中提供的url请求。这里以植物识别为例，需要注意的是：

• 请求URL不能搞错，每一个识别业务都不一样，可以通过前端传参的方法确定调用哪一个业务类
• 注意参数image和baike_num，用&分隔开来。
• 由于我们使用的是HttpUtil类所以只使用了String result = HttpUtil.post(url, accessToken, param);。
• 返回的json值在传回前端的时候要return "{\"json\":"+result+"}"，result不加""，加了会导致多了，解析出错。找了很多个json解析网站，都没有清楚的给我找到错，这个网站比较好用https://jsonlint.com/

获取Access Token
请求URL数据格式
向授权服务地址https://aip.baidubce.com/oauth/2.0/token发送请求（推荐使用POST），并在URL中带上以下参数：
grant_type： 必须参数，固定为client_credentials；
client_id： 必须参数，应用的API Key；
client_secret： 必须参数，应用的Secret Key；

请求示例
HTTP 方法：POST
请求URL： https://aip.baidubce.com/rest/2.0/image-classify/v1/plant
URL参数：
参数值
access_token 通过API Key和Secret Key获取的access_token,参考“Access Token获取”
Header如下：
参数值
Content-Type application/x-www-form-urlencoded

参数名称	是否必选	类型	说明
image	是	string	图像数据，base64编码，要求base64编码后大小不超过4M，最短边至少15px，最长边最大4096px,支持jpg/png/bmp格式。注意：图片需要base64编码、去掉编码头后再进行urlencode。
baike_num	否	integer 0	返回百科信息的结果数，默认不返回

---

1. 可以到mui官方手册查看使用https://dev.dcloud.net.cn/mui/ui/#cardview ↩︎

2. token每30天更一次，可以用文件存储起来，不用每次都去请求。 ↩︎