二、在jQuery中使用mockjs
生活随笔
收集整理的這篇文章主要介紹了
二、在jQuery中使用mockjs
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
在jQuery項目中使用mock.js
步驟1.搭建項目
步驟1.1創(chuàng)建項目
新建文件夾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結(jié)合
步驟2.1書寫mock/index.js
Mock.mock('/user/userInfo', 'get', {id: "@id()", //得到隨機的idusername: "@cname()", //隨機生成中文名字date: "@date()", //隨機生成日期avator: "@image('200x200','#50B347','#fff','avatar')", //生成圖片，參數(shù)：size,background,foreground,textdescription: "@paragraph()", //描述ip: "@ip()", //IP地址email: "@email()" //email })步驟2.2使用jQuery發(fā)送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 重新打開網(wǎng)頁驗證是否可以獲取到mock服務(wù)器返回給前端的數(shù)據(jù)
步驟3.4 將全局變量MOCK的值改為false,再次驗證：
發(fā)現(xiàn)無法訪問到mock響應(yīng)的數(shù)據(jù)，說明mockjs移除成功！！！
總結(jié)：
總結(jié)
以上是生活随笔為你收集整理的二、在jQuery中使用mockjs的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： React中的CSS——styled-c
- 下一篇： 智能车的转弯部分_江西智能搬运平板车铁路