用Vue實現小Q聊天機器人（二）

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

項目完整結構：

接下來，開始着手修改剛剛創建完成的項目！

打開main.js，引入相關插件，本項目的網絡請求插件爲axios，ui爲vant。

關於axios的使用，第一種辦法可以結合vue-axios使用：

import axios from "axios"
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios.create({
    baseURL: 'http://xxx.xxx.xxx'
}))

在組件的methods中調用：

  this.$http.get('/api/xxx').then(res => {
       if (res.status === 200) {
             console.log(res.data)
       }
  })

第二種辦法，也就是本項目所使用的的方法：對axios進行封裝：

import axios from 'axios'

const request = axios.create({
    baseURL: 'https://api.ai.qq.com/fcgi-bin/nlp/nlp_textchat',//騰訊閒聊api
    timeout: 8000
})

//request攔截
request.interceptors.request.use(
    config => {
        return config
    },
    error => {
        return Promise.reject(error)
    }
)

//response攔截
request.interceptors.response.use(
    response => {
        console.log(response.data)
        const res = JSON.parse(response.data)
        console.log(res.ret)
        if (res.ret !== 0) {
            return Promise.reject(new Error(res.msg || 'Error'))
        } else {
            return res
        }
    },
    error => {
        return Promise.reject(error)
    }
)

export default request

調用：

import request from "@/api/base/request";
function getChatResponse(text) {
    return request({
        url:'?text='+text,
        method: 'get'
    })
}

本項目是考慮到實際開發場景，因此將網絡請求部分單獨放在api文件夾下，且每個組件中的網絡請求都會創建對用的ApiXXX.js，保證結構清晰！

vant則放在ui文件夾下的index.js引用！

main.js:

import Vue from 'vue'
import App from './App.vue'

require('@/ui/index')

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

網絡和ui插件已經配置完成，接下來就是自定義組件以及佈局的完成！