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 相关文章推荐
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 Javascript
JS 获取滚动条高度示例代码
Oct 24 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
浅析Javascript的自动分号插入(ASI)机制
Sep 29 Javascript
angular使用bootstrap方法手动启动的实例代码
Jul 18 Javascript
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
jquery的$().each和$.each的区别
Jan 18 jQuery
Node 代理访问的实现
Sep 19 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 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
PHP strtr() 函数使用说明
2008/11/21 PHP
php笔记之:初探PHPcms模块开发介绍
2013/04/26 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
php实现背景图上添加圆形logo图标的方法
2016/11/17 PHP
PHP递归删除多维数组中的某个值
2017/04/17 PHP
PHP实现用session来实现记录用户登陆信息
2018/10/15 PHP
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
jQuery中replaceAll()方法用法实例
2015/01/16 Javascript
javascript实现类似java中getClass()得到对象类名的方法
2015/07/27 Javascript
js实现可折叠展开的手风琴菜单效果
2015/09/07 Javascript
基于javascript实现简单计算器功能
2016/01/03 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
详解Javascript函数声明与递归调用
2016/10/22 Javascript
简单理解vue中实例属性vm.$els
2016/12/01 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
微信小程序车牌号码模拟键盘输入功能的实现代码
2018/11/11 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
es6函数name属性功能与用法实例分析
2020/04/18 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
Python pass详细介绍及实例代码
2016/11/24 Python
pytorch 数据处理:定义自己的数据集合实例
2019/12/31 Python
新秀丽拉杆箱美国官方网站:Samsonite美国
2016/07/25 全球购物
家长会主持词开场白
2014/03/18 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
如何写股份合作协议书
2014/09/11 职场文书
2014乡镇干部对照检查材料思想汇报
2014/09/26 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
Win11怎么启动任务管理器?Win11启动任务管理器的几种方法
2021/11/23 数码科技
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
Java完整实现记事本代码
2022/06/16 Java/Android