精华内容
下载资源
问答
  • vue使用mockjs配置和使用

    千次阅读 2019-03-08 15:29:47
    在前后端分离的开发中,需要前后端同时开发,但是在后端完成前,暂时是没有数据返回给前端使用的,如果先写静态后面再改,就有重复工作的内耗存在。所以我们需要一种简单快速的模拟数据的模块,本文选的是mockjs。 ...

    需求:
    在前后端分离的开发中,需要前后端同时开发,但是在后端完成前,暂时是没有数据返回给前端使用的,如果先写静态后面再改,就有重复工作的内耗存在。所以我们需要一种简单快速的模拟数据的模块,本文选的是mockjs。
    步骤:
    1、安装mockjs

    npm install mockjs
    

    2、在项目的src文件夹下建mock文件夹,在mock文件夹下建index.js(存放所有的http模拟返回的接口数据);以下我写了两个接口:

    import Mock from 'mockjs';
    const vehicle = Mock.mock(
      '/api/car', 'post', (req, res) => {
        return {
          code: 200,
          data: [{
            id: 1,
            name: 'BYD',
    
          }, {
            id: 1,
            name: 'baojun',
          }],
          message: '查询成功'
        }
      })
    const user = Mock.mock(
      '/api/user', 'get', (req, res) => {
        return {
          code: 200,
          data: {
            id: 1,
            sex: 1,
            age: 25,
            createTime: '2017-04-01'
          },
          message: '查询成功'
        }
      })
    
    export default {
      vehicle,
      user
    }
    
    

    3、为了方便在所有组件中使用mock模拟数据在项目 的main.js中导入刚编辑的接口数据

     import mockdata from "./mock"; //这样的话组件里就可以随意调用接口了
    

    4、在组件中调用虚拟接口
    在生命周期钩子函数中调用接口即可:我使用axios ,前提是项目已经安装了axios(先npm install axios,再npm install --save axios vue-axios),一个按钮执行点击事件,下面方法调接口

    <button @click="search()">点击查询</button>
    
      methods: {
        search() {
          this.$http.get("/api/user").then(res => {
            console.log(res);
          });
          this.$http.post("/api/car").then(res => {
            console.log(res);
          });
        }
      },
    

    在这里插入图片描述

    5、注在项目接口调试完成后需要删除main.js中对于mock的引用以及mock/index.js这些模拟的资源,
    从而组件中不用做任何修改,最大减少反复工作量

    展开全文
  • vue使用mockjs配置步骤

    千次阅读 2018-07-20 16:03:36
    * 命令行 npm install mockjs * 2.在项目中引用mockjs [ 重要 ] * ##在项目src目录下新建一个mock文件夹 * ##在mock文件夹下新建 index.js ---存放所有的http模拟返回的接口数据 * 3.编辑index.js * 添加...
    /**
      1.安装好mockjs
     *  命令行 npm install mockjs
     *
      2.在项目中引用mockjs [ 重要 ]
     *  ##在项目src目录下新建一个mock文件夹
     *  ##mock文件夹下新建 index.js ---存放所有的http模拟返回的接口数据
     *
     3.编辑index.js
     *  添加代码导入mockjsimport Mock from 'mockjs';
     *  添加接口数据代码:
    *************************index.js******************************
     import Mock from 'mockjs';
     const vehicle = Mock.mock(
     '/api/vehicle','post', (req, res) =>{
        return  {
            code:200,
            data:[{
                id:1,
                licNumber:'A79898',
                color:1,
                buyTime:'2017-04-01'
    
            },{
                id:1,
                licNumber:'A79898',
                color:1,
                buyTime:'2017-04-01'
    
            }],
            message:'查询成功'
        }
    } )
     const user = Mock.mock(
     '/api/user','get', (req, res) =>{
        return  {
            code:200,
            data:{
                id:1,
               sex:1,
                age:25,
                createTime:'2017-04-01'
            },
            message:'查询成功'
        }
    } )
    
     export default { vehicle,user }
    
    ***************************end***********************************
     4.为了方便在所有组件中使用mock模拟数据
    i项目 main.js中导入刚编辑的接口数据
    
     import mockdata from "./mock"; //这样的话组件里就可以随意调用接口了
    
    
     5.在组件中调用虚拟接口
     在生命周期钩子函数中调用接口即可:可以使用axios 或者 vue-resourse
     created(){
        this.$http.get('/api/vehicle',null,r=>{ console.log( r ) },r=>{}) //http请求请自行封装
        this.$http.post('/api/user',null,r=>{ console.log( r ) },r=>{}) //http请求请自行封装
     }
    
     6.注在项目接口调试完成后需要删除main.js中对于mock的引用以及mock/index.js这些模拟的资源,
     从而组件中不用做任何修改,最大减少反复工作量
     * */

     

     

    转载自 https://blog.csdn.net/museions/article/details/79289320

    展开全文
  • vue 使用mockjs造假数据

    2020-12-30 14:30:11
    什么是Mock.js? 生成随机数据,拦截 Ajax 请求。 通过随机数据,模拟各种场景;...使用步骤: 1.先安装mockjs npm install mockjs --save-dev 2.在src目录下创建mock文件夹,并创建index.js文件,拦截axio

    什么是Mock.js?
    生成随机数据,拦截 Ajax 请求。

    通过随机数据,模拟各种场景;不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据;支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等;支持支持扩展更多数据类型,支持自定义函数和正则。优点是非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。

    使用步骤:
    1.先安装mockjs

    npm install mockjs --save-dev
    

    2.在src目录下创建mock文件夹,并创建index.js文件,拦截axios请求

    import Mock from 'mockjs'
    //第一种
    Mock.mock('/news/api','post',{
    	"userInfo|4":[{
    		"name":"@cname",
    		"age|18-28":"25",
    		"sex|1":["男","女"]
    	}]
    })
    //第二种
    var Random = Mock.Random;
    var listData = function(){
        let articles =[]
        for(let i=0; i<10; i++){
            let newList = {
                name: Random.cname(),
                age: Random.integer(20,50),
                sex: Random.sex()
            }
            articles.push(newList)
        }
        return {
            articles: articles
        }
    }
    Mock.mock("/news/api","post" ,listData)//生成数据以及接口
    
    

    3.在main.js中引入mock文件下的index.js文件

    import './mock/index.js'
    

    4.api文件夹内设置请求接口

    import request from "@/request"
    export default{
        getName(){
            return request({
                url :'/news/api',
                method: 'post'
            })
        }
    }
    

    5.在vue页面使用axios接口来请求

    <template>
        <div>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                <el-table-column prop="age" label="年龄" width="180"></el-table-column>
                <el-table-column prop="sex" label="性别"></el-table-column>
            </el-table>
            <el-button type="primary" @click="searchList">查询</el-button>
        </div>
    </template>
    
    <script>
    import testPage from '@/api/testPage'
    export default {
        data() {
            return {
                tableData: []
            }
        },
        methods: {
            searchList(){
                testPage.getName().then(res => {
                    if(res){
                        //this.tableData = res.data.articles
                        this.tableData = res.data.userInfo
                        this.$message.success("成功")
                    }else{
                        this.$message.error('失败')
                    }
                })
            }
        }
    }
    </script>
    
    <style></style>
    
    展开全文
  • 主要介绍了详解在vue-cli项目下简单使用mockjs模拟数据,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 前后端分离开发,有时候前端页面很快就写出来了,需要接口数据来测试页面交互功能是否正常,但是后端接口还迟迟未出来,此时就可以使用mock模拟数据了。又或者有时候自己写个前端demo缺乏接口,这时也可以使用Mock来...

    前后端分离开发,有时候前端页面很快就写出来了,需要接口数据来测试页面交互功能是否正常,但是后端接口还迟迟未出来,此时就可以使用mock模拟数据了。又或者有时候自己写个前端demo缺乏接口,这时也可以使用Mock来模拟接口数据。

    1.npm安装mock插件

    cd项目目录,执行:

    npm install mockjs --save-dev
    

    2.在项目的src目录下新建mock.js文件,并引入mockjs

    import Mock from 'mockjs'
    
    function getData(){
      let datalist= [];
      for (let i = 0; i < 100; i++) {
        datalist.push(i)
        }
      }
      return {
        data: datalist
      }
    }
    const data = Mock.mock('/testApi',getData)
    export default {data};
    

    Mock.mock()函数的第一个参数是被请求的url,第二个参数是后端要返回给前端的数据

    模拟好假数据接口之后,我们还要在main.js中将接口导入

    import mockdata from './mock'
    

    3.测试使用

    <button @click="getData">fasong</button>
    methods:{
        getData(){
           this.axios.get('/testApi').then(function (res) {
            console.log(res)
          })
        }
      }
    

    更多mock玩法详见mock官方文档,点击进入mock官网


    mock数据模板玩法:

    var arr=['aa','bb','cc'];
    var obj={
       'name':'MountainC44',
       'old':'23',
       'sex':'man'
    };
      
    //数据模版简单举例
    {
       'firstName|3':'xue',//重复fei这个字符串 3 次。
       'lastName|2-5':'yangbo',//重复yangbo这个字符串 2-5 次。
       'index|+1':0, //属性值自动加 1,初始值为 0
       'age|20-30':25,//生成一个大于等于 20、小于等于 30 的整数,属性值 25 只是用来确定类型
       'weight|100-120.2-5':110.24,//生成一个浮点数,整数部分大于等于 100、小于等于 120,小数部分保留 2 到 5 位。
       'likeMovie|1':Boolean,//随机生成一个布尔值,值为 true 的概率是 1/2,值为 false 的概率同样是 1/2。
       'friend1|1':arr,//从数组 arr 中随机选取 1 个元素,作为最终值。
       'friend2|+1':arr,//从属性值 arr 中顺序选取 1 个元素,作为最终值
       'friend3|2-3':arr,//通过重复属性值 arr 生成一个新数组,重复次数大于等于 2,小于等于 3。
       'obj1|2':obj,//从属性值 obj 中随机选取 2 个属性
       'obj2|1-2':obj,//从属性值 obj 中随机选取 1 到 2 个属性。
       'regexp1':/^[a-z][A-Z][0-9]$/,//生成的符合正则表达式的字符串
    }
      
    //返回示例
    {
       'firstName':'xuexuexue',
       'lastName':'yangboyangbo',
       'index':0, 
       'age':28,
       'weight':115.223,
       'likeMovie':Boolean,
       'friend1':'bb',
       'friend2':'aa',
       'friend3|2-3':['aa','bb','cc','aa','bb','cc'],
       'obj1':{'name':'MountainC44','old':'23',},
       'obj2':{'name':'MountainC44',},
       'regexp1':'sC2',
    }
    
    

    mock数据占位符玩法:

    //数据占位符使用
    {
      "string|1-2": "@string",     //随机生成字符串
      "integer": "@integer(10, 30)",  //随机生成一个10~30之间的正整数
      "float": "@float(60, 100, 2, 2)",  //随机生成浮点数,参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数
      "boolean": "@boolean",       //随机生成boolean
      "date": "@date(yyyy-MM-dd)", //按照格式随机生成时间
      "datetime": "@datetime",     //随机生成时间
      "now": "@now",               //当前时间
      "url": "@url",               //随机生成url字符串
      "email": "@email",           //随机生成邮箱
      "region": "@region",         //随机生成地区
      "city": "@city",             //随机生成城市
      "province": "@province",     //随机生成省会
      "county": "@county",         //随机生成一个(中国)县
      "upper": "@upper(@title)",   //把生随机成的标题全部转为大写
      "guid": "@guid",             //随机生成一个 GUID
      "id": "@id",                 //随机生成一个 18 位身份证
      "image": "@image(200x200)",  //随机生成一个大小为200x200的图片链接
      "title": "@title",           //随机生成一句标题,其中每个单词的首字母大写
      "cparagraph": "@cparagraph", //随机生成一段中文文本
      "csentence": "@csentence",   //随机生成一段中文文本
      "range": "@range(2, 10)"     //返回一个内容从2开始到9的整型数组
    }
    
    //返回示例
    {
      "string": "A0L^Z",
      "integer": 16,
      "float": 82.23,
      "boolean": true,
      "date": "1994-09-16",
      "datetime": "1994-10-22 02:30:32",
      "now": "2018-10-21 10:31:00",
      "url": "mailto://tfoyemmcy.as/ppm",
      "email": "f.lqdfggdy@wulqhmm.com",
      "region": "华南",
      "city": "茂名市",
      "province": "澳门特别行政区",
      "county": "和平区",
      "upper": "LGHV FJV FDHNA ZJQO MKQEPMY BYVPYMU JRUPL",
      "guid": "EdAD386E-eCB3-e054-fBd3-D4BCd58bF2Dd",
      "id": "630000201810081550",
      "image": "http://dummyimage.com/200x200",
      "title": "Powol Qhycsib Nvwf Bmiuvcek Ioisiu Sxdmrpdip",
      "cparagraph": "又平你大万被然红义她之影此属且。定圆光半条社已上实参规持备特战划。打第一在感革会属利小年往。认七单边济火国风风速次支比容争连劳。目叫织新百却又处思只名发这实。什济安这自空东认十需打现军应。",
      "csentence": "火事必该验导回声市然第别程确条状。",
      "range": [2,3,4,5,6,7,8,9]
    }
    
    展开全文
  • vue使用mockjs

    2018-06-22 11:11:00
    使用vue开发的时候,一直疑惑与mockjs怎么用,开了 mockjs的开发文档 ,还是一脸蒙蔽,无从下手!mockjs在前后端分离开发上进行模拟数据,是不可避掉的一环。在网上看了一些博文还有查阅了其文档,终于搞明白了它...
  • vue使用mockjs

    万次阅读 2019-07-02 09:40:09
    1.安装mockjs 和axios npm install --save-dev mockjs npm install --save axios 2.在src目录下创建mock文件夹,并创建index.js文件,内容如下: import Mock from 'mockjs' const data={ "id":"@guid", ...
  • Mockjs生成模拟数据 在前端进行开发的时候,我们需要拿到后端的接口,然后调用进而拿到后端所提供的数据;...最近我也在写项目,然后遇到类似的问题,所以今天就特意总结了一下mockjs的基本使用! 一、首先,需要安装
  • vue 引用mockjs 模拟真实的数据

    万次阅读 多人点赞 2018-09-28 11:21:59
    vue+mockjs 模拟数据,实现前后端分离开发 在项目中尝试了mockjs,mock数据,实现前后端分离开发。 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。 ...
  • 本篇文章主要介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,具有一定的参考价值,有兴趣的可以了解一下
  • MockJs入门-vue使用mockjs

    2021-11-21 01:36:41
    安装必备库 # 安装mockJs npm install mockjs # 安装axios用于获取mockjs数据 ...# 使用json5解决json文件无法添加注释问题 npm install json5 参考:https://www.bilibili.com/video/BV1PE411A7U6?p=4
  • 下载 安装 mockjs npm install mockjs --save-dev 在src文件中创建mock.js文件夹 在文件中创建mock.js文件 在min.js文件中引入 import './mock/mock.js’ 在mockjs文件引入 import Mock from 'mockjs’ 在mockjs写...
  • npm install mockjs 在src文件下 1、创建mock文件夹 在mock文件夹下 2、创建json文件 并在json文件夹下创建index.json 3、在mock文件下创建mock.js文件 在mian.js文件中引用mock.js import "./mock/mock.js"; ...
  • 使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据。使用mock就可以生成你要的数据了,从而实现开发时前后端分离。 其主要功能是: 基于数据模板生成模拟数据。 基于HTML模板生成模拟数据。 ...
  • mockjs模拟后端接口数据 mockjs 这里就不介绍mockjs了,直接上手吧 首先当然还是导入依赖 npm i mockjs 在src目录下新建目录mock,在mock目录中新建mock.js,mock.js中模拟接口数据 import Mock from 'mockjs' ...
  • 当你使用Vue使用Mockjs和axios的时候为什么会报404? emmmm, 你可能需要看下main.js里面有没有把mock放进去, CTMD,烦躁 mock是你写的Mock文件
  • 1、安装mock依赖 npm install mockjs npm install vite-plugin-mock 2、在src目录下创建mock目录文件夹 ,并创建index.js export default [ { type: 'get', url: '/api/getUser', response: () => { return [{name...
  • vue+mockjs模拟数据的增删改查功能

    千次阅读 2018-08-01 11:47:33
    这一部分讲述了mock.js在vue中的详细使用...在vue-cli项目中使用Mock模拟数据的增删改查操作: mock.js: // 模拟数据列表 var arr = []; for(let i = 0 ; i &lt; 10 ; i++){ let newArticleO...
  • [配置]vuemockjs的配置和使用

    千次阅读 2018-11-15 18:49:33
    前后端分离的开发中,需要前后端同时开发,但是在后端完成前,暂时是没有数据返回给前端使用的,如果先写静态后面再改,就有重复工作的内耗存在。所以我们需要一种简单快速的模拟数据的模块,本文选的是mockjs。 ...
  • vue如何使用mockjs摸拟接口数据

    千次阅读 2019-02-11 14:38:27
    Vue使用 mock 有两种使用方式,一种是仅编写数据来调用,第二种是编写 服务+数据模拟真实接口(可在network查看) Mock对象API用例查看(推荐只看这个就可以) 官方mock定义api查询 第一种方式,编写mock ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,187
精华内容 1,674
关键字:

vue使用mockjs

vue 订阅