vue+mockjs模拟数据实现前后端分离开发的实例代码

发布时间：2020-12-17 02:50:59 所属栏目：百科来源：网络整理

导读：本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码，分享给大家，也给自己留个笔记。在项目中尝试了mockjs，mock数据，实现前后端分离开发。关于mockjs，官网描述的是 1.前后端分离 2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应

本文介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码，分享给大家，也给自己留个笔记。

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

关于mockjs，官网描述的是

1.前后端分离

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

3.数据类型丰富

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

等等优点。

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

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

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

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

2.创建vue项目

cd mockjs
npm install axios --save

3.安装mockjs

4.项目目录

axios/api 用来封装axios

Hello.vue 页面首页

NeswCell.vue 新闻组件

router/index.js 路由

main.js 入口js

mock.js mockjs文件

在来看下完成后的效果

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

// (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: '',components: {

App

}

})

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

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

})

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

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

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数据

<news-cell

:newsDate="item"

:key="key"

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

axios/api.js如下

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展示数据

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

<section class="Cleft clearfix"&gt;

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

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

</section>

<section class="Cright"&gt;

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

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

</section>

<div style="clear: both"&gt;</div>

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!