1:安裝
npm install vue-resource前端
2:打開main.js
註冊vue
import VueResource from 'vue-resource' Vue.use(VueResource)
3:在項目裏面建立一個json文件webpack
4:json文件的內容web
{ "seller": { "name": "我是王小婷", "description": "前端開發工程師", "supports": [ { "type": 0, "description": "日更博客打卡" }, { "type": 1, "description": "90後前端妹子" } ] } }
5:打開build文件底下的webpack.dev.conf.js
寫入代碼express
const express = require('express') const app = express() var appData = require('../data.json') //加載本地數據文件 var seller = appData.seller //獲取對應的本地數據 var goods = appData.goods var ratings = appData.ratings var apiRoutes = express.Router() app.use('/api', apiRoutes)
找到 devServer: {},寫入如下代碼npm
before(app) { app.get('/api/seller', (req, res) => { res.json({ errno: 0, data: seller })//接口返回json數據,上面配置的數據seller就賦值給data請求後調用 }),
6:OK,這個時候,能夠在瀏覽器輸入咱們的服務接口
http://localhost:8080/api/seller
是能夠看到json文件的數據格式的編程
7:如今要在控制檯查看,在當前要查看的頁面寫出代碼json
created () { this.$http.get('http://localhost:8080/api/seller').then((response) => { console.log(response) }) }
8:npm run dev 運行項目api
9:在瀏覽器裏面輸入http://localhost:8080
打開項目
注意8080端口要和my.vue裏面打印的端口保持一致
調出控制檯,能夠看見,接口數據已經顯示在控制檯了瀏覽器
10:接口數據怎麼顯示在界面
請看下一章
原文做者:祈澈姑娘90後前端妹子,愛編程,愛運營,文藝與代碼齊飛,魅力與智慧共存的程序媛一枚。堅持總結工做中遇到的技術問題,堅持記錄工做中所所思所見,對於博客上面有不會的問題,歡迎加入編程微刊qq羣:260352626