Vue.js2.0以后模擬前后臺(tái)數(shù)據(jù)交互
Webstorm開(kāi)發(fā)Vue項(xiàng)目模擬數(shù)據(jù)的前后臺(tái)交互
成都創(chuàng)新互聯(lián)是一家專(zhuān)注于成都網(wǎng)站制作、成都網(wǎng)站建設(shè)與策劃設(shè)計(jì),洛江網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專(zhuān)注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專(zhuān)業(yè)建站公司;建站業(yè)務(wù)涵蓋:洛江等地區(qū)。洛江做網(wǎng)站價(jià)格咨詢(xún):18980820575
1、使用命令進(jìn)入項(xiàng)目所在目錄，加載vue-resource(一定要放在項(xiàng)目所在的目錄下)
cd H:\vue\demo ###這個(gè)是我的項(xiàng)目所在的目錄
npm install vue-resource --save ###安裝vue-resource
2、修改main.js 加載vue-resource
import VueResource from 'vue-resource' Vue.config.productionTip = false Vue.use(VueResource)
3、在webpack.dev.conf.js中直接改
在 const portfinder = require('portfinder')后面直接加上
const express = require('express')
let app = express()//請(qǐng)求server數(shù)據(jù)
let appData = require('../data.json')//加載本地?cái)?shù)據(jù)
let seller = appData.seller//獲取json對(duì)象賣(mài)家信息
let goods = appData.goods//獲取json對(duì)象商品信息
let ratings = appData.ratings//獲取json對(duì)象評(píng)價(jià)信息
let apiRoutes = express.Router()//設(shè)置路由
app.use('/api',apiRoutes)//設(shè)置路由路徑4、同在webpack.dev.conf.js中找到devServer =>watchOptions 在這之后添加注意一定要在 watchOptions結(jié)束后添加逗號(hào)
before (app) {
app.get('/api/seller', (req, res) => {
res.json({
errno: 0,
data: seller
})//接口返回json數(shù)據(jù)，上面配置的數(shù)據(jù)seller就賦值給data請(qǐng)求后調(diào)用
})
}5、準(zhǔn)備data.json 數(shù)據(jù)格式的數(shù)據(jù) 本例是來(lái)著慕課網(wǎng)提供的json
npm run dev
6、測(cè)試訪(fǎng)問(wèn)數(shù)據(jù)
小助手：有強(qiáng)迫癥患者請(qǐng)?jiān)O(shè)置
webstorm在項(xiàng)目中經(jīng)常提示require is not function ,原因沒(méi)有開(kāi)啟node.js 語(yǔ)言提示功能
解決方式
這樣就不會(huì)提示node.js 自身定義的函數(shù)報(bào)錯(cuò)了
網(wǎng)站欄目：Vue.js2.0以后模擬前后臺(tái)數(shù)據(jù)交互
轉(zhuǎn)載注明：http://m.jiaotiyi.com/article/ppgpsi.html