用Vue實現小Q聊天機械人(二)

2021-10-07 16:26:06 字數 1476 閱讀 3973

github:

專案完整結構:

接下來,開始著手修改剛剛建立完成的專案!

開啟main.js,引入相關外掛程式,本專案的網路請求外掛程式為axios,ui為vant

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

import axios from

"axios"

import vueaxios from

'vue-axios'

vue.

use(vueaxios, axios.

create()

)

在元件的methods中呼叫:

})第二種辦法,也就是本專案所使用的的方法:對axios進行封裝:

import axios from

'axios'

const request = axios.

create()

//request攔截

request.interceptors.request.

use(

config =>

, error =>

)//response攔截

request.interceptors.response.

use(

response =>

else},

error =>

)export

default request

呼叫:

import request from

"@/api/base/request"

;function

getchatresponse

(text)

)}

本專案是考慮到實際開發場景,因此將網路請求部分單獨放在api資料夾下,且每個元件中的網路請求都會建立對用的api***.js,保證結構清晰!

vant則放在ui資料夾下的index.js引用!

main.js:

import vue from

'vue'

require

('@/ui/index'

)vue.config.productiontip =

false

newvue()

.$mount

()

網路和ui外掛程式已經配置完成,接下來就是自定義元件以及布局的完成!

聊天機械人

我你好!小愛同學 小愛你好,很高興認識你!charset utf 8 css document 休息一會 sleep 1 獲取 使用者傳送的 訊息 可選 後端 對於 使用者發過來的 時候 是否 使用 可選 根據 傳送 過來的 訊息 返回 不同的內容 messagelist array 床前明月光,有...

React實現聊天機械人

用react實現了乙個聊天機械人,結合使用fetch工具對網路資料進行讀取,這些資料由圖靈api提供。需要註冊乙個圖靈帳號 然後建立機械人,拿到api位址及apikey,就ok了。廢話不多說,一起來看 class fetchdemo extends react.component input的onc...

機械人聊天軟體c C 聊天機械人

例項簡介 c 聊天機械人 例項截圖 核心 3181078聊天機械人 原始碼必讀.pdf 聊天機械人 1.ico 聊天機械人 1.ico form1.designer.cs form1.cs form1.resx program.cs properties assemblyinfo.cs resour...