精华内容
下载资源
问答
  • Mock.js

    2020-11-25 17:17:19
    Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能: 1.根据数据模板生成模拟数据 2.模拟 Ajax 请求,生成并返回模拟数据 3.基于 HTML 模板生成模拟数据 ...

    Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能:

    1.根据数据模板生成模拟数据
    2.模拟 Ajax 请求,生成并返回模拟数据
    3.基于 HTML 模板生成模拟数据

    mock.js官网

    展开全文
  • mock.js

    2019-11-26 20:55:52
    1.什么是mock.js mock.js - 可以进行假数据的书写,拦截掉ajax,脱离后端,自己实现数据的一些数据模拟操作 2.怎么使用mock.js 官网 -http://mockjs.com/ 官网的文档介绍永远是最好学习的方式 最简单的方式...

    1.什么是mock.js

       mock.js - 可以进行假数据的书写,拦截掉ajax,脱离后端,自己实现数据的一些数据模拟操作

     

    2.怎么使用mock.js

         官网 -  http://mockjs.com/   官网的文档介绍永远是最好学习的方式

         最简单的方式直接去cdn下载引入-  https://www.bootcdn.cn/Mock.js/

        1.引入 -   <script src="./js/mock.js"></script>

        2.建立模拟数据  - 文档参照地址-http://mockjs.com/examples.html

           

     let data = Mock.mock('test.php',{ //地址 = ajax提交地址,会被拦截掉
                "person|1-50": [  //建立一个数组,数组名为person 将对以下对象随机循环 1-50条
                    {
                        "name":"@cname", //随机一个名字
                        "age|18-28":1,   //随机一个年级 范围 18-28
                        "height|150-180.2": 150,  //随机身高 ,整数:150-180 ,小数部分,两位小数
                        "sex|1":['男','女'],  //随机选择男或女
                        "hobby|1-3": {  //随机选择 1-3个爱好
                            '01':'篮球',
                            '02':'唱',
                            '03':'rap',
                            '04':'写代码'
                        },
                        'job|1':['画师','程序员','医生']  //随机选择一个职业
                    }
                ]
            });
    

    3.使用数据

     $.get('test.php',{},function(data){
                let r = JSON.parse(data);
            });

    3.好处

       脱离后端,自己创建需要的数据

    展开全文
  • mock.jsJS文件

    2021-01-06 21:44:09
    mock.jsJS文件
  • Mock.js这个JavaScript库最常见的用法便是被用来拦截AJAX请求,well,这里我们就来看一下Node.js服务器环境下使用Mock.js拦截AJAX请求的教程:
  • 偶然发现了个好东西:mock.js,它可以用来随机的生成你想要的数据格式,包括文本、图片等,这时候我们再结合node.js,就可以真正的脱离后端,自己做接口,返回数据,测试我们的前端功能模块了。 mock.js的大致使用...

    偶然发现了个好东西:mock.js,它可以用来随机的生成你想要的数据格式,包括文本、图片等,这时候我们再结合node.js,就可以真正的脱离后端,自己做接口,返回数据,测试我们的前端功能模块了。

    mock.js的大致使用是通过定义一个自己想要的数据模板,然后数据模板中的数据值可以通过Mock.Random中的一系列方法来生成,最后通过Mock.mock(); 来生成自己想要的数据。

    eg:

    var tempList={
           'list|10':[{    //list为数据名,|10为生成10条数据
               'id|+1': startId(pagenow),     //+1表示字段id的值自动增长
               'title': '@ctitle(6, 12)',    //通过调用Mock.Random中的ctitle方法随机生成6-12个字的中文,然后作为字段title的值
               'img': mockRandom.image('200x100', '#ccc', '@title'),    //调用image方法,生成宽200高100的图片
               'content': '@cparagraph(1,2)'    //调用cparagraph生成一段中文文本
           }]
       }
    具体的用法大家可以移步这里Mock.js用法,大家可以先看下语法规范,然后在看下Mock.Random中的一系列方法,就大致会用了。

    mock.js会使用后,接下来就是利用node搭建一个服务器,然后通过接口处理相关分页请求,并把数据返回给前端。这里我用了node的express来搭建,node或者express的用法大家可以去看下菜鸟教程,具体代码如下:

    //express_demo.js 文件
    var express = require('express');
    var app = express();
    var Mock = require('mockjs');
    var fs = require('fs');
    var mockRandom = Mock.Random;
     
    var pageCount = 6;    //总的页数
    var pagelist = 10;    //每页资讯条数
    app.get('/getData',function(req,res){    
        var pagenow = req.query.pagenow;
        console.log(pagenow);
        var    hasMore = true,data=[];
        var tempList={
           'list|10':[{
               'id|+1': startId(pagenow),
               'title': '@ctitle(6, 12)',
               'img': mockRandom.image('200x100', '#ccc', '@title'),
               'content': '@cparagraph(1,2)'
           }]
       }, tempList2={
               'list|1-10':[{
                       'id|+1': startId(pagenow),
                       'title': '@ctitle(6, 12)',
                       'img': mockRandom.image('200x100', '#ccc', '@title'),
                       'content': '@cparagraph(1,2)'
                   }]
       };     
       
         if(pagenow==pageCount){
             data = Mock.mock(tempList2); 
             hasMore = false;    //表示已经没有数据
         }else{
             data = Mock.mock(tempList);
             hasMore = true;    //还有数据
         } 
         
       res.json({
           status: true,
           data: data,
           hasMores:hasMore,
           msg: ''
       });
        
    });
     
     
    function startId(pagenow){
        return (pagenow-1)*pagelist;
    }
     
    var server = app.listen(8081, function () {
     
      var host = server.address().address
      var port = server.address().port
     
      console.log("应用实例,访问地址为 http://%s:%s", host, port)
     
    })
     

    这里我固定每页的数据是10条,总共有6页,然后判断前端传过来的当前页面(pagenow)是否是等于总的页面数,如果是就使用第二个数据模板(随机生成1-10条数据),然后hasMore置为false,提示前端没有数据了;否则就使用第一个数据模板(固定生成10条随机的数据),hasMore置为true,提示前端还有数据。

     

    接口完成以后,接下来就是搭建前端了。涉及到这些知识点:搭建vue-cli脚手架,设置反向代理,然后通过axios请求接口,获取数据。

    具体代码如下:

    <template>
        <div class="wrap">
            <div class="item clearfix" v-for="item in newsData">
                <div class="img-box"><img class="img" :src="item.img"/></div>
                <div class="content-box">
                    <h4 class="title">Id:{{item.id}} --- Title:  {{item.title}}</h4>
                    <div class="content">Content: {{item.content}}</div>
                </div>
            </div>
            <div class="no-more" v-if="!hasMore">已经没有更多数据了!!!</div>
        </div>
    </template>
     
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
          newsData:[],
          hasMore: true,        //判断是否还有数据
          pagenow: 1,
          isLoad: true,     //开关,防止滚动到底部时多次加载
        }
      },
      mounted: function(){
          this.loadData();
            //console.log(this.newsData,'newsData')
            window.addEventListener('scroll',this.scrollEvent);        //添加滚动事件监听
            
      },
      methods:{
          loadData:function(cb){
                let that = this;
                if(that.hasMore){    
                    that.$http.get('/getData?pagenow='+that.pagenow).then(function(res){
                      console.log(res);
                      if(res.data.status){
                          //that.newsData = that.newsData.concat(res.data.data.list);
                          let len = res.data.data.list.length;
                          for(let i = 0;i<len;i++){
                              that.newsData.push(res.data.data.list[i]);
                          }
                          that.hasMore = res.data.hasMores;
                          that.pagenow ++;
                          cb && cb();    
                      }
                  })
                  .catch(function(res){
                      console.log(res);
                  });    
                }
     
          },
          
          scrollEvent:function(e){    //监听滚动事件
              var that = this;
              if(this.getScrollHeight()-this.getScrollTop()-this.getWindowHeight()==0){
                  //alert('到底了!!!')
                  if(this.isLoad){
                      this.isLoad = false;
                      this.loadData(function(){
                          that.isLoad = true;        //等获取到数据以后在开启开关
                      });
                  }
                  
              }
              
          },
          //滚动条在Y轴上的滚动距离
          getScrollTop:function(){
              var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
              if(document.body){
                bodyScrollTop = document.body.scrollTop;
              }
              if(document.documentElement){
                documentScrollTop = document.documentElement.scrollTop;
              }
              scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
              return scrollTop;
            },
             
            //文档的总高度
            getScrollHeight: function(){
              var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
              if(document.body){
                bodyScrollHeight = document.body.scrollHeight;
              }
              if(document.documentElement){
                documentScrollHeight = document.documentElement.scrollHeight;
              }
              scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
              return scrollHeight;
            },
             
            //浏览器视口的高度
            getWindowHeight: function(){
              var windowHeight = 0;
              if(document.compatMode == "CSS1Compat"){
                windowHeight = document.documentElement.clientHeight;
              }else{
                windowHeight = document.body.clientHeight;
              }
              return windowHeight;
            },
          
      }
    }
    </script>
     
    <style>
        .wrap{width: 95%; margin: .3rem auto 0; line-height: .42rem;}
        .item{width: 100%; padding: .2rem 0; border: 1px solid #42B983; box-sizing: border-box; margin: .1rem 0;}
        .img-box{width: 1.4rem; height: 1.4rem; margin-top: .3rem; margin-left: .1rem; border: 1px solid #333; float: left;}
        .img-box .img{width: 100%; height: 100%;}
        .content-box{width: 72%; float: right;}
        .title{font-size: .36rem; text-align: left;}
        .content{font-size: .28rem; text-align: left; margin-top: .1rem;}
        .no-more{padding: .2rem; text-align: center; font-size: .32rem; color: red;}
    </style>
    前端这边首先在mounted生命周期发起了一次请求获取了第一页的数据, 然后添加了个滚动监听,判断是否滚动到底部,到底了后执行加载数据的方法,然后判断后端返回的hasMore是否为true,是滚动到底了继续发起请求,获取下一个页面的数据。

    展开全文
  • 记录学习mock.js 一、什么是mock.js 使用mock.js拦截ajax请求,更加方便的构造需要的假数据。 二、项目介绍 vue-element-admin项目的所有请求都是通过封装的request.js进行发送的,所有的请求都设置了一个baseURL,...

    记录学习mock.js

    一、什么是mock.js

    使用mock.js拦截ajax请求,更加方便的构造需要的假数据。

    二、项目介绍

    vue-element-admin项目的所有请求都是通过封装的request.js进行发送的,所有的请求都设置了一个baseURL,而这个baseURL又是通过读取process.env.VUE_APP_BASE_API这个环境变量来动态设置的。
    在vue-element-admin的模板当中,所有的数据都是模拟实现的,这里可以仿照着它模拟数据的流程进行数据的模拟mock。
    在这里插入图片描述

    三、开发步骤

    1.src/api/test中新建接口

    src/api/test中添加获取测试数据的接口

    import request from '@/utils/request'
    
    export function fetchList() {
      return request({
        url: '/mocktest/list',
        method: 'get'
      })
    }
    
    export function getChartData() {
      return request({
          // 用这种方式直接走的是
        url: '/charts/one',
        method: 'get',
        
      })
    }
    

    2.mock/article.js中创建mock接口

    声明完接口之后,我们需要找到对应的mock文件夹mock/article.js,在下面创建一个能拦截路由的 mock 接口

    import Mock from "mockjs"
    
    const data = Mock.mock(
      {
        'item|10':[{
          id:'@id',
          pid: '@integer(1000, 1100)',          // 生成一个1000-1100之间的整数
          name: '@name',                        // 生成一个英文名字,cname为中文名字
          description: '@csentence(10, 20)',    // 生成一句中文
          price: '@integer(10,100) $',
          edit: '',
          value: '@float(2,4)',                // 生成一个2-5之间的浮点数
          display_time: '@datetime',           // 生成一个日期
          sales: '@integer(300, 5000)'
        }]
      }
    )
    
    export default [
      {
      	//第一个请求
        url:'/mocktest/list',
        type: 'get',
        response: config => {
          const items = data.item
          return {
            code: 20000,
            data: {
              total: items.length,
              items: items
            },
            test:[1,2,4]
          }
        }
      },
        {
          //第二个请求
          url: '/charts/one',
          type: 'get',
          response: _ => {
            return {
              code: 20000,
              xdata: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              ydata: [820, 932, 901, 934, 1290, 1330, 1320]
            }
          }
        }
    ]
    

    3. 在mock/index.js中导入

    在这里插入图片描述

    4. view/test/index.vue中使用

    先导入接口:
    在这里插入图片描述
    在methods中使用:
    在这里插入图片描述

    <script>
    
    import {
      fetchList,
      getChartData
    } from '@/api/test'
    
    export default {
      data() {
        return {
    
        }
      },
      created() {
        this.init(),
        this.test()
      },
      methods: {
        init() {
          console.log(111);
          fetchList().then(
            res=>{
              console.log(res);
            }
          )
        },
        test() {
          getChartData().then(
          res=>{
            console.log(res);
          }
        )
        }
    
      }
    }
    </script>
    

    四、结果

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • 前端项目-Mock.js.zip

    2019-09-02 13:17:11
    前端项目-Mock.js,mock.js是一个模拟数据生成器,用于帮助前端开发和原型化,使其与后端进程分离,并在编写自动化测试时降低某些单调性。
  • Node.js+Mock.js+Vue.js实现接口和上拉加载数据效果图一、接口1、创建项目2、代码部分3、启动服务二、页面1、代码部分 效果图 一、接口 需要用到Express 和 Mock.js , 如果不熟悉Express和Mock.js的建议先去...
  • 走进Mock.js的大门

    2021-01-08 15:58:52
    走进Mock.js的大门 背景 一个项目开始前后端开发的时候,若前端一直等待后端提供接口,才开始开发,这样效率比较低。所以Mock.js就被研发出来,为了防止出现意外,还可以使用easymock(在线) Mock.js是什么? Mock....
  • mock.js模拟前后台交互

    2020-12-10 23:52:48
    本文实例为大家分享了mock.js模拟前后台交互的具体代码,供大家参考,具体内容如下 使用背景: vue项目 axios 使用详情: 1、首先安装 # 在项目中安装 npm install mockjs 2、在项目中使用 在项目中src文件夹下 ...
  • 用node.js启动mock.js

    2019-04-12 15:06:00
    Node.js Node 是一个让 JavaScript 运行在服务端的开发平台,它让 ...官网下载node.js mock.js 官网 新建项目文件夹nodeServer,用git bash初始化,生成package.json文件 npm init -y 进入nodeServer...
  • mock.js 依赖文件

    2017-06-20 23:01:30
    mock.js 依赖文件

空空如也

空空如也

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

mock.js