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函数
Sep 08 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
Feb 27 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
jQuery中slideUp()方法用法分析
Dec 24 Javascript
jQuery EasyUI Tab 选项卡问题小结
Aug 16 Javascript
老生常谈JavaScript中的this关键字
Oct 01 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
简单实现vue验证码60秒倒计时功能
Oct 11 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
vue transition 在子组件中失效的解决
Nov 12 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
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
zf框架的Filter过滤器使用示例
2014/03/13 PHP
PHP中COOKIES使用示例
2015/07/26 PHP
php源码之将图片转化为data/base64数据流实例详解
2016/11/27 PHP
php实现用户登陆简单实例
2017/04/04 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
php 函数中静态变量使用的问题实例分析
2020/03/05 PHP
url地址自动加#号问题说明
2010/08/21 Javascript
jQuery lazyload 的重复加载错误以及修复方法
2010/11/19 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
jquery实现网站列表切换效果的2种方法
2016/08/12 Javascript
Bootstrap 3的box-sizing样式导致UEditor控件的图片无法正常缩放的解决方案
2016/09/15 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
vue增加强缓存和版本号的实现方法
2019/05/01 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
Python获取某一天是星期几的方法示例
2017/01/17 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
python django中8000端口被占用的解决
2019/12/17 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
C/C++程序员常见面试题二
2015/11/19 面试题
音乐系毕业生自荐信
2013/10/27 职场文书
女大学生自我鉴定
2013/12/09 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
平安建设汇报材料
2014/12/29 职场文书
投资合作意向书范本
2015/05/08 职场文书
2015年党务工作者个人工作总结
2015/10/22 职场文书
2016教师年度考核评语大全
2015/12/01 职场文书
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
一行Python命令实现批量加水印
2022/04/07 Python