Vue.js 2.0之後模擬先後臺數據交互

Webstorm開發Vue項目模擬數據的先後臺交互vue

一、使用命令進入項目所在目錄,加載vue-resource(必定要放在項目所在的目錄下)node

cd  H:\vue\demo   ###這個是個人項目所在的目錄
npm install vue-resource  --save   ###安裝vue-resource

二、修改main.js 加載vue-resourcewebpack

import VueResource from 'vue-resource'
Vue.config.productionTip = false
Vue.use(VueResource)

三、在webpack.dev.conf.js中直接改web

在 const portfinder = require('portfinder')後面直接加上
const express = require('express')
let app =  express()//請求server數據
let appData = require('../data.json')//加載本地數據
let seller = appData.seller//獲取json對象賣家信息
let goods = appData.goods//獲取json對象商品信息
let ratings = appData.ratings//獲取json對象評價信息
let apiRoutes = express.Router()//設置路由
app.use('/api',apiRoutes)//設置路由路徑

四、同在webpack.dev.conf.js中找到devServer =>watchOptions 在這以後添加註意必定要在 watchOptions結束後添加逗號express

before (app) {
  app.get('/api/seller', (req, res) => {
    res.json({
      errno: 0,
      data: seller
    })//接口返回json數據,上面配置的數據seller就賦值給data請求後調用
  })
}

五、準備data.json 數據格式的數據 本例是來着慕課網提供的jsonnpm

image.png

npm run dev

六、測試訪問數據
json

image.png

小助手:有強迫症患者請設置api

webstorm在項目中常常提示require is not function ,緣由沒有開啓node.js 語言提示功能bash

image.png

解決方式app

image.png

這樣就不會提示node.js 自身定義的函數報錯了

相關文章
相關標籤/搜索