腾讯云AI代码助手编程挑战赛-刑说
作品简介
鉴于当代普法力度不够大,这个刑说可以帮助大家更好的普及法律知识
技术架构
采用了全后端分离的架构,前端使用Vue.js,腾讯云的AI服务处理自然语言理解与生成。
实现过程
开发环境、开发流程
系统:win11
开发工具:VSCode
开发环境为:node-v23.6.0-win-x64
开发流程:
1、解压并配置node.js环境变量
2、使用npm i命令初始化项目
3、使用npm run dev启动项目

关键技术解析
增加了切换风格与主题声明。
腾讯云AI代码助手在上述过程中的助力
1、使用生成解释功能整理了代码思路

这段代码是一个Vue 3组件,使用了`<script setup>`语法,这是Vue 3中推荐的组合式API的使用方式。下面是对代码的主要部分的解释:
### 模板部分 (`<template>`)
- 使用了`<t-chat>`组件来展示聊天界面,具有单布局(`layout="single"`),固定高度(`style="height: 600px"`)。
- `:clear-history`属性用于控制是否显示清除历史记录的选项,当`chatList`有内容且不是流式加载时显示。
- `@clear`事件监听器用于监听清除历史的操作,触发`clearConfirm`方法。
- 使用`v-for`指令遍历`chatList`数组,为每条聊天记录渲染一个`<t-chat-item>`组件。
- 在每条聊天记录中,根据条件渲染`<t-chat-action>`组件和报警按钮。
- 使用`#footer`插槽来自定义聊天界面的底部,这里放置了一个`<t-chat-input>`组件,用于输入新的消息。### 脚本部分 (`<script setup>`)
- 导入了`ref`函数,用于创建响应式的引用。
- 定义了一系列的响应式变量,如`loading`, `isStreamLoad`, `isGood`, `isBad`, `chatRef`等,用于控制组件的状态。
- `reportItem`方法用于处理报警操作,目前只是简单地弹出一个提示框。
- `backBottom`方法用于滚动到聊天界面的底部。
- `chatList`是一个响应式数组,包含了聊天记录的数据。
- `clearConfirm`方法用于清空聊天记录。
- `onStop`方法用于停止流式加载数据。
- `handleOperation`方法用于处理聊天记录的操作,如点赞、点踩或回复。
- `handleData`方法用于处理发送消息后的数据流,包括设置加载状态、调用`fetchSSE`方法等。
- `inputEnter`方法用于处理用户输入的消息,将其添加到`chatList`中,并触发消息处理流程。
- `fetchSSE`方法是一个异步函数,用于通过Server-Sent Events (SSE)与后端API进行通信,获取流式响应数据。### 样式部分 (`<style lang="less" scoped>`)
- 样式部分目前为空,没有提供具体的样式规则。
### 注意事项
- 代码中使用了`fetchSSE`函数来处理与后端的流式通信,这是一个自定义的函数,不是浏览器原生支持的API。
- `fetchSSE`函数中使用了`AbortController`来支持请求的取消操作,这是一个现代浏览器提供的API。
- 代码中的`apiKey`应该是用于认证的,但在实际应用中不应该硬编码在客户端代码中,而应该通过安全的方式管理。
- `fetchSSE`函数中的错误处理和数据处理逻辑比较复杂,需要仔细调试以确保稳定性。这段代码实现了一个具有基本聊天功能的Vue组件,包括消息的显示、输入、发送以及一些交互操作。
2、增加标题
给页面和右侧增加了高亮显示的标题,使用腾讯云AI代码助手提供的代码实现。

这里还是用腾讯云AI助手提供的对应代码完成。
使用说明
1、解压并配置node.js环境变量
2、使用npm i命令初始化项目
3、使用npm run dev启动项目
4、访问http://localhost:3005/进行提问即可。
效果展示
live.csdn.net/v/442832
相关文章:
腾讯云AI代码助手编程挑战赛-刑说
作品简介 鉴于当代普法力度不够大,这个刑说可以帮助大家更好的普及法律知识 技术架构 采用了全后端分离的架构,前端使用Vue.js,腾讯云的AI服务处理自然语言理解与生成。 实现过程 开发环境、开发流程 系统:win11 开发工具&…...
【测试】持续集成CI/CD
近期更新完毕,建议关注收藏点赞~ 目录 概括gitJenkinspostman集成jenkins代码集成jenkins 概括 CI/CD stands for Continuous Integration and Continuous Deployment 定义 团队成果持续集成到公共平台。一天可以集成1次or多次 本地代码管理 git 远程代…...
阿里云直播Web
官方文档:Web播放器SDK常见问题_视频点播(VOD)-阿里云帮助中心 bug:播流的不稳定,直播总会进入 onM3u8Retry 监听,用户端就会黑屏,(但其实并没有关播,正常关播进入的是pause这个监听࿰…...
DuckDB:PRAGMA语句动态配置数据库行为
PRAGMA语句是DuckDB从SQLite中采用的SQL扩展。PRAGMA命令可能会改变数据库引擎的内部状态,并可能影响引擎的后续执行或行为。本文介绍PRAGMA命令及其典型应用场景。 DuckDB PRAGMA介绍 在 DuckDB 中,PRAGMA 是一种编译指示(compiler directi…...
GO通过SMTP协议发送邮件
什么是SMTP协议 SMTP(Simple Mail Transfer Protocol,简单邮件传输协议)是用于发送邮件的协议。当一个邮件服务器需要发送邮件给另一个邮件服务器时,它会使用SMTP协议与目标服务器建立连接,并传输邮件内容。SMTP协议的…...
轻量自高斯注意力机制LSGAttention模型详解及代码复现
模型背景 近年来,卷积神经网络(CNN)在高光谱图像分类领域取得了显著进展。然而,CNN面临 长距离关系建模 和 计算成本 增加的挑战。为解决这些问题,研究人员提出了基于 轻量自高斯注意(Light Self-Gaussian-Attention, LSGA) 机制的视觉转换器(Vision Transformer, VIT),旨…...
解读若依框架中的`@Excel` 和 `@Excels` 注解
文章目录 一、Excels 注解详解1.1 适用场景1.2 作用与好处 二、Excel 注解详解2.1 核心属性解析2.2 高级用法2.3 综合应用案例 三、总结 解读若依框架中的 Xss 注解博客:解读若依框架中的 Xss 注解 接下来我们将对若依框架中的 Excel 和 Excels 注解进行更加详细的…...
云商城--基础数据处理和分布式文件存储
第2章 基础数据处理和分布式文件存储 1.分布式文件存储系统Ceph学习 1).掌握Ceph架构 2).掌握Ceph组件 3).搭建Ceph集群(了解) 2.Ceph使用 1).基于Ceph实现文件上传 2).基于Ceph实现文件下载 3.SKU、SPU管理 1).掌握SKU和SPU关系 2).理解商品发…...
六十九:基于openssl实战验证RSA
RSA(Rivest-Shamir-Adleman)是一种非对称加密算法,广泛应用于数据加密和数字签名领域。在实际开发和学习过程中,理解 RSA 的工作原理和使用场景非常重要。本文将以 OpenSSL 工具为基础,通过实例操作来验证和理解 RSA 的…...
Three.js 用户交互:构建沉浸式3D体验的关键
文章目录 前言一、基本交互:鼠标与触摸事件二、高级交互:键盘控制与游戏手柄支持三、物理模拟与碰撞检测四、手势识别与多点触控五、增强现实(AR)与虚拟现实(VR)六、触觉反馈与震动效果七、语音控制八、眼球…...
Android车机DIY开发之学习篇(五)默认应用修改
Android车机DIY开发之学习篇(五)默认应用修改 android默认应用位置 sdk/packages/apps InitRC配置 应用安装的目录 /system/priv-app 该路径存放一些系统底层的应用,比如Setting,systemUI等。该目录中的app拥有较高的系统权限,而且如果要使…...
linux 设置mysql 外网访问
1、修改 MySQL 配置文件 找到并编辑配置文件:在Linux系统中,MySQL的配置文件通常是/etc/mysql/my.cnf,使用命令sudo vim /etc/mysql/my.cnf打开文件。 注释或修改 bindaddress:找到bindaddress 127.0.0.1,将其注释掉…...
SQL UNION 操作符
SQL UNION 操作符 SQL UNION 操作符用于合并两个或多个 SELECT 语句的结果集。它将多个结果集组合成一个单独的结果集,并去除重复的行。为了使用 UNION,每个 SELECT 语句必须具有相同的列数,并且对应列的数据类型必须兼容。 语法 SELECT c…...
c++ 17 constexpr
未来已来:从SFINAE到concepts #include <type_traits> #include <vector> #include <list> #include <iostream> // 一个通用的容器打印函数,支持任何带 begin()/end() 的容器 template<typename Container> …...
Java QueryWrapper groupBy自定义字段,以及List<Map>转List<Entity>
Java queryWrapper groupby自定义字段 String sql "data_id,(select value from lz_html a where a.data_id lz_html.data_id and class_nametest-item-status) status," "(select value from lz_html a where a.data_id lz_html.data_id and class_nametes…...
【Rust自学】11.7. 按测试的名称运行测试
喜欢的话别忘了点赞、收藏加关注哦,对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 11.7.1. 按名称运行测试的子集 如果想要选择运行的测试,就将测试的名称(一个或多个)作为cargo test的…...
Git:Cherry-Pick 的使用场景及使用流程
前面我们说了 Git合并、解决冲突、强行回退等解决方案 >> 点击查看 这里再说一下 Cherry-Pick功能,Cherry-Pick不是merge,只是把部分功能代码Cherry-Pick到远程的目标分支 git cherry-pick功能简介: git cherry-pick 是用来从一个分…...
Ubuntu 24.04 LTS系统安装Docker踩的坑
一开始我跟着Docker给出的官网文档 Ubuntu | Docker Docs 流程走,倒腾了两个多小时,遇到了各种坑,最后放弃了。在我们使用脚本安装Docker命令前,我们先把已经安装的Docker全部卸载掉。 卸载Docker 1.删除docker及安装时自动安装…...
工作生活的感悟
前言 这篇博客基本每年都更新,每年都有新的感悟,作为一个记录吧!以后按照年来记录 2022年 不经意间,已在职场耕耘数载,特此记录以作回顾。 无用之用,方为大用: 年岁渐长,愈发体会…...
NCCL学习笔记-函数解析
前言 1.NCCL 是一个专注于 GPU 间高性能通信的库,不提供进程管理或安全通信功能。 2.用户需要依赖应用程序的进程管理系统(如 MPI)来管理进程,并确保 NCCL 在安全的网络环境中运行。 3.通过正确配置环境变量(如 NCCL_…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会,其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具,对过去十年 WWDC 主题演讲内容进行了系统化分析,形成了这份…...
遍历 Map 类型集合的方法汇总
1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验,以及大语言模型的分析能力,我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际,我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测,聊作存档。等到明…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
【生成模型】视频生成论文调研
工作清单 上游应用方向:控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...
深度学习水论文:mamba+图像增强
🧀当前视觉领域对高效长序列建模需求激增,对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模,以及动态计算优势,在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内,就有不…...
【JVM面试篇】高频八股汇总——类加载和类加载器
目录 1. 讲一下类加载过程? 2. Java创建对象的过程? 3. 对象的生命周期? 4. 类加载器有哪些? 5. 双亲委派模型的作用(好处)? 6. 讲一下类的加载和双亲委派原则? 7. 双亲委派模…...
