mockjs在vue中的使用

mockjs在vue中的使用

前后端分工协作是一个非常高效的做法，但是有时前后端分离不彻底会很痛苦。前后端应该是异步进行的，进度互不影响，但是在没有mock的时候，前端却严重依赖后端的接口，总会苦苦等待后端接口出来才能继续开发。为了解决这个问题，大神就造了一个轮子，供大家使用–mock.js

关于mock.js，官网描述：

1.前后端分离

2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据

3.数据类型丰富

4.通过随机数据，模拟各种场景

npm install mockjs

//或 在开发环境中引入

npm install mockjs --save-dev

在src路径下创建mock.js文件

在main.js引入mock.js文件

在刚刚创建的mock.js文件中写入测试代码

//引入mockjs

const Mock = require('mockjs') //安装的mockjs，并不是创建的mock.js

// 获取 mock.Random 对象

const Random = Mock.Random;

//使用mockjs模拟数据

Mock.mock('/api/data', (req, res) => {//当post或get请求到/api/data路由时Mock会拦截请求并返回上面的数据

let list = [];

for(let i = 0; i < 30; i++) {

let listObject = {

title: Random.csentence(5, 10),//随机生成一段中文文本。

company: Random.csentence(5, 10),

attention_degree: Random.integer(100, 9999),//返回一个随机的整数。

photo: Random.image('114x83', '#00405d', '#FFF', 'Mock.js')

}

list.push(listObject);

}

return {

data: list

}

})

在xxx.vue文件中使用axios获取mock.js中的随机数据

import axios from 'axios'

export default {

data() {

return {

data:[]

}

},

mounted:function() {

axios.get('/api/data').then(res => {//get()中的参数要与mock.js文件中的Mock.mock()配置的路由保持一致

this.data = res.data.data;

console.log(res.data);//在console中看到数据

}).catch(res => {

alert('wrong');

})

},

methods:{

}

}

结构

效果展示

mockjs在vue中的使用相关教程

vue3 - composition api

vue3 - composition api Vue3中提出的一个新 概念 , 作用: 聚合代码 逻辑重用 Vue的组件化做的相当出色, 帮助我们更好的拆分代码和约束代码, 增加可读性, 但是2.x有几个问题也是开发者们时刻在关注的 代码逻辑不够聚合, 比较分散, 如果我们的组件代码量一多,

Gradle中的project

Gradle中的project Gradle的执行流程 Initialization初始化阶段 (解析整个工程中的所有Project,构建所有的Project对应的project对象) Configuration配置阶段 (解析所有projects对象中的task,构建好所有task的拓扑图(有向无环图)) Execution执行阶段(执

Web - JS掌握JavaScript中的数组、循环、函数等技术的使用(网页

Web - JS掌握JavaScript中的数组、循环、函数等技术的使用(网页轮播图) 完成网页轮播图效果，配套的还有随机点名器训练。 代码写得有一些乱，其中有些问题的解决方案也不算好，勉勉强强的自己完成了这个任务训练，0.0~ 代码如下 !DOCTYPE htmlhtml lang=enhea

Web - JS当中的数组、循环、随机数和定时器的使用训练(随机点名

Web - JS当中的数组、循环、随机数和定时器的使用训练(随机点名器) 随机点名器训练，配套的还有网页轮播图训练。 做出来的效果: 代码如下 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, initial-scale=1

了解JAVA中的装箱与拆箱

了解JAVA中的装箱与拆箱 Java为每种基本数据类型都提供了对应的包装器类型，int对应Integer、boolean对应Boolean。。。 所以，装箱就是将基本数据类型转换为包装器类型；拆箱就是将包装器类型转换为基本数据类型。那自动装箱与自动拆箱也很好理解了，就是我们

vue3.0+ts集成jquery、bootstrap、jquery.dataTable插件、echart

vue3.0+ts集成jquery、bootstrap、jquery.dataTable插件、echart 先看运行效果： 1、首先查看开发环境，IDE使用的是vscode，如下图所示： 2、然后根据使用vue创建项目，如下命令： vue create myweb 如下图所示： 3、然后选择Manually select features，表示

java中的加密与解密算法

java中的加密与解密算法 对称加密、非对称加密、摘要算法的区别在哪里? 一、对称加密技术 对称加密特点是加密和解密的过程使用相同的密钥(也叫做key)，也就是说加密的时候使用的秘钥，在解密的时候也要用这个密钥，这种方法在密码学中叫做 对称加密算法 ，

结合自己的理解解释一下vue的工作流程及运行机制

结合自己的理解解释一下vue的工作流程及运行机制 本文主要从以前几个方面来探讨vue.js的设计思想及一些原理，在代码的编写上不会过多阐述，重点讲解其思想： 1.Vue.js的响应式原理，理解为什么修改数据视图会自动更新；怪脸2.虚拟DOM的概念与原理；3.模板编译