mockjs notas de estudo

---

1. O que é mockjs

Em um ambiente de desenvolvimento em que front-end e back-end são separados, o front-end precisa aguardar o documento de interface fornecido pelo back-end antes de continuar o desenvolvimento. E o MockJS permite que o front-end seja desenvolvido independentemente do back-end. Simplificando, o desenvolvimento do front-end não depende mais do back-end. O front-end pode organizar os documentos da interface de acordo com o negócio e usar o MockJS para simular a interface do back-end. O MockJS simula os dados da interface retornados pelo back-end interceptando solicitações AJAX específicas e gerando dados simulados de um determinado tipo de dados. Em termos leigos, o papel do mockjs é interceptar solicitações e retornar tipos de dados específicos.

---

`Dica: O seguinte é o texto deste artigo

Dois, instale o mockj

Simulação de instalação do projeto

npm install mockjs

Crie um novo arquivo fictício no projeto

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

Importe o arquivo simulado em 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. Sintaxe simulada

gerar string

• Gerar um número especificado de strings

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

• Gera uma string de comprimento de intervalo especificado

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

gerar texto

• gerar uma string aleatória

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

• Gerar comprimento e intervalo especificados

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

gerar títulos e frases

• gerar títulos e frases

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

• Gerar manchetes e frases de comprimento especificado

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

• Gerar um intervalo especificado de

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

gerar parágrafo

• Gerar parágrafos aleatoriamente

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

gerar números

• Gerar o número especificado

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

• gerar números de intervalo

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

Gerar ID de incremento automático

• logotipo gerado aleatoriamente

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

Gerar Nome-Endereço-ID

• Gera aleatoriamente um cartão de identificação de nome-endereço

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

Gerar imagens aleatórias

• Gerar imagem: @image("300*200", '#ff0000', '#fff', 'gif', 'Kun Kun')
• Parâmetro 1: tamanho da imagem

[
	'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: Cor de fundo da imagem

• Parâmetro 3: cor de primeiro plano da imagem

• Parâmetro 4: formato de imagem

• Parâmetro 5: texto da imagem

tempo de construção

• @Data
• Gerar hora no formato especificado: @data(aaaa-MM-dd hh:mm:ss)

Especifica os parâmetros retornados pela matriz

• Comprimento especificado: 'data|5'
• Intervalo especificado: 'data|5-10'

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

solicitação de interceptação simulada

Definir a solicitação get

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

Definir solicitação de postagem

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

4. Realização de caso de gerenciamento de notícias

recuperar dados

Endereço da interface:: /api/get/news

Parâmetros de interface:

pageindex：页码
pagesize:每页的条数

Tipo de solicitação: obter

Dados retornados:

{
    
    
    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
    }
}

adicionar notícias

Endereço da interface:: /api/add/news

Parâmetros de interface:

title：'标题'
content：内容

Tipo de solicitação: postagem

Dados retornados:

{
    
    
    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
    }
}

excluir notícias

Endereço da interface:: /api/delete/news

Parâmetros de interface:

id；新闻id

Tipo de solicitação: postagem

Dados retornados:

{
    
    
    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
    }
}