vue+axios+mock.js环境搭建的方法步骤


Posted in Javascript onAugust 28, 2018

在前后端分离开发模式下,前端项目通常在项目构建初期需要使用假数据以及相应的http请求来进行辅助开发,例如在后端接口还没开发好下,我们可以模拟http请求以及数据来进行前端的axios封装,接口设计,对http状态码处理等。前端模拟数据的方法有许多种,假如你熟悉node.js以及express框架,你可以快速地构建一个后端服务器来进行辅助开发,我本人也比较喜欢这种方式,这种方法在我日后的文章将会有介绍。如果你不熟悉node也没关系,我将一步一步教你如何在前端vue项目中使用mock.js来构建一个模拟假数据环境。

1 ,安装mock.js

npm install mockjs --save

2,安装axios

npm install axios --save

3新建一个文件夹mock 下面有一个文件mock.js,mock.js作用主要用来生成假数据以及提供了一个服务器,有了这个服务器我们通过定义api来访问mock.js生成的数据

mock.js内容

const Mock = require('mockjs');
const Random = Mock.Random;
//造新闻列表数据
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.js内容主要是引入mock模块,然后生成100条新闻列表数据.对于mock生成数据的一些规则就省略了,读者可以自己去mock官网了解一些常用的生成规则。例如Random.csentence(5, 30)代表的含义。

这里再演示几个生成数据的方法

//生成100个用户登入信息
const produceUserInfo=function(){
  let Users=[];
  let type=['游客','会员','管理员'];
  for(let i=0;i<100;i++){
   let obj=Mock.mock({
    userId:i+1,
    userName:Random.cname(),
    userEmail:Random.email(),
    'userType|+1':type
   })
   Users.push(obj);
  }
};

//生成一篇文章详情
const articleDetail=function(){
 let obj={};
 obj.author_name=Random.cname();
 obj.title=Random.csentence(5, 30);
 obj.publish_date=Random.date();
 obj.content=Random.paragraph(100);
 obj.view=Random.integer(0, 10000);
 obj.source='今日头条'

 return{
  data:obj
 }

}

//生成类型列表数据
const getlist=function(){
 let arr=[]
 for(let i=0;i<100;i++){
   let obj={};
   obj.id=i+1;
   obj.title=Random.csentence(5, 30);
   obj.date=Random.date();
   arr.push(obj);
 }
 return {
  data:arr
 }
}
const adminInfo=[
 {
  name:'admin',
  password:'admin',
  email:'4399@qq.com'
 },{
  name:'test',
  password:'test',
  email:'1341313944@qq.com'
 },{
  name:'admin',
  password:'abc123',
  email:'112360@qq.com'
 },{

 }

]

以上定义了生成数据的规则了,现在我们定义访问这些数据的接口

接下来在mock.js定义以下路由

Mock.mock('/view/aa', 'post', produceNewsData);
Mock.mock('/view/bb', 'post', produceUserInfo);
Mock.mock('/view/detail','post',articleDetail);
Mock.mock('/view/list','post',getlist);

上述代码意思是当你使用post方法访问/view/aa时,服务器会返回produceNewsData,访问/view/bb时返回 produceUserInfo
我们还可以处理请求

//用户名密码验证
Mock.mock('/view/login','post',function(req){
 let obj={};
 if(req.body){
  let name= req.body.split('&')[0];
  let password=req.body.split('&')[1];
  adminInfo.forEach(item=>{
  if(item.name===name||item.name===item.email){
   if(item.password===password){
     obj.name=item.name;
   }
  }
  })
  return obj;
 }
})

至此一个模拟假数据服务器搭建完成!接下来使用axios封装http请求 新建文件夹api 下面新建一个文件api.js

api.js

import vue from 'vue'
import axios from 'axios'

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 {
 get_news(url, params) {
  return fetch(url, params);
 }
}

上面代码主要使用axios封装了http post的请求,对于其他例如get请求和axios相关介绍读者可以参考我的上一篇博客。文件最后将get_news方法暴露出去给具体请求调用即可

具体页面调用:

import api from '@/api/api.js';//引入
//使用
api.get_news('/view/detail', 'type=top&key=123456').then((res)=>{
  //处理返回
})

mock.js模拟的一条数据:

import Mock from 'mockjs'
export default Mock.mock('msg', { 
  'name'  : '@name', 
  'age|1-100': 100, 
  'color'  : '@color' 
});

多条数据

import Mock from 'mockjs'
const Random = Mock.Random;
export default Mock.mock('msg',getData);
function getData(){
 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
  }
}

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

Javascript 相关文章推荐
关于javascript DOM事件模型的两件事
Jul 22 Javascript
jquery Moblie入门—hello world的示例代码学习
Jan 08 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
JavaScript输出所选择起始与结束日期的方法
Jul 12 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
详解.vue文件解析的实现
Jun 11 Javascript
在小程序中使用Echart图表的示例代码
Aug 02 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
javascript/jquery实现点击触发事件的方法分析
Nov 11 jQuery
抖音短视频(douyin)去水印工具的实现代码
Mar 30 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 #Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 #Javascript
浅谈redux以及react-redux简单实现
Aug 28 #Javascript
Vue封装的可编辑表格插件方法
Aug 28 #Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 #Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 #Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 #Javascript
You might like
如何选购合适的收音机
2021/03/01 无线电
php whois查询API制作方法
2011/06/23 PHP
探讨Smarty中如何获取数组的长度以及smarty调用php函数的详解
2013/06/20 PHP
解析web文件操作常见安全漏洞(目录、文件名检测漏洞)
2013/06/29 PHP
php绘制一条弧线的方法
2015/01/24 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
php调用淘宝开放API实现根据卖家昵称获取卖家店铺ID的方法
2015/07/29 PHP
深入理解Yii2.0乐观锁与悲观锁的原理与使用
2017/07/26 PHP
button没写type=button会导致点击时提交
2014/03/06 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
JavaScript添加随滚动条滚动窗体的方法
2016/02/23 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
Vuex中的State使用介绍
2019/01/19 Javascript
jquery实现的放大镜效果示例
2020/02/24 jQuery
VUE中V-IF条件判断改变元素的样式操作
2020/08/09 Javascript
[02:42]决战东方!DOTA2亚洲邀请赛重启荣耀之争
2017/03/17 DOTA
Python下线程之间的共享和释放示例
2015/05/04 Python
Python合并两个字典的常用方法与效率比较
2015/06/17 Python
Python使用PDFMiner解析PDF代码实例
2017/03/27 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
Kali Linux安装ipython2 和 ipython3的方法
2019/07/11 Python
pycharm导入源码的具体步骤
2020/08/04 Python
详解canvas drawImage()方法绘制图片不显示的问题
2018/10/08 HTML / CSS
使用css如何制作时间ICON方法实践
2012/11/12 HTML / CSS
波兰最大的度假胜地和城市公寓租赁运营商:Sun & Snow
2018/10/18 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
环保倡议书100字
2014/05/15 职场文书
导游词怎么写
2015/02/04 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
建议书的格式及范文
2015/09/14 职场文书