Vue3+Ts实现聊天机器人(chatBot-附代码)

一：项目介绍

        本次实验主要涉及到的技术是 Vue3 + Ts，当然其中也有部分是 Vue2 格式的代码以及 json 和 CSS 布局等。本来是想仿照 文心一言 来开发的一个聊天机器人案例。结果由于时间不足，可能只是做出来了一个半成品。不过核心功能是有的。由于大 json 内数据写的比较少，因此可测数据在下文中有。有需要的小伙伴可以自行添加，格式在文中也有。

        PS.代码在文章底部，需要的小伙伴请底部自取。

二：各部分代码

1、项目目录

        以下是项目的目录，index.vue 是我们所看到的主页面，components 下的两个文件一个是消息回复的组件，一个是左侧导航的组件。至于data.json 则是一个大 json 数据，回复的内容是从这里面拿的，判断问题产生回复。

2、index.vue代码

         这个页面呢，主要就是将各个组件进行逻辑串联。里面有定义清屏方法和加载提示等。该页面更多的是布局。这里小白的话可以看一下按回车发送消息的判断逻辑。

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代码

        该组件由于时间关系并没有写逻辑，只是简单地布局，如果有小伙伴感兴趣的话可以自己思考开发一些东西上去。布局已经布好啦。 

5、chatMessage.vue代码

        来了来了，这个页面是我们的核心组件，消息的发送，判断，回复等逻辑都是写在了这个组件里的。里面有写了注释，各位小伙伴可以沉下心来看一看哦、

三：结尾

        其实本次实验的整体逻辑代码是很简单的，只是使用了 Vue3 + Ts 技术，其实现的逻辑和细节部分才是本次实验的重点。也算是通过本次复习了 Vue3 + Ts + json +css 等诸多内容吧。最后附上gitee的地址：

乾辰/vue3全家桶练习https://gitee.com/qianchen12138/vue3-family-bucket-practice