网站开发实用技术相关论文,常州网站建设公司,网站定制哪家正规,网络黄页进入有限公司文章目录前言Mock概述mock.js安装Mock规范Mock的使用总结前言 当下采用前后端分离模式开发Web应用已经成为气候#xff0c;在开发阶段有一个不成文的规定则是 项目开发后端先行 但是作为前端开发工程师的我们#xff0c;难道在搭建完页面后只能等待后端的接口么#xff1f;… 文章目录前言Mock概述mock.js安装Mock规范Mock的使用总结前言 当下采用前后端分离模式开发Web应用已经成为气候在开发阶段有一个不成文的规定则是 项目开发后端先行 但是作为前端开发工程师的我们难道在搭建完页面后只能等待后端的接口么这样的话我们则完全被后端开发限制住了。 但其实我们只需要同后端同学商议决定好接口返回的数据格式我们就可以并行开发。很多同学则在开发中则会使用定义变量写好数据模拟接口返回的数据进行前端渲染工作完全是可以的但是有没有更加专业的手段或者技术呢 当然有那就是我们的 Mock 下面让我们来看一下前端人最后的倔强吧 Mock概述 mock模仿的;虚假的;不诚实的这是mock作为单词的翻译当然他的用途也是如同他的翻译一样就是模拟接口、数据其实mock的出现就是前后端分离后为前端不受制于后端同学的束缚而出现的在实际开发中后端同学有自己的开发节奏不能如我们前端所想几分钟出一个接口可能我们索要接口的时候后端同学还在构思如何建表 而mock则避免了我们对后端同学催促的尴尬他就可以完成模拟接口让前后端并行开发提高我们的开发效率不被后端拖节奏。 mock即mock.js他的流程就是 前端发送请求到后端 》mock.js拦截请求》并返回模拟数据给前端。至于数据我们事先只需要与后端同学定义好格式即可mock.js会通过法则为我们生成比较贴近真实数据的模拟数据。看到这里你是不是对mock属实有点心动了呢下面就让我们来看一下mock.js运用到项目中。 mock.js安装 我们可以看到官网上提供了很多关于不同前端项目的安装有兴趣的同学可以看一下如果你和博主一样想在Vue项目中去使用的话那么就跳过下面这张图片我们看下面步骤 下面就以Vue为例子来为大家演示 1、创建vue项目 我们利用vue脚手架创建一个项目不会访问这篇文章https://blog.csdn.net/JHXL_/article/details/107631123 2、项目中安装mock.js和axios 因为我们的mock是拦截请求所以我们需要安装axios进行请求当然使用原生的ajax也是可以的 npm i mockjs -D npm i axios3、安装成功后我们运行项目 npm run serveMock规范 说明本小节依照官网所以很多规范大家看不透彻没有关系我们可以跳过此小节先看下节的mock的使用 Mock.js 的语法规范包括两部分 数据模板定义规范Data Template DefinitionDTD 数据模板中的每个属性由 3 部分构成属性名、生成规则、属性值 // 属性名 name // 生成规则 rule // 属性值 value name|rule: value注意 属性名 和 生成规则 之间用竖线 | 分隔。 生成规则 是可选的。 生成规则 有 7 种格式 ‘name|min-max’: value ‘name|count’: value ‘name|min-max.dmin-dmax’: value ‘name|min-max.dcount’: value ‘name|count.dmin-dmax’: value ‘name|count.dcount’: value ‘name|step’: value 生成规则 的 含义 需要依赖 属性值的类型 才能确定。 属性值 中可以含有 占位符。 属性值 还指定了最终值的初始值和类型。 数据占位符定义规范Data Placeholder DefinitionDPD 占位符 只是在属性值字符串中占个位置并不出现在最终的属性值中。 占位符 的格式为 占位符 占位符(参数 [, 参数])注意 用 来标识其后的字符串是 占位符。 占位符 引用的是 Mock.Random 中的方法。 通过 Mock.Random.extend() 来扩展自定义占位符。 占位符 也可以引用 数据模板 中的属性。 占位符 会优先引用 数据模板 中的属性。 占位符 支持 相对路径 和 绝对路径。 Mock.mock({name: {first: FIRST,middle: FIRST,last: LAST,full: first middle last} }) // {name: {first: Charles,middle: Brenda,last: Lopez,full: Charles Brenda Lopez} }上面这些呢只是简单的介绍了一下mock的规范但其实他是有很多法则的我们可以到官方来去看看掌握这些法则后我们能够模拟的数据就会更加真实更加繁琐的数据都可以轻松生成 https://github.com/nuysoft/Mock/wiki/Syntax-Specification Mock的使用 1、创建mock文件 在src文件夹下面创建mock文件夹在mock文件夹中创建json文件夹在mock文件夹中创建index.js文件 2、在mock下面的index.js中引入mock并创建mock响应内容 // 引入 mock.js const Mock require(mockjs) //Mock.mock 接口请求方式返回数据数据就是json文件夹中的文件自行添加 Mock.mock(/user/list, get, require(./json/userList))说明Mock.mock() 此方法就是匹配我们的请求进行拦截然后返回模拟数据有如下几种形式 Mock.mock( rurl, template )记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时将根据数据模板 template 生成模拟数据并作为响应数据返回。 Mock.mock( rurl, function( options ) )记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时函数 function(options) 将被执行并把执行结果作为响应数据返回。 Mock.mock( rurl, rtype, template )记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时将根据数据模板 template 生成模拟数据并作为响应数据返回。 Mock.mock( rurl, rtype, function( options ) )记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时函数 function(options) 将被执行并把执行结果作为响应数据返回。 当然我们的Mock还有好几种方法更多方法可以去官网了解一下哦 3、我们在mock文件夹下面的json文件夹下创建我们引用的userList.json {status: 0,data|10: [{id|1: 1001,company: 10001,username: ceshi1,age: 25}],msg: }4、接着我们就去我们的页面中测试请求 找到我们页面因为我们是新建的项目 所以我们删除页面中的东西 换成清爽的内容 然后我们引入axios并注册事件就可以发送请求了 templatedivdiv clickbtnClick classbtn这是测试/div/div /templatescript import axios from axios;export default {data() {return {};},methods: {async btnClick() {const res await axios.get(/user/list);console.log(res.data.data);},}, }; /scriptstyle /style然后我们点击发现还是请求了接口这是为什么呢原来是我们前面少了一个步骤那就是我们需要在main中去引用我们的mock 再次尝试成功 总结 通过上面的使用可以看到我们前端发送的请求只要被我们的 Mock.mock 方法中的url匹配上就会被mock拦截我们可以自行验证当我们使用mock并匹配上url后我们的network中是没有请求了mock会根据我们定义的此条url的法则去返回对应的数据在实际开发中其实前端很多后期工作都是在调试通接口后根据返回的数据进行的通过mock我们前端就不会过多的依赖后端接口只要知道后端返回数据的格式我们自己就可以通过mock.js自己生成数据进行模拟接口从而在接口调通前我们也可以自己进行数据渲染和调试工作