1. 全栈程序员必看首页

vue 引用mockjs 模拟真实的数据

全栈程序员-站长 • • 未分类 • 阅读 2

vue 引用mockjs 模拟真实的数据vue mockjs 模拟数据 实现前后端分离开发在项目中尝试了 mockjs mock 数据 实现前后端分离开发 关于 mockjs 官网描述的是 1 前后端分离 2 不需要修改既有代码 就可以拦截 Ajax 请求 返回模拟的响应数据 3 数据类型丰富 4 通过随机数据 模拟各种场景 等等优点 总结起来就是在后端接口没有开发完成之前 前端可以用已有的接口文档 在真实的请求上拦

vue+mockjs 模拟数据，实现前后端分离开发

在项目中尝试了mockjs，mock数据，实现前后端分离开发。

关于mockjs，官网描述的是

1.前后端分离

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

3.数据类型丰富

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

等等优点。

总结起来就是在后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接口返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。

与以往的自己模拟的假数据不同，mockjs可以带给我们的是：在后台接口未开发完成之前模拟数据，并返回，完成前台的交互；在后台数据完成之后，你所做的只是去掉mockjs：停止拦截真实的ajax，仅此而已。

下面一步步的来实现vue-cli创建项目并添加一条新闻类的数据模拟接口：

1.安装vue-cli全局脚手架

1

npm install --global vue-cli

2.创建vue项目

1

vue init webpack mockjs<br>cd mockjs<br>npm install axios --save

3.安装mockjs

1

npm install mockjs --save-dev

4.项目目录

vue 引用mockjs 模拟真实的数据

axios/api    用来封装axios

Hello.vue     页面首页

NeswCell.vue   新闻组件

router/index.js   路由

main.js      入口js

mock.js     mockjs文件

在来看下完成后的效果

vue 引用mockjs 模拟真实的数据

 

5.在入口js（main.js）里引入mockjs

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from 'vue'

import App from './App'

import router from './router'

 

Vue.config.productionTip = false

 

// 引入mockjs

require('./mock.js')

 

/* eslint-disable no-new */

new Vue({

    el: '#app',

    router,

    template: '<App/>',

    components: {

        App

    }

})

 

Vue.filter('getYMD', function(input) {

    return input.split(' ')[0];

})

这里我添加了额一个常用的时间整理过滤器 getYMD

6. 添加一个mock规则（mock.js）

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

// 引入mockjs

const Mock = require('mockjs');

// 获取 mock.Random 对象

const Random = Mock.Random;

// mock一组数据

const produceNewsData = function() {

    let articles = [];

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

        let newArticleObject = {

            title: Random.csentence(5, 30), //  Random.csentence( min, max )

            thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码

            author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名

            date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串

        }

        articles.push(newArticleObject)

    }

 

    return {

        articles: articles

    }

}

 

// Mock.mock( url, post/get , 返回的数据)；

Mock.mock('/news/index', 'post', produceNewsData);

7.在Hello.vue 中请求文档接口，并接收mock数据

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

<template>

  <div class="index">

    <div v-for="(item, key) in newsListShow">

      <news-cell

      :newsDate="item"

      :key="key"

      ></news-cell>

    </div>

  </div>

</template>

 

<script>

import api from './../axios/api.js'

import NewsCell from './NewsCell.vue'

 

export default {

  name: 'index',

  data () {

    return {

      newsListShow: [],

    }

  },

  components: {

    NewsCell

  },

  created() {

    this.setNewsApi();

  },

  methods:{

    setNewsApi: function() {

      api.JH_news('/news/index', 'type=top&key=')

      .then(res => {

        console.log(res);

        this.newsListShow = res.articles;

      });

    },

  }

}

</script>

 

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>

.topNav{

  width: 100%;

  background: #ED4040;

  position: fixed;

  top:0rem;

  left: 0;

  z-index: 10;

}

.simpleNav{

  width: 100%;

  line-height: 1rem;

  overflow: hidden;

  overflow-x: auto;

  text-align: center;

  font-size: 0;

  font-family: '微软雅黑';

  white-space: nowrap;

}

.simpleNav::-webkit-scrollbar{height:0px}

.simpleNavBar{

  display: inline-block;

  width: 1.2rem;

  color:#fff;

  font-size:0.3rem;

}

.navActive{

  color: #000;

  border-bottom: 0.05rem solid #000;

}

.placeholder{

  width:100%;

  height: 1rem;

}

</style>

 注意：api.JH_news是我封装的axios函数

axios/api.js如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

import axios from 'axios'

import vue from 'vue'

 

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'

 

// 请求拦截器

axios.interceptors.request.use(function(config) {

    return config;

  }, function(error) {

    return Promise.reject(error);

  })

  // 响应拦截器

axios.interceptors.response.use(function(response) {

  return response;

}, function(error) {

  return Promise.reject(error);

})

 

// 封装axios的post请求

export function fetch(url, params) {

  return new Promise((resolve, reject) => {

    axios.post(url, params)

      .then(response => {

        resolve(response.data);

      })

      .catch((error) => {

        reject(error);

      })

  })

}

 

export default {

  JH_news(url, params) {

    return fetch(url, params);

  }

}

8.在NewsCell.vue展示数据

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

<template>

  <section class="financial-list">

    <section class="collect" @click="jumpPage">

      <aside>

        <h2>{
{newsDate.title}}</h2>

        <section class="Cleft clearfix">

          <img class="fl" src="./../assets/icon/eyes.png" style="width:0.24rem;height:0.2rem;">

          <span class="fl">{
{newsDate.author_name}}</span>

        </section>

        <section class="Cright">

          <img src="./../assets/icon/clock.png" style="width:0.2rem;height:0.2rem;">

          <span>{
{newsDate.date | getYMD}}</span>

        </section>

        <div style="clear: both"></div>

      </aside>

      <aside>

        <img :src="newsDate.thumbnail_pic_s" style="border-radius: 0.2rem;">

      </aside>

      <div style="clear: both"></div>

    </section>

  </section>

</template>

 

<script>

export default {

  name: 'NewsCell',

  props: {

    newsDate: Object

  },

  data () {

    return {

    }

  },

  computed: {

  },

  methods: {

    jumpPage: function () {

      window.location.href = this.newsDate.url

    }

  }

}

</script>

 

<style scoped>

.financial-list {

  width: 100%;

  height: 100%;

  background-color: white;

  padding: 0.28rem 0;

  border-bottom: 1px solid #ccc;

}

 

.financial-list .collect {

  width: 92%;

  margin: 0 auto;

}

 

.financial-list .collect aside:nth-of-type(1) {

  width: 63%;

  float: left;

}

 

.financial-list .collect aside:nth-of-type(2) {

  width: 32%;

  height: 2rem;

  float: left;

  margin-left: 0.3rem;

}

 

.financial-list .collect h2 {

  width: 100%;

  height: 0.96rem;

  font-size: 0.32rem;

  color: #;

  line-height: 0.48rem;

  text-overflow: ellipsis;

  -o-text-overflow: ellipsis;

  overflow: hidden;

}

 

.financial-list .collect aside:nth-of-type(2) img {

  width: 100%;

  height: 100%;

}

 

.financial-list .collect aside .Cleft {

  width: 45%;

  float: left;

  margin-top: 0.66rem;

}

 

.financial-list .collect aside .Cleft span{

  display: block;

  width: 1.4rem;

  margin-left: 0.05rem;

  white-space: nowrap;

  text-overflow: ellipsis;

  -o-text-overflow: ellipsis;

  overflow: hidden;

}

 

.financial-list .collect aside .Cright {

  width: 55%;

  float: right;

  margin-top: 0.66rem;

}

.financial-list .collect aside .Cright span{

  display: inline-block;

  margin: 0.04rem 0 0 0.05rem;

}

.financial-list .collect aside span {

  font-size: 0.2rem;

  color: #;

}

 

.financial-list .collect aside .Cleft img,

.financial-list .collect aside .Cright img {

  width: 0.18rem;

  height: 0.24rem;

  margin-top: 0.09rem;

}

</style>

　　完成

9.所有代码可以查看我的github：  https://github.com/Jasonwang911/vue_mockjs

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/232987.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • Xray扫描器使用联动 burp，以及结合 fofa 批量自动化挖洞「建议收藏」

    Xray扫描器使用联动 burp，以及结合 fofa 批量自动化挖洞「建议收藏」

    Xray扫描器使用联动 burp，以及结合 fofa 批量自动化挖洞「建议收藏」xray简介xray(https://github.com/chaitin/xray)是从长亭洞鉴核心引擎中提取出的社区版漏洞扫描神器，支持主动、被动多种扫描方式，自备盲打平台、可以灵活定义POC，功能丰富，调用简单，支持Windows/macOS/Linux多种操作系统，可以满足广大安全从业者的自动化Web漏洞探测需求。特点xray为单文件二进制文件，无依赖，也无需安装，下载后直接使用使用go语言编写，跨平台、纯异步、无阻塞，并发能力强，扫描速度刚刚的提供多种使用

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月7日
    196
  • java中线程安全的容器_jfinal容器线程安全吗

    java中线程安全的容器_jfinal容器线程安全吗

    java中线程安全的容器_jfinal容器线程安全吗四、线程安全的容器类Java编码中，我们经常需要用到容器来编程。在并发环境下，Java提供一些已有容器能够支持并发。1.Map在Map类中，提供两种线程安全容器。java.util.HashtableHashtable和HashMap类似，都是散列表，存储键值对映射。主要区别在于Hashtable是线程安全的。当我们查看Hashtable源码的时候，可以看到Hashtable的方法都是通过syn

    全栈程序员-站长的头像 全栈程序员-站长
    2025年11月4日
    2
  • JAVA面试基础「建议收藏」

    JAVA面试基础「建议收藏」

    JAVA面试基础「建议收藏」JAVA面试部分重点内容目录JAVA面试部分重点内容五、输入输出流IO流  1.File类的常用方法?  2.说说IO流?  3.字节流的常用方法?  4.说说字符流?  5.说说缓冲流?  6.说说序列化和反序列化?五、输入输出流IO流  1.File类的常用方法?  java.io.File，使用该类的构造函数就可以创建文件对象，将硬盘中的一个具体的文件以Java对象的形式来表示。方法描述publicFile(Stringpathname)根据路径创建对象（是绝

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月7日
    22
  • 机器人手眼标定详解

    机器人手眼标定详解

    机器人手眼标定详解手眼标定详解研究现状所谓手眼标定是统一视觉系统和机器人的坐标系，从而可以使视觉系统所确定的物体位姿可以转换到机器人坐标系下，由机械臂完成对物体的作业。最常见的手眼系统包括Eye-to-Hand和Eye-in-Hand两种。在Eye-to-Hand手眼系统中，摄像机与机器人基座的位置是相对固定的，手眼关系式求解摄像机坐标系与机器人基座坐标系之间的转换关系。在Eye-in-Hand手眼系统中，摄像机由于固定在机械臂末端，手眼关系求解的是摄像机坐标系与机械臂末端坐标系之间的转换关系。在机器人处于不同的位置和

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月2日
    31
  • Node.js中常见的异步/等待设计模式 设计模式

    Node.js中常见的异步/等待设计模式

    Node.js中常见的异步/等待设计模式

    全栈程序员-站长的头像 全栈程序员-站长
    2021年6月7日
    84
  • zigbee开发板(nxpzigbee开发)

    zigbee开发板(nxpzigbee开发)

    前面我们搭建好了zigbee开发的硬件平台，买一块开发板，注意只要这块开发板上有cc2530，可以向里面烧录程序就可以了。具体的烧录过程我会最近上传我的烧录过程，相关软件我尽快上传。好了回归这一次的主题，那么我们到底需要什么样的开发环境呢？这完全取决于你的项目大小，如果你的项目只是学会使用zigbee，那么你只需要一款烧录软件，以及一款合适的用于编写cc2530的c编译器就OK了。但是我这

    全栈程序员-站长的头像 全栈程序员-站长
    2022年4月10日
    56

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号