www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

mockjs模拟数据完成内外端分离开辟的实例代码,

2019-06-07 03:17 来源:未知

在我们的生育实际中,后端的接口往往是较晚才会出来,于是大家的前端的洋洋开拓都要等到接口给大家能力张开,那样对于我们前端来讲显得非常的庸庸碌碌,于是有未有能够创制假数据来效仿后端接口呢,答案是一定的。于是前几天大家来介绍1款特别有力的插件Mock.js,能够十分便于的模仿后端的数据,也足以轻巧的兑现增加和删除改查那几个操作,在后台数据形成未来,你所做的只是去掉mockjs:甘休拦截真实的ajax,仅此而已。

详解在vue-cli项目中动用mockjs(请求数据删除数据),vue-climockjs

在我们的生育实际中,后端的接口往往是较晚才会出去,于是咱们的前端的许多支付都要等到接口给大家本领进行,这样对于大家前端来讲显得非常的失落,于是有未有能够创设假数据来模拟后端接口呢,答案是确定的。于是明日大家来介绍壹款非常有力的插件Mock.js ,能够丰盛有利于的模拟后端的数量,也能够轻易的落到实处增加和删除改查那么些操作,在后台数据产生以后,你所做的只是去掉mockjs:结束拦截真实的ajax,仅此而已。

搭建一个vue项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack vue-mock
$ cd my-project
# 安装依赖
$ npm install

安装mockjs

npm install mockjs --save-dev

拉开项目

npm run dev

创办二个mockjs文件夹以及mockjs,并且在main.js引入那个文件

这时候能够观望像那样的3个门类结构

Web前端 1

mockjs的使用

在档案的次序中的mock.js文件中,写入模拟的多少,此时我们能够参照一下mockjs的文书档案。

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
  // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数,起始值为 1,每次增 1
    'id| 1': 1
  }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

接下去能够做大家想要做的事了

在mock.js中模仿简单的壹对数量

 const Mock = require('mockjs');
// 获取 mock.Random 对象
 const Random = Mock.Random;
 // mock一组数据
 const produceData = function (opt) {
  console.log('opt', opt);
  let articles = [];
  for (let i = 0; i < 30; 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 {
   data: articles
  }
 }
Mock.mock('/news', /post|get/i, produceData);//当post或get请求到/news路由时Mock会拦截请求并返回上面的数据

在vue中请求

methods: {
   setNewsApi: function() {
    this.$http.post("/news", "type=top&key=123456").then(res => {
     console.log(res.data);

     this.newsListShow = res.data.data;
    });
   }
  }

功能预览

Web前端 2

再做一个刨除的拍卖

模仿数据

let arr = []
 for (let i = 0; i < 30; i  ) {
  let newArticleObject = {
   name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
   content: Random.csentence(5, 30), // Random.csentence( min, max )
   id: i
  }
  arr.push(newArticleObject);
 }
 let list = function (options) {
  let rtype = options.type.toLowerCase(); //获取请求类型
  switch (rtype) {
   case 'get':
    break;
   case 'post':
    let id = parseInt(JSON.parse(options.body).params.id) //获取删除的id
    arr = arr.filter(function(val){
     return val.id!=id;//把这个id对应的对象从数组里删除
    });
    break;
   default:
  }
  return {
   data: arr
  } //返回这个数组,也就是返回处理后的假数据
 }
 Mock.mock('/list', /get|post/i, list);//get用于请求数据,post用于删除数据

vue中使用

methods: {
   setNewsApi: function() {
    this.$http.get("/list", "").then(res => {
     this.data = res.data.data;
    });
   },
   deleteList(data) { //删除数据
    let id = data.id;
    this.$http.post('/list', {
      params: {
       id: id
      }
     }).then(function(res) {
      console.log(res);
      this.data = res.data.data;
      alert(data.name   '删除成功');
     }.bind(this))
     .catch(function(error) {
      console.log(error)
     });
   },
  }

功效预览

 Web前端 3

github代码地址

上述正是本文的全体内容,希望对大家的学习抱有协理,也冀望大家多多支持帮客之家。

在咱们的生产实际中,后端的接口往往是较晚才会出来,于是大家的前端的许...

正文介绍了vue mockjs模拟数据达成内外端分离开荒的实例代码,分享给我们,也给和谐留个笔记。

搭建一个vue项目

在品种中品尝了mockjs,mock数据,完结上下端分离开荒。

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack vue-mock
$ cd my-project
# 安装依赖
$ npm install

有关mockjs,官方网站描述的是

安装mockjs

壹.上下端分离

npm install mockjs --save-dev

贰.无需修改既有代码,就足以阻止 Ajax 请求,返回模拟的响应数据。

拉开项目

3.数据类型丰裕

npm run dev

四.经过自由数据,模拟种种气象。

创立3个mockjs文件夹以及mockjs,并且在main.js引进这一个文件

等等优点。

此时得以看看像这么的二个体系结构

小结起来就是在后端接口未有支付到位在此之前,前端能够用已部分接口文书档案,在真实的乞请上阻挠ajax,并依靠mockjs的mock数据的条条框框,模拟真实接口重返的数量,并将随便的模拟数据重返参加相应的数目交互管理,那样真的完结了前后台的分离开荒。

Web前端 4

与现在的团结模仿的假数据差异,mockjs能够带给我们的是:在后台接口未开垦产生在此以前模拟数据,并赶回,达成前台的相互;在后台数据变成之后,你所做的只是去掉mockjs:结束拦截真实的ajax,仅此而已。

mockjs的使用

上面一步步的来达成vue-cli创建项目并增添一条音信类的多少模拟接口:

在类型中的mock.js文件中,写入模拟的数码,此时大家得以参谋一下mockjs的文书档案。

一.设置vue-cli全局脚手架

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
  // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
  'list|1-10': [{
    // 属性 id 是一个自增数,起始值为 1,每次增 1
    'id| 1': 1
  }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
npm install --global vue-cli 

接下去能够做大家想要做的事了

2.创建vue项目

在mock.js中效仿轻松的有个别数目

vue init webpack mockjs<br>cd mockjs<br>npm install axios --save 
 const Mock = require('mockjs');
// 获取 mock.Random 对象
 const Random = Mock.Random;
 // mock一组数据
 const produceData = function (opt) {
  console.log('opt', opt);
  let articles = [];
  for (let i = 0; i < 30; 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 {
   data: articles
  }
 }
Mock.mock('/news', /post|get/i, produceData);//当post或get请求到/news路由时Mock会拦截请求并返回上面的数据

3.安装mockjs

在vue中请求

npm install mockjs --save-dev 
methods: {
   setNewsApi: function() {
    this.$http.post("/news", "type=top&key=123456").then(res => {
     console.log(res.data);

     this.newsListShow = res.data.data;
    });
   }
  }

4.类型目录

功效预览

Web前端 5

Web前端 6

axios/api    用来封装axios

再做一个剔除的拍卖

Hello.vue     页面首页

如法泡制数据

NeswCell.vue   信息组件

let arr = []
 for (let i = 0; i < 30; i  ) {
  let newArticleObject = {
   name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
   content: Random.csentence(5, 30), // Random.csentence( min, max )
   id: i
  }
  arr.push(newArticleObject);
 }
 let list = function (options) {
  let rtype = options.type.toLowerCase(); //获取请求类型
  switch (rtype) {
   case 'get':
    break;
   case 'post':
    let id = parseInt(JSON.parse(options.body).params.id) //获取删除的id
    arr = arr.filter(function(val){
     return val.id!=id;//把这个id对应的对象从数组里删除
    });
    break;
   default:
  }
  return {
   data: arr
  } //返回这个数组,也就是返回处理后的假数据
 }
 Mock.mock('/list', /get|post/i, list);//get用于请求数据,post用于删除数据

router/index.js   路由

vue中使用

main.js      入口js

methods: {
   setNewsApi: function() {
    this.$http.get("/list", "").then(res => {
     this.data = res.data.data;
    });
   },
   deleteList(data) { //删除数据
    let id = data.id;
    this.$http.post('/list', {
      params: {
       id: id
      }
     }).then(function(res) {
      console.log(res);
      this.data = res.data.data;
      alert(data.name   '删除成功');
     }.bind(this))
     .catch(function(error) {
      console.log(error)
     });
   },
  }

mock.js     mockjs文件

职能预览

在来看下完毕后的效果

 Web前端 7

Web前端 8

github代码地址

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];

}) 

您可能感兴趣的稿子:

  • Vue-cli项目获取本地json文件数量的实例
  • vue vuecli webpack中动用mockjs模拟后端数据的演示
  • 详解Vue-Cli 异步加载数据的有些注意点
  • vue-cli项目怎么采纳vue-resource获取本地的json数据(模拟服务端重返数据)
  • 详解vue-cli中模仿数据的三种格局

此处本身增加了额贰个常用的年月整理过滤器 getYMD

  1. 累加3个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); 

柒.在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);

 }

} 

八.在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;">

     {{newsDate.author_name}}

    </section>

    <section class="Cright">

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

     {{newsDate.date | getYMD}}

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

九.存有代码能够查阅本身的github: 

以上正是本文的全体内容,希望对我们的读书抱有帮忙,也意在大家多多匡助脚本之家。

你或者感兴趣的文章:

  • node koa完毕多少mock接口的必由之路
  • 客户端(vue框架)与服务器(koa框架)通讯及服务器跨域配置详解
  • 详解基于Vue Koa的pm2配置
  • vue vuecli webpack中使用mockjs模拟后端数据的以身作则
  • vue-cli项目中怎么使用mock数据
  • 详解在vue-cli项目中动用mockjs(请求数据删除数据)
  • 详解vue-cli项目中用json-sever搭建mock服务器
  • vue 运用mock数据的演示代码
  • 运用vue koa二 mockjs模拟数据的措施教程
TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:mockjs模拟数据完成内外端分离开辟的实例代码,