Vue小項目二手書商城：（二）axios先後端數據交互

實現內容：

• 寫路由接口（express）
• axios取數據

一.寫接口

1.咱們要在前端取到後端的數據（以前寫的data.json）能夠用vue-resourse或者用axios，在vue2以後官方就再也不維護vue-resourse，推薦使用axios。

2.在axios取到數據前要先寫一下路由接口，不一樣版本vue-cli建的文件目錄有一點不同。

我用的是vue2.5.2，寫路由接口是在build文件夾下的某文件，如下分別列出高版本和低版本寫法：

①2.5.2版本

• 文件里加上這些程序：

• devServer里加上：

②低版本

• 文件里加上這些程序：

二.使用axios（先安裝npm install axios --save）

能夠直接在須要用數據的vue文件用axios.get（此處不贅述），如今我把它獨立成一個文件：

1.src文件夾下新建文件夾api，在它下面新建index.js文件：

2.index.js文件下寫：

3.在App.vue中引入：

4.如今咱們能夠打開chrome看看數據傳過來沒有：

• npm run dev打開網頁（vue-cli3不這樣用，此處不討論），F12打開開發者工具，看到數據都傳過來了（若修改了data.json中數據，須要從新npm run dev才能在網頁上看到改後數據）

5.輸入地址，能夠看到數據：

• Vue小項目二手書商城：（三）前端渲染數據