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

    2018-06-22 11:11:00
    我所理解的有两种方法使用mockjs,第一种是比较简答你的使用,还有一种是模块化的使用 简单的使用 (1)在项目中的mock.js文件中,写入模拟的数据,此时我们需要参照一下 mockjs 文档中的这样一块 //...

    在使用vue开发的时候,一直疑惑与mockjs怎么用,开了mockjs的开发文档,还是一脸蒙蔽,无从下手!mockjs在前后端分离开发上进行模拟数据,是不可避掉的一环。在网上看了一些博文还有查阅了其文档,终于搞明白了它的基础用法,有什么不完整的地方,还请大家多多指正。

    • 搭建一个vue项目

    # 全局安装 vue-cli
    $ npm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack vue-mock
    # 安装依赖,走你
    $ cd my-project
    $ npm install
    
    • 安装mockjs

    npm install mockjs --save-dev
    • 启动项目

    npm run dev
    • 创建一个mockjs文档
      此时可以看到类似于这样的一个项目结构

    clipboard.png
    其中mockjs是我自己创建的一个mock文件,用于存放模拟的数据

    项目搭建起来之后,能够在package.json里面看到 "mockjs": "^1.0.1-beta3" 这块代码,就说明mockjs已经引入载入成功,就可以开始我们下一步的操作;
    我所理解的有两种方法使用mockjs,第一种是比较简答你的使用,还有一种是模块化的使用

    简单的使用

    (1)在项目中的mock.js文件中,写入模拟的数据,此时我们需要参照一下mockjs文档中的这样一块

    //参照mockjs的文档,进行操作
    // 配置 Mock 路径
    require.config({
        paths: {
            mock: 'http://mockjs.com/dist/mock'
        }
    })
    // 加载 Mock
    require(['mock'], function(Mock){
        // 使用 Mock
        var data = Mock.mock({
            'list|1-10': [{
                'id|+1': 1
            }]
        })
        // 输出结果
        document.body.innerHTML +=
            '<pre>' +
            JSON.stringify(data, null, 4) +
            '</pre>'
    })
    

    (2)我们在mockjs中进行以下编写

    //引入mockjs
    const Mock = require('mockjs')
    //使用mockjs模拟数据
    Mock.mock('/api/data', (req, res) => {
        return {
            data: ['a','b']
        }
    })

    同时,不要忘记了,需要在main.js里面引入该文档,告诉程序,使用了mockjs,来进行数据模拟

    require('./mock')//此部分引入的是我们所编写的mockjs文档

    (3)重写了Hello.vue

    clipboard.png

    hello.vue中的AJAX请求与mockjs里里面的url相同,这个时候我们可以看到页面上的显示如下图

    clipboard.png

    模块化的使用

    (1)在build的文件夹下面的dev-server文件中进行配置

    首先,需要引入mockjs =》 require('mockjs')
    其次在dev-server里面配置
    app.use('/api/data', (req, res) => {
      res.send({
        data:['a','s']
      })
    })

    此块代码写到如下图所在的区域

    clipboard.png

    其中res.send的意思就是把它所包含的数据抛出去,使AJAX能够请求的到,使用这个方法的时候,我们不需要在main.js里面引入就可以直接使用,但是有一点不好的是,这种方法,因为卸载配置里面,比较混乱,跟我们模块化开发的意愿相悖,我们可以尝试这把数据的这一块单独拿出去,我们只需要在这里面引用就可以了;

    把上面引入的mockjs注掉,把app.use改写成app.use('/api', require('../src/mock.js'))的形式,其中api是根路径,类似于router中的base路径,后面的require引入的是mock.js里的数据
    在mockjs文档中,我们进行一下数据改写,如下图所示

    clipboard.png

    此时页面显示为

    clipboard.png

    转载于:https://my.oschina.net/jamesview/blog/1833923

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

    千次阅读 2018-02-08 14:56:07
    前端mockjs本地模拟http请求,vue单页项目配置mockjs实现虚拟化http请求,配置步骤以及详细的代码,探索了俩小时搞定了集成方法,可以参考。
    /**
      1.安装好mockjs
     *  命令行 npm install mockjs
     *
      2.在项目中引用mockjs [ 重要 ]
     *  ##在项目src目录下新建一个mock文件夹
     *  ##在mock文件夹下新建 index.js ---存放所有的http模拟返回的接口数据
     *
     3.编辑index.js
     *  添加代码导入mockjs:import 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这些模拟的资源,
     从而组件中不用做任何修改,最大减少反复工作量
     * */
    展开全文
  • 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使用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这些模拟的资源,
    从而组件中不用做任何修改,最大减少反复工作量

    展开全文
  • Mockjs生成模拟数据 在前端进行开发的时候,我们需要拿到后端的接口,然后调用进而拿到后端所提供的数据;...最近我也在写项目,然后遇到类似的问题,所以今天就特意总结了一下mockjs的基本使用! 一、首先,需要安装
  • 前后端分离开发,有时候前端页面很快就写出来了,需要接口数据来测试页面交互功能是否正常,但是后端接口还迟迟未出来,此时就可以使用mock模拟数据了。又或者有时候自己写个前端demo缺乏接口,这时也可以使用Mock来...
  • 下载 安装 mockjs npm install mockjs --save-dev 在src文件中创建mock.js文件夹 在文件中创建mock.js文件 在min.js文件中引入 import './mock/mock.js’ 在mockjs文件引入 import Mock from 'mockjs’ 在mockjs写...
  • mockjs模拟后端接口数据 mockjs 这里就不介绍mockjs了,直接上手吧 首先当然还是导入依赖 npm i mockjs 在src目录下新建目录mock,在mock目录中新建mock.js,mock.js中模拟接口数据 import Mock from 'mockjs' ...
  • 1.安装好mockjs命令行 npm install mockjs 2.在项目中引用mockjs [ 重要 ]##在项目src目录下新建一个mock文件夹##在mock文件夹下新建 index.js ---存放所有的http模拟返回的接口数据 3.编辑index.js添加...
  • vuemockjs使用

    2018-03-30 11:46:50
    npm i mockjs --save-dev 2、编辑mock.js import Mock from 'mockjs' //Random:存储各种随机函数的对象 let Random = Mock.Random const data = () =&gt; { let arr = [] fo...
  • 关于vuemockjs使用

    2019-02-15 11:13:00
    使用vue的时候,后台可能不能及时作出接口,那么就需要我们前端自己模拟数据,使用mockjs可以进行模拟数据。 首先安装mockjs,cnpm install mockjs --save-dev; 其次在src下创建一个mock的文件夹,里边存在index....
  • vuemockjs使用

    2020-04-23 09:33:09
    安装 npm i moockjs -D 在src目录创建mock.js文件,并在...import mcok from 'mockjs //引入 Mock.setup({timeout:'100-800'}); // 设置延迟时间 Mock.mock('/data/index','post',()=>{ let data = []; for ...
  • VUE基于mockjs模拟后台数据Demo使用Mock.js支持的数据类型丰富项目实例直接调用和效果图 使用Mock.js 众所周知Mock.js因为两个重要的特性风靡前端: 数据类型丰富 支持生成随机的文本、数字、布尔值、日期、邮箱...
  • vue+mockjs的小用法

    2018-11-29 10:52:55
    最近想往数据库里导一些数据,同事推荐了mock,了解一下觉得不错,现将在vue用的mock贴上来 写在前默认看此文的盆友都是有vue基础的哟~~ 一、导读 将mockjs的数据直接展示在vue页面上 ...2、使用mockjs的随...
  • vue使用mockjs

    2020-09-30 15:10:42
    vue使用mockjs安装mockjs在src下创建一个mock的文件夹,里边存在index.js,这个文件是保存模拟数据路径的地方创建一个文件夹里边存储的是需要模拟的数据src有一个专门放置访问接口的文件夹在main.js文件中引用...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 666
精华内容 266
关键字:

vue使用mockjs

vue 订阅