【微信小程序调用百度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

相关文章

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2

Android实现两台手机屏幕共享和远程控制功能

《Android实现两台手机屏幕共享和远程控制功能》在远程协助、在线教学、技术支持等多种场景下,实时获得另一部移动设备的屏幕画面,并对其进行操作,具有极高的应用价值,本项目旨在实现两台Android手... 目录一、项目概述二、相关知识2.1 MediaProjection API2.2 Socket 网络