腾讯云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_…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
【JVM】- 内存结构
引言 JVM:Java Virtual Machine 定义:Java虚拟机,Java二进制字节码的运行环境好处: 一次编写,到处运行自动内存管理,垃圾回收的功能数组下标越界检查(会抛异常,不会覆盖到其他代码…...
家政维修平台实战20:权限设计
目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系,主要是分成几个表,用户表我们是记录用户的基础信息,包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题,不同的角色…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会,玩音乐的本质就是玩电网。火电声音偏暖,水电偏冷,风电偏空旷。至于太阳能发的电,则略显朦胧和单薄。 不知你是否有感觉,近两年家里的音响声音越来越冷,听起来越来越单薄? —…...
JavaScript 数据类型详解
JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型(Primitive) 和 对象类型(Object) 两大类,共 8 种(ES11): 一、原始类型(7种) 1. undefined 定…...
毫米波雷达基础理论(3D+4D)
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文: 一文入门汽车毫米波雷达基本原理 :https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
适应性Java用于现代 API:REST、GraphQL 和事件驱动
在快速发展的软件开发领域,REST、GraphQL 和事件驱动架构等新的 API 标准对于构建可扩展、高效的系统至关重要。Java 在现代 API 方面以其在企业应用中的稳定性而闻名,不断适应这些现代范式的需求。随着不断发展的生态系统,Java 在现代 API 方…...
热烈祝贺埃文科技正式加入可信数据空间发展联盟
2025年4月29日,在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上,可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞,强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...
解析“道作为序位生成器”的核心原理
解析“道作为序位生成器”的核心原理 以下完整展开道函数的零点调控机制,重点解析"道作为序位生成器"的核心原理与实现框架: 一、道函数的零点调控机制 1. 道作为序位生成器 道在认知坐标系$(x_{\text{物}}, y_{\text{意}}, z_{\text{文}}…...
