需求规格说明书及设计文档

项目场景

用户可以通过手机端APP拍照或者手动上传等方式提交林业有害生物图像照片，经预览，裁剪等操作处理后上传至服务器进行识别。反馈害虫种类、识别率、个数等信息。

本团队自行设计并实现一客户端+前端到服务器进行信息交换实现项目场景。项目命名为Found Pest。消息队列开发完成后，为了维护害虫样本信息我们团队开发了一套基于Vue的前后端分离的害虫信息维护系统，下文简称“该项目”。该项目支持害虫信息识别维护等功能基本实现了项目应用场景的需求。

实现思路

整体流程：选择图片==>上传图片==>识别图片==>返回信息==>接收信息==>显示信息

​ | 能够显示害虫样本并管理样本

​ | 能够编辑用户上传的图片

信息维护==> | 能够在线识别

​ | 与服务器后端进行数据交互

​ | 能够被用户访问

功能

前端部分

用户/管理员共有功能

  1. 用户功能：
    1. 包括用户注册和登录
    2. 查看害虫信息
    3. 忘记密码后找回密码
  2. 害虫信息维护功能：
    1. 浏览害虫样本信息等
  3. 样本检索功能：
    1. 可以检索害虫样本
  4. 上传图片管理功能：
    1. 管理移动端上传的图片
  5. 数据集管理功能:
  6. 可视化展示功能
  7. 在线识别功能呢

技术–访问服务器部分

后端技术栈

  • 开发工具：Pycharm
  • Vue：项目基础框架
  • html +CSS ：HTML5语言

前端技术栈

  • 开发工具：IDEA
  • Vue：渐进式框架
  • Vue Router：VUE路由插件用来管理各个页面
  • VueX：VUE状态管理
  • Axios ：一个基于 promise 的 HTTP 库，用于GET/POST请求
  • Node.js+webpack：项目构建工具

移动端技术栈

  • 开发工具：Hbuilder X
  • Uniapp:是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序

技术介绍

技术规格及应用介绍

本项目前端基于Vue渐进式框架开发，基本遵守HTML开发规范、Vue-Cli开发规范及Webpack开发规范；后端基于Python+flask框架开发。下面将从HTTP请求开始介绍本项目的技术特点。

  1. 通过HTTP协议访问托管在服务器端的项目，通过Nginx集群，均衡负载返回页面

  2. 页面内通过Axios提供的request方式GET/POST请求页面内的数据

  3. Nginx接收到请求地址后指向localhost:8090前端部分打开页面

  4. App端与服务器交互，使用Base64压缩图片与服务器进行交互

数据库模型图

项目工程截图

​ 前端部分

image-20220430161809291

​ 后端部分

image-20220430161930231

移动端

​ image-20220430162034356

技术–害虫识别算法部分

基于YOLOV5算法实现的 害虫识别的功能，通过Flask框架接收数据与前端+App通信,前端通过Ajax.request与服务器进行交互，App端通过Uniapp原生API即uni.upload接口与服务器进行数据交互。

支持害虫识别的种类

  • 100类害虫在线样本检索

    黑蚱蝉	蟪蛄	蒙古寒蝉	菜蝽	茶翅蝽	赤条蝽	麻皮蝽	硕蝽	大皱蝽	碧蛾蜡蝉	大田鳖	柿广翅蜡蝉	透翅疏广蜡蝉	斑衣蜡蝉	草履蚧	悬铃木方翅网蝽	中华象蜡蝉	大青叶蝉	小绿叶蝉	刺肩普缘蝽	稻棘缘蝽	点蜂缘蝽	钝肩普缘蝽(钝角普缘蝽)	虎斑蝶	金斑蝶	玉带斑蛾	重阳木锦斑蛾	大叶黄杨尺蛾	四星尺蛾	小蜻蜓尺蛾	扁刺蛾	褐边绿刺蛾	黄刺蛾	红尾大蚕蛾	绿尾大蚕蛾	八点灰灯蛾	红缘灯蛾	花布灯蛾	美国白蛾	强污灯蛾	人纹污灯蛾	优美苔蛾	侧柏毒蛾	盗毒蛾(黄尾毒蛾)	柳毒蛾	线茸毒蛾	菜粉蝶	碧凤蝶	柑橘凤蝶	金凤蝶	蓝凤蝶	麝凤蝶	丝带凤蝶	玉带凤蝶	樟青凤蝶	洋麻圆钩蛾	桃小食心虫	大红蛱蝶	二尾蛱蝶	黑脉蛱蝶	黄钩蛱蝶	柳紫闪蛱蝶	马尾松毛虫	黄杨绢野螟	桃蛀螟	樟巢螟	缀叶丛螟	豆天蛾	甘薯天蛾	红天蛾	蓝目天蛾	葡萄天蛾	雀纹天蛾	霜天蛾	变色夜蛾	臭椿皮蛾	胡桃豹夜蛾	斜纹夜蛾	旋目夜蛾	分月扇舟蛾	核桃美舟蛾	杨二尾舟蛾	杨扇舟蛾	杨小舟蛾	白星花金龟	黄粉鹿花金龟	日本脊吉丁
    犀角粪金龟	薄翅锯天牛(中华薄翅天牛) 	中华大扁锹	光肩星天牛	桑天牛	双条杉天牛	松墨天牛	桃红颈天牛	星天牛	锈色粒肩天牛	云斑白条天牛	柳蓝叶甲

  • 15类害虫的在线识别

    "草履蚧", "麻皮蝽", "日本脊吉丁", "星天牛", "桑天牛", "松墨天牛", "柳蓝叶甲", "黄刺蛾", "褐边绿刺蛾", "丝带凤蝶", "人纹污灯蛾", "霜天蛾","杨扇舟蛾", "杨小舟蛾", "美国白蛾"

接口对接实现样例

前端识别接口调用样例

后端数据库

class Species(db.Model):
    # 定义表名
    __tablename__ = 't_species'
    # 定义列对象
    id = db.Column(db.Integer, primary_key=True, autoincrement=True)
    name = db.Column(db.String(60))
    code = db.Column(db.String(60), unique=True)
    latin_name = db.Column(db.String(60))
    distribution_plants = db.Column(db.Text)
    distribution_area = db.Column(db.Text)
    sample_path = db.Column(db.String(60))

    genus_id = db.Column(db.Integer, db.ForeignKey('t_genus.id', ondelete='CASCADE'))
    genus = db.relationship("Genus", backref=db.backref('specieses', cascade="all, delete-orphan"))

<Scan.vue>

<Upload
     :format="['jpg','jpeg','png']" //规定图片格式，不一致就报错
     :on-success="handleSuccess"  //将图片选定后就执行上传方法
     :on-format-error="handleFormatError" //报错的方法
     action="http://42.192.237.135:8090/FPIMS/detection_withFile/"> //请求的地址
    <Button type="primary" icon="ios-cloud-upload-outline"></Button> //点击按钮会执行上传图片的方法
</Upload>
<script>
    method:{
        handleSuccess (res, file) {//res :临时数组用来存储返沪的信息  file：上传的图片对象
        this.$data.original_img_path = res.save_img_path;//接收临时图片地址
        this.$data.detect_time = res.detect_time;//接收返回识别时间
    }
</script>

后端接口返回信息

app.py —detection_withfile

@app.route('/FPIMS/detection_withFile/', methods=['GET', 'POST'])#Get:接收待处理图片 #Post：将处理后的图片与识别结果返回前端
def detection_with_file():  #定义函数用来调用
    file = request.files['file']#接收前端传来的
    file.save(image_path)
    # 将保存的图片输入网络进行推测
    processed_img, recognition_res = app.detect(cv2.imread(image_path),Species)
    #img_path：前端传来的的图片地址
    #Species:数据库对象用来查数据
    # 推测后的图片保存到processed目录
    cv2.imwrite('./picture_data/detect/processed/{}'.format(processed_filename), #处理的图片)
    # 将“结果拼成字符串”和“推测后的图片的路径”一起传给前端
    res = img_path_processed + '-' + recognition_res #结果数组
    return res

项目基本使用方式

  1. 运行后端app.py启动服务器
  2. 启动前端静态网页或者Vue项目 npm run server
  3. 启动手机端app
#在后端服务器文件夹运行服务器
python app.py
#在前端启动Vue项目文件
npm run server

结果展示