用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插件已经配置完成，接下来就是自定义组件以及布局的完成！

下一篇