notas de estudio de mockjs

---

1. ¿Qué es mockjs?

En un entorno de desarrollo donde los extremos frontal y posterior están separados, el extremo frontal debe esperar el documento de interfaz proporcionado por el extremo posterior antes de continuar con el desarrollo. Y MockJS permite que el front-end se desarrolle independientemente del back-end. En pocas palabras, el desarrollo del front-end ya no depende del back-end. El front-end puede ordenar los documentos de la interfaz de acuerdo con el negocio y usar MockJS para simular la interfaz de back-end. MockJS simula los datos de la interfaz devueltos por el backend al interceptar solicitudes AJAX específicas y generar datos simulados de un tipo de datos determinado. En términos sencillos, el papel de mockjs es interceptar solicitudes y devolver tipos de datos específicos.

---

`Pista: El siguiente es el texto de este artículo

Dos, instalar mockj

Simulacro de instalación del proyecto

npm install mockjs

Crear un nuevo archivo simulado en el proyecto

//引入mock模块
import Mock from 'mockjs'

Importe el archivo simulado en main.js

import Vue from 'vue'
import App FROM './App.vue'
import './mock/index.js'

Vue.config.productionTip = false

new Vue({
    
    
	render:h => h(App),
}).$mount('#app')

3. Sintaxis simulada

generar cadena

• Generar un número específico de cadenas

import Mock from 'mockjs'
const data = Mock.mock({
    
    
"string|4":"哈哈"
})

• Generar una cadena de longitud de rango especificada

const data = Mock.mock({
    
    
"string|1-8":"哈哈"
})

generar texto

• generar una cadena aleatoria

const data = Mock.mock({
    
    
	"string":"@cword"
}) 

• Generar longitud y rango especificados

const data = Mock.mock({
    
    
    string:"@cword(1)"
    str :"@cword(10,15)"
})

generar titulares y oraciones

• generar titulares y oraciones

const data = Mock.mock({
    
    
    title:"@ctitle(8)"
    sentence:"@csentence"
})

• Genere titulares y oraciones de longitud específica

const data = Mock.mock({
    
    
    title:"@ctitle(8)"
    sentence:"@csentence(50)"
})

• Generar un rango específico de

const data = Mock.mock({
    
    
    title:"@ctitle(5,8)"
    sentence:"@csentence(50,100)"
})

generar párrafo

• Generar párrafos aleatoriamente

const data = Mock.mock({
    
    
  content:"@cparagraph()"
})

generar numeros

• Generar el número especificado

const data = Mock.mock({
    
    
	"number|80":1
})

• generar números de rango

const data = Mock.mock({
    
    
	"number|1-99":1
})

Generar ID de incremento automático

• logotipo generado aleatoriamente

const data = Mock.mock({
    
    
	id:"@increment"
})

Generar nombre-dirección-ID

• Generar aleatoriamente una tarjeta de identificación con nombre-dirección

const data = Mock.mock({
    
    
	name:"@cname()"
	idCard:"@id()"
	address:"@city(true)"
})

Generar imágenes aleatorias

• Generar imagen: @image("300*200", '#ff0000', '#fff', 'gif', 'Kun Kun')
• Parámetro 1: tamaño de la imagen

[
	'300*250','250*250','240*400','336*280'
	'180*150','720*300','468*60','234*60'
	'388*31','250*250','240*400','120*40'
	'125*125','250*250','240*400','336*280'
]

• Parámetro 2: color de fondo de la imagen

• Parámetro 3: color de primer plano de la imagen

• Parámetro 4: formato de imagen

• Parámetro 5: texto de imagen

Tiempo de construcción

• @Fecha
• Genera la hora en el formato especificado: @date(yyyy-MM-dd hh:mm:ss)

Especifica los parámetros devueltos por la matriz.

• Longitud especificada: 'fecha|5'
• Rango especificado: 'datos|5-10'

const data = Mock.mock({
    
    
'list|50-99':[
        {
    
    
            name:'@cname'
            address:'@city(true)'
            id:'@increment()'
        }	
    ]
})

solicitud de interceptación simulada

Definir la solicitud de obtención

Mock.mock('api/get/news','get',()=>{
    
    
    return{
    
    
        status:200,
        message:"获取数据成功"
    }
})

Definir solicitud de publicación

Mock.mock('api/post/news','post',()=>{
    
    
    return{
    
    
        status:200,
        message:"获取数据成功"
    }
})

4. Realización de un caso de gestión de noticias

recuperar datos

Dirección de interfaz:: /api/get/news

Parámetros de la interfaz:

pageindex：页码
pagesize:每页的条数

Tipo de solicitud: obtener

Datos devueltos:

{
    
    
    status:200,
        message:"获取新闻列表成功",
        list:[
        {
    
    
            "id":1,
            "title":"解忧杂货店",
            "content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本",
            "img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067",
            "add_time":"1984-04-03 11:43:37"}
        ],
        total:50
    }
}

agregar noticias

Dirección de interfaz:: /api/add/news

Parámetros de la interfaz:

title：'标题'
content：内容

Tipo de solicitud: publicación

Datos devueltos:

{
    
    
    status:200,
        message:"获取新闻列表成功",
        list:[
        {
    
    
            "id":1,
            "title":"解忧杂货店",
            "content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本",
            "img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067",
            "add_time":"1984-04-03 11:43:37"}
        ],
        total:50
    }
}

eliminar noticias

Dirección de la interfaz:: /api/delete/news

Parámetros de la interfaz:

id；新闻id

Tipo de solicitud: publicación

Datos devueltos:

{
    
    
    status:200,
        message:"获取新闻列表成功",
        list:[
        {
    
    
            "id":1,
            "title":"解忧杂货店",
            "content":"《解忧杂货店》是日本作家东野圭吾写作的长篇小说。2011年《小说野性时代》连载，于2012年3月由角川书店发行单行本",
            "img_url":"http://t15.baidu.com/it/u=2090705107,20534764&fm=224&app=112&f=JPEG?w=500&h=500&s=61D0718656561FFFE504A51703000067",
            "add_time":"1984-04-03 11:43:37"}
        ],
        total:50
    }
}