vue mock数据创建、数据请求

mock模拟数据

  1. 安装  cnpm install mockjs  --save-dev
  2. mock.js配置模拟数据的文件 import Mock from 'mockjs'
  3. 在整个项目mian.js引入mock 数据   require("./Mock/mock");
  4. 在组件引入mock 数据 ：将axios 绑定到Vue的原型对象上 Vue.prototype.$axios=Axios;
  所有的组件可以直接使用   this.$axios

mock.js 模拟数据

import Mock from 'mockjs'
Mock.mock("/getuser", //路径名称
			"post",   || "get"
			{		//模拟数据
			result：[
					{
					id:"1",
					name:"Roy"
					},···
					]
			});

mock.js 模拟随机数据

	1. 管道符 随即数字
	 "result|min-max "：产生 num个 ，num随机数字 (min,max)，小数点随机 |150.1-10
	"result|num"：产生 num个，num固定数字
	" id|+1":1  id初始值为1，id每次自增加1. 
	 3. 随即对象
	 "city|1":arr 随机选择一个arr数据内容
	 "city|"+1:arr 按顺序选择arr数据内容
	 4.正则随机产生 字符
	 5.随机boolean "boolean|1-2":true,

import Mock from 'mockjs'
Mock.mock("/getuser","post",{
result|1-5:[{ //随即产生1-5个result
	"id|+1":1,
	'name': '@cname',  // 中文名称
	"icid":"@id()",	//随机id号
	'birthday': '@date("yyyy-MM-dd")',  // 日期
	'city': '@city(true)',   // 中国城市
	"weight|80-150.1-10":1,
	"encoude|1-10":{
                "reg|1-10":/[0-9][a-z][A-Z]-/
            },
     "day":"@now()",  //@date(yyyy-MM-dd) @time()    @datetime(),
     "color":"@color()",//随机色的  @color()   @hsl()  @rgb()  @rgba()
     "text":"@cparagraph(1,2)",//产生随机中文
}]);

数据请求 vue-resource

1. 安装 cnpm install vue-resource --save
2. 引入、配置js

//配置vue-resource、使用插件
import vueResource from 'vue-resource'
Vue.use(vueResource);
//引入mock.js	加载mock数据文件
require("./mock/mock");

3. 相应组件挂载完成后 get/post请求mock数据

mounted(){
	this.$http  //get/post
	.get("/getuser")	||	.post("/gettable")  //路径
	.then(res =>{//请求成功
		this.user = res.body.result; //data.user获取数据
		})
	   .catch(error => {//请求失败        
        console.log(error);
      })
}

axios数据请求

cnpm install --save axios vue-axios
1.组件请求数据，组件内js配置 import Axios from “axios”;

    Axios.get("/getuser")   ||.post("/gettable")
      .then((res) => {
        console.log(res.data.result);
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => {
        console.log("最后执行的操作");
      });

2. es6  async

async function getaxios() {
      // async  可以写多个异步等待
    try {let user = await Axios.get("/getuser");
        return user;}
      catch(e)
      {throw e;}
      finally {}
    }    
getaxios()
      .then(res => {
        console.log(res.data.result);
      })
      .catch(err => {
        console.log(err);
      })
      .finally(() => {
        console.log("最终执行");
      });    

3.全局请求数据，需在main.js配置	import axios from 'axios'; Vue.prototype.$axios=Axios;

this.$axios
.get("/getuser")  //数据路径
.then((res)=>{ res.data.result})
.catch((err)=>{});

fetch-jsonp 数据请求跨域

1. 安装 npm install fetch-jsonp
2. main.js文件导入 import fetch from 'fetch-jsonp'
3.  当前组件使用		import FetchJsonp from "fetch-jsonp";

FetchJsonp(src, { 	//src 数据路径
      jsonpCallback: "cb",  //指定回调函数的参数
      jsonpCallbackFunction: "getData", //指定回调函数的函数名称
      timeout: 2000 //请求超时
    })
      .then(res => {
        console.log(res);   //{ok: true, json: ƒ}
        return res.json();	
      })
      .then(res => {//success        
        console.log(res.s);
      })
      .catch(error => {
        console.log(error);
      });

4. 全局组件使用	import Fetch from "fetch-jsonp";Vue.prototype.$fetch=Fetch;

this.$fetch("")