用Vue实现小Q聊天机器人（四）

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

本项目所用的闲聊接口为腾讯开放平台提供，具体可参考官方文档： ai.qq.com/doc/nlpchat…

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

1.新建vue.config.js：

module.exports = {
    devServer: {
        proxy: {
            "/api": {
                target: 'https://api.ai.qq.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }
    }
};

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

const request = axios.create({
    baseURL: '/api',
    timeout: 8000
})

这种办法最大的缺点就是只能用于开发环境，无法用于生产环境，所以其实并没有什么卵用，只用来自己做项目联系倒是有点用！而我本人则是使用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
}

剩下的主要就是请求接口和展示数据了： 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>

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

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

在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>

github：github.com/baiyuliang/…