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

2023-12-18 18:18
文章标签 javascript 分离 数据 实现 开发 模拟 vue frontend mockjs

本文主要是介绍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.项目目录

axios/api    用来封装axios

Hello.vue     页面首页

NeswCell.vue   新闻组件

router/index.js   路由

main.js      入口js

mock.js     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=123456')

      .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: #333333;

  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: #999999;

}

 

.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://www.cnblogs.com/jasonwang2y60/p/7302449.html

这篇关于vue+mockjs 模拟数据，实现前后端分离开发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/509356。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
大模型研发全揭秘：客服工单数据标注的完整攻略

大模型研发全揭秘：客服工单数据标注的完整攻略

在人工智能（AI）领域，数据标注是模型训练过程中至关重要的一步。无论你是新手还是有经验的从业者，掌握数据标注的技术细节和常见问题的解决方案都能为你的AI项目增添不少价值。在电信运营商的客服系统中，工单数据是客户问题和解决方案的重要记录。通过对这些工单数据进行有效标注，不仅能够帮助提升客服自动化系统的智能化水平，还能优化客户服务流程，提高客户满意度。本文将详细介绍如何在电信运营商客服工单的背景下进行
阅读更多...
基于MySQL Binlog的Elasticsearch数据同步实践

基于MySQL Binlog的Elasticsearch数据同步实践

一、为什么要做 随着马蜂窝的逐渐发展，我们的业务数据越来越多，单纯使用 MySQL 已经不能满足我们的数据查询需求，例如对于商品、订单等数据的多维度检索。 使用 Elasticsearch 存储业务数据可以很好的解决我们业务中的搜索需求。而数据进行异构存储后，随之而来的就是数据同步的问题。 二、现有方法及问题 对于数据同步，我们目前的解决方案是建立数据中间表。把需要检索的业务数据，统一放到一张M
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
关于数据埋点，你需要了解这些基本知识

关于数据埋点，你需要了解这些基本知识

产品汪每天都在和数据打交道，你知道数据来自哪里吗？ 移动app端内的用户行为数据大多来自埋点，了解一些埋点知识，能和数据分析师、技术侃大山，参与到前期的数据采集，更重要是让最终的埋点数据能为我所用，否则可怜巴巴等上几个月是常有的事。   埋点类型 根据埋点方式，可以区分为： 手动埋点半自动埋点全自动埋点 秉承“任何事物都有两面性”的道理：自动程度高的，能解决通用统计，便于统一化管理，但个性化定
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
异构存储（冷热数据分离）

异构存储（冷热数据分离）

异构存储主要解决不同的数据，存储在不同类型的硬盘中，达到最佳性能的问题。 异构存储Shell操作 （1）查看当前有哪些存储策略可以用 [lytfly@hadoop102 hadoop-3.1.4]$ hdfs storagepolicies -listPolicies （2）为指定路径（数据存储目录）设置指定的存储策略 hdfs storagepolicies -setStoragePo
阅读更多...
Hadoop集群数据均衡之磁盘间数据均衡

Hadoop集群数据均衡之磁盘间数据均衡

生产环境，由于硬盘空间不足，往往需要增加一块硬盘。刚加载的硬盘没有数据时，可以执行磁盘数据均衡命令。（Hadoop3.x新特性） plan后面带的节点的名字必须是已经存在的，并且是需要均衡的节点。 如果节点不存在，会报如下错误： 如果节点只有一个硬盘的话，不会创建均衡计划： （1）生成均衡计划 hdfs diskbalancer -plan hadoop102 （2）执行均衡计划 hd
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2