当前位置:   article > 正文

用Vue实现小Q聊天机器人(四)_vue搭建类似聊天机器人

vue搭建类似聊天机器人

GitHub:https://github.com/baiyuliang/Qrobot_Vue

本项目所用的闲聊接口为腾讯开放平台提供,具体可参考:
用Flutter实现小Q聊天机器人(五)
或者官方文档:
https://ai.qq.com/doc/nlpchat.shtml

说到前端网络请求,就不得不说跨域问题了,本项目仍然会面临跨域问题而导致无法去直接请求接口,一般的跨域解决办法有这么几种:jsonp,后端允许跨域,代理。由于本项目环境无法使用jsonp,所以就剩下后端允许跨域和代理两种办法了,让腾讯去为我们允许跨域?显然是不可能的,那么就只能用代理了吗?其实还有一种解决办法就是proxy,网上也有很多案例,这里我也贴出具体操作步骤:

1.新建vue.config.js:

module.exports = {
    devServer: {
        proxy: {
            "/api": {
                target: 'https://api.ai.qq.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

2.设置request.js中axios的baseUrl=‘/api’

const request = axios.create({
    baseURL: '/api',
    timeout: 8000
})
  • 1
  • 2
  • 3
  • 4

这种办法最大的缺点就是只能用于开发环境,无法用于生产环境,所以其实并没有什么卵用,只用来自己做项目联系倒是有点用!而我本人则是使用nodejs代理的方式实现,但项目中给大家的示例是使用的proxy方式,大家在没有相关资源的情况下,用这种方法进行练习也是可以的!

这里贴出ApiChat.js相关代码:

import request from "@/api/base/request";
import md5 from 'js-md5';

export function getChatResponse(text) {
    return request({
        url:'fcgi-bin/nlp/nlp_textchat?'+getChatParams(text),
        method: 'get'
    })
}

function getChatParams(text) {
    let app_id = 2151744249;
    let app_key = 'AWNcQGMMWi0OUceN';
    let nonce_str = 'fa577ce340859f9fe';
    let question = encodeURIComponent(text);
    let session = 10000;
    let time_stamp = parseInt(Date.now() / 1000);

    let params = 'app_id=' + app_id + '&nonce_str=' + nonce_str + '&question=' + question + '&session=' + session + '&time_stamp=' + time_stamp + '&app_key=' + app_key;
    let sign = md5(params).toUpperCase()

    return params+'&sign='+sign
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23

剩下的主要就是请求接口和展示数据了:
Chat.vue:

<script>
    import Vue from "vue";
    import {getChatResponse} from "@/api/ApiChat";
    import LeftItem from "@/components/LeftItem";
    import RightItem from "@/components/RightItem";

    Vue.directive('scroll', {
        inserted(el) {
            el.scrollIntoView()
        }
    })

    export default {
        name: "Chat",
        components: {LeftItem, RightItem},
        data: () => {
            return {
                text: '',
                msglist: [{
                    id: 1,
                    type: 1,
                    content: '欢迎你!',
                    me: false
                }]
            }
        },
        methods: {
            send() {
                if (this.text) {
                    this.msglist.push({
                        id: this.msglist[this.msglist.length - 1].id + 1,
                        type: 1,
                        content: this.text,
                        me: true
                    })
                    if (this.text === '图片') {
                        this.msglist.push({
                            id: this.msglist[this.msglist.length - 1].id + 1,
                            type: 2,
                            content: 'http://6emm.hxzdhn.com/img/2020/06/28/jausoellbtf.jpg',
                            me: false
                        })
                    } else {
                        this.getResponse(this.text)
                    }
                    this.text = ''
                }
            },
            getResponse(text) {
                getChatResponse(text).then(res => {
                    console.log(res)
                    this.msglist.push({
                        id: this.msglist[this.msglist.length - 1].id + 1,
                        type: 1,
                        content: res.data.answer,
                        me: false
                    })
                })
            }
        }
    }
</script>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62

其中有一个需要注意的问题,就是聊天消息列表如何能自动滑动到底部?
网上有不少方法说的是用 el.scrollTop=el.offsetHeight这种方式解决,不过我没有试验成功!本项目是使用了vue自定义指令:v-scroll:

    Vue.directive('scroll', {
        inserted(el) {
            el.scrollIntoView()
        }
    })
  • 1
  • 2
  • 3
  • 4
  • 5

在li最下面放上一个高度为0的元素,并添加v-scroll指令:

   <li v-for="(item,index) in msglist" :key="index">
       <RightItem :id="item.id" :type="item.type" :content="item.content" v-if="item.me"></RightItem>
       <LeftItem :id="item.id" :type="item.type" :content="item.content" v-else></LeftItem>
       <div v-scroll style="height: 0"></div>
   </li>
  • 1
  • 2
  • 3
  • 4
  • 5

github:https://github.com/baiyuliang/Qrobot_Vue

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/900214
推荐阅读
相关标签
  

闽ICP备14008679号