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

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

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

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

 实现效果:

 

三.结尾(源码获取) 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/829596.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

第72天:漏洞发现-Web框架中间件联动GobyAfrogXrayAwvsVulmap

案例一&#xff1a;某 APP-Web 扫描-常规&联动-Burp&Awvs&Xray Acunetix 一款商业的 Web 漏洞扫描程序&#xff0c;它可以检查 Web 应用程序中的漏洞&#xff0c;如 SQL 注入、跨站脚本攻击、身份验证页上的弱口令长度等。它拥有一个操作方便的图形用户界 面&#…

探索Midjourney的艺术地图:常用画质关键词导航

在这个由人工智能驱动的创意世界中&#xff0c;画质的控制成为了每一位创作者追求作品完美的关键。Midjourney提供了一系列的关键词&#xff0c;让我们能够细致地调整我们心中所想象的场景与人物。从质感、明暗到风格&#xff0c;这些关键词就像是调色盘上的色彩&#xff0c;每…

实验8 NAT配置

实验8 NAT配置 一、 原理描述二、 实验目的三、 实验内容1.实验场景2.实验要求 四、 实验配置五、 实验步骤2.静态NAT配置3.NAT Outbound配置4.NAT Easy-IP配置 一、 原理描述 2019年11月26日&#xff0c;全球43亿个IPv4地址正式耗尽&#xff0c;这意味着没有更多的IPv4地址可…

Taro引入echarts【兼容多端小程序(飞书/微信/支付宝小程序)】

近期接到公司新需求&#xff0c;开发飞书小程序&#xff0c;并且原型中含有大量的图表&#xff0c;本想使用飞书内置图表组件 —— chart-space&#xff0c;但官方表示已经停止维护了&#xff0c;无奈之下&#xff0c;只能另寻他路&#xff0c;于是乎&#xff0c;图表之王&…

【Godot4.2】自定义Todo清单类 - myTodoList

概述 在写myList类的时候&#xff0c;就想到可以写一个类似的Todo清单类。 基础思路 本质还是在内部维护一个数组&#xff0c;在其基础上进行增删改查操作的封装为了方便存储数据&#xff0c;编写一个自定义内置类TodoItem&#xff0c;内部数组就变成了Array[TodoItem]类型的…

【Flutter】GetX

前言 状态管理 / 路由管理 / 依赖管理 这三部分之间存在联系 参考文章 建议看官网文章&#xff0c;很详细 &#xff0c;pub.dev搜索get pub.dev的文档 状态管理文章相关链接 状态管理 案例 实现一个计算器&#xff0c;运用GetX去管理它 构建界面 构建一个计算器界面 …

openssl3.2 - exp - get openssl version info

文章目录 openssl3.2 - exp - get openssl version info概述笔记END openssl3.2 - exp - get openssl version info 概述 查资料时&#xff0c;看到用API取旧版openssl取版本信息。 去openssl工程中看了一下&#xff0c;有个内部测试程序有如何取openssl版本信息的API调用例子…

GateWay具体的使用之全链路跟踪TraceId日志

1.创建全局过滤器&#xff0c;在请求头上带入traceId参数&#xff0c;穿透到下游服务. package com.by.filter;import cn.hutool.core.collection.CollUtil; import cn.hutool.core.util.IdUtil; import cn.hutool.core.util.ObjectUtil; import cn.hutool.jwt.JWTValidator;…

Mockito Mybatis-plus 单元测试

1. mock Mybatis-plus 自带 ServiceImpl方法问题 分析 mybatis-plus 自带的ServiceImpl&#xff0c;其实其最后执行使用的是我们所创建的Mapper&#xff0c;他最终会注入到 ServiceImpl的baseMapper中 - 示例 业务代码 // 实体 public class UtilSaleData { }// mapper public …

数据结构1(初):时间复杂度和空间复杂度

目录 1、引言 1.1、什么是数据结构&#xff1f; 1.2、什么是算法&#xff1f; 1.3、如何学好数据结构和算法 &#xff1f; 2、算法效率 2.1、如何衡量一个算法的好坏 2.2、算法的复杂度 3、时间复杂度 3.1、时间复杂度的概念 3.2、大O的渐进表示法 3.3、常见时间复杂…

C语言自定义类型【联合体与枚举】

文章目录 1.联合体1.1联合体的声明1.2联合体的特点1.3联合体的大小计算联合体的使用案例 2.枚举2.1枚举类型的声明2.2枚举类型的优点(为什么使用枚举)2.3枚举类型的使用 结语 1.联合体 1.1联合体的声明 和结构体一样&#xff0c;联合体也是由一个或多个成员构成&#xff0c;同…

2024-04-27 问AI: 在深度学习中,什么是DCGAN?

文心一言 在深度学习中&#xff0c;DCGAN&#xff08;Deep Convolutional Generative Adversarial Networks&#xff09;是生成对抗网络&#xff08;GAN&#xff09;的一种改进版本&#xff0c;它主要通过引入卷积神经网络&#xff08;CNN&#xff09;来提高生成器和判别器的性…

Python量化炒股策略(二)

日志用来记录Python量化炒股策略的状态、错误和信息消息&#xff0c;也经常作为调试程序的工具。 日志log 设定log级别 设定log级别语法格式如下&#xff1a; log.set_level(name, level)设置不同种类的log级别&#xff0c;低于这个级别的log不会输出。所有log的默认级别是…

编辑器,编译器,IDE的区别

1.编辑器,编译器 简单说编辑器是用来写代码的&#xff0c;而编译器是对现场高级语言代码翻译成相对低级语言的一段小程序/指令。 2.IDE 集成开发环境&#xff08;IDE&#xff0c;Integrated Development Environment &#xff09;是用于提供程序开发环境的应用程序&#xff…

Atcoder Beginner Contest351 A-E Solution题解

文章目录 [A - The bottom of the ninth](https://atcoder.jp/contests/abc351/tasks/abc351_a)[B - Spot the Difference ](https://atcoder.jp/contests/abc351/tasks/abc351_b)[D - Grid and Magnet](https://atcoder.jp/contests/abc351/tasks/abc351_d)E Note&#xff1a;…

NUD4700

这份文件是关于NUD4700型号电子元件的数据手册&#xff0c;由半导体元件工业公司&#xff08;Semiconductor Components Industries, LLC&#xff09;在2009年1月发布。以下是该文件的核心内容&#xff1a; 产品描述&#xff1a; NUD4700是一个电子旁路器件&#xff0c;用于在单…

Rust 实战练习 - 12. Axum Web 简单demo

Rust Web 历程 Rust 的异步框架tokio非他莫属&#xff0c;而web框架一直是悬而未决&#xff0c;说到底还是因为没有官方成熟的方案指引&#xff0c;大家各玩各的&#xff0c;互不兼容&#xff0c;白白浪费精力。 这个事情一直等到半官方组织tokio推出axum有了改善。但是市场上…

如何将本地Android studio项目上传到GitHub

操作步骤&#xff1a; 1、在GitHub上创建账户 2、在androd studio中添加上述创建的GitHub账号 3、在android studio上找到"share project on GitHub"&#xff0c;点击此选项上传当前项目到GitHub 上传成功后&#xff0c;会在GitHub上创建默认仓库repository 注&a…

如何实现线程的同步了?

什么是线程的同步了?就是在多个线程访问一个数据的时候,如何防止数据的一致性和避免竞争问题 1.Synchronized关键字,给线程上锁,相当于小朋友在排队玩玩具,一个玩完才能接着下一个 2.ReentrantLock:可重入锁,就是一群人在上厕所,但是厕所的开关被进入的那个人给锁住了,只有这个…

mysql-sql-练习题-2-窗口函数

窗口函数 访问量max sum建表窗口函数连接 直播间人数 第1、3名建表排名sum 访问量max sum 每个用户截止到每月为止&#xff0c;最大单月访问次数&#xff0c;累计到该月的总访问次数 建表 create table visit(uid1 varchar(5) comment 用户id,month1 varchar(10) comment 月…