如何mock数据

如何mock数据

在之前前后端不分离的情况下,很多时候都要等到后端写好接口,前端很多功能才

能开发,而前后端分离,前端无需等待,可以与后端并行开发,前端需要的数据

可以mock出来,利用nodejs再生成接口,可以直接调用,等后端开发出接口再来

更换。

在build的webpack.dev.conf.js里修改

1.导入express

const express=require(express)

2.创建express实例

const app=express()

3.引入数据

var goods=require("../data/goods.json")
var ratings=require("../data/ratings.json")
var seller=require("../data/seller.json")

4.在本地开发环境devServer中调用before方法

devServer:{
    before(app){
        app.get(‘/api/goods‘,(req,res)=>{
            res.json(goods)
        },
        app.get(‘/api/ratings‘,(req,res)=>{
            res.json(ratings)
        },
        app.get(‘/api/seller‘,(req,res)=>{
            res.json(seller)
        }
    }
}

运行项目

可在http://localhost:8081/api/goods查看

原文地址:https://www.cnblogs.com/lxystar/p/9713747.html

时间: 2024-11-25 02:41:14

如何mock数据的相关文章

nodejs构建mock数据

Nodejs构建mock数据并通过rest api风格调用接口访问数据 如果我们只有json格式的数据文件,我们想通过访问url方式调用居然数据 确保电脑安装node环境 如果你没有安装好node环境请移步http://nodejs.cn/ 一.安装json-server 1.新建demo文件 cd demo 2.安装json-server npm install -S json-server 3.项目demo目录下,新建一个 JSON 文件data.json和一个package.json文件

用vue框架mock数据

用vue 2.0 mock数据 方法一 webpack打包的项目中可以依赖express var express = require('express'): var app = express(): var appData = require("../data.json"); var seller = appData.seller; var apiRouter = express.Router(); apiRouter.get("/seller", function

vue2.0:(二)、mock数据

什么是mock数据呢?很多情况下,后台的搭建比起前端来说要麻烦的多,所以,常常是前端写好了页面以后后台接口却没有写好,但是在一个项目中,接口调试确实是最浪费时间的,所以,往往前端需要自己模拟数据. 第一步:这里有一个data.json,用来放置我们模拟的数据: 其格式类似于: 但是最后具体是什么样的数据格式,你还要根据页面的结构,信息和后台来决定. 第二步:我们需要配置来获取到接口里面的数据: 你会在build 文件夹里面找到dev-server.js,打开后,有一个地方有app.express

fiddler安装及mock数据

1,fiddler安装,解决无法抓到https问题 可用本机的火狐浏览器测试,不行,就fiddler生成证书,拷到火狐里 在firefox中,选项->进入配置界面:高级-> 证书 -> 查看证书 -> 导入. 并且将证书导入手机,电脑无法考出文件,可用163邮箱,红米手机证书的存放位置 设置--更多设置--系统安全--信任的凭据 2,mock 数据 打开左上角的菜单按钮,发现没有我们的发现好物的菜单入口,好,我们下面来编辑. 切换到电脑的Fiddler里中的AutoResponde

vue本地开发mock数据.md

目录 一.为什么要mock数据? 二.如何mock数据? 三.webpack本地代理配置 四.mockjs使用 五.easymock使用 一.为什么要mock数据? VUE项目开发过程中,前后端是完全分离,后端负责提供数据,前端负责数据展示,因此就会存在这种情况:前端需要用到数据接口的时候,后端还没开发出来,此时前端就要挂起吗?当然不是了,我们要解决的就是如何给前端模拟数据?从而实现前后端完全独立开发. 二.如何mock数据? 在团队协作过程中,在人员角色分工明确的情况下,我们可以先根据产品功能

ajax 和 mock 数据

ajax ajax是一种技术方案,但并不是一种新技术.它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象,是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应. 实现在页面不刷新的情况下和服务端进行数据交互. 作用:传统的网页(不使用ajax).如果需要更新内容,必须重新加载整个网页,而通过使用ajax可以在后台与服务器进行少量数据交换,可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行

前端使用express mock数据

项目中使用的是RESTFUL接口规范,项目框架用的是vue,项目开始时,调研了几个比较有名的mock数据的插件:比如webpack的中间件api-mock,json-server,mockjs,还有express.结合我们项目的情况,逐一尝试,最后选择了express.mock方式很简单,以下为使用方式: 1. 安装node/express 2. package.json 中: npm run mock 为单独开启node的mock服务: 由于项目中同时需要编译本地代码,于是写了一个shell脚

关于vue-cli创建项目(小白)(2)mock数据

mock数据,好处,前后端分离,不用等后端的真实接口,就可以用axios(ek sju s 好像这么读,原谅本人总是根据读音写单词)请求数据了. 一,安装所需插件 根据不同需求选择安装环境,mockjs是一个插件,需要安装在开发环境.而axios安装在生产环境. cnpm install mockjs --save-dev: cnpm install axios --save: 二 1.创建一个mock文件夹内含 index.js文件,用于管理mock的. 2,在index js里引入mock

Vue+Koa2移动电商实战 (五)mock数据使用和布局

前面我们已经获取到了数据,这节我们就好把它用到我们的项目中来.这节课我们主要是使用flex布局和for循环是我们的type_bar展示出来. 关于flex布局的话如果还不是很了解的小伙伴儿可以查阅下阮一峰大神的博客(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) 首页商品分类栏的布局 HTML: 我们采用v-for的方式将商品分类栏循环出来,并给了每个图片百分之九十的宽度,我这里因为第一张图片格式不对,多以单独添加了宽度的 <d