当前位置: 首页 > news >正文

用 Vue 3 + OpenAI API 实现一个智能对话助手(支持上下文、多角色)

文章目录

  • 一、项目背景与功能介绍
  • 二、技术选型与准备工作
    • 环境准备
  • 三、智能对话助手的实现
    • 第一节:封装 OpenAI 接口请求
    • 第二节:构建消息上下文结构
    • 第三节:构建对话 UI 组件
    • 第四节:滚动自动到底部(可选优化)
  • 四、多角色设定与功能拓展
    • 第一节:添加多角色设定功能
    • 第二节:其他功能建议

一、项目背景与功能介绍

随着 OpenAI 的 API 对公众开放,越来越多 Web 应用开始集成 ChatGPT 能力。从“智能客服”到“AI 写作助手”,前端在其中的作用变得尤为关键。

本项目旨在用 Vue 3 打造一个简洁易用的智能对话助手,具备以下核心能力:

  • ✅ 支持与 ChatGPT 的连续对话(上下文记忆)
  • ✅ 支持多角色身份设定(助手 / 翻译官 / 写作导师等)
  • ✅ 支持请求加载提示、自动滚动展示
  • ✅ 可拓展 Markdown 渲染、聊天记录导出等功能

场景适用于:

  • SaaS 后台系统智能客服
  • AI 内容创作助手
  • 学习类平台中的问答机器人

二、技术选型与准备工作

本项目采用如下技术栈:

技术用途
Vue 3 + Composition API构建响应式组件
Axios封装 OpenAI 请求
Tailwind CSS快速布局与样式美化
OpenAI Chat Completion API接入 GPT 模型进行对话

环境准备

  1. 注册并获取 OpenAI API Key:
    👉 https://platform.openai.com/account/api-keys

  2. 在项目根目录添加 .env 文件,并配置:

VITE_OPENAI_API_KEY=你的真实key
  1. 安装依赖(你也可以使用 Vite 创建 Vue 项目):
npm install axios
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Tailwind 可换为任意 UI 框架,如 Element Plus、Naive UI 等。

三、智能对话助手的实现

第一节:封装 OpenAI 接口请求

我们封装一个 chatWithGPT 方法,用于发送对话上下文:

// utils/openai.ts
import axios from 'axios'const instance = axios.create({baseURL: 'https://api.openai.com/v1',headers: {'Content-Type': 'application/json',Authorization: `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`}
})export function chatWithGPT(messages: any[], model = 'gpt-3.5-turbo') {return instance.post('/chat/completions', {model,messages})
}

第二节:构建消息上下文结构

消息体结构参考 OpenAI 的标准格式:

interface ChatMessage {role: 'system' | 'user' | 'assistant'content: string
}

系统设定语句一般放在最前:

const messages = ref<ChatMessage[]>([{ role: 'system', content: '你是一个有帮助的中文智能助手。' }
])

每当用户输入后,追加一条 user 消息,随后调用接口获取 assistant 回复。

第三节:构建对话 UI 组件

使用 Composition API 实现基本聊天逻辑:

<template><div class="p-4 max-w-2xl mx-auto space-y-4"><div class="h-96 overflow-y-auto bg-gray-50 rounded p-2"><div v-for="(msg, i) in messages" :key="i" class="mb-2"><div class="font-semibold text-sm text-gray-700">{{ msg.role === 'user' ? '🙋 用户' : msg.role === 'assistant' ? '🤖 助手' : '⚙️ 系统' }}</div><div class="ml-4 text-gray-800">{{ msg.content }}</div></div><div v-if="loading" class="text-gray-500">助手正在思考中...</div></div><textarea v-model="input" class="w-full border rounded p-2" rows="3" placeholder="输入你的问题..." /><div class="flex justify-end"><button @click="send" class="bg-blue-600 text-white px-4 py-1 rounded" :disabled="loading">发送</button></div></div>
</template><script setup lang="ts">
import { ref } from 'vue'
import { chatWithGPT } from '@/utils/openai'const input = ref('')
const loading = ref(false)
const messages = ref([{ role: 'system', content: '你是一个有帮助的中文智能助手。' }
])const send = async () => {if (!input.value.trim()) returnmessages.value.push({ role: 'user', content: input.value })const currentInput = input.valueinput.value = ''loading.value = truetry {const res = await chatWithGPT(messages.value)const reply = res.data.choices[0].messagemessages.value.push(reply)} catch (e) {messages.value.push({ role: 'assistant', content: '请求出错,请稍后重试。' })} finally {loading.value = false}
}
</script>

第四节:滚动自动到底部(可选优化)

可通过监听 DOM 滚动元素实现“消息自动滚动到底部”:

watch(messages, () => {nextTick(() => {const container = document.querySelector('.overflow-y-auto')container?.scrollTo({ top: container.scrollHeight, behavior: 'smooth' })})
})

四、多角色设定与功能拓展

第一节:添加多角色设定功能

可以添加下拉菜单或 Tab,实现角色 prompt 动态切换:

const roles = {默认: '你是一个有帮助的中文助手。',翻译官: '你是一个翻译专家,把所有用户输入翻译成英文回复。',写作导师: '你是一个文章优化专家,帮助用户润色语句。'
}const currentRole = ref('默认')const resetRole = () => {messages.value = [{ role: 'system', content: roles[currentRole.value] }]
}

第二节:其他功能建议

  • ✅ Markdown 格式回复(可用 marked / markdown-it 渲染)
  • ✅ 聊天记录导出为 TXT / JSON
  • ✅ 聊天记录持久化至 LocalStorage / IndexedDB
  • ✅ 加入快捷命令系统(如 /总结, /翻译, /优化

到这里,这篇文章就和大家说再见啦!我的主页里还藏着很多 篇 前端 实战干货,感兴趣的话可以点击头像看看,说不定能找到你需要的解决方案~
创作这篇内容花了很多的功夫。如果它帮你解决了问题,或者带来了启发,欢迎:
点个赞❤️ 让更多人看到优质内容
关注「前端极客探险家」🚀 每周解锁新技巧
收藏文章⭐️ 方便随时查阅
📢 特别提醒:
转载请注明原文链接,商业合作请私信联系
感谢你的阅读!我们下篇文章再见~ 💕

在这里插入图片描述

相关文章:

用 Vue 3 + OpenAI API 实现一个智能对话助手(支持上下文、多角色)

文章目录 一、项目背景与功能介绍二、技术选型与准备工作环境准备 三、智能对话助手的实现第一节&#xff1a;封装 OpenAI 接口请求第二节&#xff1a;构建消息上下文结构第三节&#xff1a;构建对话 UI 组件第四节&#xff1a;滚动自动到底部&#xff08;可选优化&#xff09;…...

ollama修改配置使用多GPU,使用EvalScope进行模型压力测试,查看使用负载均衡前后的性能区别

文章目录 省流结论机器配置不同量化模型占用显存1. 创建虚拟环境2. 创建测试jsonl文件3. 新建测试脚本3. 默认加载方式&#xff0c;单卡运行模型3.1 7b模型输出213 tok/s3.1 32b模型输出81 tok/s3.1 70b模型输出43tok/s 4. 使用负载均衡&#xff0c;多卡运行4.1 7b模型输出217t…...

vue3 setup vite 配置跨域了proxy,部署正式环境的替换

在开发环境中使用 Vite 的 proxy 配置来解决跨域问题是一种常见的做法。然而&#xff0c;在部署到正式环境时&#xff0c;通常需要对接口地址进行调整&#xff0c;具体是否需要更改接口名称取决于你的部署环境和后端服务的配置。以下是几种常见的情况和建议&#xff1a; 1. 正…...

目标检测:YOLOv11(Ultralytics)环境配置

1、前言 YOLO11是Ultralytics公司YOLO系列实时目标检测器的最新迭代版本&#xff0c;它以尖端的准确性、速度和效率重新定义了可能实现的性能。在之前YOLO版本取得的显著进步基础上&#xff0c;YOLO11在架构和训练方法上进行了重大改进&#xff0c;使其成为各种计算机视觉任务中…...

如何高效压缩GIF动图?

GIF动图因其兼容性强、易于传播的特点&#xff0c;成为网络交流的热门选择。然而&#xff0c;过大的文件体积常常导致加载缓慢、分享困难等问题。本文将为您详细介绍几种实用的GIF压缩技巧&#xff0c;帮助您在保持画面质量的同时显著减小文件大小。 压缩方法 1. 在线压缩工具…...

视频融合平台EasyCVR可视化AI+视频管理系统,打造轧钢厂智慧安全管理体系

一、背景分析 在轧钢厂&#xff0c;打包机负责线材打包&#xff0c;操作人员需频繁进入内部添加护垫、整理包装、检修调试等。例如&#xff0c;每班产线超过300件&#xff0c;12小时内人员进出打包机区域超过300次。若员工安全意识薄弱、违规操作&#xff0c;未落实安全措施就…...

通过命令行操作把 本地IDE 项目上传到 GitHub(小白快速版)

通过命令行操作把 本地IDE 项目上传到 GitHub&#xff08;小白版&#xff09; 你是不是在用 本地IDE 做项目&#xff0c;但不知道怎么把自己的代码上传到 GitHub&#xff1f;今天我们用最简单的命令行方式&#xff08;不用 SSH、不用复杂配置&#xff09;教你一步一步把本地项…...

【c语言基础学习】qsort快速排序函数介绍与使用

在C语言中&#xff0c;qsort 函数用于对数组进行快速排序。以下是详细的使用方法及示例&#xff1a; 一、函数原型 #include <stdlib.h>void qsort(void *base, size_t nmemb, size_t size, int (*compar)(const void *, const void *) );二、参数说明 参数说明base指向…...

​​​​​​​今日github AI科技工具汇总(20250415更新)

以下是2025年4月15日GitHub上值得关注的AI科技工具汇总及趋势分析,结合最新开源动态与开发者社区热点整理: 一、AI编程工具重大更新 GitHub Copilot Agent Mode 全量发布 核心功能:在VS Code中启用后,可自主完成多文件代码重构、测试驱动开发(TDD)及自修复编译错误,支持…...

程序化广告行业(88/89):广告创意审核的法律红线与平台规则

程序化广告行业&#xff08;88/89&#xff09;&#xff1a;广告创意审核的法律红线与平台规则 在程序化广告的广阔领域中&#xff0c;不断学习和掌握行业规范是我们稳步前行的基石。一直以来&#xff0c;我都期望与大家携手共进&#xff0c;深入探索这个行业的奥秘。今天&…...

前端VUE框架理论与应用(4)

一、计算属性 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: <div id="example">{{ message.split().reverse().join() }}</div> 在这个地方,模板不再是简单的声明式逻辑。你…...

【经验分享】基于Calcite+MyBatis实现多数据库SQL自动适配:从原理到生产实践

基于CalciteMyBatis实现多数据库SQL自动适配&#xff1a;从原理到生产实践 一、引言&#xff1a;多数据库适配的行业痛点 在当今企业IT环境中&#xff0c;数据库异构性已成为常态。根据DB-Engines最新调研&#xff0c;超过78%的企业同时使用两种以上数据库系统。这种多样性带…...

通信算法之265: 无人机系统中的C2链路

在无人机系统设计中&#xff0c;我们经常听到C2链路这个名词&#xff0c;到底什么是C2链路呢&#xff1f;为什么说C2链路是无人机系统中非常重要的环节。 转载&#xff1a; 无人机技术是各种科技技术水平综合发展的结果&#xff0c;包括空气动力&#xff0c;机械设计&#xf…...

浙江大学:DeepSeek如何引领智慧医疗的革新之路?|48页PPT下载方法

导 读INTRODUCTION 随着人工智能技术的飞速发展&#xff0c;DeepSeek等大模型正在引领医疗行业进入一个全新的智慧医疗时代。这些先进的技术不仅正在改变医疗服务的提供方式&#xff0c;还在提高医疗质量和效率方面展现出巨大潜力。 想象一下&#xff0c;当你走进医院&#xff…...

Codeforces Round 1017 (Div. 4)

Codeforces Round 1017 (Div. 4) A. Trippi Troppi AC code: void solve() { string a, b, c; cin >> a >> b >> c;cout << a[0] << b[0] << c[0] << endl; } B. Bobritto Bandito 思路&#xff1a; 倒推模拟即可&#xff0c…...

bash的特性-bash中的引号

在Linux或Unix系统中&#xff0c;Bash&#xff08;Bourne Again SHell&#xff09;作为最常用的命令行解释器之一&#xff0c;提供了强大的功能来处理各种任务。正确使用引号是掌握Bash脚本编写的基础技能之一&#xff0c;它决定了如何解析字符串、变量替换以及特殊字符的行为。…...

ubuntu上SSH防止暴力破解帐号密码

在知道设备ip的情况下&#xff0c;使用 Fail2Ban防止暴力破解 sudo apt install fail2ban 配置 SSH 防护规则 sudo gedit /etc/fail2ban/jail.local jail.local内容如下&#xff1a; [sshd] enabled true port ssh logpath /var/log/auth.log # Ubuntu/Debian maxret…...

【Bluedroid】A2DP Sink播放流程源码分析(二)

接上一篇继续分析&#xff1a;【Bluedroid】A2DP Sink播放流程源码分析(一)_安卓a2dp sink播放流程-CSDN博客 AVDTP接收端&#xff08;Sink&#xff09;流事件处理 bta_av_sink_data_cback 是 Bluedroid 中 A2DP Sink 角色的 AVDTP 数据回调函数&#xff0c;负责处理接收端的…...

【Code】《代码整洁之道》笔记-Chapter16-重构SerialDate

第16章 重构SerialDate 如果你找到JCommon类库&#xff0c;深入该类库&#xff0c;其中有个名为org.jfree.date的程序包。在该程序包中&#xff0c;有个名为SerialDate的类&#xff0c;我们即将剖析这个类。 SerialDate的作者是David Gilbert。David显然是一位经验丰富、能力…...

redis 内存中放哪些数据?

在 Java 开发中,Redis 作为高性能内存数据库,通常用于存储高频访问、低延迟要求、短期有效或需要原子操作的数据。以下是 Redis 内存中常见的数据类型及对应的使用场景,适合面试回答: 1. 缓存数据(高频访问,降低数据库压力) 用户会话(Session):存储用户登录状态、临时…...

【Python使用】嘿马云课堂web完整实战项目第4篇:封装异常处理,封装JSON返回值【附代码文档】

教程总体简介&#xff1a;项目概述 项目背景 项目的功能构架 项目的技术架构 CMS 什么是CMS CMS需求分析与工程搭建 静态门户工程搭建 SSI服务端包含技术 页面预览开发 4 添加“页面预览”链接 页面发布 需求分析 技术方案 测试 环境搭建 数据字典 服务端 前端 数据模型 页面原…...

「数据可视化 D3系列」入门第三章:深入理解 Update-Enter-Exit 模式

深入理解 Update-Enter-Exit 模式 一、数据绑定三态&#xff1a;Update、Enter、Exit三种状态的直观理解 二、基础概念1. Update 选区 - 处理已有元素2. Enter 选区 - 处理新增数据3. Exit 选区 - 处理多余元素 三、完整工作流程四、三种状态的底层原理数据绑定过程解析键函数&…...

中间件--ClickHouse-5--架构设计(分布式架构,列式压缩存储、并行计算)

1、整体架构设计 ClickHouse 采用MPP&#xff08;大规模并行处理&#xff09;架构&#xff0c;支持分布式计算和存储&#xff0c;其核心设计目标是高性能列式分析。 &#xff08;1&#xff09;、存储层 列式存储&#xff1a; 数据按列存储&#xff08;而非传统行式存储&#…...

AgentGPT 在浏览器中组装、配置和部署自主 AI 代理 入门介绍

AI MCP 系列 AgentGPT-01-入门介绍 Browser-use 是连接你的AI代理与浏览器的最简单方式 AI MCP(大模型上下文)-01-入门介绍 AI MCP(大模型上下文)-02-awesome-mcp-servers 精选的 MCP 服务器 AI MCP(大模型上下文)-03-open webui 介绍 是一个可扩展、功能丰富且用户友好的…...

【开源项目】Excel手撕AI算法深入理解(三):Backpropagation、mamba、RNN

项目源码地址&#xff1a;https://github.com/ImagineAILab/ai-by-hand-excel.git 一、Backpropagation 1. 反向传播的本质 反向传播是通过链式法则计算损失函数对网络参数的梯度的高效算法&#xff0c;目的是用梯度下降优化参数。其核心思想是&#xff1a; 前向传播&#xf…...

uniapp的通用页面及组件基本封装

1.基本布局页面 适用于自定义Navbar头部 <template><view class"bar" :style"{height : systemInfo.statusBarHeight px, background: param.barBgColor }"></view><view class"headBox" :style"{ height: param.h…...

Ubuntu和Debian 操作系统的同与异

首先需要说明&#xff1a;Ubuntu 是基于 Debian 操作系统开发的。它们之间的关系如下 起源与发展&#xff1a;Debian 是一个社区驱动的开源 Linux 发行版&#xff0c;始于 1993 年&#xff0c;是最早的 Linux 发行版之一&#xff0c;以其稳定性和自由软件政策著称。Ubuntu 是基…...

【android bluetooth 协议分析 21】【ble 介绍 1】【什么是RPA】

通俗易懂地讲解一下 BLE&#xff08;低功耗蓝牙&#xff09;中的 Resolvable Private Address&#xff08;RPA&#xff0c;可解析私有地址&#xff09;。 1. 一句话理解 RPA 是一种“临时的、隐私保护的蓝牙设备地址”&#xff0c;别人无法随便追踪你&#xff0c;但“授权的设…...

狂神SQL学习笔记九:MyISAM 和 lnnoDB 区别

show create database school –查看创建数据库的语句 show create table student – 查看student数据表的定义语句 desc student –显示表的结构 MYISAMINNODB事务支持不支持支持数据行锁定不支持支持行锁定外键不支持支持全文索引支持不支持表空间的大小较小较大&#x…...

深度学习--神经网络的构造

在当今数字化时代&#xff0c;深度学习已然成为人工智能领域中最为耀眼的明星。而神经网络作为深度学习的核心架构&#xff0c;其构造方式决定了模型的性能与应用效果。本文将深入探讨深度学习神经网络的构造&#xff0c;带您领略这一前沿技术的奥秘。​ 一、神经网络基础概念…...

Jenkins 代理自动化-dotnet程序

两种方式 容器部署 本地部署 容器部署 可自动实现&#xff0c;服务器重启&#xff0c;容器自动运行 主要将dockerfile 写好 本地部署 1.服务器重启自动运行代理 参考下面的链接&#xff0c;只是把程序换成 java程序&#xff0c;提前确认好需要的jdk版本 Ubuntu20.04 设置开机…...

【区块链+ 人才服务】“CERX Network”——基于 FISCO BCOS 的研学资源交换网络 | FISCO BCOS 应用案例

CERX Network &#xff08;Consortium-based Education Resource Exchanging Network&#xff09; 是定位于面向高校科学研究与教学 的分布式研学资产交换网络&#xff0c; 构建一个用于数据、 算法模型、 论文和课程的研学资源价值流转平台。项目以 FISCO BCOS 联盟链为底层平…...

中间件--ClickHouse-6--SQL基础(类似Mysql,存在差异)

ClickHouse语言类似Mysql&#xff0c;如果熟悉Mysql&#xff0c;那么学习ClickHouse的语言还是比较容易上手的。 1、建表语法&#xff08;CREATE TABLE&#xff09; &#xff08;1&#xff09;、表引擎&#xff08;Engine&#xff09; MySQL&#xff1a; 默认使用 InnoDB 引…...

[MSPM0开发]MSPM0G3507番外一:关于使用外部高速晶振HFXT后程序可能不运行的问题

一、问题描述 如下图所示&#xff0c;MSPM0G3507时钟树配置为使用外部HFXT&#xff08;外部高速晶振&#xff09;作为HSCLK时钟源。 配置结果MCLK 40MHz。 另外配置PB22为输出模式&#xff0c;控制外部LED亮灭。 在main.c中主要代码如下&#xff1a; 主要完成延时并翻转LED控…...

2025年计算机领域重大技术突破与行业动态综述

——前沿技术重塑未来&#xff0c;开发者如何把握机遇&#xff1f; 2025年第一季度&#xff0c;全球计算机领域迎来多项里程碑式进展&#xff0c;从量子计算到人工智能&#xff0c;从芯片设计到网络安全&#xff0c;技术革新与产业融合持续加速。本文梳理近三个月内最具影响力…...

我的机器学习之路(初稿)

文章目录 一、机器学习定义二、核心三要素三、算法类型详解1. 监督学习&#xff08;带标签数据&#xff09;2. 无监督学习&#xff08;无标签数据&#xff09;3. 强化学习&#xff08;决策优化&#xff09;(我之后主攻的方向) 四、典型应用场景五、学习路线图六、常见误区警示七…...

交易模式革新:Eagle Trader APP上线,助力自营交易考试效率提升

近年来&#xff0c;金融行业随着投资者需求的日益多样化&#xff0c;衍生出了众多不同的交易方式。例如&#xff0c;为了帮助新手小白建立交易基础&#xff0c;诞生了各类跟单社区&#xff1b;而与此同时&#xff0c;一种备受瞩目的交易方式 —— 自营交易模式&#xff0c;正吸…...

emotn ui桌面tv版官网-emotn ui桌面使用教程

在智能电视和盒子的使用中&#xff0c;出色的桌面系统能大幅提升体验&#xff0c;Emotn UI桌面TV版便是其中的佼佼者。 访问Emotn UI桌面TV版官网&#xff0c;首页简洁清晰&#xff0c;“产品介绍”“下载中心”等板块一目了然。官网对其功能优势详细阐述&#xff0c;在“下载中…...

Django之modelform使用

Django新增修改数据功能优化 目录 1.新增数据功能优化 2.修改数据功能优化 在我们做数据优化处理之前, 我们先回顾下传统的写法, 是如何实现增加修改的。 我们需要在templates里面新建前端的页面, 需要有新增还要删除, 比如说员工数据的新增, 那需要有很多个输入框, 那html…...

Hadoop:大数据时代的基石

在当今数字化浪潮中&#xff0c;数据量呈爆炸式增长&#xff0c;企业和组织面临着前所未有的数据处理挑战。从社交媒体的海量信息到物联网设备的实时数据&#xff0c;如何高效地存储、管理和分析这些数据成为了一个关键问题。Apache Hadoop 作为大数据处理领域的核心框架&#…...

定制开发还是源码搭建?如何快速上线同城外卖跑腿APP?

在“万物皆可同城配送”的时代&#xff0c;同城外卖跑腿APP成为众多创业者和本地服务商的热门选择。无论是打造本地生活服务平台&#xff0c;还是拓展快送业务&#xff0c;拥有一款功能完善、体验流畅的外卖跑腿APP&#xff0c;已经成为进入市场的标配。 然而&#xff0c;对于…...

How AI could empower any business - Andrew Ng

How AI could empower any business - Andrew Ng References 人工智能如何为任何业务提供支持 empower /ɪmˈpaʊə(r)/ vt. 授权&#xff1b;给 (某人) ...的权力&#xff1b;使控制局势&#xff1b;增加 (某人的) 自主权When I think about the rise of AI, I’m reminded …...

SpringBoot-基础特性

1.SpringApplication 1.1.自定义banner 类路径添加banner.txt或设置spring.banner.location就可以定制 banner 1.2.自定义 SpringApplication import org.springframework.boot.Banner; import org.springframework.boot.SpringApplication; import org.springframework.bo…...

系统环境变量有什么实际作用,为什么要配置它

系统环境变量有什么实际作用,为什么要配置它 系统环境变量具有以下重要实际作用: 指定程序路径:操作系统通过环境变量来知晓可执行文件、库文件等的存储位置例如,当你在命令提示符或终端中输入一个命令时,系统会根据环境变量PATH中指定的路径去查找对应的可执行文件。如果…...

C++ | STL之list详解:双向链表的灵活操作与高效实践

引言 std::list 是C STL中基于双向链表实现的顺序容器&#xff0c;擅长高效插入和删除操作&#xff0c;尤其适用于频繁修改中间元素的场景。与std::vector不同&#xff0c;std::list的内存非连续&#xff0c;但提供了稳定的迭代器和灵活的元素管理。本文将全面解析std::list的…...

Spring Cloud 服务间调用深度解析

前言 在构建微服务架构时&#xff0c;服务间的高效通信是至关重要的。Spring Cloud 提供了一套完整的解决方案来实现服务间的调用、负载均衡、服务发现等功能。本文将深入探讨 Spring Cloud 中服务之间的调用机制&#xff0c;并通过源码片段和 Mermaid 图表帮助读者更好地理解…...

什么是时间复杂度和空间复杂度?

什么是时间复杂度和空间复杂度? 时间复杂度:衡量代码运行时间随输入规模增大而增长的速度。简单来说,就是“代码跑多快”。 空间复杂度:衡量代码运行时额外占用的内存空间随输入规模增大而增长的速度。简单来说,就是“代码用多少内存”。 我们通常用 大 O 表示法(Big O N…...

算法思想之分治-快排

欢迎拜访&#xff1a;雾里看山-CSDN博客 本篇主题&#xff1a;算法思想之分治-快排 发布时间&#xff1a;2025.4.15 隶属专栏&#xff1a;算法 目录 算法介绍核心步骤优化策略 例题颜色分类题目链接题目描述算法思路代码实现 排序数组题目链接题目描述算法思路代码实现 数组中的…...

25.4.15学习总结

问题&#xff1a; 邮箱验证码通过公钥加密后发到前端&#xff0c;在前端用私钥解密验证可行吗&#xff1f; 结论&#xff1a; 在前端使用私钥解密通过公钥加密的邮箱验证码在技术上是可行的&#xff0c;但存在严重的安全风险&#xff0c;不建议采用。 问题分析 非对称加密的…...

小程序获取用户总结(全)

获取方式 目前小程序获取用户一共有3中(自己接触到的),但由于这个API一直在改,所以不确定后期是否有变动,还是要多关注官方公告。 方式一 使用wx.getUserInfo 实例: wxml 文件<button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo&quo…...