最近在跟著做vue2.0以上版本的一個購物平臺，在涉及到模擬后臺數據交互的時候，視頻里講的是通過json-server這個插件和express，由于之前的配置都是在build/dev-server.js文件夾下，在vue2.0都沒有了，全部整合到了build/webpack.dev.conf.js文件里，通過不斷查閱資料后終于模擬成功。
1.首先 npm install vue-resource --save安裝vue-resourse,并且在頁面上引用（--save 會把依賴包名稱添加到 package.json 文件 dependencies 鍵下，--save-dev 則添加到 package.json 文件 devDependencies 下）
2.在項目目錄下添加一個xx.json,愛叫啥叫啥~~，但是里面的格式一定要是json格式。如果不確定是否符合json格式，可以點擊這里使用工具校驗
3.直接在webpack-dev-conf.js文件中修改
第一步：在const portfinder = require(‘portfinder')后添加
const express = require('express')const app = express()//請求servervar appData = require('../db.json')//加載本地數據文件var news = appData.getNewsList//獲取對應的本地數據var products = appData.getproductListvar boards = appData.getBoardListvar apiRoutes = express.Router()app.use('/api', apiRoutes)第二步：找到devServer,在里面加上before（）方法
devServer: { clientLogLevel: 'warning', historyApiFallback: { rewrites: [ { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, ], }, hot: true, contentBase: false, // since we use CopyWebpackPlugin. compress: true, host: HOST || config.dev.host, port: PORT || config.dev.port, open: config.dev.autoOpenBrowser, overlay: config.dev.errorOverlay ? { warnings: false, errors: true } : false, publicPath: config.dev.assetsPublicPath, proxy: config.dev.proxyTable, quiet: true, // necessary for FriendlyErrorsPlugin watchOptions: { poll: config.dev.poll, }, //在這里添加，記得前面加上逗號不然會報錯 before(app) { app.get('/api/news', (req, res) => { res.json({ errno: 0, data: news })//接口返回json數據，上面配置的數據seller就賦值給data請求后調用 }), app.get('/api/products', (req, res) => { res.json({ errno: 0, data: products }) }), app.get('/api/boards', (req, res) => { res.json({ errno: 0, data: boards }) }) } },4.到這里之后記得所有的修改配置都需要重新啟動運行命令的：npm run dev才能生效（很重要，否則無法請求到數據）
然后在瀏覽器就可以請求到我們模擬的數據：
5.在create（）函數中通過get請求json數據后添加到頁面中
export default { components:{ slideShow }, //請求模擬的json數據 created: function(){ this.$http.get('api/news') .then((data)=>{ this.newsList = data.data.data; //newsList是先在頁面上定義變量，用來裝載請求到的數據 },(err)=>{ console.log(err) }), this.$http.get('api/products') .then((data)=>{ this.productList = data.data.data; },(err)=>{ console.log(err) }), this.$http.get('api/boards') .then((data)=>{ this.boardList = data.data.data; },(err)=>{ console.log(err) }) },在頁面上定義的變量，用來裝載請求到的數據
data(){ return { boardList:[ ], newsList:[ ], productList:{ } } },6.在頁面上調用
頁面效果如下：
以上所述是小編給大家介紹的vue2.0模擬后臺json數據詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
