Vue模拟后台数据,proxy代理

config>index.js  设置代理,让api路径跳转到虚拟数据的路径

assetsSubDirectory: ‘static‘,
    assetsPublicPath: ‘/‘,
    proxyTable: {
        ‘/api‘: {
            target: ‘http://localhost:8080‘,
            pathRewrite: {
                ‘^/api‘: ‘/static/mock‘
            }
        }

在子组件请求数据

methods: {
    getHomeInfo () {
      axios.get(‘/api/index.json‘).then(this.getHomeInfoSucc)    这里/api会被代理成/static/mock虚拟数据的文件路径
    },
    getHomeInfoSucc (res) {   对数据进行处理
      res = res.data  将数据里面的data拿到
      if (res.ret && res.data) {  做一个判断,当数据成功接收且数据不为空
        const data = res.data
        this.city = data.city
        this.swiperList = data.swiperList
        this.iconList = data.iconList
        this.recommendList = data.recommendList
        this.weekendList = data.weekendList
      }
      console.log(res)
    }
  },
  mounted () {   在mounted执行时获取数据
    this.getHomeInfo()
  }

原文地址:https://www.cnblogs.com/island1994/p/9447787.html

时间: 2024-11-04 05:20:09

Vue模拟后台数据,proxy代理的相关文章

vue模拟后台数据,请求本地数据的配置(旧版本dev-server.js,新版本webpack.dev.conf.js)

最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程.然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpack-template 中已经去掉了dev-server.js,取而代之的是webpack.dev.conf.js文件,所以可以在webpack.dev.conf.js里配置本地访问. 对比旧版本的build文件夹,新版本的build下少了dev-server.js和dev-client.js 旧版

iBase4j前端01_bootstrap-suggest json-server模拟后台数据、bootstrap-suggest环境搭建、开启bootstrap-suggest的post和put请求

1 准备 1.1 模拟的json数据 { "info": [ { "message": "信息", "value": [ { "userName": "淳芸", "shortAccount": "chunyun", "userId": 20001 }, { "userName": "orion-01

vue项目模拟后台数据

这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立 我这里为了演示这个过程所以自己编写了这个data.json文件 1 { 2 "school":{ 3 "students":[ 4 { 5 "name":"方毅", 6 "sex":"男", 7 "age"

mock数据(模拟后台数据)

1.将 data.json 文件拷贝到 sellapp 目录下(与 index.html 同级) 模拟的数据请求是从 data.json 中读取数据,接下来就来编写这些接口. 2.在 webpack.dev.conf.js 中添加以下代码: 此次开发过程需要去本地数据地址进行请求,而原版配置在 dev-server.js 中,新版 vue-webpack-template 已经删除 dev-server.js,改用webpack.dev.conf.js代替,所以配置本地访问在 webpack.d

vue mock(模拟后台数据) 最简单实例——适合小白

开发是前后端分离,不需要等待后台开发.前端自己模拟数据,经本人测试成功. 我们在根目录新建存放数据的json文件,存放我们的数据data.json //data.json{ "status":"0", "result":[ { "productId":"10001", "productName":"小米6", "prodcutPrice":&quo

vue使用mock模拟后台数据

vue cli 2.0找到build目录下的dev-server.js文件,打开.找到var app = express()的代码处,在它下面添加代码: var router = express.Router() var demoData = require('./../moke/demo.json') //将moke数据的对象引入 router.get('/url',function(req,res,next){ // '/url'为路由的路径,在路由跳转到该路径文件下时会被这个方法进行拦截

用angular实时获取本地localStorage数据,实现一个模拟后台数据登入的效果

研究了一上午,终于做出了,实时获取本地localStorage来模拟注册登入~~~ <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>我们虽然很穷,但是我们有梦想</title><script src="angular.js"></script></head>

超简单本地mock假数据测试,模拟后台数据返回必杀技

温馨提示:急性子可以直接拉到最后观看方法步骤. 什么是mock? mock就是在开发过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试开发的方法. 使用mock有什么好处? 1.团队可以更好地并发工作 并发?没错,技术人员就应该用并发这个词.使用mock,各团队之间可以不需要再互相等待对方的进度,只需要约定好相互之间的数据规范(文档),即可使用mock构建一个可用的接口,可以更快的进行开发和调试以及自测,提升开发进度的同时,也将发现缺陷的时间点大大提前. 2.开启TD

vue 请求后台数据 (copy)

https://www.cnblogs.com/calledspeed001/p/7094494.html var that=this get请求 that.$http.get("1.txt").then(function(result){ console.log(result) this.msg=result.data; }) post请求    需要环境  发送数据  接收数据 that.$http.post("1.txt","").then