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 相关文章推荐
js程序中美元符号$是什么
Jun 05 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
Javascript中的方法链(Method Chaining)介绍
Mar 15 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
原生js的数组除重复简单实例
May 24 Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 Javascript
mvc中form表单提交的三种方式(推荐)
Aug 10 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
ES11屡试不爽的新特性,你用上了几个
Oct 21 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的字符串用法小结
2010/06/08 PHP
php学习之 数组声明
2011/06/09 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
PHP框架Laravel插件Pagination实现自定义分页
2020/04/22 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
javaScript NameSpace 简单说明介绍
2013/07/18 Javascript
script不刷新页面的联动前后代码
2013/09/18 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
利用jquery获取select下拉框的值
2016/11/23 Javascript
js禁止浏览器页面后退功能的实例(推荐)
2017/09/01 Javascript
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
2018/02/01 Javascript
select获取下拉框的值 下拉框默认选中方法
2018/02/28 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
原生javascript中this几种常见用法总结
2020/02/24 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
[20:39]DOTA2-DPC中国联赛 正赛开幕式 1月18日
2021/03/11 DOTA
深入浅出分析Python装饰器用法
2017/07/28 Python
python+splinter实现12306网站刷票并自动购票流程
2018/09/25 Python
Python并行分布式框架Celery详解
2018/10/15 Python
Python清空文件并替换内容的实例
2018/10/22 Python
Python中is和==的区别详解
2018/11/15 Python
详解pandas删除缺失数据(pd.dropna()方法)
2019/06/25 Python
pytorch中的embedding词向量的使用方法
2019/08/18 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
CSS3动画特效在活动页中的应用
2020/01/21 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
高中军训感言800字
2014/03/05 职场文书
会计核算科岗位职责
2014/03/19 职场文书
发票退票证明
2015/06/24 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript
MySQL into_Mysql中replace与replace into用法案例详解
2021/09/14 MySQL