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


Posted in Javascript onAugust 08, 2017

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

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

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

// 引入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数据

<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如下

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

<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

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

Javascript 相关文章推荐
jQuery 相关控件的事件操作分解
Aug 03 Javascript
基于Jquery制作的幻灯片图集效果打包下载
Feb 12 Javascript
js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器
May 21 Javascript
javascript:文字不间断向左移动的实例代码
Aug 08 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
p5.js实现斐波那契螺旋的示例代码
Mar 22 Javascript
使用validate.js实现表单数据提交前的验证方法
Sep 04 Javascript
解决angularjs WdatePicker ng-model的问题
Sep 13 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
React Native如何消除启动时白屏的方法
Aug 08 #Javascript
react native带索引的城市列表组件的实例代码
Aug 08 #Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 #Javascript
React-Native 组件之 Modal的使用详解
Aug 08 #Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
Aug 08 #jQuery
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 #Javascript
浅谈ES6新增的数组方法和对象
Aug 08 #Javascript
You might like
php防止sql注入示例分析和几种常见攻击正则表达式
2014/01/12 PHP
php通过array_merge()函数合并关联和非关联数组的方法
2015/03/18 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
JavaScript的变量作用域深入理解
2009/10/25 Javascript
Exjs 入门篇
2010/04/07 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
了不起的node.js读书笔记之node的学习总结
2014/12/22 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
JavaScript基础之流程控制语句的用法
2017/08/31 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
Vue使用zTree插件封装树组件操作示例
2019/04/25 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Python 25行代码实现的RSA算法详解
2018/04/10 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
python3 拼接字符串的7种方法
2018/09/12 Python
浅谈解除装饰器作用(python3新增)
2018/10/15 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
python UIAutomator2使用超详细教程
2021/02/19 Python
全球航班旅行搜索网站:Cheapflights
2017/05/19 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
房屋买卖协议书
2014/04/10 职场文书
《夕阳真美》教学反思
2014/04/27 职场文书
小学生国庆演讲稿
2014/09/05 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
付款证明格式范文
2015/06/19 职场文书
如何用python插入独创性声明
2021/03/31 Python
python实现ROA算子边缘检测算法
2021/04/05 Python