• vue开发请求本地模拟数据的配置方法(转)


    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)
     })
    }
    

     

  • 相关阅读:
    转:Web Service介绍
    CodeIgniter网页缓存
    CodeIgniter管理你的应用程序
    CodeIgniter自动装载资源
    python feedparser 使用
    HTC文件的使用
    动态执行javascript代码
    jQuery获取文本节点之text()/val()/html() 方法区别
    style,runtimeStyle与currentStyle的定义及用法
    File,FileStream,byte[]3者互相转换总结(转)
  • 原文地址:https://www.cnblogs.com/Sky-Ice/p/10393725.html
Copyright © 2020-2023  润新知