uni-app实战教程-----H5移动app以及小程序(四)---前后端编写，交互，百度图像识别接入

矫情吗；* 2023-01-10 13:30 94阅读 0赞

> 创建项目已经完成了  
> qq交流群 974178910  
> 最终效果体验  
> [http://dadandmother.cn/stt/][http_dadandmother.cn_stt]
> 
> 这节课我们来讲下 页面跳转以及底部选项  
> 开发工具: Hbuilder X  
> 完整代码已上传github [https://github.com/dmhsq/image-recognition-flask-uniapp][https_github.com_dmhsq_image-recognition-flask-uniapp]  
> bilibili教程视频 [https://www.bilibili.com/video/BV1R5411H7r2/][https_www.bilibili.com_video_BV1R5411H7r2]  
> 底部有视频教程

### 前后端编写，交互，百度图像识别接入 ###

*  百度图像识别接入
 *  编写后端
 *   *  编写api文件
     *  编写flask程序
 *  编写前端
 *  测试
 *  教学视频

# 百度图像识别接入 #

百度ai开放平台 [http://ai.baidu.com/][http_ai.baidu.com]  
![在这里插入图片描述][20210124172043577.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]  
创建应用 选择个人就好  
在应用列表获取  
![在这里插入图片描述][20210124172354813.png]记得这几个值

查看文档 [https://cloud.baidu.com/doc/IMAGERECOGNITION/s/vk3bcxiu2][https_cloud.baidu.com_doc_IMAGERECOGNITION_s_vk3bcxiu2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]  
根据文档 我们编写后端

# 编写后端 #

安装 baidu-aip  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]  
同理安装flask

## 编写api文件 ##

![在这里插入图片描述][20210124173522272.png]  
参数说明 type为1时 动物识别 为2时植物识别 image是读取图片文件的结果 file.read()

from aip import AipImageClassify
    
    """ 你的 APPID AK SK """
    APP_ID = '你的 App ID'
    API_KEY = '你的 Api Key'
    SECRET_KEY = '你的 Secret Key'
    
    client = AipImageClassify(APP_ID, API_KEY, SECRET_KEY)
    
    
    def delImg(type,image):
        if(type==1):
            return __animal(image)
        if(type==2):
            return __plant(image)
    
    
    """ 调用动物识别 """
    def __animal(image):
        return client.animalDetect(image)
    
    
    """ 调用植物识别 """
    def __plant(image):
        return client.plantDetect(image)

## 编写flask程序 ##

![在这里插入图片描述][20210124173726754.png]

from flask import Flask,request
    import os,json
    from md5random import sjs
    from ourApi import delImg
    
    app = Flask(__name__)
    
    @app.route("/file",methods=['POST'])
    def test():
        get_image = request.files['file']
        dst = sjs();
        get_image.save(dst)
        cont = ""
        with open(dst,'rb') as file:
            cont = file.read();
        os.remove(dst)
        return json.dumps(delImg(1,cont))
    
    if __name__ == '__main__':
        app.run(host='0.0.0.0',port=8087)

md5random说明 ：是一个随机字符串生成器

import random
    import hashlib
    def sjs():
        a = random.randint(0, 100)
        a = "a" + str(a);
        b = random.randint(100, 10000);
        b = "b" + str(b);
        c = hashlib.md5(a.encode(encoding='UTF-8')).hexdigest() + hashlib.md5(b.encode(encoding='UTF-8')).hexdigest();
        c = "c" + str(c);
        d = random.randint(10, 100);
        d = "d" + str(d);
        e = hashlib.md5(c.encode(encoding='UTF-8')).hexdigest() + hashlib.md5(d.encode(encoding='UTF-8')).hexdigest();
        e = hashlib.md5(e.encode(encoding='UTF-8')).hexdigest()
        return e;

运行我们的our\_app文件启动服务  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]

# 编写前端 #

说明  
先选择图片 再上传图片  
uniapp官方文档 api  
选择图片 [https://uniapp.dcloud.io/api/media/image?id=chooseimage][https_uniapp.dcloud.io_api_media_image_id_chooseimage]  
上传文件 [https://uniapp.dcloud.io/api/request/network-file][https_uniapp.dcloud.io_api_request_network-file]

imgSrc 图片路径

<template>
    	<view class="content">
    		<image class="logo" :src="imgSrc" @click="goTest()"></image>
    		<view class="text-area">
    			<text class="title">{
       {title}}</text> 
    		</view>
    	</view> 
    </template>
    
    <script> export default { data() { return { title: 'Hello', imgSrc: '/static/logo.png' } }, onLoad() { }, methods: { goTest(){ let vm =this; uni.chooseImage({ count: 1, success: function (res) { vm.imgSrc = res.tempFilePaths[0]; uni.uploadFile({ url:'http://localhost:8087/file', filePath:res.tempFilePaths[0], name:'file', formData:{ 'type':1 }, success:function(ress){ console.log(ress) } }) } }); } } } </script>
    
    <style> .content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo { height: 200rpx; width: 200rpx; margin-top: 200rpx; margin-left: auto; margin-right: auto; margin-bottom: 50rpx; } .text-area { display: flex; justify-content: center; } .title { font-size: 36rpx; color: #8f8f94; } </style>

# 测试 #

![在这里插入图片描述][20210124174550800.gif]  
成功

# 教学视频 #

uniapp开发教程-P3-前后端编写，交互，百度图像识别接入

>   大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！博客主页：[https://blog.csdn.net/qq\_42027681][https_blog.csdn.net_qq_42027681]。  
> 腾讯云+社区专栏[https://cloud.tencent.com/developer/column/90853][https_cloud.tencent.com_developer_column_90853]

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

后续会推出

前端：vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 1] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]

有问题可以下方留言，看到了会回复哦

[http_dadandmother.cn_stt]: http://dadandmother.cn/stt/
[https_github.com_dmhsq_image-recognition-flask-uniapp]: https://github.com/dmhsq/image-recognition-flask-uniapp
[https_www.bilibili.com_video_BV1R5411H7r2]: https://www.bilibili.com/video/BV1R5411H7r2/
[http_ai.baidu.com]: http://ai.baidu.com/
[20210124172043577.png]: https://img-blog.csdnimg.cn/20210124172043577.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210124172155379.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 1]: /images/20221119/e3ad49479f19421fb59809b002d1581b.png
[20210124172354813.png]: /images/20221119/5f66e00891074bce94a779eba2b9368c.png
[https_cloud.baidu.com_doc_IMAGERECOGNITION_s_vk3bcxiu2]: https://cloud.baidu.com/doc/IMAGERECOGNITION/s/vk3bcxiu2
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 2]: /images/20221119/a75e8ad37cc74880bdae4eb89eac44a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 3]: /images/20221119/d98a225452314f50a147c5e86be69ef7.png
[20210124173522272.png]: /images/20221119/277115de7fde4d3b8bea5ad3682f81da.png
[20210124173726754.png]: /images/20221119/7d77f4cfeab24c12abd794f8bac9c50f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70 4]: /images/20221119/8344fa9becae4bd59b3fb5b8648a6d71.png
[https_uniapp.dcloud.io_api_media_image_id_chooseimage]: https://uniapp.dcloud.io/api/media/image?id=chooseimage
[https_uniapp.dcloud.io_api_request_network-file]: https://uniapp.dcloud.io/api/request/network-file
[20210124174550800.gif]: /images/20221119/69d443d1ed9c4a92a8f1efc88e41b441.png
[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[https_cloud.tencent.com_developer_column_90853]: https://cloud.tencent.com/developer/column/90853
[20201110144238980.gif_pic_center]: /images/20221119/16217a1cf9874b41925e7f6a640e4186.png
[Link 1]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/26df52cf0e3e46f6921510a7c7c5483e.png