VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可。

1、旧版dev-server.js配置本地数据访问:

在const app = express()后,const compiler = webpack(webpackConfig)前配置即可,

var appData = require('../data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var foods = appData.foods
var pice = appData.pice
var apiRoutes = express.Router() apiRoutes.post('/foods', function (req, res) {
res.json({
errno: 0,
data: foods
});
}) apiRoutes.get('/seller', function (req, res) {
res.json({
errno: 0,
data: seller
});
}) apiRoutes.get('/goods', function (req, res) {
res.json({
errno: 0,
data: goods
})
}) apiRoutes.get('/ratings', function (req, res) {
res.json({
errno: 0,
data: ratings
});
}) apiRoutes.get('/pice', function (req, res) {
res.json({
errno: 0,
data: pice
});
})
app.use('/api',apiRoutes)

2、新版webpack.dev.conf.js配置本地数据访问:

在const portfinder = require(‘portfinder’)后添加

  1.  
    //首先
  2.  
    const express = require('express')
  3.  
    const app = express()
  4.  
    var appData = require('../data.json')//加载本地数据文件
  5.  
    var seller = appData.seller//获取对应的本地数据
  6.  
    var goods = appData.goods
  7.  
    var ratings = appData.ratings
  8.  
    var apiRoutes = express.Router()
  9.  
    app.use('/api', apiRoutes)
  1.  
     
  2.  
    //然后找到devServer,在里面添加
  3.  
    before(app) {
  4.  
    app.get('/api/seller', (req, res) => {
  5.  
    res.json({
  6.  
    errno: 0,
  7.  
    data: seller
  8.  
    })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
  9.  
    }),
  10.  
    app.get('/api/goods', (req, res) => {
  11.  
    res.json({
  12.  
    errno: 0,
  13.  
    data: goods
  14.  
    })
  15.  
    }),
  16.  
    app.get('/api/ratings', (req, res) => {
  17.  
    res.json({
  18.  
    errno: 0,
  19.  
    data: ratings
  20.  
    })
  21.  
    })
  22.  
    } 有的同学说报错,不能识别before,注意看下你的配置
 

补充说一下,有的同学配置后说不能访问,所有的修改配置都需要重新启动运行命令的:npm run dev才能生效(切记 ),还有data.json数据也不能少,就放在跟目录下跟index.html同级;data.json的部分数据:

{
"seller": {
"name": "粥品香坊(回龙观)",
"description": "蜂鸟专送",
"deliveryTime": 38,
"score": 4.2,
"serviceScore": 4.1,
"foodScore": 4.3,
"rankRate": 69.2,
"minPrice": 20,
"deliveryPrice": 4,
"ratingCount": 24,
"sellCount": 90,
"bulletin": "粥品香坊其烹饪粥料的秘方源于中国千年古法,在融和现代制作工艺,由世界烹饪大师屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者青睐,发展至今成为粥类的引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。",
"supports": [
{
"type": 0,
"description": "在线支付满28减5"
},
{
"type": 1,
"description": "VC无限橙果汁全场8折"
},
{
"type": 2,
"description": "单人精彩套餐"
},
{
"type": 3,
"description": "该商家支持发票,请下单写好发票抬头"
},
{
"type": 4,
"description": "已加入“外卖保”计划,食品安全保障"
}
],
"avatar": "http://static.galileo.xiaojukeji.com/static/tms/seller_avatar_256px.jpg",
"pics": [
"http://fuss10.elemecdn.com/8/71/c5cf5715740998d5040dda6e66abfjpeg.jpeg?imageView2/1/w/180/h/180",
"http://fuss10.elemecdn.com/b/6c/75bd250e5ba69868f3b1178afbda3jpeg.jpeg?imageView2/1/w/180/h/180",
"http://fuss10.elemecdn.com/f/96/3d608c5811bc2d902fc9ab9a5baa7jpeg.jpeg?imageView2/1/w/180/h/180",
"http://fuss10.elemecdn.com/6/ad/779f8620ff49f701cd4c58f6448b6jpeg.jpeg?imageView2/1/w/180/h/180"
],
"infos": [
"该商家支持发票,请下单写好发票抬头",
"品类:其他菜系,包子粥店",
"北京市昌平区回龙观西大街龙观置业大厦底商B座102单元1340",
"营业时间:10:00-20:30"
]
}
}

这样就可以访问本地接口:http://localhost:8080/api/seller 了

以上为get请求,有同学问post怎么设置,再补充下POST请求:

老版本:
apiRoutes.post('/foods', function (req, res) { //注意这里改为post就可以了
res.json({
errno: 0,
data: foods
});
})
新版本:
app.post('/api/foods', function (req, res) { // 注意这里改为post就可以了
res.json({
errno: 0,
data: foods
});
})
在组件里面:
created () {
this.$http.post('http://localhost:8080/api/foods').then((response) => {
console.log(response)
})
}

vue开发请求本地模拟数据的配置方法(转)的更多相关文章

  1. 【VueJS】VueJS开发请求本地json数据的配置

    VueJS开发请求本地json数据的配置,旧版本是build/dev-server.js,新版本是build/webpack.dev.conf.js. VueJS开发请求本地json数据的配置,早期的 ...

  2. VUE开发请求本地数据的配置,旧版本dev-server.js,新版本webpack.dev.conf.js

    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-te ...

  3. 手把手教你vue配置请求本地json数据

    本篇文章主要介绍了vue配置请求本地json数据的方法,分享给大家,具体如下:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require ...

  4. vue中请求本地的json数据

    为什么要请求本地的数据?模拟后台的请求数据,验证页面的逻辑是否存在问题,抛开后台提前开发等. 常用的说来有:jq的方式 约等于 axios的方式,vuex状态管理的方式 个人认为最好用的就是jq的方式 ...

  5. vue项目的webpack设置请求模拟数据的接口方法

    最近在跟着视频写饿了吗vue项目,其中模拟数据由于webpack版本变化,跟视频中不一致,下方博客有解决方案,其实视频里面的还能看懂,现在webpack的服务都在插件包里了,好难找. 请参考:http ...

  6. Spring MVC 返回 xml json pdf 数据的配置方法

    <!-- Spring MVC 返回 xml 数据的配置方法 -->     <bean class="org.springframework.web.servlet.vi ...

  7. vue配置 请求本地json数据

    第一步:在build文件夹下找到webpack.dev.conf.js文件,在const portfinder = require('portfinder')后添加 //第一步const expres ...

  8. 【vue】生成接口模拟数据

    目录 方案一:自定义模拟数据 Step1 创建json文件 Step2 在 vue.config.js 中配置 Step3 在组件中使用 (方式一) Step3 封装api (方式二) Step4 在 ...

  9. 如何在Vue中使用Mockjs模拟数据的增删查改

    之前一直使用json-server在前端开发时,搭建本地数据接口测试,但有时又需要将做好的项目放于 github page上做项目演示.在本地时,json server很好使用,但一旦放在github ...

随机推荐

  1. DIV置底层或置最高层的方法下拉菜单被挡住

    网站常会用到一些 下拉菜单,,幻灯片,,,飘浮广告等. 但经常会发现.幻灯片会挡住下拉菜单或者飘浮广告微信开店等. 解决办法有下 第一,可将幻灯片所在DIV 置于最底层.添加CSS如下 style=& ...

  2. python字符串常用函数-大小写,删除空格,字符串切片

  3. automate sap遇上的一些问题

    1. get column name of SAPGuiTable columnCount = SAPGuiSession("Session").SAPGuiWindow(&quo ...

  4. VB - sendKey

    Set WshShell=WScript.CreateObject("WScript.Shell") WshShell = SendKeys string “string”:表示要 ...

  5. 原生js事件绑定

    一.JS事件 (一)JS事件分类 1.鼠标事件: click/dbclick/mouseover/mouseout 2.HTML事件: onload/onunload/onsubmit/onresiz ...

  6. 【题解】A Horrible Poem

    题目大意 给出一个由小写英文字母组成的字符串 S,再给出 q 个询问,要求回答 S 某个子串的最短循环节. 如果字符串 B 是字符串 A 的循环节,那么 A 可以由 B 重复若干次得到. 输入格式 第 ...

  7. python系列——文件操作

    打开和关闭 示例:python系列——文件操作的代码 打开模式 读取 写入

  8. SpringBoot入门简介

    SpringBoot诞生的背景 所有软件行业里面,如果要说商用体系,排在第一位的永远是java,因为java的体系丰富,支持度高,安全性也高 但是我们所有的开发者也不得不去忍受Java中的以下痛苦 举 ...

  9. python3学习笔记——数字、字符串、列表、字典、元组

    什么是python解释器? python代码在解释器中运行.解释器是代码与计算机硬件之间的软件逻辑层. python的执行过程                                      ...

  10. OAuth授权登录

    一.写在前面 日常生活中,我们经常看到到一个网站时,需要登录的时候,都提供了第三方的登录,也就是说你可以使用你的微信,QQ,微博等账号进行授权登录.那么这个认证登录的东西到底是什么呢? 微信授权登录页 ...