精华内容
下载资源
问答
  • 在vue中使用Mock模拟数据

    千次阅读 2020-07-23 17:08:38
    Q:为什么进行模拟数据? A:在做开发时,后端程序没有配齐,前端人员在做vue开发时,需要自己先模拟接口,模拟数据,等到后端数据配齐,提供好接口后,将项目中的接口换一下即可 一、本地加载请求静态json文件的...

    Q:为什么进行模拟数据?
    A:在做开发时,后端程序没有配齐,前端人员在做vue开发时,需要自己先模拟接口,模拟数据,等到后端数据配齐,提供好接口后,将项目中的接口换一下即可

    一、本地加载请求静态json文件的形式

    1. 在 Public 文件夹下新建一个 mock 文件夹,新建一个json文件,如login.json
    • login.json
    {
        "status": 0,
        "data": {
          "id": 22,
          "username": "yian",
          "email": "48522243521@162.com",
          "phone": null,
          "role": 0,
          "createTime": 7456454542454,
          "updateTime": 7456454542454
        }
      }
    
    1. 若安装 vue-axios,使用时可直接this.axios.get();若不安装,需在在哪里使用,在哪里引入axios,即import axios from 'axios'

    2. 使用this.axios.get()

    • App.vue
    <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>
    
    <script>
    export default {
      name:"App",
      data(){
        return {
          res:{}
        }
      },
      mounted(){
        this.axios.get('/mock/user/login.json').then((res)=>{
          this.res=res;
        });
      }
    }
    </script>
    

    在这里插入图片描述

    • main.js(因之前写过接口环境变量配置,见https://editor.csdn.net/md/?articleId=107534608,因此需要修改main.js,即去掉 axios.defaults.baseURL)
    import Vue from 'vue'
    import router from './router'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    import App from './App.vue'
    
    axios.defaults.timeout=8000;
    axios.interceptors.response.use(function(response){
      let res=response.data;
      if(res.status==0){
        return res.data;
      }else if(res.status==10){  
        window.location.href='/#/login'
      }else{
        alert(res.msg);
      }
    });
    
    Vue.use(VueAxios,axios);
    Vue.config.productionTip = false
    
    new Vue({
      router,
      render: h => h(App),
    }).$mount('#app')
    

    在这里插入图片描述

    • 缺点

      需要更改代码;
      请求的地址并不是接口真实的地址
      

    二、通过easy-mock平台实现数据,mock

    三、集成Mock API

    原理:拦截ajax请求
    
    1. 安装mockjs
    cnpm install mockjs –save
    
    1. 配置请求的模拟数据
    • 在src中新建mock文件夹,在该文件夹中新建一个mock.js文件,在该文件中配置请求的模拟数据

    方式一:

    import Mock from 'mockjs'
    Mock.mock('/api/user/login', {
        "status": 0,
        "data": {
            "id|1001-1100": 0,
            "username": "@cname",
            "email": "@email",
            "phone|1-9": 0,
            "role": 0,
            "createTime": 1524545121218,
            "updateTime": 1524545121218
        }
    });
    

    方式二:

    import Mock from 'mockjs';
    Mock.mock("/user","post",{
        data:[
            {
                name:"张三",
                sex:"男"
            },
            {
                name:"李四",
                sex:"女"
            }
        ]
    });
    Mock.mock("/list","post",()=>{
        return[
            {
                name:"张三",
                sex:"男"
            },
            {
                name:"李四",
                sex:"女"
            } 
        ]
    });
    
    • main.js(引入mockjs ):require('./mock/mock'); 还可加入一个mock开关
    import Vue from 'vue'
    import router from './router'
    import axios from 'axios'
    import VueAxios from 'vue-axios'
    import App from './App.vue'
    
    // 定义一个开关
    const mock=true;
    if(mock){
      require('./mock/mock');
    }
      
    axios.defaults.baseURL='/api';
    axios.defaults.timeout=8000;
    axios.interceptors.response.use(function(response){
      let res=response.data;
      if(res.status==0){
        return res.data;
      }else if(res.status==10){
        window.location.href='/#/login'
      }else{
        // 报错
        alert(res.msg);
      }
    });
    
    Vue.use(VueAxios,axios);
    Vue.config.productionTip = false
    
    new Vue({
      router,
      render: h => h(App),
    }).$mount('#app')
    
    • App.vue(获取数据)
    // 这里使用方式一的模拟数据
    this.axios.get('/user/login.json').then((res)=>{
      this.res=res;
    });
    
    • 目录

    在这里插入图片描述

    若在react中使用,则应在index.js中引入mock模块
    
    展开全文
  • axios实现数据(模拟数据)请求 1、在终端运行以下命令,安装axios npm install axios --save 2、进行需求分析,在本例中首页Home组件中有Header、Swiper、Icons、Recommend、Weekend等5个子组件需要进行数据...

    axios实现数据(模拟数据)请求

    1、在终端运行以下命令,安装axios

    npm install axios --save

    2、进行需求分析,在本例中首页Home组件中有Header、Swiper、Icons、Recommend、Weekend等5个子组件需要进行数据绑定。换言之,我们需要发起5次ajax请求,但是频繁发起ajax请求,网站的性能必定是很低的。所以,我们需要尽量减少网络请求的次数,我们可以通过父组件Home发起数据请求,然后把数据传给子组件就可以了。

    3、利用axios发起网络请求的步骤

    (1)首先,在父组件Home中引入,在mounted钩子中发起请求

    import axios from "axios"
    import axios from "axios"
      import HomeHeader from "./components/Header";
      import HomeSwiper from "./components/Swiper"
      import HomeIcons from "./components/Icons"
      import HomeRecommend from "./components/Recommend"
      import HomeWeekend from "./components/Weekend"
      export default {
        name: "Home",
        data() {
          return {
            city: '',
            iconList:[],
            recommendList:[],
            swiperList:[],
            weekendList:[]
          };
        },
        components: {
          HomeHeader,
          HomeSwiper,
          HomeIcons,
          HomeRecommend,
          HomeWeekend
        },
        mounted(){
          this.getHomeInfo();
        },
        methods: {
          getHomeInfo(){
            // axios返回的结果是一个promise对象
            axios.get('/api/index.json').then(
              // 注意:这里绝对不可以写成this.getHomeInfoSucc(),否则请求的结果会是undefined
              this.getHomeInfoSucc
            )
          },
          getHomeInfoSucc(res){
            console.log(res);
            res = res.data;
            if (res.ret && res.data) {
              this.city = res.data.city;
              this.swiperList = res.data.swiperList;
              this.iconList = res.data.iconList;
              this.recommendList = res.data.recommendList;
              this.weekendList = res.data.weekendList;
            }
          }
        }
      };

    (2)在没有后端支持的时候,我们可以通过json文件进行数据模拟。但是,对应的json文件应该放在什么位置呢?在vue项目目录中,static文件夹是存放的静态文件,只有该文件夹下的文件可以被外界访问到(验证方法:地址栏输入对应static文件夹下面json文件的正确路径如:http://localhost:8080/static/mock/index.json)。发现,对应的模拟数据index.json文件的内容,可以看到,如下:

    (3)此外,对于模拟数据,我们不希望把它们上传至线上,应该怎么处理呢?其实,很简单,我们只要忽略上传它们即可。具体做法是:打开.gitignore文件,在忽略的文件中,我们添加上模拟数据所在的文件路径(static、mock)即可。如图:

    (4)网络请求的地址应该怎么写呢?上线之前修改代码是很忌讳的。我们设想一下,如果可以实现转发,那就再好不过了。在开发环境中,把api下面json文件的请求转化到本地的文件夹下。很幸运,vue中webpack-dev-server提供了代理功能,具体做法如下:打开config-index.js文件,做以下修改。需要注意的是:在修改了配置文件之后,我们需要重启项目npm run dev。

    proxyTable: {
          '/api': {
            target: 'http://localhost:8080', //设置转化的域
            pathRewrite:{
              '^/api': '/static/mock' // 路径替换
            }
          }

     

    展开全文
  • mock模拟数据

    千次阅读 2018-12-25 15:06:58
    当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。 3、main.js中require 4、vue模板中 (indexList为一个包含请求地址和方...

    1、npm install mockjs

    2、新建mock.js文件

    Mock.mock( rurl, rtype, template )

    记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。

    3、main.js中require

    4、vue模板中 (indexList为一个包含请求地址和方式还有参数的方法该mock.js中拦截的地址正是该方法的地址,res即为ajax请求返回的数据,这里mock拦截后即为mock模拟出来的返回数据)

    5、如图模拟打印出来的数据

     

    展开全文
  • fastmock在线模拟数据

    千次阅读 2019-11-04 09:06:41
    fastmock可以让你在没有后端程序的情况下能真实地在线模拟ajax请求,你可以用fatmock实现项目初期纯前端的效果演示,也可以用fastmock实现开发中的数据模拟从而实现前后端分离。在使用fastmock之前,你的团队实现...

    fastmock可以让你在没有后端程序的情况下能真实地在线模拟ajax请求,你可以用fatmock实现项目初期纯前端的效果演示,也可以用fastmock实现开发中的数据模拟从而实现前后端分离。在使用fastmock之前,你的团队实现数据模拟可能是下面的方案中的一种或者多种

    • 本地手写数据模拟,在前端代码中产生一大堆的mock代码。
    • 利用mockjs或者canjs的can-fixture实现ajax拦截,本地配置必要的json规则。
    • 后端在Controller层造假数据返回给前端。

    上面的方式中,不管哪一种方式,都会要求开发人员写一些跟项目本无任何关联的代码,第一个和第二个方式还会需要前端项目在本地引入不必要的js文件。比如下面的mock数据

    // 产品配置
      {
        url: '/pms/product/list',
        on: true,
        type: 'get',
        resp: Mock.mock({
          'body': {
            'currentPage': 1,
            'isMore': 0,
            'pageSize': 15,
            'resultList|10': [
              {
                'productNo': '11111',
                'productName|1': ['产品名称1', '产品名称2', '产品名称3', '产品名称4', '产品名称5'],
                'productType|1': ['1', '2', '3', '4', '5'],
                'status|1': ['1', '2'],
                'gmtCreate': '@DATETIME("yyyy-MM-dd HH:mm:ss")',
                'gmtModified': '@now("yyyy-MM-dd HH:mm:ss")',
                'createUserCode': '@name'
              }
            ],
            'startIndex': 0,
            'totalNum': 100,
            'totalPage': 1
          },
          'reCode': '0000',
          'reMsg': '成功',
          'success': true
        })
      },
      // 产品配置-贷款材料配置
      {
        url: '/pms/cfgLoanDoc/list',
        on: true,
        resp: Mock.mock({
          'body': {
            'currentPage': 1,
            'isMore': 0,
            'pageSize': 15,
            'resultList|10': [
              {
                'loanDocCode|+1': 1,
                'loanDocName': /[测试字体]{4,30}/
              }
            ],
            'startIndex': 0,
            'totalNum': 100,
            'totalPage': 1
          },
          'reCode': '0000',
          'reMsg': '成功',
          'success': true
        })
      },
      // 产品配置-费用类型配置
      {
        url: '/pms/productFeeDetail/queryByProductNo',
        type: 'get',
        on: true,
        resp: Mock.mock({
          'body': {
            'currentPage': 1,
            'isMore': 0,
            'pageSize': 15,
            'resultList|10': [
              {
                'feeTypeNo|+1': 1,
                'feeTypeCode': /[A-Z]{4,8}/,
                'feeTypeName': '@name',
                'incomeType|1': ['1', '2'],
                'feeType|1': ['C', 'D'],
                'ratio|1': ['0.5', '0.25'],
                'productChargeBasis|1': ['1', '2', '3'],
                'fixedAmount|1-100': 5
              }
            ],
            'startIndex': 0,
            'totalNum': 100,
            'totalPage': 1
          },
          'reCode': '0000',
          'reMsg': '成功',
          'success': true
        })
      }

    为此,我们将mock层独立出来,通过中间服务的形式在前端和后端服务之前建立一道围栏,使用fastmock,前端只需要修改自己的XHR请求地址,后端只需要在开发前和前端约定好接口文档即可。等到后端服务开发完成,前端再将XHR请求地址替换回来进行联调测试即可。

    Mock.js语法

    fastmock 引入了mock.js的支持,支持所有的Mock.js随机数据的生成规则。在这里介绍几个基本规则,更多Mock.js内容移步mockjs文档

    • 基础随机内容的生成
    • {
        "string|1-10": "=", // 随机生成1到10个等号
        "string2|3": "=", // 随机生成2个或者三个等号
        "number|+1": 0, // 从0开始自增
        "number2|1-00.1-3": 1, // 生成一个小数,小数点前面1到10,小数点后1到3位
        "boolean": "@boolean( 1, 2, true )", // 生成boolean值 三个参数,1表示第三个参数true出现的概率,2表示false出现的概率
        "name": "@cname", // 随机生成中文姓名
        "firstname": "@cfirst", // 随机生成中文姓
        "int": "@integer(1, 10)", // 随机生成1-10的整数
        "float": "@float(1,2,3,4)", // 随机生成浮点数,四个参数分别为,整数部分的最大最小值和小数部分的最大最小值
        "range": "@range(1,100,10)", // 随机生成整数数组,三个参数为,最大最小值和加的步长
        "natural": "@natural(60, 100)", // 随机生成自然数(大于零的数)
        "email": "@email", // 邮箱
        "ip": "@ip" ,// ip
        "datatime": "@date('yy-MM-dd hh:mm:ss')" // 随机生成指定格式的时间
        // ......
      }

       

    • 列表数据
    • {
        "code": "0000",
        "data": {
          "pageNo": "@integer(1, 100)",
          "totalRecord": "@integer(100, 1000)",
          "pageSize": 10,
          "list|10": [{
            "id|+1": 1,
            "name": "@cword(10)",
            "title": "@cword(20)",
            "descript": "@csentence(20,50)",
            "price": "@float(10,100,10,100)"
          }]
        },
        "desc": "成功"
      }

       

    • 图片
    • mockjs可以生成任意大小,任意颜色块,且用文字填充内容的图片,使我们不用到处找图片资源就能轻松实现图片的模拟展示

    • "code": "0000",
        "data": {
          "pageNo": "@integer(1, 100)",
          "totalRecord": "@integer(100, 1000)",
          "pageSize": 10,
          "list|10": [{
            // 参数从左到右依次为,图片尺寸,背景色,前景色(及文字颜色),图片格式,图片中间的填充文字内容
            "image": "@image('200x100', '#ffcc33', '#FFF', 'png', 'Fast Mock')" 
          }]
        },
        "desc": "成功"

       

    展开全文
  • 用faker模拟数据

    千次阅读 2018-11-18 20:01:57
    faker正是这样一个类库,让我们能非常简单的模拟数据。本文参考自官方文档,如果有兴趣可以查看官方文档,不过 安装faker 首先先来安装faker: pip install Faker 简单使用 faker用起来也很简单,初始化一个实例,...
  • 官方网站:...使用方法:登录后创建接口,在编辑接口里写自己想要的数据. 最后加上接口名称访问即可. get请求案例:https://www.easy-mock.com/mock/5d09c84de0b02639f37c9e4c/example/login ...
  • Mock模拟数据生成接口

    千次阅读 2018-08-17 22:43:41
    Easy Mock是一个可视化,并且能快速生成模拟数据的服务。 Mock解决的问题 开发时,后端还没完成数据输出,前端只好写静态模拟数据。 数据太长了,将数据写在js文件里,完成后挨个改url。 某些逻辑复杂的代码,...
  • 如何在项目中使用MockJs模拟数据

    千次阅读 2018-12-01 18:28:01
    如何在项目中使用MockJs模拟数据 Tips:项目用vue用script引入的方式 一、为什么要模拟数据 前端界面完后台接口普遍没有出完,或者根本还没有开始写,为了项目的整体进度,前端必须要进行数据模拟,才能实现...
  • 前端开发中使用mock模拟数据

    千次阅读 2020-07-25 11:35:42
    使用mock进行模拟数据开发 第一步:npm i mockjs -D 这里必须加-D,因为我们只是开发环境使用 第二步:在 main.js 文件中引入mock:import ‘@/mock’ 第三步:创建mock文件夹,里面模拟自己需要调接口返回的假数据 ...
  • 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。 3.数据类型丰富 4.通过随机数据模拟各种场景。 等等优点。 总结起来就是在后端接口没有开发完成之前,前端可以用已有的接口文档,在真实的...
  • 1.先将需要模拟数据放入mock文件夹中 2.在build文件夹中,找到 webpack.dev.conf.js ,我们需要在这个js文件中配置Json //第一步 const portfinder = require('portfinder'),在后面加上 const express = ...
  • Easy-mock模拟数据使用指南

    千次阅读 2019-06-10 09:20:08
    Easy-mock模拟数据使用指南 官方文档 一. 基础使用 { "code": 0, "data": { "projects|5-10": [{ //随机生成5-10条 "adpartment|1": ["研发部", "市场部", "运营部"], "address": "@county(true)", ...
  • SuperMap轨迹点数据模拟数据生成

    千次阅读 2018-12-15 23:16:46
    跟车辆对接时,需要获取实时的坐标数据,在项目实施过程中车辆安装GPS需要一个过程,但这时候开发又不能等待GPS真实坐标的上传,只能先人工模拟造一些GPS位置轨迹数据,方便开发调试与演示汇报,本文章基于SuperMap ...
  • Charles请求本地模拟数据

    千次阅读 2019-01-08 11:08:08
    这个时候用本地模拟数据就可以完美解决。既方便又不影响别人。 操作: 1.在本地电脑任意位置新建一个记事本:复制抓到的数据格式粘贴到这里 2.设置URL使用本地数据:选中url右键 — Map Local — choose 本地...
  • Vue Element Admin 用mock模块模拟数据

    千次阅读 2019-11-07 11:56:06
    五 查看接口请求结果,可以看到这里请求的数据和我们上面自己写的是一样的 TIP:最后几个注意的点 1. vue.config.js 这里的接口地址必须是mock的地址,不能是后端真正给的地址,否则会报404 2. ....
  • 模拟实时数据 -使用MYSQL的事件建立动态模拟数据,每秒更新一次 (1) 模拟实时数据 -使用MYSQL的事件建立动态模拟数据,每秒更新一次 (2) 补充一下上次写的一个不足的地方。 在第二篇文章更新中下面的数据动态...
  • 使用mock进行模拟数据开发 第一步:npm i mockjs -D 这里必须加-D,因为我们只是开发环境使用 第二步:在 main.js 文件中引入mock:import '@/mock' 第三步:创建mock文件夹,里面模拟自己需要调接口返回的假数据: ...
  • 一个模拟数据的网站

    千次阅读 2018-07-18 09:54:33
    在这里可以模拟任意你想要的数据:https://easy-mock.com/dashboard
  • mockjs模拟数据,功能不要太强大

    千次阅读 2019-05-28 14:40:21
    mockjs模拟数据,功能不要太强大
  • 前端写json模拟数据

    千次阅读 2018-09-12 16:09:52
    1.添加json数据 { "status":"1", "msg":"成功", "data":{ "current":1, "size":20, "total":1, "userList":...
  • mysql批量构造模拟数据

    千次阅读 2017-12-27 09:59:24
    模拟数据构建记录:场景:为了测试,需要给用户聊天记录表添加100w条数据。思路:1.创建随机主键id函数,因为我的主键不是自增主键 2.创建插入存储过程,主键生成调用上述函数 3.调用存储过程,进行数据插 4.如果...
  • vue 模拟数据请求 使用json-server

    千次阅读 2018-06-08 10:54:03
    今天弄了个项目想去写后台,于是乎搞个模拟数据,网上大部分使用express,尝试了很多个配置方式,都不成功很难受,也可能是因为现在vue-cli的文件配置跟以前不一样的,总是不能成功。废话多数 ,我使用的json-server...
  • Vue mock模拟数据及三种请求

    千次阅读 2019-07-22 19:44:43
    Vue中使用mock模拟数据 第一步:安装mockjs(cnpm install mockjs --save) 第二步:在mock.js中导入mockjs 第三步:配置请求模拟数据(2种方法) mock.js import Mock from 'mockjs'; //导入mockjs //写法一:对象....
  • Mockjs模拟数据,实现增删改查

    千次阅读 2019-11-06 16:32:51
    Mockjs模拟数据,实现增删改查。 1、安装Mockjs npm install mockjs --save-dev 因为生产环境用的是正式接口,安装在开发依赖上可以减小包的大小。 2、生成数据初始列表 import Mock from 'mockjs'; const ...
  • 关于使用rap2接口模拟数据

    千次阅读 2020-02-24 18:24:28
    然而在实际工作中,前后端的搭建工作往往是同时进行的,所以在写前端页面时常常会遇到后端并没有完成数据接口的递接的情况,这个时候显然不可能停下去等后端的数据,使用模拟数据就显得十分必要了。在这里简单介绍...
  • //把emp表中的所有数据插入到emp表中insert into emp select * from emp;//把emp表中的部分字段插入emp表中insert into emp (name,sex) select name,sex from emp;注意:1、通过反复执行以上sql,可以获得大量的...
  • [kafka]Kafka Tool模拟数据发送

    千次阅读 2020-10-29 09:45:24
    学习笔记
  • 前端怎么使用easymock模拟数据请求

    千次阅读 热门讨论 2019-01-29 14:16:54
    前端经常遇到的一个场景就是需要请求后台数据。 请求数据就是请求接口: 发起ajax请求---&gt;www.baidu.com(随便写的,代表一个能返回数据的网址)---&gt;response一些数据-----&gt;前端js处理之后--...
  • 那么这里就要求,创建模拟的秒级别的数据。 方法: 1.使用MYSQL的事件方式不断的进行数据的迭代,更新。 2.使用Python 不断更新数据库的数据。(这里就不描述了,以后有时间再写) 效果如下:(真实的播放效果...
  • 模拟数据 json-server 增删改查 操作

    千次阅读 2018-12-13 15:24:46
    一、准备页面 ...添加数据&lt;/li&gt; &lt;li class="change"&gt;修改数据&lt;/li&gt; &lt;li class="del"&gt;删除数据&lt;/li&gt

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 977,642
精华内容 391,056
关键字:

模拟数据