精华内容
下载资源
问答
  • 1:在static文件夹下面方式模拟json数据文件(我命名为schedule.json) 2:在webpack.dev.conf.js webpack.dev.conf.js 的const portfinder = require('portfinder') 后面加上 const express = require('express'); ...

    三个步骤

    1:在static文件夹下面方式模拟json数据文件(我命名为schedule.json)

    2:在webpack.dev.conf.js

    webpack.dev.conf.js 的const portfinder = require('portfinder')
    后面加上

    const express = require('express');
    const app = express();
    const router = express.Router();``
    

    webpack.dev.conf.js 的 devServer选项中
    加上

    //get的第一个参数是json文件的url
    before(app) {
        app.get('static/schedule.json', (req, res) => {
          res.json({
            errno: 0,
            data: data
          })
        })
      },
    

    3:视图文件中

    data () {
          return {
            scheduleList:[]
          }
        },
        mounted: function () {
          this.getScheduleList();
        },
        methods:{
          getScheduleList(){
            axios.get("static/schedule.json").then((result)=>{
              var res = result.data;
              this.scheduleList = res.result;
            })
          }
        }
    
    展开全文
  • vue模拟本地请求数据

    千次阅读 2018-05-31 13:45:47
    最简便的一种方法就是把模拟的json文件放到static目录下(用了vue-webpack-template)。webpack的devserver默认把项目根目录作为本地入口,所以URL写成响应路径就行(eg. 'static/XXX.json')。除了static以外的别的...

    最简便的一种方法就是把模拟的json文件放到static目录下(用了vue-webpack-template)。webpack的devserver默认把项目根目录作为本地入口,所以URL写成响应路径就行(eg. 'static/XXX.json')。除了static以外的别的目录我试了一下并不能用。

    早期的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里配置即可。

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

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

    //首先
    const express = require('express')
    const app = express()
    var data = require('../static/data.json')//加载本地数据文件
    //const router = express.Router() //后面用router.get('/test',fun)没办法获取到
    //然后找到devServer,在里面添加
    before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: data
        })
      }),
    //app.use('/api', apiRoutes) //该改的地方我应该都改了。。。也有放到before里面试,不会额

    axios可以正常获取。

    但是我在对自己本身的data进行设置的时候,

    错误的写法:

    因为用了function,所以上下文发生了变化this并不指向vue的实例,所以改为箭头函数(完美暴露我基础差,不会ES6的事实)

    axios({
                method: 'get',
                url: '/api/test'
              }).then((res)=>{
                 this.projects=res.data.projects;
              }).catch(function (err) {
                console.log(err);
             });

    在看webpack-dev-server配置的时候发现可以这么做,设置代理。适用于你本地别的端口跑了个服务器,比如说node。

    devServer:{    //......别的配置参数
        proxy: {  "/api": "http://localhost:3000"}
    }

     

    展开全文
  • 本篇文章主要介绍了详解vue 模拟后台数据(加载本地json文件)调试,具有一定的参考价值,有兴趣的可以了解一下
  • Vue模拟api数据

    2020-07-07 11:18:02
    Vue模拟api数据 1.安装vue-resource : ①在项目文件夹下执行npm install vue-resource命令 ②在main.js文件中注册使用 import VueResource from 'vue-resource' Vue.use(VueResource) 2.在static文件夹下创建...

    Vue模拟api数据

    1.安装vue-resource :
    ①在项目文件夹下执行npm install vue-resource命令
    在这里插入图片描述
    ②在main.js文件中注册使用

     import VueResource from 'vue-resource'
    	Vue.use(VueResource)
    

    2.在static文件夹下创建mock文件夹,再在mock文件夹下创建json文件,如下图:
    在这里插入图片描述
    Master.json文件

     {
      "master": [
        {
          "name": "张三",
          "store": ["仓库1","仓库2", "仓库3"]
        },
        {
          "name": "李四",
          "store": ["仓库4", "仓库5", "仓库6"]
        },
        {
          "name": "赵五",
          "store": ["仓库7", "仓库8", "仓库9"]
        }
      ]
    }
    

    3.在build文件夹下找到webpack.dev.conf.js文件

    ①在webpack.dev.conf.js里面配置相关信息

    // 读取本地json数据
    const express = require('express')
    const app = express()//请求server
    const masterData = require('../static/mock/Master.json') // 加载本地数据文件
    const apiRoutes = express.Router()
    app.use('/api', apiRoutes)//通过路由请求数据
    

    ②再在此文件(webpack.dev.conf.js)下的devServer中配置如下信息

    // 进行后台数据模拟
        before(app) {
          app.get('/api/master', (req, res) => {
            res.json({
              errno: 0,
              data: masterData
            })
          })  // 接口返回json数据,上面配置的数据seller就赋值给data请求后调用
        }
    

    4.输入npm run dev命令启动项目,成功如下
    在这里插入图片描述
    l浏览器中输入http://localhost:8081/api/master查看是否有数据,如果有就表示成功。成功界面如下
    在这里插入图片描述
    5. 如何在控制台打印,可以直接在页面HelloWorld.vue写入以下代码

    created () {
        this.$http.get('http://localhost:8081/api/master').then((response) => {
          console.log(response)
        })
      }
    

    访问http://localhost:8081,成功如下
    在这里插入图片描述

    展开全文
  • vue模拟后台数据

    千次阅读 2017-12-29 18:20:18
    VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev...

    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’)后添加
    
    //首先
    const express = require('express')
    const app = express()
    var appData = require('../data.json')//加载本地数据文件
    var seller = appData.seller//获取对应的本地数据
    var goods = appData.goods
    var ratings = appData.ratings
    var apiRoutes = express.Router()
    app.use('/api', apiRoutes)
    
    //然后找到devServer,在里面添加
    before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })//接口返回json数据,上面配置的数据seller就赋值给data请求后调用
      }),
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      }),
      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    } 有的同学说报错,不能识别before,注意看下你的配置。

    以上为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)
     })
    }
    展开全文
  • proxyTable: { '/api': { target: 'http://localhost:8080', pathRewrite: { '^/api': '/static/mock' } } ...
  • vue本地模拟数据

    2018-04-18 14:41:38
    http://localhost:8081/static/head.json'1.请求必须是get请求2.目录是放在static目录下
  • Vue(二)模拟本地数据,做数据接口 一、默认创建好vue的项目,我这里的vue项目是test如图 二、 (1)创建json.data文件,文件与index.html文件同级,如上图,写入以下代码 { "seller": { "...
  • mock serve工具,通俗来说,就是模拟服务端接口数据,一般用在前后端分离后,前端人员可以依赖API开发,在本地搭建一个JSON服务,自己产生测试数据。即json-server就是个存储json数据的serve。 注:json-server支持...
  • <script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script> npm install vue-resource --save-dev 下面这些应该放在入口文件main.js...import VueResource from 'v...
  • 首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages": 0, "TotalItems": 0, "ItemsPerPage": 100, "Items":[ {"DEVICEID":"121212","DEVICETYPE":"1",...
  • 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据数据类型丰富 通过随机数据模拟各种场景。 等等优点。 总结: 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在...
  • 最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程。然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpack-template 中已经去掉了dev-server.js...
  • 1、mockjs本地开发的时候用还好,mock数据需要生产时候用就不大行了 2、mock的数据通过module.exports、export实现的时候,npm run build 生产打包的时候,这些假数据会打包进app.js文件里面,导致文件大、首屏渲染...
  • vue2模拟数据

    2018-02-26 15:53:18
    1、在webpack.dev.conf.js中,在portfinder后面添加const portfinder = require('portfinder') const express = require('express') ...// 加载本地数据文件 var appData = require('../db.json') //...
  • 快速构建 Vue 项目和本地模拟请求数据 1 前提: 安装了 node.js 首先: 全局安装 vue-cli npm intsall vue-cli -g (-g代表全局安装) 2 使用 Vue 初始化基于 webpack 的新项目 vue init webpack my-project my-...
  • vue-cli 本地数据模拟

    2017-10-30 14:18:00
    mock数据写在json文件中,proxyTable 里将接口代理到具体mock数据json文件上。具体方法: 创建 mock 文件夹 build/dev-server.js 中添加如下代码   npm run dev 启动后,可以通过 ...
  • VUE开发请求本地数据的配置,早期的vue-lic下面有dev-server.js和dev-client.js两文件,请求本地数据在dev-server.js里配置,最新的vue-webpack-template 中已经去掉了dev-server.js和dev-client.js 改用webpack.dev...
  • vue mock模拟数据

    2020-06-03 16:54:02
    //首先创建一个mack.vue {{text.title.trim()}} //css
  • Vue2.0 之vue-resource 模拟服务端返回本地json数据的全部流程
  • 使用MOCK模拟数据 vue.config.js //vue.config.js /* * @Author: Dayi * @Date: 2020-09-01 23:27:43 * @LastEditors: Dayi * @LastEditTime: 2020-09-01 23:30:45 * @Description: Mock模拟数据 */ module....
  • 最近学习一个vue-cli的项目,需要与后台进行数据交互,这里使用本地json数据来模仿后台数据交互流程。然而发现build文件夹下没有dev-server.js文件了,因为新版本的vue-webpack-template 中已经去掉了dev-server.js...
  • 模拟后台数据请求 cnpm install vue-resource --save 在webpack.dev.conf.js配置 在const portfinder = require('...//请求本地数据 const express = require('express') const app = express() const list = ...
  • 本篇文章主要介绍了Vue-cli 使用json server在本地模拟请求数据的示例代码,非常具有实用价值,需要的朋友可以参考下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,700
精华内容 2,680
关键字:

vue模拟本地数据

vue 订阅