精华内容
下载资源
问答
  • vue+mock.js
    2018-07-17 17:53:32

    (1).mockjs介绍

    mock.js是模拟后端的数据,脱离后端独立开发,实现增删改查功能

    (2).官网描述的是

    1.前后端分离
    2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
    3.数据类型丰富
    4.通过随机数据,模拟各种场景。

    (3).数据模板格式

    'name|rule': value
    
    属性名|生成规则: 属性值

    (4).安装-使用

    1.在搭建好的vue项目中 cd practice_project\elements-demo (elements-demo项目名)

    2.安装mockjs

    npm install mockjs –save-dev

    3.引入mockjs

    ①在src中创建mock文件夹,在里面创建mock.js

    ②入口文件中main.js

    import Mock from './mock/mock'

    4.测试 官网的小demo

    在 mock.js中

    // 使用 Mock
    var Mock = require('mockjs')
    var data = Mock.mock('http://域名',{
        // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
        'list|1-10': [{
            // 属性 id 是一个自增数,起始值为 1,每次增 1
            'id|+1': 1
        }]
    })
    // 输出结果
    console.log(JSON.stringify(data, null, 4))
    

    更多的知识点
    http://www.mamicode.com/info-detail-1710006.html

    更多相关内容
  • 前言 关于mockjs,官网描述的是 1.前后端分离 2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应...我是在项目src/mock/index.js里面使用mock.js 详细请看官方文档 关键点1:Mock.mock() Mock.mock( rurl?,
  • 主要介绍了详解vue2.0+axios+mock+axios-mock+adapter实现登陆,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要为大家详细介绍了vue+mock.js实现前后端分离,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 本篇文章主要介绍了vue+axios+mock.js环境搭建的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 在java web应用中,进行用例实现时,很多情况难以模拟,比如数据库用例,如果直接通过连接数据库进行测试,导致用例对环境依赖很大,这时,可以通过mock技术可以模拟构造数据环境,从而进行单元测试,这里提供有实现...
  • 第三步在main.js里面引入刚刚我们写好的src/mock/index.jsimport './mock' // simulation data 路径index.js可省略 至此整合完毕 相关文章: 相关视频: 以上就是Vue+Mock.js实现模拟表格增删改查详细步骤的详细...

    关于mockjs,官网描述的是

    1.前后端分离

    2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

    3.数据类型丰富

    4.通过随机数据,模拟各种场景。

    前言关于mockjs,官网描述的是

    1.前后端分离

    2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

    3.数据类型丰富

    4.通过随机数据,模拟各种场景。

    5 项目不背锅(等后端给接口的话可能会背锅)

    等等优点,最后一条我加的。

    第一步先安装mock.jsnpm install mockjs --save-dev

    第二步使用 mock.jsimport Mock from 'mockjs'

    哪里用就在哪里引入。我是在项目src/mock/index.js里面使用mock.js

    详细请看官方文档

    关键点1:Mock.mock()Mock.mock( rurl?, rtype?, template|function( options ) )

    这里的参数都是可选:rurl(可选)。

    表示需要拦截的 URL,可以是 URL 字符串或 URL 正则。例如 //domain/list.json/、'/domian/list.json'。rtype(可选)。

    表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。template(可选)。

    表示数据模板,可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。function(options)(可选)。

    表示用于生成响应数据的函数。options:指向本次请求的 Ajax 选项集。

    关键点2:模板生成语法:数据模板中的每个属性由 3 部分构成:属性名、生成规则、属性值:// 属性名 name

    // 生成规则 rule

    // 属性值 value

    'name|rule': value

    属性名 和 生成规则 之间用竖线 | 分隔。

    生成规则 是可选的。

    生成规则 有 7 种格式:'name|min-max': value

    'name|count': value

    'name|min-max.dmin-dmax': value

    'name|min-max.dcount': value

    'name|count.dmin-dmax': value

    'name|count.dcount': value

    'name|+step': value`

    生成规则 的 含义 需要依赖 属性值的类型 才能确定。

    属性值 中可以含有 @占位符。

    属性值 还指定了最终值的初始值和类型。

    举个栗子:

    栗子1://string表示属性名

    //3表示后面属性值重复次数

    Mock.mock({

    "string|3": "★"

    })

    结果://星星数量为3

    {

    "string": "★★★"

    }

    栗子2:// num为属性名

    // 生成一个大于等于1,小于等于100 的整数,属性值100只是用来确定类型

    Mock.mock({

    "num|1-100": 100

    })

    结果{

    "number": 8

    }

    其他设置// 设置全局延时 没有延时的话有时候会检测不到数据变化 建议保留

    Mock.setup({

    timeout: '300-600'

    })

    模拟登录

    // 模拟登录user/login接口,对应的函数是loginByUsernameMock.mock(/\/user\/login/, 'post', loginByUsername)

    当调用登录接口user/loign时候会自动对应到loginByUsername这个函数执行这个函数,

    这个函数会返回是否登录成功数据。返回成功的数据,就是登录成功了,否则相反。

    mock模拟登录ok

    接下来介绍模拟表格增删改查。

    其实也是差不多的// 用户相关

    Mock.mock(/\/user\/listpage/, 'get', getUserList) //模拟分页查询用户信息接口

    Mock.mock(/\/user\/remove/, 'get', deleteUser) //模拟删除用户信息接口

    Mock.mock(/\/user\/add/, 'get', createUser) //模拟添加用户信息接口

    Mock.mock(/\/user\/edit/, 'get', updateUser) //模拟编辑用户信息接口

    就是返回条件查询后的集合假数据而已,假数据是mock.js模拟的。

    先循环添加60个假用户let List = []

    const count = 60

    for (let i = 0; i < count; i++) {

    List.push(Mock.mock({

    id: Mock.Random.guid(),

    name: Mock.Random.cname(),

    addr: Mock.mock('@county(true)'),

    'age|18-60': 1,

    birth: Mock.Random.date(),

    sex: Mock.Random.integer(0, 1)

    }))

    }

    我们再来看getUserList这个函数,就是返回分页条件查询的假数据。getUserList: config => {

    const { name, page = 1, limit = 20 } = param2Obj(config.url)

    const mockList = List.filter(user => {

    if (name && user.name.indexOf(name) === -1) return false

    return true

    })

    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))

    return {

    code: 0,

    data: {

    total: mockList.length,

    users: pageList

    }

    }

    }

    关于增加,删除和修改都只需要返回一个数据message="操作成功"即可。

    第三步在main.js里面引入刚刚我们写好的src/mock/index.jsimport './mock' // simulation data 路径index.js可省略

    至此整合完毕

    相关文章:

    相关视频:

    展开全文
  • 玩玩 vue+mock.js 的使用

    2020-04-20 23:11:29
    mockjs 你可以理解为模拟数据的一个工具库,由Mock.mock()方法它可以拦截一个URL地址,然后通过Mock.Random.xxx()方法去随机生成具有一定格式的数据。可以说具备了拦截和伪造的功能。让我一个搞后端的人也忍不住想看...

    mockjs 你可以理解为模拟数据的一个工具库,由Mock.mock()方法它可以拦截一个URL地址,然后通过Mock.Random.xxx()方法去随机生成具有一定格式的数据。可以说具备了拦截和伪造的功能。让我一个搞后端的人也忍不住想看看这是啥玩意。
    官网地址:http://mockjs.com/

    第一步:构建 vue 项目。
    可使用 vue ui 创建项目。

    在这里插入图片描述
    项目结构如下 这里除了(Mock.js 是后面加的其它都是自动生成的)
    在这里插入图片描述
    这里需要安装两个以来

    npm install axios
    npm install mockjs --dev-save 
    

    引入一个 类似于 AJAX 的库,和引入 mockjs
    新建 Mock.js

    const Mock = require('mockjs')
    const Random = Mock.Random
    const newsData = function () {
        let articles = []
        for (let i = 0; i < 10; i++) {
            let newsObj = {
                date: Random.date(),  //年月日
                longDate: Random.datetime(), //精确到时分秒
                number: Random.natural(201, 205),  //数字
                image: Random.image(),      //图片
                flag: Random.boolean(),  // true-false
                name: Random.cname(),     //姓名
                url: Random.url(),       //url地址
                province: Random.province(),  //省
                city: Random.city(),     //市
                county: Random.county()  //区
            }
            articles.push(newsObj)
        }
    
        return {
            code: 0,
            msg: "操作成功",
            data: articles,
        }
    
    }
    
    Mock.setup({
        timeout: 500
    })
    
    
    // ``请严格注意get请求的地址``
    Mock.mock('/api/user/myTranferRecord', 'post', newsData)   //post请求
    Mock.mock(RegExp("/api/user/myTranferRecord" + ".*"), 'get', newsData)   //get请求
    

    注意要在 main.js 中注册
    import axios from ‘axios’
    Vue.prototype.$axios = axios
    import ‘./Mock.js’

    main.js

    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from './store'
    
    Vue.config.productionTip = false
    import axios from 'axios'
    Vue.prototype.$axios = axios
    import './Mock.js'
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
    
    

    然后找到HelloWorld 页随意加个按钮,主要是为了触发点击时间,使用 axios 发起一个请求,然后让 mock.js 去拦截它。最后返回 Mockjs 伪造回来的数据。

    <template>
      <div class="hello">
        // 此处加了一个按钮
        <button @click="testAxios()">button</button>
        <h1>{{ msg }}</h1>
        <p>
          For a guide and recipes on how to configure / customize this project,<br>
          check out the
          <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
        </p>
        <h3>Installed CLI Plugins</h3>
        <ul>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
          <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
        </ul>
        <h3>Essential Links</h3>
        <ul>
          <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
          <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
          <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
          <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
          <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
        </ul>
        <h3>Ecosystem</h3>
        <ul>
          <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
          <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
          <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
          <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
          <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      methods:{
        testAxios: function () {
          this.$axios.post('/api/user/myTranferRecord').then(res=>{
            console.log(res) //这里返回的就是我们在mock中自定义的数据
          })
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>
    
    

    页面如下:
    在这里插入图片描述
    看到一个 Button 按钮没,我加的。。。
    还加了一个 methods 方法

    testAxios: function () {
          this.$axios.post('/api/user/myTranferRecord').then(res=>{
            console.log(res) //这里返回的就是我们在mock中自定义的数据
          })
    

    结果:
    在这里插入图片描述

    源码: https://github.com/weijieqiu/iStudy/tree/master/studyVue/vuemock

    展开全文
  • Vue+mock.js+axios

    2018-11-08 10:27:24
    基于vue框架写的一个列表页到详情页的功能,另外是使用mock.js写的
  • vue+mock使用

    2021-08-26 11:32:20
    1.引入mock.js依赖包 npm install mockjs --save-dev 2.src下新建如下文件夹 (1).mock.js // 首先引入Mock const Mock = require('mockjs'); // 设置拦截ajax请求的相应时间 Mock.setup({ timeout: '10-100' });...

    1.引入mock.js依赖包

    npm install mockjs --save-dev
    

    2.src下新建如下文件夹

    在这里插入图片描述

    (1).mock.js
    // 首先引入Mock
    const Mock = require('mockjs');
    
    // 设置拦截ajax请求的相应时间
    Mock.setup({
      timeout: '10-100'
    });
    
    let configArray = [];
    
    // 使用webpack的require.context()遍历所有mock文件
    const files = require.context('.', true, /\.js$/);
    files.keys().forEach((key) => {
      if (key === './mock.js') return;
      configArray = configArray.concat(files(key).default);
    });
    
    // 注册所有的mock服务
    configArray.forEach((item) => {
      for (let [path, target] of Object.entries(item)) {
        let protocol = path.split('|');
        Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
      }
    });
    
    (2).article.js
    let articleList = {
        // code: 200,
        // msg: 'success',
        data: {
            total: 1000,
            'rows|5': [{
                id: '@guid',
                title: '@ctitle',
                name: '@cname',
                category: {
                    'name|1': ['动作片', '古典片', '美国片', '国影', '印度片']
                },
                date: '@date(yyyy-MM-dd)'
            }]
        }
    };
    
    let publishList = {
        // code: 200,
        // msg: 'success',
        data: {
            'options|5': [{
                id: '@guid',
                'label|+1': ['动作片', '古典片', '美国片', '国影', '印度片']
    
            }]
        }
    };
    let admins = {
        // code: 200,
        // msg: 'success',
        data: {
            'options|5': [{
                id: '@guid',
                username: '@name',
                nickname: '@cname',
                email: '@email',
                'value1|1': [true, false],
                'value2|1': [true, false],
                'key|+1':['s1','s2','s3','s4','s5'],
                'roles|3': [
                    {
                        'id|+1': ['1','2','3'],
    
                        'rname|+1':['超级管理员','数据库管理员','普通管理员']
                    }
                ]
            }]
        }
    };
    let userData = {
        // code: 200,
        // msg: 'success',
        data: {
            total: 1000,
            'rows|6': [{
                id: '@guid',
                username: '@name',
                nickname: '@cname',
                'gender|1': ['true', 'false'],
                date: '@date(yyyy-MM-dd HH:mm:ss)',
                email: '@email',
                location: '@city',
                text: '@csentence(5,10)',
                finalTime: '@date(yyyy-MM-dd HH:mm:ss)'
    
            }]
        }
    };
    export default {
        'get|/article_list/query': articleList,
        'get|/publish_list/query': publishList,
        'get|/user_list/query': userData,
        'get|/admin_list/query': admins
    }
    

    3.main.js

    添加require('./mock/mock')
    然后测试使用即可

    展开全文
  • 1.引入mock 和 axios # 在项目中安装mock.js npm install mockjs #在项目中安装axios npm install axios --save 2.在项目中新建mock文件夹里再建 index.js 和 mock.js 文件 3.在mock.js中自定义模拟数据...
  • Mock.mock(/\/user\/listpage/, 'get', getUserList) //模拟分页查询用户信息接口 Mock.mock(/\/user\/remove/, 'get', deleteUser) //模拟删除用户信息接口 Mock.mock(/\/user\/add/, 'get', createUser) //模拟...
  • Vue+mock初级入门

    2020-11-02 15:39:43
    1.下载 npm i mockjs --save-dev 2.新建一个mock.js的文件 3.在main.js中引入 require("…/mock.js") 【我的是与package.json同级】 ...4.使用mock语法 在mock.js写数据 5.引入axios 显示数据
  • 2、在vue项目的src文件夹下简历一个mock的文件夹,在里边存放模拟数据的js文件 3、然后需要在mock文件夹中 新建一个 mock.js(具体的创建数据的方法可以去看官网) mock官网地址:http://mockjs.com/ 在mock.
  • vue-cli+mock增删改查

    2018-08-06 10:36:32
    使用mockjs可以事先模拟数据,前提是和后端约定好了数据接口,怎样的数据。使用mock就可以生成你要的数据了,从而实现开发时前后端分离。
  • 这篇文章主要介绍了关于如何使用Vue+Mock.js来搭建前端的独立开发环境,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下安装Mocknpm i mockjs -s创建Mock文件在main.js同级目录下创建一个Mock.js...
  • 本篇文章主要介绍了vue+vuecli+webpack中使用mockjs模拟后端数据的示例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
  • Vue+elmentUI+mock模拟数据实现简单的增删改查 主页面如下图所示 首先是查询功能: 同时也包括分页的功能,这里为了看得清楚,我是将每页固定显示5条 查看某条信息的详情(这里没有做修改,但实际上修改就是查看...
  • vue+mock+axios模拟post请求

    万次阅读 2021-12-29 14:35:59
    src/mock.js import Mock from 'mockjs' //获取 mock.Random 对象 const Random = Mock.Random; // mock一组数据 const allTitle = [ "关于深化增值税改革有关政策的公告", '关于深化增值税改革有关事项的公告'...
  • vue + mock.js 自动生成数据 每天进步一点点,项目中呢,会出现这种情况,就是前端都准备好了,后台接口并没有数据,要是一个个假数据吧,一条两条还行,要是在多了,未免有些烦了,但是呢,解决方案来了,数据自动...
  • 前端人员在开发时,如果后端接口没有完成,可以先使用mock模拟接口数据,如果后端已经提供正确接口数据,使用vue-cli内置的代理或者本地架nginx服务器实现接口的转发,这样前后端只要在开发前商议好接口,就可以分别...
  • 安装Mock npm i mockjs -s 创建Mock文件 在main.js同级目录下创建一个Mock.js(可以任意起名)用来存放我们的数据欺骗代码 Mock.js const Mock = require('mockjs') Mock.mock('/register', function (options...
  • (我写的vue+mock初级入门中不可在network中查看到请求) let express = require("express"); //引入express模块 let Mock = require("mockjs"); //引入mock模块 let app = express(); //实例化 /*post方法*/ var...
  • 到此 vue + axios + mock server的环境已经搭建完成。 作者:一恋蝶梦 链接:http://www.jianshu.com/p/0210d11286b5 來源:简书 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,451
精华内容 6,180
关键字:

vue+mock