Vue移動端框架Mint UI教程-調用模擬json數據(五)

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

相關文章
相關標籤/搜索