vue+axios+mock.js环境搭建

Chao 发布于2019-08-23 11:30 / 3445人阅读

摘要：如果你不熟悉也没关系，我将一步一步教你如何在前端项目中使用来构建一个模拟假数据环境。例如代表的含义。文件最后将方法暴露出去给具体请求调用即可具体页面调用引入使用处理返回

在前后端分离开发模式下，前端项目通常在项目构建初期需要使用假数据以及相应的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)=>{
   //处理返回
})

海外云主机 GPU服务器 mock.js 云服务器搭建vue项目阿里云服务器搭建vue项目 axios

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97055.html

vue项目接入mock&& axios 通用配置

摘要：前言兵马未动粮草先行同理项目开发过程中经常会出现接口未出前端页面已搭建完毕的情况此时为了提高前端的开发效率解放生产力我们可以按照预定的接口文档做一些接口模拟的工作等等后端小伙伴开发完接口后我们只需要替换一个接口基地址即可初始准备这里已项目为前言兵马未动,粮草先行; 同理,项目开发过程中经常会出现接口未出, 前端页面已搭建完毕的情况;此时为了提高前端的开发效率,解放生产力,我们 FE...

Ilikewhite 2019-08-26 10:33 评论0 收藏0
vue-vue项目中mock.js的使用

摘要：表示需要拦截的请求类型。添加信息拦截请求，调用函数先看一下这个是什么获取信息更改后输入标题，点击提交，再点击获取，可以看到返回了我们提交的数据，并且是对象的形式，拿到数据后就可以做进一步的操作了。 mock.js 官网地址：mockjs.com/ mockjs是用来模拟产生一些虚拟的数据，可以让前端在后端接口还没有开发出来时独立开发。我们可以使用真实的url，mockjs可以拦截ajax请求...

Object 2019-05-23 17:34 评论0 收藏0
webpack4+vue2+axios+vue-router的多页+单页混合应用框架

摘要：适用于主要入口页面生成多页，子页面和次要页面使用单页形式的项目。文件用来存放固定的数据，而文件可更加自由的处理并返回数据。 VUE2的单页应用框架有人分享了，多页应用框架也有人分享了，这里分享一个单页+多页的混合应用框架吧，node.js写了一个简单的mock服务也集成在里面，整体初现雏形，还有很多需要优化和改善的地方。。。项目结构 │ ├─build ...

whatsns 2019-08-23 11:44 评论0 收藏0
vue2.0+axios+mock+axios-mock+adapter实现登陆

摘要：做项目过程中，需要用到后台模拟数据，在机缘巧合下发现了，在学习使用的过程中又偶遇了。做项目过程中，需要用到后台模拟数据，在机缘巧合下发现了mock，在学习使用的过程中又偶遇了axios-mock-adapter。现在将实例展示如下：准备实例是建立在vue-cli的基础上实现需要提前安装的插件有：axios：npm install axio --savemockjs：npm ins...

RancherLabs 2019-08-22 18:49 评论0 收藏0
基于vue-cli3.0构建功能完善的移动端架子

摘要：对应每一个环境可能都会有所差异，比如说服务器地址接口地址地址等等。具体的值取决于应用运行的模式。会和中的选项相符，即你的应用会部署到的基础路径。基于vue-cli3.0构建功能完善的移动端架子，主要功能包括 webpack 打包扩展 css：sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局跨域设置 eslint设置...

Loong_T 2019-08-23 17:05 评论0 收藏0