网站开发业绩,沈阳创新网站建设报价,精准客源引流平台,怎样给网站做流量一#xff1a;项目介绍 本次实验主要涉及到的技术是 Vue3 Ts#xff0c;当然其中也有部分是 Vue2 格式的代码以及 json 和 CSS 布局等。本来是想仿照 文心一言 来开发的一个聊天机器人案例。结果由于时间不足#xff0c;可能只是做出来了一个半成品。不过核心功能是有的。由…
一项目介绍 本次实验主要涉及到的技术是 Vue3 Ts当然其中也有部分是 Vue2 格式的代码以及 json 和 CSS 布局等。本来是想仿照 文心一言 来开发的一个聊天机器人案例。结果由于时间不足可能只是做出来了一个半成品。不过核心功能是有的。由于大 json 内数据写的比较少因此可测数据在下文中有。有需要的小伙伴可以自行添加格式在文中也有。 PS.代码在文章底部需要的小伙伴请底部自取。
二各部分代码
1、项目目录 以下是项目的目录index.vue 是我们所看到的主页面components 下的两个文件一个是消息回复的组件一个是左侧导航的组件。至于data.json 则是一个大 json 数据回复的内容是从这里面拿的判断问题产生回复。 2、index.vue代码 这个页面呢主要就是将各个组件进行逻辑串联。里面有定义清屏方法和加载提示等。该页面更多的是布局。这里小白的话可以看一下按回车发送消息的判断逻辑。
templatediv classscreendiv classleftleftMenu //divdiv classrightdiv classupchatMessage :sendMessagesendMessage :datadata //divdiv classinputel-input classinputStyle v-modelmessage placeholderPlease input your problem clearable /el-button clicksend keyup.enterkeyDown($event)send/el-button/div/div/divel-button typeprimary clickopenFullScreen2 重新加载 /el-button
/templatescript langts 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)
}
/scriptstyle 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代码 该组件由于时间关系并没有写逻辑只是简单地布局如果有小伙伴感兴趣的话可以自己思考开发一些东西上去。布局已经布好啦。
templatediv classhomediv classtitle我能做什么/divdiv classmenudiv classitem v-foritem in menuItem{{ item }}/div/div/div
/templatescript setup
let menuItem[陪你唠嗑,发现生活,周游世界,吃吃喝喝,一起长胖]
/scriptstyle langscss 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);}
}
/style5、chatMessage.vue代码 来了来了这个页面是我们的核心组件消息的发送判断回复等逻辑都是写在了这个组件里的。里面有写了注释各位小伙伴可以沉下心来看一看哦、
templatediv classclearel-button typeprimary clickclearScreen清屏/el-button/divdiv classhome div v-for(item, index) in chatArr :keyindexdiv classreply v-ifitem.status 0div classavatarimg width50 src/assets/images/avatar.jpeg alt/divdiv classleft/divdiv classcontent{{ item.content }}/div/divdiv classquestion v-ifitem.status 1div classcontent{{ item.content }}/divdiv classleft/divdiv classavatarimg width50 src/assets/images/avatar2.png alt/div/div/div/div
/templatescript
import { defineComponent, reactive } from vue;
import jsonData from /views/5_chatbotDemo/data.jsonexport 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}}
});
/scriptstyle langscss 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
