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 相关文章推荐
网页中实现浏览器的最大,最小化和关闭按钮
Mar 12 Javascript
javascript获取ckeditor编辑器的值(实现代码)
Nov 18 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
每天一篇javascript学习小结(属性定义方法)
Nov 19 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
关于vue中如何监听数组变化
Apr 28 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产生动态的影像图
2006/10/09 PHP
php5.3不能连接mssql数据库的解决方法
2014/12/27 PHP
dvwa+xampp搭建显示乱码的问题及解决方案
2015/08/23 PHP
php利用gd库为图片添加水印
2016/11/09 PHP
node.js入门教程迷你书、node.js入门web应用开发完全示例
2014/04/06 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
深入学习 JavaScript中的函数调用
2017/03/23 Javascript
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
[02:36]DOTA2亚洲邀请赛小组赛精彩集锦:EE凭借法力虚空拿下4杀
2017/03/30 DOTA
[01:06:18]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第二场 1月26日
2021/03/11 DOTA
python中xrange和range的区别
2014/05/13 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
PyQt5连接MySQL及QMYSQL driver not loaded错误解决
2020/04/29 Python
python编写实现抽奖器
2020/09/10 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
Daniel Wellington官方海外旗舰店:丹尼尔惠灵顿DW手表
2018/02/22 全球购物
给实习单位的感谢信
2014/02/01 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
高三家长寄语
2014/04/03 职场文书
《老山界》教学反思
2014/04/08 职场文书
三方协议书范本
2014/04/22 职场文书
2014年百日安全生产活动总结
2014/05/04 职场文书
工程承包协议书范本
2014/09/29 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
2014小学年度工作总结
2014/12/20 职场文书
2015年医德考评自我评价
2015/03/03 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
行为规范主题班会
2015/08/13 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
PHP实现两种排课方式
2021/06/26 PHP
python中的sys模块和os模块
2022/03/20 Python