mockjs——mockjs定义、mockjs安装、mockjs使用、mockjs方法、mockjs语法、代码示例

大脸胖柴

已于 2023-03-26 20:39:07 修改

阅读量2w

点赞数 36

文章标签：前端 vue.js

于 2022-08-07 19:06:18 首次发布

本文链接：https://blog.csdn.net/TKY666/article/details/126215513

版权

一、mockjs定义

二、mockjs安装

三、mockjs使用（从此处起下方标红为关键信息，黑色可不看）

使用mockjs前先在main.js中进行如下操作(post与get都要进行)

mockjs使用post方式小案例

mockjs使用get方式小案例（常用关键）

六、mockjs语法（精华）

五、mockjs方法（用处不大可不看）

六、mock练习示例

一、mockjs定义

拦截ajax请求，生成伪数据
应用场景:在工作中,后端已经出接口文档,还没有实现数据
由前端依照接口文档模拟伪数据,实现前端开发功能

二、mockjs安装

npm i mockjs -D

三、mockjs使用（从此处起下方标红为关键信息，黑色可不看）

-----------------------------------------------有用信息分割线-------------------------------------------------------------

定义/mock/index.js

首先导入Mock
import Mock from 'mockjs'

然后定义伪数据
(小示例，下方精华里有具体定义步骤)
Mock.mock(" lapi/feed", Mock.mock({
        "data|20": [{自定义数据类型}]
    })
)

在main.js导入

import './mock/index.js'

使用mockjs前先在main.js中进行如下操作(post与get都要进行)

// 在main.js中导入自定义mock文件
import './mock/mock.js';  必须

// 导入axios 没有./  (axios网络请求工具:1不依赖dom,2.前后端都可以用,3. 丰富拦截,扩展功能,4可封装,复用性强)

import axios from 'axios'; 必须

// 挂载到vue的全局(原型上),在每个组件都可以使用 ,prototype是固定的,$axios是自定义的

Vue.prototype.$axios = axios; 必须

// 指定默认的请求域名 若是不指定则控制台中不显示此网络请求

axios.defaults.baseURL = "http://dida100.com:8888" 注意get请求要删掉此步骤

// 给每个请求拦截一下,添加请求Token信息

axios.interceptors.request.use(function(config){
	config.headers.Authorization = 'Bearer '+localStorage.getItem("token");
	return config;
})

mockjs使用post方式小案例

路径：src/自定义mock文件/mock.js

import Mock from 'mockjs';

// 当用户ajax地址里面 有/api/login 的时候 返回如下数据
Mock.mock("/api/login",{
    下方为自定义的数据
    code:200,
    msg:"登录成功",
    user:{name:"彭于晏",age:18,rank:10},
    token:'joaaohiefuopieeaskfoefeop',//token随便乱写
})

需要使用mockjs数据的文件

post方式 需要传递的参数以对象的形式写在地址后 最终出现在载荷中
export default {
    创建后调用mockjs请求数据
    created() {
        this.login()
    },
    methods: {
    定义请求方法
        login() {
    发送ajax请求
                              由于指定了默认的请求域名，此处的用户名与密码必须真实存在
            this.$axios.post("/api/login", { name: '彭于晏', password: 'pyy' })
                .then(res => {
    打印请求数据
                    console.log("login", res.data);
                })
                .catch(err =>
                    console.error(err)
                )
        }
    }
}

mockjs使用get方式小案例（常用关键）

路径：src/自定义mock文件/mock.js

import Mock from 'mockjs';


写法一：规定只能为get请求
// 拦截get请求，返回数据

Mock.mock("/api/feed","get",function(){
    console.log("get 拦截")
    //返回10条随机数据
    return Mock.mock({
        "data|10":[
            {
                下方为自定义的数据类型

                name:"@cname",//随即中文名
                msg:"@cparagraph(2,3)",//随机段落
                date:"@datetime",//随机日期
            }
        ]
    })
});
推荐方法二
写法二：省略许多无用步骤 且未规定请求方式 post或get均可使用
// 拦截get请求，返回数据
// 当用户ajax地址里面 有/api/login 的时候 返回如下数据

Mock.mock("/api/feed",
    //返回10条随机数据 
    Mock.mock({
        "data|10":[
            {
                name:"@cname",//随即中文名
                msg:"@cparagraph(2,3)",//随机段落
                date:"@datetime",//随机日期
            }
        ]
    })
)

需要使用mockjs数据的文件

get请求方式
export default {
    创建后调用数据请求方法
    created() {
        this.getFeed()
    },
    methods: {
    定义请求方法
        getFeed() {
            this.$axios.get("/api/feed")
                .then(res => {
                    console.log(res.data)
                })
                .catch(err => {
                    console.error(err)
                })
        }
    }
}

六、mockjs语法（精华）

常用语法

"id":"@id"
"star|1-2":"★" 字符串重复一道2次
"price|100-200.2-3" 小数点2-3位
"data|10":[{name:"名称"}] 数组的内容重复10遍
"live|1":true,随机返回true,false
"tel":/13 \d{9}/,
"des":function(){ return this.start+this.price}
"name":"@cname" 表示中文名称
"address":"@country(true)" 地址
"ip":"@ip",
"description":"@cparagraph(1, 3)" 随机段落2-3行
"pic":@dataImage('200x100','色块图片')`

使用示例：

-----------------------------------------------详细使用方法在上方------------------------------------------------------

五、mockjs方法（用处不大可不看）

mock(data)
mock(url,data)
mock(url,type,data)
mock(url,type,function)
data：数据
url：拦截地址(可以是正则)
type：拦截请求类型(post,get,put,delete)
function：通过函数返回数据,参数用config 请求的配置

六、mock练习示例

/mock/index.js

//定义/mock/index.js
 
import Mock from 'mockjs'
Mock.mock("/api/login", {
	code: 200,
	msg: "登陆成功",
	user: {
		name: "zeng8",
		score: 2048,
		rank: 10
	},
	token: "kjkjalsdiiuioayeuryqowierqiwerqowiery"
})
// url可以使用正则匹配
// 拦截get请求，返回评论数据
Mock.mock(/\/api\/feed/, "get", function(config) {
	//console.log("config" , config );
	//通过config可以获取到前端发给服务器的数据
	var po = config.url.indexOf("?"); //获取问号的位置
	if (po != -1) {
		var query = config.url.slice(po + 1); //获取到查询参数current=4转换为{current: 4}
		var arr = query.split("&"); //按&分割为数组
		var search = {}; //定义个对象
		arr.forEach(item => {
			var temp = item.split("="); //把数组每个元素按等于分割[current,4]
			search[temp[0]] = temp[1]; //search[ "current"] =4
 
		})
	}
 
	// 返回一个随机数据
	return Mock.mock({
		"code": 0,
		"data|4": [{
			id: "@id",
			msg: "@cparagraph(2,3)", //段落2-3行
			name: "@cname", //随机中文名
			date: "@datetime" //随机日期
		}],
		"pagnation": {
			"total|10-25": 1,
			"size": 4,
			"pageTotal|4-10": 1,
			"current": search.current,
		}
	})
})
 
Mock.mock("/api/test", Mock.mock({
	name: "@cname", //随机中文名
	"age|100-200": 1, //100-200的随机数
	"price|10-50.2-5": 1, //10-50随机数 小数点2-5位
	"live|1-2": true, //随机true或false
	"start|1-5": "⭐", //把字符串重复1-5次
	"friend|2": ["小红", "小明", "小刚", "小白", "小蓝"], //1是挑一个大于1是重复n次
	"props|1-3": {
		name: "mm",
		age: 22,
		leg: 2,
		job: "web",
		eye: 2
	},
	"tel": /13\d{9}/,
	"des": function() {
		return `大家好，我的名字是${this.name}，今年${this.age}岁`
	},
	"data|10": [{
		"id|+1": 1024,
		"ID": "@id",
		date: "@date",
		time: "@time",
		datetime: "@datetime",
		name: "@cname",
		pic: "@dataImage('200x100')",
		description: "@cparagraph(1,3)",
		title: "@ctitle(8,12)",
		url: /http:\/\/www\.[a-z]{2,8}\.(com|cn|org)/,
		email: /[4-8]@\.(126|qq|163)\.(com|cn|org)/,
		address: "@county(true)", //省市区地址
	}]
}))
//作用:模拟后端程序,当后端还没有写好真实的代码,有接口时候,可以先自己创建数据,先自己写前端内容

main.js

import Vue from 'vue'
import App from './App.vue'
 
// 导入自定义的mock文件
import './moke/index.js'
 
Vue.config.productionTip = false
// 导入axios  没有./
//(axios网络请求工具:1不依赖dom,2.前后端都可以用,3．丰富拦截,扩展功能,4可封装,复用性强)
import axios from 'axios'
// 挂载到vue全局（原型上）  每个组件都能使用  prototype是固定的，$axios是自定义的
Vue.prototype.$axios = axios;
//指定默认的请求域名
// axios.defaults.baseURL = "http://dida100.com:8888"
//给每个请求拦截一下，添加请求Token信息
axios.interceptors.request.use(function(config) {
	config.headers.Authorization = 'Bearer ' + localStorage.getItem("token")
	return config
})
// interceptors 拦截器
//request 请求
//config 配置
// headers 头信息
//Authorization 权限
//defaults 默认
//baseURL 基础URL
 
 
new Vue({
	render: h => h(App),
}).$mount('#app')

大脸胖柴

关注

36
点赞
踩
168

收藏

觉得还不错? 一键收藏
4
评论
mockjs——mockjs定义、mockjs安装、mockjs使用、mockjs方法、mockjs语法、代码示例

拦截ajax请求，生成伪数据应用场景:在工作中,后端已经出接口文档,还没有实现代码由前端依照接口文档模拟伪数据,实现前端开发功能。
复制链接

扫一扫