基于coze+微信小程序实现图片上传并利用大模型解析

项目截图：

实现代码（直接搬去可用）

前提：需要填写你的oss配置+coze的api授权配置！！！

<template><view class="container"><!-- 高斯模糊背景 --><view class="animated-bg"><view class="gradient-blob"></view><view class="gradient-blob two"></view><view class="gradient-blob three"></view><view class="gradient-blob four"></view><view class="overlay"></view></view><!-- 返回按钮 --><view class="back-button" @tap="goBack"><text class="back-icon">←</text><text class="back-text">返回</text></view><!-- 头部区域 --><view class="header"><text class="logo-text">单词识别助手</text><text class="subtitle">上传单词图片，快速获取详细释义</text></view><!-- 上传区域 --><view class="upload-section"><view class="upload-box" @tap="chooseImage" v-if="!tempFilePath"><text class="upload-icon">📷</text><text class="upload-text">点击上传单词图片</text><text class="upload-desc">支持拍照或从相册选择</text></view><view class="preview-box" v-else><image :src="tempFilePath" mode="aspectFit" class="preview-image"/><view class="action-buttons"><button class="action-btn cancel" @tap="cancelUpload">取消</button><button class="action-btn confirm" @tap="analyzeImage">识别</button></view></view></view><!-- 加载状态 --><view class="loading-state" v-if="loading"><view class="pulse-loader"><view class="pulse"></view><view class="pulse"></view><view class="pulse"></view></view><text class="loading-text">正在识别中...</text></view><!-- 只有当有单词数据时才显示结果区域 --><div class="word-info" v-if="wordInfo.word"><div class="word-header"><text class="word">{{ wordInfo.word }}</text><text class="phonetic">{{ wordInfo.phonetic }}</text></div><div class="word-content"><div class="item"><text class="label">词性：</text><text>{{ wordInfo.type }}</text></div><div class="item"><text class="label">中文含义：</text><text>{{ wordInfo.meaning }}</text></div><div class="item"><text class="label">例句：</text><text>{{ wordInfo.example }}</text></div><div class="item"><text class="label">相关词汇：</text><text>{{ wordInfo.similar }}</text></div></div></div></view>
</template><script>export default {data() {return {tempFilePath: '', // 临时图片路径loading: false,wordResult: null, // 模拟的识别结果// 模拟数据mockResult: {word: "Happiness",phonetic: "ˈhæpinəs",meanings: [{partOfSpeech: "名词",definition: "幸福；快乐；愉快；幸福感",example: "Money doesn't buy happiness."},{partOfSpeech: "名词",definition: "适当；恰当；正确",example: "She questioned the happiness of his choice of words."}]},ossConfig: {accessKeyId: '----------------填写你的-----------------',accessKeySecret: '----------------填写你的-----------------',bucket: '----------------填写你的-----------------',region: '----------------填写你的-----------------', // 根据你的实际地区修改endpoint: '----------------填写你的-----------------',},cozeConfig: {apiUrl: 'https://api.coze.cn/open_api/v2/chat',token: '----------------填写你的-----------------',botId: '----------------填写你的-----------------',userId: '----------------填写你的-----------------'},wordInfo: {word: '',phonetic: '',meaning: '',example: '',similar: '',pronunciation: ''}}},methods: {// 返回上一页goBack() {uni.navigateBack({delta: 1 // 返回的页面层数，1 表示返回上一页});},// 选择图片chooseImage() {uni.chooseImage({count: 1,sizeType: ['compressed'],sourceType: ['album', 'camera'],success: (res) => {this.tempFilePath = res.tempFilePaths[0];}});},// 取消上传cancelUpload() {this.tempFilePath = '';this.wordResult = null;},// Base64编码函数base64Encode(str) {const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';let output = '';let chr1, chr2, chr3, enc1, enc2, enc3, enc4;let i = 0;while (i < str.length) {chr1 = str.charCodeAt(i++);chr2 = str.charCodeAt(i++);chr3 = str.charCodeAt(i++);enc1 = chr1 >> 2;enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);enc4 = chr3 & 63;if (isNaN(chr2)) {enc3 = enc4 = 64;} else if (isNaN(chr3)) {enc4 = 64;}output = output +chars.charAt(enc1) + chars.charAt(enc2) +chars.charAt(enc3) + chars.charAt(enc4);}return output;},// 上传到OSSasync uploadToOSS(filePath) {return new Promise((resolve, reject) => {const date = new Date();date.setHours(date.getHours() + 1); // 设置policy过期时间为1小时后const policyText = {expiration: date.toISOString(), // 设置过期时间conditions: [["content-length-range", 0, 5048576000] // 设置上传文件的大小限制]};// 生成policy，使用自定义的base64编码函数const policy = this.base64Encode(JSON.stringify(policyText));// 生成signatureconst signature = this.computeSignature(policy, this.ossConfig.accessKeySecret);// 生成文件名const fileName = `word_images/${Date.now()}_${Math.random().toString(36).slice(2)}.jpg`;uni.uploadFile({url: this.ossConfig.endpoint,filePath: filePath,name: 'file',formData: {key: fileName,policy: policy,OSSAccessKeyId: this.ossConfig.accessKeyId,signature: signature,success_action_status: '200'},success: (res) => {if (res.statusCode === 200) {const url = `https://${this.ossConfig.bucket}.${this.ossConfig.region}/${fileName}`;resolve(url);} else {uni.showToast({title: '上传失败',icon: 'none'});reject(new Error('上传失败'));}},fail: (err) => {uni.showToast({title: '上传失败',icon: 'none'});reject(err);}});});},// 计算签名computeSignature(policy, accessKeySecret) {// 由于uni-app环境中可能没有crypto-js，这里使用一个简单的方法来计算const hmac = function(key, str) {const crypto = require('crypto');const hmac = crypto.createHmac('sha1', key);hmac.update(str);return hmac.digest('base64');};return hmac(accessKeySecret, policy);},// 调用Coze APIasync callCozeAPI(imageUrl) {try {const response = await uni.request({url: this.cozeConfig.apiUrl,method: 'POST',header: {'Authorization': `Bearer ${this.cozeConfig.token}`,'Content-Type': 'application/json','Accept': '*/*','Host': 'api.coze.cn','Connection': 'keep-alive'},data: {conversation_id: Date.now().toString(),bot_id: this.cozeConfig.botId,user: this.cozeConfig.userId,query: `请识别这张图片中的单词，图片地址是：${imageUrl}`,stream: false}});const responseData =  response;console.log(responseData)const result = JSON.parse(responseData[1].data.messages[1].content);	console.log(result)// 根据实际返回数据更新显示return result;} catch (error) {console.error('Coze API 调用失败:', error);uni.showToast({title: error.message || 'API调用失败',icon: 'none',duration: 3000});return null;}},// 修改原有的analyzeImage方法async analyzeImage() {this.loading = true;try {// 1. 上传图片到OSSconst imageUrl = await this.uploadToOSS(this.tempFilePath);console.log(imageUrl)// 2. 调用Coze APIconst result = await this.callCozeAPI(imageUrl);console.log(result)// 3. 处理返回结果this.wordInfo = {word: result.out2, // pearphonetic: result.yinbiao, // 英/peə(r)/；美/per/type: result.output, // 名词meaning: result.out, // 梨example: result.liju, // I like to eat pears.（我喜欢吃梨。）similar: result.xiangsi // apple（苹果）、banana（香蕉）等，都属于水果类词汇};} catch (error) {console.error('处理失败:', error);} finally {this.loading = false;}}}}
</script><style>.container {min-height: 100vh;position: relative;overflow: hidden;background: #f8f9fa;}.animated-bg {position: fixed;width: 100%;height: 100%;top: 0;left: 0;overflow: hidden;z-index: 0;background: linear-gradient(125deg, #00fff3, #ff00e6);animation: gradientBG 15s ease infinite;}.gradient-blob {position: absolute;width: 1000rpx;height: 1000rpx;background: linear-gradient(45deg,rgba(255, 49, 97, 0.5),rgba(255, 97, 162, 0.5));border-radius: 50%;filter: blur(80px);animation: blob-movement 20s infinite linear,color-shift 10s infinite alternate;opacity: 0.7;top: -300rpx;left: -300rpx;}.gradient-blob.two {background: linear-gradient(45deg,rgba(67, 206, 162, 0.5),rgba(24, 90, 157, 0.5));animation: blob-movement-2 25s infinite linear,color-shift-2 12s infinite alternate;animation-delay: -3s;top: 60%;left: 60%;}.gradient-blob.three {background: linear-gradient(45deg,rgba(255, 197, 84, 0.5),rgba(255, 159, 0, 0.5));animation: blob-movement-3 30s infinite linear,color-shift-3 8s infinite alternate;animation-delay: -5s;top: 40%;left: 30%;}.gradient-blob.four {background: linear-gradient(45deg,rgba(147, 88, 255, 0.5),rgba(19, 123, 255, 0.5));animation: blob-movement-4 28s infinite linear,color-shift-4 15s infinite alternate;animation-delay: -7s;top: 20%;left: 70%;}.overlay {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(20px);}@keyframes gradientBG {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}@keyframes blob-movement {0% {transform: translate(0, 0) scale(1) rotate(0deg);}33% {transform: translate(300rpx, 200rpx) scale(1.2) rotate(120deg);}66% {transform: translate(-200rpx, 400rpx) scale(0.8) rotate(240deg);}100% {transform: translate(0, 0) scale(1) rotate(360deg);}}@keyframes blob-movement-2 {0% {transform: translate(0, 0) scale(1.1) rotate(0deg);}33% {transform: translate(-250rpx, -300rpx) scale(0.9) rotate(120deg);}66% {transform: translate(300rpx, -200rpx) scale(1.2) rotate(240deg);}100% {transform: translate(0, 0) scale(1.1) rotate(360deg);}}@keyframes blob-movement-3 {0% {transform: translate(0, 0) scale(0.9) rotate(0deg);}33% {transform: translate(400rpx, -100rpx) scale(1.1) rotate(120deg);}66% {transform: translate(-300rpx, 200rpx) scale(0.8) rotate(240deg);}100% {transform: translate(0, 0) scale(0.9) rotate(360deg);}}@keyframes blob-movement-4 {0% {transform: translate(0, 0) scale(1) rotate(0deg);}33% {transform: translate(-200rpx, 300rpx) scale(1.1) rotate(120deg);}66% {transform: translate(250rpx, -250rpx) scale(0.9) rotate(240deg);}100% {transform: translate(0, 0) scale(1) rotate(360deg);}}@keyframes color-shift {0% {background: linear-gradient(45deg, rgba(255, 49, 97, 0.5), rgba(255, 97, 162, 0.5));}100% {background: linear-gradient(45deg, rgba(255, 182, 193, 0.5), rgba(255, 20, 147, 0.5));}}@keyframes color-shift-2 {0% {background: linear-gradient(45deg, rgba(67, 206, 162, 0.5), rgba(24, 90, 157, 0.5));}100% {background: linear-gradient(45deg, rgba(0, 255, 255, 0.5), rgba(0, 128, 128, 0.5));}}@keyframes color-shift-3 {0% {background: linear-gradient(45deg, rgba(255, 197, 84, 0.5), rgba(255, 159, 0, 0.5));}100% {background: linear-gradient(45deg, rgba(255, 215, 0, 0.5), rgba(255, 140, 0, 0.5));}}@keyframes color-shift-4 {0% {background: linear-gradient(45deg, rgba(147, 88, 255, 0.5), rgba(19, 123, 255, 0.5));}100% {background: linear-gradient(45deg, rgba(138, 43, 226, 0.5), rgba(65, 105, 225, 0.5));}}/* 头部样式 */.header {padding: 60rpx 40rpx;text-align: center;z-index: 1;position: relative;}.logo-text {font-size: 48rpx;color: #1a1a1a;font-weight: 600;letter-spacing: 2rpx;text-shadow: 0 2px 4px rgba(255, 255, 255, 0.2);}.subtitle {font-size: 28rpx;color: rgba(0, 0, 0, 0.7);margin-top: 16rpx;display: block;}/* 上传区域样式 */.upload-section {padding: 40rpx;z-index: 2;position: relative;}.upload-box {background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(20px);border-radius: 20rpx;padding: 60rpx;display: flex;flex-direction: column;align-items: center;border: 2rpx dashed rgba(255, 255, 255, 0.5);}.upload-icon {font-size: 80rpx;margin-bottom: 20rpx;}.upload-text {font-size: 32rpx;color: #333;margin-bottom: 10rpx;}.upload-desc {font-size: 24rpx;color: rgba(0, 0, 0, 0.5);}.preview-box {width: 100%;border-radius: 20rpx;overflow: hidden;}.preview-image {width: 100%;height: 400rpx;border-radius: 20rpx;}.action-buttons {display: flex;justify-content: space-between;margin-top: 20rpx;gap: 20rpx;}.action-btn {flex: 1;padding: 20rpx;border-radius: 10rpx;text-align: center;font-size: 28rpx;}.action-btn.cancel {background: rgba(255, 255, 255, 0.3);color: #333;}.action-btn.confirm {background: linear-gradient(135deg, #7C3AED, #3B82F6);color: #fff;}.word-text {font-size: 40rpx;font-weight: bold;color: #333;}.phonetic {font-size: 28rpx;color: rgba(0, 0, 0, 0.6);margin-left: 20rpx;}.meanings {margin-top: 30rpx;}.meaning-item {margin-bottom: 20rpx;}.pos {font-size: 26rpx;color: #666;background: rgba(0, 0, 0, 0.1);padding: 4rpx 12rpx;border-radius: 6rpx;margin-right: 10rpx;}.definition {font-size: 30rpx;color: #333;display: block;margin: 10rpx 0;}.example {font-size: 26rpx;color: #666;display: block;font-style: italic;}/* 加载动画 */.loading-state {padding: 60rpx;text-align: center;}.pulse-loader {display: flex;justify-content: center;gap: 12rpx;}.pulse {width: 16rpx;height: 16rpx;background: #fff;border-radius: 50%;animation: pulse 1.5s infinite ease-in-out;}.pulse:nth-child(2) { animation-delay: 0.2s; }.pulse:nth-child(3) { animation-delay: 0.4s; }@keyframes pulse {0%, 100% { transform: scale(0.5); opacity: 0.2; }50% { transform: scale(1); opacity: 1; }}.loading-text {color: rgba(255,255,255,0.7);font-size: 28rpx;margin-top: 20rpx;display: block;}/* 结果卡片 */.result-wrapper {padding: 40rpx;}.result-card {background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(15px);border-radius: 20rpx;padding: 30rpx;border: 1px solid rgba(255, 255, 255, 0.3);animation: slideUp 0.3s ease;}.result-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20rpx;}.back-button {position: fixed;top: 40rpx;left: 20rpx;display: flex;align-items: center;padding: 10rpx 20rpx;background: rgba(255, 255, 255, 0.8);border-radius: 50rpx;backdrop-filter: blur(10px);z-index: 999;box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);}.back-icon {font-size: 36rpx;margin-right: 10rpx;color: #333;}.back-text {font-size: 28rpx;color: #333;}.word-info {padding: 20px;}.word-header {margin-bottom: 20px;}.word {font-size: 24px;font-weight: bold;margin-right: 10px;}.phonetic {color: #666;}.item {margin-bottom: 15px;}.label {color: #333;font-weight: bold;margin-right: 10px;}
</style>

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

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

相关文章

Spring-boot3.4最新版整合swagger和Mybatis-plus

Spring-boot3.4最新版整合swagger和Mybatis-plus

好家伙,今天终于开始用spring-boot3开始写项目了&#xff0c;以后要彻底告别1.x和2.x了&#xff0c;同样的jdk也来到了最低17的要求了,废话不多说直接开始 这是官方文档的要求jdk最低是17 maven最低是3.6 一. 构建工程,这一步就不需要给大家解释了吧 二. 整合Knife4j 1.大于…
阅读更多...
jQuery UI API 文档

jQuery UI API 文档

jQuery UI API 文档 引言 jQuery UI 是一个基于 jQuery 的用户界面库，它提供了丰富的交互式组件和效果，使得网页开发变得更加简单和高效。本文档旨在为开发者提供全面的 jQuery UI API 信息，帮助您更好地理解和应用 jQuery UI。 jQuery UI 简介 什么是 jQuery UI？ jQu…
阅读更多...
java GUI编程实现一个计算器

java GUI编程实现一个计算器

概述 闲来无事&#xff0c;利用java awt库写个简单的计算器玩玩。 实现 pom.xml <dependencies><dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.26</version></dependency&…
阅读更多...
C#装箱拆箱机制详解

C#装箱拆箱机制详解

在C#中&#xff0c;装箱&#xff08;Boxing&#xff09;和拆箱&#xff08;Unboxing&#xff09; 是值类型与引用类型之间转换的核心机制。它们的实现直接影响程序的性能和类型安全。 一、装箱&#xff08;Boxing&#xff09; 定义&#xff1a; 将值类型转换为引用类型&#…
阅读更多...
MySQL 8.4 SQL 全攻略：所有知识点与实战场景

MySQL 8.4 SQL 全攻略：所有知识点与实战场景

一、引言 MySQL 作为一款广泛使用的开源关系型数据库管理系统&#xff0c;在数据存储和管理领域占据着重要地位。MySQL 8.4 版本在性能、功能和安全性等方面都有了显著的提升。本文将全面介绍 MySQL 8.4 中 SQL 的各种知识点&#xff0c;并结合实战场景进行详细讲解&#xff0…
阅读更多...
Qt监控系统远程回放/录像文件远程下载/录像文件打上水印/批量多线程极速下载

Qt监控系统远程回放/录像文件远程下载/录像文件打上水印/批量多线程极速下载

一、前言说明 在做这个功能的时候&#xff0c;着实费了点心思&#xff0c;好在之前做ffmpeg加密解密的时候&#xff0c;已经打通了极速加密保存文件&#xff0c;主要就是之前的类中新增了进度提示信号&#xff0c;比如当前已经处理到哪个position位置&#xff0c;发个信号出来…
阅读更多...
超高速工业相机的应用

超高速工业相机的应用

超高速工业相机一般安装在机器流水线上代替人眼来做测量和判断&#xff0c;通过数字图像摄取目标转换成图像信号&#xff0c;传送给专用的图像处理系统。图像处理系统对这些信号进行各种运算来抽取目标的特征&#xff0c;进而根据判别的结果来控制现场的设备动作。一般来说&…
阅读更多...
Plugin ‘mysql_native_password‘ is not loaded`

Plugin ‘mysql_native_password‘ is not loaded`

Plugin ‘mysql_native_password’ is not loaded mysql_native_password介绍1. 使用默认的认证插件2. 修改 my.cnf 或 my.ini 配置文件3. 加载插件&#xff08;如果确实没有加载&#xff09;4. 重新安装或检查 MySQL 版本 遇到错误 ERROR 1524 (HY000): Plugin mysql_nativ…
阅读更多...
苍穹外卖-阿里云OSS文件上传

苍穹外卖-阿里云OSS文件上传

苍穹外卖-阿里云OSS文件上传 一、阿里云OSS简介**获取AccessKey**获取enpoint 二、代码实现1 引入依赖2 定义OSS相关配置2.1 application-dev.yml2.2 application.yml 3 读取OSS配置3.1 AliOssProperties 4 生成OSS工具类对象4.1 AliOssUtil4.2 OssConfiguration2.5 CommonCont…
阅读更多...
【工具】前端 js 判断当前日期是否在当前自然周内

【工具】前端 js 判断当前日期是否在当前自然周内

【工具】前端 js 判断当前日期是否在当前自然周内 function isCurrentNaturalWeek(targetDate) {const today new Date();const dayOfWeek today.getDay(); // 0&#xff08;周日&#xff09;到6&#xff08;周六&#xff09;// 计算本周一的日期&#xff08;自然周从周一开…
阅读更多...
【操作系统】处理机调度

【操作系统】处理机调度

处理机调度 一、调度的概念、层次1.1 三个层次1.2 七状态模型 二、调度算法的评价指标2.1 CPU利用率2.2 系统吞吐率2.3 周转时间2.4 等待时间2.5 响应时间 三、进程调度&#xff08;低级调度&#xff09;的时机3.1 需要进程调度的情况3.2 不能进程调度的情况3.3 闲逛进程 四、进…
阅读更多...
SpringBoot 使用 spring.profiles.active 来区分不同环境配置

SpringBoot 使用 spring.profiles.active 来区分不同环境配置

很多时候&#xff0c;我们项目在开发环境和生产环境的配置是不一样的&#xff0c;例如&#xff0c;数据库配置&#xff0c;在开发的时候&#xff0c;我们一般用测试数据库&#xff0c;而在生产环境&#xff0c;我们要用生产数据库&#xff0c;这时候&#xff0c;我们可以利用 p…
阅读更多...
怎么进行mysql的优化?

怎么进行mysql的优化?

MySQL 的优化是一个系统性的工作&#xff0c;涉及多个层面&#xff0c;包括查询优化、索引优化、配置优化、架构优化等。以下是一些常见的 MySQL 优化方法&#xff1a; 查询优化 避免全表扫描&#xff1a;确保查询能够使用索引&#xff0c;避免 SELECT *&#xff0c;只选择需要…
阅读更多...
谈谈 Node.js 中的模块系统，CommonJS 和 ES Modules 的区别是什么？

谈谈 Node.js 中的模块系统，CommonJS 和 ES Modules 的区别是什么？

Node.js 模块系统&#xff1a;CommonJS 和 ES Modules 核心差异与实战指南 一、模块系统基础概念 **CommonJS (CJS)**​ 是 Node.js 传统模块系统&#xff0c;采用同步加载方式&#xff0c;典型特征&#xff1a; // 导出 module.exports { name: cjs }; // 或 exports.nam…
阅读更多...
【HarmonyOS Next】 鸿蒙应用useNormalizedOHMUrl详解

【HarmonyOS Next】 鸿蒙应用useNormalizedOHMUrl详解

【HarmonyOS Next】 鸿蒙应用useNormalizedOHMUrl详解 一、useNormalizedOHMUrl是什么? useNormalizedOHMUrl指的是是否使用标准化OHMUrl拼接。 在开发过程中&#xff0c;需要根据不同的环境或配置动态生成 URL。例如&#xff0c;在加载一些远程模块或者资源时&#xff0c;…
阅读更多...
wav格式的音频压缩，WAV 转 MP3 VBR 体积缩减比为 13.5%、多个 MP3 格式音频合并为一个、文件夹存在则删除重建，不存在则直接建立

wav格式的音频压缩，WAV 转 MP3 VBR 体积缩减比为 13.5%、多个 MP3 格式音频合并为一个、文件夹存在则删除重建，不存在则直接建立

&#x1f947; 版权: 本文由【墨理学AI】原创首发、各位读者大大、敬请查阅、感谢三连 &#x1f389; 声明: 作为全网 AI 领域 干货最多的博主之一&#xff0c;❤️ 不负光阴不负卿 ❤️ 文章目录 问题一&#xff1a;wav格式的音频压缩为哪些格式&#xff0c;网络传输给用户播放…
阅读更多...
MFC线程

MFC线程

创建线程 HANDLE m_hThread; m_hThread CreateThread(NULL, 0, save_snapshot, (LPVOID)this, 0, &iThreadId);开启线程循环等待 DWORD WINAPI save_snapshot(LPVOID pVoid) {while (true){//持续循环等待事件到达。接收到事件信号后才进入if。if (::WaitForSingleObjec…
阅读更多...
赋能农业数字化转型 雏森科技助力“聚农拼”平台建设

赋能农业数字化转型 雏森科技助力“聚农拼”平台建设

赋能农业数字化转型&#xff0c;雏森科技助力“聚农拼”平台建设 在数字化浪潮席卷各行业的今天&#xff0c;农业领域也在积极探索转型升级之路。中农集团一直以“根植大地&#xff0c;服务三农”为核心&#xff0c;以“乡村振兴&#xff0c;农民增收”为目标&#xff0c;及时…
阅读更多...
千峰React：Hooks（上）

千峰React：Hooks（上）

什么是Hooks ref引用值 普通变量的改变一般是不好触发函数组件的渲染的&#xff0c;如果想让一般的数据也可以得到状态的保存&#xff0c;可以使用ref import { useState ,useRef} from reactfunction App() {const [count, setCount] useState(0)let num useRef(0)const h…
阅读更多...
Ubuntu20.04安装Redis

Ubuntu20.04安装Redis

1.切换到root用户 如果没有切换到root用户的&#xff0c;切换到root用户。 2.使用 apt install redis 安装redis 遇到y/n直接y即可。 redis安装好之后就自动启动起来了&#xff0c;因此我们可以通过netstat -anp | grep redis命令来查看是否安装成功。 6379是Redis的默认端…
阅读更多...
最新文章

Copyright @ 2022~2023