前端数据模拟

最新推荐文章于 2024-04-28 16:24:30 发布
最新推荐文章于 2024-04-28 16:24:30 发布
阅读量699 收藏 1
点赞数
分类专栏： 数据处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38643776/article/details/80941940
版权

api请求数据时，表头的数据来自数据库里的表头表，标体数据来自数据库里的表数据表。所以前端本地模拟数据时，为了方便方便，将所有表头放一起

headers.json  对象——》数组——》对象  (存放所有表的表头)

{
"site-management": [
    {
        "key": "sname",
        "value": "站点名称",
        "required": true,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    }, {
        "key": "longitude",
        "value": "经度",
        "required": true,
        "val": "",
        "type": "input",
        "show": true,
        "regexp":  "整数部分-180-180，必输入1-5位小数",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    }, {
        "key": "latitude",
        "value": "纬度",
        "required": true,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "整数部分-90-90，必输入1-5位小数",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },
    {
        "key": "router",
        "value": "途经路线",
        "required": false,
        "val": "",
        "type": "input",
        "show": false,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },
    {
        "key": "way",
        "value": "所在道路",
        "required": false,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    } ,
    {
        "key": "introduction",
        "value": "介绍",
        "required": false,
        "val": "",
        "type": "longinput",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },
    {
        "key": "remarks",
        "value": "备注",
        "required": false,
        "val": "",
        "type": "longinput",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    }
],
"vehicle-management": [
    {
        "key": "id",
        "value": "序号",
        "required": false,
        "val": "",
        "type": "input",
        "show": false,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },
    {
        "key": "router",
        "value": "路线",
        "required": false,
        "val": "",
        "type": "select-line",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    }, {
        "key": "number1",
        "value": "车牌号",
        "required": true,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },
    {
        "key": "number3",
        "value": "设备号",
        "required": true,
        "val": "",
        "type": "input",
        "show":true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },
    {
        "key": "sim",
        "value": "SIM",
        "required": false,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    }
,{
        "key": "Equipmenttype",
        "value": "设备类型",
        "required": true,
        "val": "",
        "type": "select",
        "show": true,
        "regexp": "",
        "options": [
            {"key": "DSP", "val": "客流检测DSP版"},
            {"key": "ARM", "val": "客流检测ARM版"},
            {"key": "earlyWarning", "val": "疲劳预警系统"},
            {"key": "escort", "val": "护驾卫士"}
        ],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },
    {
        "key": "mainDriver",
        "value": "主驾司机",
        "required": false,
        "val": "",
        "type": "input",
        "show":true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },{
        "key": "sites",
        "value": "座位数",
        "required": true,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "请输入正确数字",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },{
        "key": "state1",
        "value": "运营状态",
        "required":true,
        "val": "",
        "type": "select",
        "show": true,
        "regexp": "",
        "options": [
            {"key": "online", "val": "运营"},
            {"key": "offline", "val": "停运"}
        ],
        "h_show": true,
        "operate_show": true,
        "checked": true
    }
],
"driver-management": [
    {
        "key": "id",
        "value": "序号",
        "required": false,
        "val": "",
        "type": "input",
        "show": false,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    }, {
        "key": "driverName",
        "value": "驾驶员姓名",
        "required": true,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    }, {
        "key": "driverId",
        "value": "驾驶员工号",
        "required": true,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },
    {
        "key": "tell",
        "value": "手机号",
        "required": false,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },
    {
        "key": "documentId",
        "value": "驾驶员档案号",
        "required": false,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },
    {
        "key": "licenseId",
        "value": "驾驶证号",
        "required": true,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    },
    {
        "key": "office",
        "value": "驾驶证核发机关",
        "required": false,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": true,
        "operate_show": true,
        "checked": true
    }，
{
        "key": "dgender",
        "value": "性别",
        "required": true,
        "val": "",
        "type": "select",
        "show": true,
        "regexp": "",
        "options": [
            {"key": "female", "val": "女"},
            {"key": "male", "val": "男"}
        ],
        "h_show": false,
        "operate_show": false,
        "checked": false

    },{
        "key": "IDnumber",
        "value": "身份证号",
        "required": true,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "请输入正确身份证号",
        "options": [],
        "h_show": false,
        "operate_show": false,
        "checked": false
    },{
        "key": "birthDay",
        "value": "出生日期",
        "required": true,
        "val": "",
        "type": "datepicker",
        "show": true,
        "regexp": "出生日期不能超过现在",
        "options": [],
        "h_show": false,
        "operate_show": false,
        "checked": false
    }, {
        "key": "emergencyContact",
        "value": "紧急联系人",
        "required": false,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": false,
        "operate_show": false,
        "checked": false
    }, {
        "key": "emergencyTell",
        "value": "紧急联系电话",
        "required": false,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": false,
        "operate_show": false,
        "checked": false
    }, {
        "key": "emergencyAddress",
        "value": "联系地址",
        "required": false,
        "val": "",
        "type": "input",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": false,
        "operate_show": false,
        "checked": false
    },   {
        "key": "medicalHistory",
        "value": "既往病史",
        "required": false,
        "val": "",
        "type": "longinput",
        "show": true,
        "regexp": "",
        "options": [],
        "h_show": false,
        "operate_show": false,
        "checked": false
    }
]

}

data.json

{
    "data": [
        {
            "id": 1,
            "number": "99912",
            "name": "15路",
            "company":"兴义",
            "builder": "keliu",
            "time": "2018-01-10",
            "updatePerson": "",
            "updateTime": "",
            "xianlu":"11",
            "xianluleixing":"环线",
            "xianludizhi":"11",
            "xianluguanliyuan":"11",
            "lianxidianhua":"18845103328",
            "qibujia":"11",
            "shangxinglicheng":"11",
            "xiaxinglicheng":"11",
            "shangxingzhandianrenshu":"11",
            "xiaxingzhandianshu":"11"

        },
        {
            "id": 2,
            "number": "99912",
            "name": "1路",
            "company":"兴义",
            "builder": "keliu",
            "time": "2018-01-10",
            "updatePerson": "",
            "updateTime": "",
            "xianlu":"11",
            "xianluleixing":"非环线",
            "xianludizhi":"11",
            "xianluguanliyuan":"11",
            "lianxidianhua":"18845103328",
            "qibujia":"11",
            "shangxinglicheng":"11",
            "xiaxinglicheng":"11",
            "shangxingzhandianrenshu":"11",
            "xiaxingzhandianshu":"11"
        }
       
    ],
    "total": 7
}

blog-lichuyan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端模拟接口工具推荐——Apifox（mock数据）【图解教程】
m0_67403272的博客
03-09 8567
1. 下载安装Apifox https://www.apifox.cn/# 2. 登录Apifox 可以直接微信扫码登录（新用户扫码后，选择生成新账户） 3. 新建团队 4. 新建项目 新建好后，点击项目名称进入项目。 5. 新建分组 鼠标移动到左侧项目概览上时，会出现新建分组按钮，点击它！ 6. 新建接口 鼠标移动到左侧新建的分组上时，会出现新建接口按钮，点击它！ 右上角下拉选择“mock服务”后，输入接口地址，接口名称，保存 切换到【高级mock】选项卡，点击“新建期.
什么是模拟前端芯片？
Forver的博客
03-26 2725
在BMS中，模拟前端芯片扮演着重要的角色，它是实现BMS电池监测和保护功能的核心组件之一。
几种前端模拟数据使用方案
qq_38217940的博客
03-13 4230
前端模拟数据的使用及设计思路，涉及mockjs、nodejs、express的简单使用、linux下node安装，干货满满
前端开发攻略---模拟后端接口返回数据，教你三种方式实现滚动到底部加载更多数据
最新发布
nibabaoo的博客
04-28 1039
多种方式实现滚动到底部加载更多数据
前端数据模拟两种方式
qq258220040的博客
07-30 2533
前端数据模拟两种方式 数据模拟对前后端分离的重要性不言而喻。 现在介绍下面几种数据模拟方式 使用本地json模式 感觉是现在用的最广的方式，以文件形式当成数据源。 reqwest({ url: 'mock/user.json' }) .then(res => { console...
easy-mock:前端数据模拟平台
05-24
Easy Mock 是一个可视化，并且能快速生成模拟数据的持久化服务。 特性 支持接口代理 支持快捷键操作 支持协同编辑 支持团队项目 支持 RESTful 支持 | OpenAPI Specification ( & & ) 基于 Swagger 快速创建项目 支持...
vue前端模拟字典处理后端返回数据
04-18
有时候后端返回的数据字段可能是只有1或者2，这种code，没有返回对应的中文，但是前端又要显示中文，于是我就写了一个demo 可进行参考，只是主要处理就是用了js的一些语法，逻辑基本都是一样的，可以参考我这个demo...
前端模拟下载json数据
11-22
这个简单的示例展示了如何在前端实现JSON数据的模拟下载，而实际应用中可能还需要处理更多的细节，比如错误处理、兼容性问题等。了解这些技术对于前端开发者来说非常重要，因为它能提高用户体验，使数据下载变得更加...
前端期末考试模拟题代码详解
04-23
本篇文章将针对“前端期末考试模拟题代码详解”这一主题，深入探讨这些关键领域的概念与实践技巧。 首先，HTML（HyperText Markup Language）是构建网页内容的基础，它是网页的结构框架。在模拟试题中，可能会涉及...
凹凸BMS模拟前端芯片资料
04-19
**OZ3717 模拟前端芯片详解** OZ3717是一款由O2Micro公司设计的模拟前端（AFE）芯片，主要用于电池管理系统（BMS）。该芯片在电池监测、保护以及数据采集等方面发挥着关键作用，广泛应用于电动汽车、储能系统以及...
前端开发使用模拟数据的两个方式以及使用步骤：json-server和mock.js
小福气的博客
10-14 3687
作为前端开发人员，当后端还没有写好接口，但是我们又不想写静态的数据的话，可以使用模拟数据。 1、json-server和mock.js简介 json-server:利用json-server，可以自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出RESTful API的接口。还可以设置表连接。 更详细的json-server:json-server - npmhttps://www.npmjs.com...
简单易用的前端模拟数据
weixin_34239592的博客
08-22 300
mock-serve mock-serve 是一个本地的前端模拟数据服务 在前后端分离的架构下，前端开发人员往往需要模拟数据，通常我们经常用的方式有: 在代码里写死 通过Mock.js 通过Easy-Mock 后两种都是不错的方案，但是根据每个开发人员的环境不同，也会遇到一些情况，比如在断网的情况下，Easy-Mock 就不适合了（什么，你是不是想说停电了就可以下班了），但是你就会说可以中...
Charles——前端必备模拟后端数据
weixin_34232617的博客
07-25 502
Charles——前端必备模拟后端数据 现在都是前后端分离开发了，前端开发者经常会遇到一个问题如何模拟后端数据来进行开发调试，在这里给大家介绍一个前端神器——Charles。 安装 安装就不赘述了，直接进入官网下载安装，根据步骤一直下一步即可。 未注册版本有30天的使用权限，单次使用超过30分钟会自动停止，这里可以参考这个教程进行破解软件 使用 ...
使用Mock.js进行独立于后端的前端开发
weixin_33805992的博客
08-12 443
概述 Mock.js实现的功能 基于 数据模板 生成数据 基于 HTML模板 生成数据 拦截并模拟 Ajax请求 用法 浏览器： <!-- （必选）加载 Mock --> <script src="http://mockjs.com/dist/mock.js"></script> <...
前端mock数据使用简单demo
Equation
01-18 1万+
1、安装 npm i mockjs --save var Mock = require(‘mockjs’) 2、模拟数据的两种方式 1.数据模板 2.数据占位符 详见 https://github.com/nuysoft/Mock/wiki/Syntax-Specification 3、主要方法 3.1 Mock.mock() 完整用法： Mock.mock(url, typ
Mockjs前端开发数据模拟测试及深度解析
小青蛙的博客
12-09 4354
在项目开发接口联调的过程中，前端开发人员经常需要等待后端提供好数据接口后才能动手联调，所以为了提升开发效率，mockjs这个第三方库诞生了，这个库主要是为了满足前端开发获取接口数据，渲染页面，功能开发，可以不经过mysql、redis等数据库就可以直接联调，所以极大的提高了我们前端开发攻城狮的开发效率； 记得之前的博客我介绍过json-server这款前端数据服务第三方库，json-serv...
使用Mock.js模拟生成数据
热门推荐
caychen的博客
03-20 1万+
    现在越来越多的应用程序都在向前后端分离的模式方向进行发展，前端注重页面样式和页面功能，后端注重代码功能，从而实现分工合作，达到效率和功能齐头并进的效果。    有时候因为前端的部分数据是从后端响应回来的，但是呢，后端功能还没实现，会导致前端部分功能停滞不前，从而也就影响了工作的效率。    有人选择等待后端的功能完成，有人选择自己造数据，有人...    为了解决这个问题，就出现了Mock...
【Mock.js】前后端分离中前端模拟后端返回数据的实践和思考
Linda的前端开发路
07-25 1397
Mock.js 前后端分离中前端模拟后端返回数据的实践和思考
前端mock模拟假数据
07-28
前端mock模拟假数据可以通过多种方式实现。以下是一些常用的方法： 1. 手动编写假数据：可以在前端代码中直接定义一个对象或数组，手动填充假数据。这种方法适用于简单的数据结构或测试目的。 2. 使用Mock.js库：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值