轻松获取mock.js数据

最新推荐文章于 2024-03-21 16:03:38 发布

嗨皮new

最新推荐文章于 2024-03-21 16:03:38 发布

阅读量952

点赞数 1

分类专栏： mock.js 文章标签： jquery node.js javascript ajax

本文链接：https://blog.csdn.net/weixin_43628078/article/details/113700814

版权

mock.js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为什么要使用mock.js？

在前后端分离的情况下，前端想要独立进行调试，没有测试数据怎么可以呢！mock.js正是解决这个问题。mock.js能够生成随机数据，拦截 Ajax 请求，使用mock.js生成模拟数是非常好的选择。

我在接触mock.js时也是遇到了很多问题，例如：在服务器生成数据、获取数据时遇到跨域问题等等。当时搜了很多资料，浏览了一些文章，最后也顺利解决了。今天就在这个跟大家一起分享下。

我是在node.js环境下使用mock.js生成数据的。

首先需要安装node.js，这里就不介绍了，参考官网很快就可以搞定node.js安装

1、安装好node.js之后，新建一个mockjs文件夹，在该目录下使用npm/cnpm进行初始化，会生成一个package.json文件。（在初始化过程中的配置可忽略）。

npm init

2、继续在当前目录下安装express，安装好了之后会生成一个node_modules文件夹。

npm install express --save

3、接下来我们安装mock.js了，不懂mock.js怎么使用的小伙伴可以去官网看看文档 mock.js官网。

npm install mockjs

4、新建一个server.js文件，运行node server.js，通过在本机浏览器地址栏访问 localhost:3000 就可以得到数据。

const express = require('express');   // 引入express
const Mock = require('mockjs');   // 引入mockjs
const app = express()
app.all('/', function(req, res){
  res.json(Mock.mock({
    'list|1-10':[{
      'id|+1':1,
      'name|1': '@cname',
      'eat|1': ["西瓜","苹果","香蕉","草莓"],
      '其他|2-4':{
        "爱好": "跑步",
        "爱好": "唱歌",
        "地址": "上海",
        "工具": "汽车"
      },
    }]
  }))
});
app.listen(3000,()=>{
  console.log('running in 3000')
})

在这里插入图片描述
5、如果我们想要通过其他页面去访问该地址拿到数据，提示跨域问题该怎么解决？

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Page Title</title>
</head>
<body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  <script>
    $.ajax({
      url: 'http://localhost:3000/',
      type: 'get',
      success: function(data){
        console.log
      }
    })
  </script>
</body>
</html>

在这里插入图片描述
6、在这里我们使用jsonp的方式去解决跨域问题，我们需要对请求的ajax进行修改，修改如下。

$.ajax({
      url: 'http://localhost:3000',
      type: 'get',
      dataType: 'jsonp',
      jsonp:'callback',
      jsonpCallback: 'jsonpCallback',
      success: function(data){
        console.log(data)
      }
 })

7、修改server.js中的代码，然后就可以解决跨域问题了。

app.all('/', function(req, res){
  let data = Mock.mock({
    'list|1-10':[{
      'id|+1':1,
      'name|1': '@cname',
      'eat|1': ["西瓜","苹果","香蕉","草莓"],
      '其他|2-4':{
        "爱好": "跑步",
        "爱好": "唱歌",
        "地址": "上海",
        "工具": "汽车"
      },
    }]
  })
  res.writeHead(200, { 
    'Content-Type': 'application/json;charset=utf-8' 
  });
  res.end( "jsonpCallback(" + JSON.stringify(data) + ")" );
});

在这里插入图片描述

嗨皮new

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
轻松获取mock.js数据

为什么要使用mock.js？在前后端分离的情况下，前端想要独立进行调试，没有测试数据怎么可以呢！mock.js正是解决这个问题。mock.js能够生成随机数据，拦截 Ajax 请求，使用mock.js生成模拟数是非常好的选择。我在接触mock.js时也是遇到了很多问题，例如：在服务器生成数据、获取数据时遇到跨域问题等等。当时搜了很多资料，浏览了一些文章，最后也顺利解决了。今天就在这个跟大家一起分享下。我是在node.js环境下使用mock.js生成数据的。首先需要安装node.js，这里就不介绍了，
复制链接

扫一扫