mock模拟后台数据

import Mock from ‘mockjs‘
const Random = Mock.Random // 获取random对象,随机生成各种数据,具体请翻阅文档
const domain = ‘http://mockjs.com/api‘ // 定义默认域名,随便写
const code = 200 // 返回的状态码const postData = function(req) {
    let listData=[]
    let totalSize = 30
    let pagination = JSON.parse(req.body)
    let pageSize =  pagination.pageSize;
    // 随机生成数据
    for (let i = 0; i < pageSize; i++) {
        let post = {
            id: i,
            pfbmc: Random.name(),
            pshdmc: Random.csentence(10, 25), // 随机生成名字
            pshdsj: Random.date() + ‘ ‘ + Random.time(), // 随机生成年月日 + 时间
            zt: "启用"
        }
        listData.push(post)
    }
    return { // 返回状态码和文章数据posts
        code,
        result:1,
        info:{list:listData,totalSize: totalSize,}
    }
}
Random.extend({
    name: function() {
        var name = [‘关于智能手机的评分表‘, ‘关于as的评分表‘, ‘关于saw的评分表‘, ‘关于wqwq的评分表‘, ‘关于gtrg的评分表‘, ‘任正非回应退休‘, ‘新发展理念‘, ‘20字好干部标准‘, ‘五位一体‘, ‘强富美高‘, ‘供给侧结构性改革‘, ‘三解三促‘,‘三会一课‘,‘四个进一步‘,‘三次大讨论‘,‘三个新成效‘,‘五查摆五强化‘,‘两聚一高‘,‘抓项目、转作风、促发展‘,‘三工程一计划‘]
        return this.pick(name)  //pick:从list中随机选取一个元素
    },
})
Mock.mock(`${domain}/gridTable/posts`, /get|post/i, postData); // 定义请求链接,类型,还有返回数据
//删除数据
const list = function (options) {
    let rtype = options.type.toLowerCase(); //获取请求类型
    switch (rtype) {
        case ‘get‘:
            break;
        case ‘post‘:
            let id = parseInt(JSON.parse(options.body).id) //获取删除的id
            listData = listData.filter(function(val){
                return val.id!=id;//把这个id对应的对象从数组里删除
            });
            break;
        default:
    }
    return {
        code,
        info:{list:listData}
    } //返回这个数组,也就是返回处理后的假数据
}
Mock.mock(`${domain}/deletes`,/get|post/i, list);//删除数据

原文地址:https://www.cnblogs.com/theblogs/p/11748170.html

时间: 2024-11-09 19:25:22

mock模拟后台数据的相关文章

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'为路由的路径,在路由跳转到该路径文件下时会被这个方法进行拦截

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

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

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

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项目模拟后台数据

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

在Vue中使用mock模拟接口数据

一.在配置文件里添加新的代理mock模拟数据的地址(如下) 二.使用接口地址 原文地址:https://www.cnblogs.com/exclusiveMemory/p/9842515.html

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 旧版

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

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