一：项目介绍
本次实验主要涉及到的技术是 Vue3 + Ts，当然其中也有部分是 Vue2 格式的代码以及 json 和 CSS 布局等。本来是想仿照 文心一言 来开发的一个聊天机器人案例。结果由于时间不足，可能只是做出来了一个半成品。不过核心功能是有的。由于大 json 内数据写的比较少，因此可测数据在下文中有。有需要的小伙伴可以自行添加，格式在文中也有。
PS.代码在文章底部，需要的小伙伴请底部自取。
二：各部分代码
1、项目目录
以下是项目的目录，index.vue 是我们所看到的主页面，components 下的两个文件一个是消息回复的组件，一个是左侧导航的组件。至于data.json 则是一个大 json 数据，回复的内容是从这里面拿的，判断问题产生回复。
2、index.vue代码
这个页面呢，主要就是将各个组件进行逻辑串联。里面有定义清屏方法和加载提示等。该页面更多的是布局。这里小白的话可以看一下按回车发送消息的判断逻辑。
<template>
<div class="screen">
<div class="left">
<leftMenu />
</div>
<div class="right">
<div class="up">
<chatMessage :sendMessage="sendMessage" :data='data' />
</div>
<div class="input">
<el-input class="inputStyle" v-model="message" placeholder="Please input your problem" clearable />
<el-button @click="send" @keyup.enter="keyDown($event)">send</el-button>
</div>
</div>
</div>
<el-button type="primary" @click="openFullScreen2"> 重新加载 </el-button>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElLoading } from 'element-plus'
import leftMenu from '@/views/5_chatbotDemo/components/leftMenu.vue'
import chatMessage from '@/views/5_chatbotDemo/components/chatMessage.vue'
/** 发送消息模块 */
let message = ref('')
let sendMessage = ref('')
let data = ref() // 定义一个时间戳，方便检查是否更新发送了数据
/** 发送消息的方法 */
function send() {
sendMessage.value = message.value
data.value = Date.now()
message.value = ''
// console.log(data.value);
}
/** 刷新加载 */
onMounted(() => {
openFullScreen2();
window.addEventListener("keydown", keyDown);
});
/** 回车方法 */
function keyDown(e: any) {
// 回车则执行登录方法 enter键的ASCII是13
if (e.key == 'Enter') {
send()
}
}
/** 加载中... */
const openFullScreen2 = () => {
const loading = ElLoading.service({
lock: true,
text: '',
background: 'rgba(0, 0, 0, 0.7)',
})
setTimeout(() => {
loading.close()
}, 2000)
}
</script>
<style scoped>
.screen {
height: 80vh;
display: flex;
flex-direction: row;
background: rgb(236, 239, 246);
}
.right {
width: 100%;
position: relative;
}
.up {
position: absolute;
top: 10px;
left: 30%;
/* align-items: center; */
}
.input {
position: absolute;
display: flex;
bottom: 0px;
left: 40%;
}
.inputStyle {
width: 300px;
margin-right: 10px;
}
</style>3、data.json数据
这个是大json里面存储的数据，我们可以看到这里是一个放了很多对象的数组，对象里有问题字段 question 和回复字段 replay 而我们实现的逻辑则是判断用户发送的消息是否被这些 question 所包含，如果包含的话就会返回对应的 replay 。
[
{
"question":"你叫什么名字？",
"replay":"我的名字是小娃！"
},{
"question":"你的年龄是几岁？",
"replay":"我今年20岁啦！"
},{
"question":"你上几年级",
"replay":"我今年大四了！"
},{
"question":"你是哪里人",
"replay":"我来自浙江温州"
},{
"question":"你现在在干嘛？",
"replay":"我正在学习..."
},{
"question":"你是猪吗？",
"replay":"是的，我是一头大笨猪~"
},{
"question":"今天天气怎么样？",
"replay":"为什么要问天气怎么样？有这精力不如好好赚钱，好好想想自己的原因，这么多年了工资涨没涨心里有点数！"
},{
"question":"我好无聊。",
"replay":"不要无聊，小娃给你唱首歌吧，太阳当空照，花儿对我笑，小鸟说：喳喳喳，你为什么背上炸药包？"
}
]4、leftMenu.vue代码
该组件由于时间关系并没有写逻辑，只是简单地布局，如果有小伙伴感兴趣的话可以自己思考开发一些东西上去。布局已经布好啦。
<template>
<div class="home">
<div class="title">我能做什么？</div>
<div class="menu">
<div class="item" v-for="item in menuItem">{{ item }}</div>
</div>
</div>
</template>
<script setup>
let menuItem=['陪你唠嗑','发现生活','周游世界','吃吃喝喝','一起长胖']
</script>
<style lang="scss" scoped>
.home{
width: 200px;
height: 100%;
background: linear-gradient(to bottom, rgb(238,231,235), rgb(221,221,245));
}
.title{
color: rgb(81,122,237);
height: 80px;
line-height: 80px;
text-align: center;
font-size: 26px;
border-bottom: 1px solid rgb(222,219,232);
}
.menu{
.item{
font-size: 18px;
text-align: center;
height: 60px;
line-height: 60px;
}
.item:hover{
cursor: pointer;
background: rgb(221,221,245);
}
}
</style>
5、chatMessage.vue代码
来了来了，这个页面是我们的核心组件，消息的发送，判断，回复等逻辑都是写在了这个组件里的。里面有写了注释，各位小伙伴可以沉下心来看一看哦、
<template>
<div class="clear">
<el-button type="primary" @click="clearScreen">清屏</el-button>
</div>
<div class="home" >
<div v-for="(item, index) in chatArr" :key="index">
<div class="reply" v-if="item.status === '0'">
<div class="avatar"><img width="50" src="@/assets/images/avatar.jpeg" alt=""></div>
<div class="left"></div>
<div class="content">{{ item.content }}</div>
</div>
<div class="question" v-if="item.status === '1'">
<div class="content">{{ item.content }}</div>
<div class="left"></div>
<div class="avatar"><img width="50" src="@/assets/images/avatar2.png" alt=""></div>
</div>
</div>
</div>
</template>
<script >
import { defineComponent, reactive } from "vue";
import jsonData from "@/views/5_chatbotDemo/data.json"
export default defineComponent({
watch: {
data(newValue) {
this.addArr('1', this.sendMessage);
this.replayFnc() // 当监听到有消息传入的时候调用回复方法产生回复
}
},
// props:['sendMessage']
props: {
sendMessage: {
type: String,
default: "",
},
data: 0
},
setup() {
let chatArr = reactive([
{
status: '0', // 0-回复，1-问题
content: '您好，我是你的机器助手，有什么可以帮助到您的吗？'
}, {
status: '1',
content: '我要开始提问啦！'
}, {
status: '0',
content: '请问您想要问什么呢？'
}
]);
/** 判断问题，产生回复的方法 */
function replayFnc() {
let hasQuestion = false
let replayMessage = '听不懂'
/** 循环判断是否存在该问题的答案，存在的话就改变回复的内容 */
for (let index = 0; index < jsonData.length; index++) {
if(jsonData[index].question.indexOf(this.sendMessage) > -1){
replayMessage =jsonData[index].replay
hasQuestion = true
}
}
addArr('0',replayMessage)
}
/** 添加进数组的方法 */
function addArr(status, content) {
let obj = {
status: status,
content: content
}
chatArr.push(obj)
}
/** 清屏 */
function clearScreen(){
chatArr.length = 0
console.log(chatArr);
}
return {
clearScreen,
replayFnc,
chatArr,
addArr
}
}
});
</script>
<style lang="scss" scoped>
.clear{
width: 800px;
margin-bottom: 10px;
display: flex;
justify-content: right;
}
.home {
height: 70vh;
position: relative;
width: 800px;
overflow: auto; // 滚动条
}
// 回复的样式
.reply {
display: flex;
margin-top: 5px;
.content {
padding: 15px;
max-width: 500px;
border: 1px solid;
color: #676490;
;
}
.left {
width: 0px;
height: 0px;
border: 15px solid transparent;
border-right-color: rgba(222, 222, 244);
}
}
// 提问的样式
.question {
display: flex;
margin-top: 5px;
// background: greenyellow;
justify-content: right;
.content {
padding: 15px;
max-width: 500px;
border: 1px solid;
color: #676490;
}
.left {
width: 0px;
height: 0px;
border: 15px solid transparent;
border-left-color: rgba(222, 222, 244);
}
}
</style>
三：结尾
其实本次实验的整体逻辑代码是很简单的，只是使用了 Vue3 + Ts 技术，其实现的逻辑和细节部分才是本次实验的重点。也算是通过本次复习了 Vue3 + Ts + json +css 等诸多内容吧。最后附上gitee的地址：
乾辰/vue3全家桶练习
https://gitee.com/qianchen12138/vue3-family-bucket-practice
