【微信小程序调用百度API实现图像识别实战】-前后端加强版

2024-04-28 08:20

本文主要是介绍【微信小程序调用百度API实现图像识别实战】-前后端加强版,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言:基于前面两篇图像识别项目实战文章进行了改造升级。

第一篇 入门【微信小程序调用百度API实现图像识别功能】----项目实战

第二篇 前后端结合 【微信小程序调用百度API实现图像识别实战】----前后端分离

这一篇主要讲述的是在第二篇的基础上新增意见反馈功能,并将识别结果中名称和置信度意见和联系方式保存到数据库中。

目录

 一.意见反馈功能

 1.1前端页面

 1.1.1 WXML

1.1.2 WXSS 

1.1.3 JSON 

 1.1.4 JS 

 1.1.5 实现效果

 1.2后端服务

1.2.1 代码示例

1.2.2 终端打印效果 

1.2.3 连接Mysql 

 1.2.4 数据库

 二.图像识别结果保存至数据库

三.结尾(源码获取) 


 一.意见反馈功能

 1.1前端页面

 1.1.1 WXML

<view><view class="page-section"><view class="page-section-title">留言内容</view><view class="textarea-wrp"><textarea style="height: 8em" placeholder="请输入您的留言" bindinput="bindMessageInput" value="{{message}}" /></view></view><view class="page-section"><view class="page-section-title">联系方式</view><view class="textarea-wrp"><input class="textarea-wrp" placeholder="(请输入您的联系方式)" bindinput="bindNameInput" value="{{name}}"/></view></view><view style="height: 12px;"></view><view class="page-section"><button bindtap="submitFeedback">提交</button>  </view>
</view>

1.1.2 WXSS 

/* pages/yijian/yijian.wxss */
page {background: #eee;
}
.success {background: #fff;padding-bottom: 40rpx;
}
.congratulation {text-align: center;line-height: 210rpx;font-size: 38rpx;
}
.success-icon {position: relative;top: 10rpx;margin-right: 20rpx;
}
.submit-button {margin: 20rpx 130rpx 0 130rpx;line-height: 100rpx;border-radius: 10rpx;text-align: center;color: #ffffff;font-size: 38rpx;
}
.nocate{text-align: center;  
} 
.page-section{margin-top: 50rpx;margin-bottom: 10rpx;margin-left: 30rpx;margin-right: 30rpx;
}
.page-section-title{font-size: 36rpx;color: #222222;margin-bottom: 10rpx;padding-left: 30rpx;padding-right: 30rpx;
}
.textarea-wrp {padding: 10rpx 25rpx;background-color: #fff;font-size: 32rpx;color: #404040;border-radius: 15rpx;
}button {  width: 100%;  height: 100rpx;  background-color: #007aff;  color: #fff;  border: none;  border-radius: 4rpx;  
}

1.1.3 JSON 

{"navigationBarTitleText": "意见反馈"
}

 1.1.4 JS 

Page({  data: {  Name: '',  Message: ''},  bindNameInput: function(e) {  this.setData({  Name: e.detail.value  });  },  bindMessageInput: function(e) {  this.setData({  Message: e.detail.value  });  },  submitFeedback: function() {  const Name = this.data.Name;  const Message = this.data.Message;  if (!Name || !Message) {  wx.showToast({  title: '请填写完整信息',  icon: 'none'  });  return;  }wx.request({  url: 'http://127.0.0.1:5000/feedback', // 替换为你的 Flask 服务器 URL  method: 'POST',  data: {  Name: Name,  Message: Message  },  success: function(res) {  if (res.data.status === 'success') {  wx.showToast({  title: '提交成功',  icon: 'success'  });  } else {  wx.showToast({  title: '提交失败',  icon: 'none'  });  }  },  fail: function() {  wx.showToast({  title: '网络错误',  icon: 'none'  });  }  });  }  
});

 1.1.5 实现效果

 1.2后端服务

1.2.1 代码示例

注意前端url接口是 http://端口号/feedback,发送POST请求。

@app.route('/feedback', methods=['POST'])
def feedback():data = request.jsonname = data.get('Name')message = data.get('Message')# 打印接收到的数据到终端print(f"Received feedback from {name}: {message}")# 返回成功响应给小程序return jsonify({'status': 'success'})

1.2.2 终端打印效果 

 

1.2.3 连接Mysql 

 前面我们看到了打印是没问题的,下一步创建数据库和相应的表,在后端编写连接数据库代码。

 # 连接到MySQL数据库conn = pymysql.Connect(host='localhost', port=3XXX, user='XXX', password='XXX', database='XXX')  # 创建连接cursor = conn.cursor() # 插入数据到advice表中insert_query = "INSERT INTO advice (XXX, XXX) VALUES (%s, %s)"values = (name, message)cursor.execute(insert_query, values)conn.commit()# 关闭数据库连接cursor.close()conn.close()

 1.2.4 数据库

 打开数据库,上传意见成功后,刷新表就可以看到相应的数据。

 二.图像识别结果保存至数据库

 方法和意见反馈差不多,只是表和字段不同

 实现效果:

 

三.结尾(源码获取) 

 看到这里,你是否有所收获呢,创作不易,源码见评论区,点赞+关注+留言支持一下叭~,后续还会在此基础上进行升级,敬请关注,评论区留下你的看法。

这篇关于【微信小程序调用百度API实现图像识别实战】-前后端加强版的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/942758

相关文章

MySQL双主搭建+keepalived高可用的实现

《MySQL双主搭建+keepalived高可用的实现》本文主要介绍了MySQL双主搭建+keepalived高可用的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,... 目录一、测试环境准备二、主从搭建1.创建复制用户2.创建复制关系3.开启复制,确认复制是否成功4.同

Java实现文件图片的预览和下载功能

《Java实现文件图片的预览和下载功能》这篇文章主要为大家详细介绍了如何使用Java实现文件图片的预览和下载功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... Java实现文件(图片)的预览和下载 @ApiOperation("访问文件") @GetMapping("

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法:读

Java实现时间与字符串互相转换详解

《Java实现时间与字符串互相转换详解》这篇文章主要为大家详细介绍了Java中实现时间与字符串互相转换的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、日期格式化为字符串(一)使用预定义格式(二)自定义格式二、字符串解析为日期(一)解析ISO格式字符串(二)解析自定义

opencv图像处理之指纹验证的实现

《opencv图像处理之指纹验证的实现》本文主要介绍了opencv图像处理之指纹验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录一、简介二、具体案例实现1. 图像显示函数2. 指纹验证函数3. 主函数4、运行结果三、总结一、

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu