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

民宿客栈网站制作竞价专员是做什么的

news 2025/7/6 6:11:15

民宿客栈网站制作,竞价专员是做什么的,做网站开发要学什么语言,高端定制网站的特点作品简介鉴于当代普法力度不够大，这个刑说可以帮助大家更好的普及法律知识技术架构采用了全后端分离的架构，前端使用Vue.js，腾讯云的AI服务处理自然语言理解与生成。实现过程开发环境、开发流程系统：win11 开发工具&…

作品简介

鉴于当代普法力度不够大，这个刑说可以帮助大家更好的普及法律知识

技术架构
采用了全后端分离的架构，前端使用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组件，包括消息的显示、输入、发送以及一些交互操作。