全国服务热线:4008-888-888

技术知识

小程序的发展史_vue+mockjs模仿数据完成前后端别离

vue+mockjs模拟数据实现前后端分离开发的实例代码       本篇文章主要介绍了vue+mockjs模拟数据实现前后端分离开发的实例代码,具有一定的参考价值,有兴趣的可以了解一下

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

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

关于mockjs,官网描述的是

1.前后端分离

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

3.数据类型丰富

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

等等优点。

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

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

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

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

npm install --global vue-cli 

2.创建vue项目

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

3.安装mockjs

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

// 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'

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

6. 添加一个mock规则(mock.js)

// 引入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: ame(), // ame() 随机生成一个常见的中文姓名
 date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd;Random.time() 返回一个随机的时间字符串
 articles.push(newArticleObject)

9.所有代码可以查看我的github: 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。




在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服