二、在jQuery中使用mockjs

在jQuery项目中使用mock.js

步骤1.搭建项目

步骤1.1创建项目

新建文件夹jquery-mock-demo

步骤1.2新建index.html,引入jquery.js文件和mock.js

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script><script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script></head><body></body>
</html>

步骤2.mock和jQuery结合

步骤2.1书写mock/index.js
Mock.mock('/user/userInfo', 'get', {id: "@id()", //得到随机的idusername: "@cname()", //随机生成中文名字date: "@date()", //随机生成日期avator: "@image('200x200','#50B347','#fff','avatar')", //生成图片,参数:size,background,foreground,textdescription: "@paragraph()", //描述ip: "@ip()", //IP地址email: "@email()" //email
})

在这里插入图片描述

步骤2.2使用jQuery发送ajax请求
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script><script src="https://cdn.bootcss.com/Mock.js/1.0.0/mock-min.js"></script></head><body></body><script src="./mock/index.js"></script><script>$.ajax({url: '/user/userInfo',dataType: 'json',success: (data) => {console.log(data)}})</script>
</html>

在这里插入图片描述

在这里插入图片描述

步骤3 移除Mock

通过添加全局变量ENV来判断

步骤3.1 修改index.html文件,增加全局变量ENV

在这里插入图片描述

步骤3.2 修改index.js文件:

增加if判断
在这里插入图片描述

步骤3.3 重新打开网页验证是否可以获取到mock服务器返回给前端的数据

在这里插入图片描述

步骤3.4 将全局变量MOCK的值改为false,再次验证:

在这里插入图片描述
在这里插入图片描述

发现无法访问到mock响应的数据,说明mockjs移除成功!!!

总结:

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470786.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

决策树相关知识小结

前言 本文是一篇关于决策树方面知识的小结&#xff0c;不包含具体的例子&#xff08;想看例子推荐文献[1]的第4章&#xff09;&#xff0c;主要总结了ID3、C4.5和CART树三者的区别&#xff0c;剪枝处理&#xff0c;连续值和缺失值的处理。 决策树的基本算法 决策树的学习目的…

Android 中如何计算 App 的启动时间?

&#xff08;转载&#xff09; 已知的两种方法貌似可以获取&#xff0c;但是感觉结果不准确&#xff1a;一种是&#xff0c;adb shell am start -w packagename/activity,这个可以得到两个值&#xff0c;ThisTime和TotalTime&#xff0c;不知道两个有什么区别&#xff0c;而且与…

项目实战:Express实现学生管理系统(CRUD)

一、起步 初始化 npm init -y 生成package.json文件 模板处理 cnpm install express --save cnpm install bootstrap --savenpm install --save art-template npm install --save express-art-template//两个一起安装 npm i --save art-template express-art-template文件目录…

2016年度 JavaScript 展望(下)

【编者按】本文作者为资深 Web 开发者 TJ VanToll, TJ 专注于移动端 Web 应用及其性能&#xff0c;是《jQuery UI 实践》 一书的作者。 本文系 OneAPM 工程师编译呈现&#xff0c;以下为正文的第二部分。点此阅读第一部分。 本地移动 apps 在2015年&#xff0c;出现了一种新的基…

LeetCode547. Friends Circles 利用union find | bfs | dfs三种方法解决

问题来源 此题来源于LeetCode547. Friend Circles&#xff0c;主要运用了并查集&#xff08;union find&#xff09;、广度优先遍历&#xff08;bfs&#xff09;和深度优先遍历&#xff08;bfs&#xff09;三种方法解决。 问题简述 给定一个NN的矩阵M表示了N个人之见的朋友关…

Python模块之MyQR——制作个性化动态二维码(超详细)

一、首先安装MyQR 第一种方式&#xff1a;cmd 命令行输入 pip install MyQR 第二种方式&#xff1a;pyCharm中手动选择进行安装 二、 myqr.run() 函数里面的参数 三、编写代码 # encodingutf-8 from MyQR import myqrmyqr.run(words"https://blog.csdn.net/weixin_448…

地址选择控件开发-

先睹为快 闲话少说&#xff0c;我们先来看看今天我们研究的控件的最终效果图(参照天猫的送货地址设置的效果)&#xff1a; “地址选择Web控件”的基本组成&#xff1a; 使用控件举例&#xff1a; <!--需要加载和引用的文件--> <link rel"stylesheet" href&q…

逻辑回归(logistic regression)的本质——极大似然估计

文章目录1 前言2 什么是逻辑回归3 逻辑回归的代价函数4 利用梯度下降法求参数5 结束语6 参考文献1 前言 逻辑回归是分类当中极为常用的手段&#xff0c;因此&#xff0c;掌握其内在原理是非常必要的。我会争取在本文中尽可能简明地展现逻辑回归(logistic regression)的整个推导…

使用mongoose 在 Node中操作MongoDB数据库

MongoDB 关系型和非关系型数据库 关系型数据库&#xff08;表就是关系&#xff0c;或者说表与表之间存在关系&#xff09;。 所有的关系型数据库都需要通过sql语言来操作所有的关系型数据库在操作之前都需要设计表结构而且数据表还支持约束 唯一的主键默认值非空 非关系型…

回调和异步

// 回调函数&#xff1a;一个函数中调用传入的另一个函数 // 这里的callback就是个回调函数 function we(callback,something){something" is cool";callback(something); }function learn(something){console.log(something); }we(learn,"node.js"); //第…

pip install时发生raise ReadTimeoutError(self._pool, None, 'Read timed out.')的解决方案

问题描述 在windows下&#xff0c;python在安装一些包的时候&#xff0c;常常会碰到time out的情况&#xff0c;如下图所示。不管再重试几次都是如此&#xff0c;这时候该怎么办呢&#xff1f; 解决方案 方案一&#xff1a;更换安装源&#xff08;推荐使用豆瓣源&#xff09…

使用Node 操作MySQL数据库

1. 安装 官方文档&#xff1a;https://www.npmjs.com/package/mysql npm install --save mysql2.代码演示 var mysql require(mysql);// 1.创建连接 var connection mysql.createConnection({host : localhost,user : root,password : root,database : my_db …

利用随机森林对特征重要性进行评估

文章目录1 前言2 随机森林&#xff08;RF&#xff09;简介3 特征重要性评估4 举个例子5 参考文献1 前言 随机森林是以决策树为基学习器的集成学习算法。随机森林非常简单&#xff0c;易于实现&#xff0c;计算开销也很小&#xff0c;更令人惊奇的是它在分类和回归上表现出了十…

个人博客总结3

一&#xff0e;昨天做了什么&#xff1f; 昨天利用安卓连接数据库完成一个图片的保存的程序例子&#xff0c;为我们的团队作业刷脸将人脸图片保存到数据中打下基础。 创建了一个相片和数据库保存和查询的工程创建了一个数据库然后将图片保存到数据库中&#xff0c;先将图片转化…

Promise学习——解决回调地狱问题

Promise promise 容器概念&#xff1a; callback hell&#xff08;回调地狱&#xff09;: 文件的读取无法判断执行顺序&#xff08;文件的执行顺序是依据文件的大小来决定的&#xff09;(异步api无法保证文件的执行顺序) var fs require(fs);fs.readFile(./data/a.text,ut…

基于哈希表的索引堆变形(Hackerrank: QHEAP1)

问题来源 此题来自于Hackerrank中的QHEAP1问题&#xff0c;考查了对堆结构的充分理解。成功完成此题&#xff0c;对最大堆或者最小堆的基本操作实现就没什么太大问题了。 问题简述 实现一个最小堆&#xff0c;对3种类型的输入能给出正确的操作&#xff1a; “1 v” - 表示往…

Node 中的path模块

参考文档&#xff1a;https://nodejs.org/docs/latest-v13.x/api/path.html path模块中的常用API&#xff1a; path.basename&#xff1a;获取路径的文件名&#xff0c;默认包含扩展名path.dirname&#xff1a;获取路径中的目录部分path.extname&#xff1a;获取一个路径中的扩…

利用回溯法解决1-9之间添加+或-或使得运算结果为100的问题

问题描述 编写一个在1&#xff0c;2&#xff0c;…&#xff0c;9&#xff08;顺序不能变&#xff09;数字之间插入或-或什么都不插入&#xff0c;使得计算结果总是100的程序&#xff0c;并输出所有的可能性。例如&#xff1a;1 2 34 – 5 67 – 8 9 100。 问题分析 这时…

Atitit。数据库 安全性 重要敏感数据加密存储解决方案

Atitit。数据库 安全性 重要敏感数据加密存储解决方案 1.1. 加密存储的重要性1 1.2. 使用的加密算法aes1 1.3. 数据加密以后会有一些问题。1 1.3.1. 一个是统计&#xff0c;比如统计资金总额。。就无法直接使用sql的sum等数据库内部聚合函数来处理了。。1 1.3.2. 还有一个就是按…

Node中的fs模块

1.fs.stat检测是文件还是目录 2.fs.mkdir创建目录 3.fs.writeFile创建写入文件 4.fs.appendFile追加文件 5.fs.readFile 读取文件 6.fs.readdir读取目录 7.fs.rename重命名 8.fs.rmdir删除目录 9.fs.unlink 删除文件 fs.stat 检测是文件还是目录 const fs require(fs)fs.stat…