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 相关文章推荐
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
再次谈论Javascript中的this
Jun 23 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
详解AngularJS2 Http服务
Jun 26 Javascript
微信小程序slider组件使用详解
Jan 31 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
vue删除html内容的标签样式实例
Sep 13 Javascript
vue+spring boot实现校验码功能
May 27 Vue.js
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
将PHP作为Shell脚本语言使用
2006/10/09 PHP
php中的数组操作函数整理
2008/08/18 PHP
Windows 下的 PHP-PEAR 安装方法
2010/11/20 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
PHP学习记录之数组函数
2018/06/01 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
Javascript自定义排序 node运行 实例
2013/06/05 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
理解javascript闭包
2015/12/15 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
Angularjs 制作购物车功能实例代码
2016/09/14 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
Vue项目打包压缩的实现(让页面更快响应)
2020/03/10 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
编程语言Python的发展史
2014/09/26 Python
5个很好的Python面试题问题答案及分析
2018/01/19 Python
python3 发送任意文件邮件的实例
2018/01/23 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
html5使用html2canvas实现浏览器截图的示例
2017/08/31 HTML / CSS
购买大码女装:Lane Bryant
2016/09/07 全球购物
澳大利亚票务和娱乐市场领导者:Ticketmaster
2017/03/03 全球购物
大四学生思想汇报
2014/01/13 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
党的群众路线对照检查材料范文
2014/09/24 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
庆祝儿童节标语
2014/10/09 职场文书
教务处教学工作总结
2015/08/10 职场文书