一：項目介紹

? ? ? ? 本次實驗主要涉及到的技術是 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.valuedata.value = Date.now()message.value = ''// console.log(data.value);
}/** 刷新加載 */
onMounted(() => {openFullScreen2();window.addEventListener("keydown", keyDown);
});
/** 回車方法 */
function keyDown(e: any) {// 回車則執行登錄方法 enter鍵的ASCII是13if (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 = falselet 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 = 0console.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