备案用的网站建设方案书,温州做模具的网站,it外包是什么意思,建设速干裤移动网站mock官网#xff1a;http://mockjs.com/
一、搭建一个练习项目
1.利用vue的项目脚手架进行搭建
命令#xff1a; vue create mock-demo 截图#xff1a; 2.安装相关的依赖
命令#xff1a;
#使用 axios 发送 ajax
npm install axios --save
#使用 mock.js 产生随机数据…mock官网http://mockjs.com/
一、搭建一个练习项目
1.利用vue的项目脚手架进行搭建
命令 vue create mock-demo 截图 2.安装相关的依赖
命令
#使用 axios 发送 ajax
npm install axios --save
#使用 mock.js 产生随机数据
npm install mockjs --save-dev
#使用 json5 解决json 文件无法添加注释问题
npm install json5 --save-dev二、学习mockjs
新建mock文件夹新建testMock.js
mock语法定义
const Mock require(mockjs) //导入mockjs以来模块
let id Mock.mock(id)//得到随机的id,字符串
// console.log(id);//测试
let obj Mock.mock({id:id(), //得到随机的idusername:cname(),//随机生成中文名字date:date(),//随机生成日期avata:image(200x200,red,#fff,avatar),//生成图片参数size,background,foreground,textdescrtption:paragraph(),//描述ip:ip(),//ip地址email:email()//email
})
console.log(obj);以上代码的随机生成位置还需要自己去官方文档查看谢谢
三、在mockjs中使用json5的操作
通过上面 json5 模块的安装后还需要相应的 vscode 插件 1.设置一个json5文件 2.设置一个js文件通过 fs \ path 查询 之前设置的 json5 文件夹
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kb0J1jjx-1599721543422)(C:\Users\wangyu123\AppData\Roaming\Typora\typora-user-images\image-20200910121003639.png)]
3.在mock文件夹下通过终端获取得到 “字符串形式的结构” 4.在testJSON5.js文件中引入 模块 json5然后利用json的parse() 方法进行字符串转对象的形式输出 修改前后的对比 _在vue项目中使用mock.js_通过devServer配置监听mock请求
1.在新建的vue.config.js文件中进行devServer的配置
module.exports {devServer: {...,before: require(./mock/index.js)//引入mock/index.js},
}2.在mock文件夹下创建 index.js 并引入代码
const fs require(fs) //文件名称
const path require(path)//文件路径
const Mock require(mockjs)//导入mock 依赖
const JSON5 require(json5);//导入json5// 读取json文件
function getJsonFile(filePath){// 读取指定json文件const json fs.readFileSync(path.join(__dirname,./userinfo.json5),utf-8)// console.log(json);// 解析并返回return JSON5.parse(json)// console.log(obj);
}// 返回一个函数
module.exports function(app){// 监听http请求app.get(/user/userinfo, function(rep,res){// 每次响应请求时读取 mock data 的json 文件// getJsonFile 方法定义了如何读取json 文件并解析成数据对象var json getJsonFile(./userinfo.json5);// 将 json 传入 Mock.mock方法中生成的数据返回给浏览器res.json(Mock.mock(json));});
}3.在vue项目中使用mock.js_axios发送请求获取mock提供的数据
3.1 在项目文件夹的HelloWorld.vue文件夹中发送请求
代码设置为
export default {name: HelloWorld,props: {msg: String},mounted:{axios.get(/user/userinfo).then(res {console.log(res) }).catch(err {console.log(err) })}
}获取到数据为 4.在vue项目中使用mock.js_mock移除当后台接口已写好的时候移除
4.1 通过设置 vue cli 的环境变量进行设置
先进行环境变量的判断 在根目录设置 .env.development 文件 设置环境变量的去向值 5.在vue项目中使用mock.js_mock-json5-devServer-axios职责 6.在jQuery项目中使用mock.js_mock拦截请求的原理 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentIEedgetitleDocument/titlescript srchttps://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js/scriptscript srchttp://mockjs.com/dist/mock.js/script
/head
body/body
/html7.在jQuery项目中使用mock.js_使用mock
Mock.mock(/user/userinfo,get,{id:id(), //得到随机的idusername:cname(),//随机生成中文名字date:date(),//随机生成日期avata:image(200x200,red,#fff,avatar),//生成图片参数size,background,foreground,textdescrtption:paragraph(),//描述ip:ip(),//ip地址email:email()//email
})6.2 发送 jQuery 的ajax 请求
script src./index.js/script
script$.ajax({url:/user/userinfo,dataType:json,success:(data) {console.log(data);}})
/script8.在jQuery项目中使用mock.js_移除mock
8.1 : 直接注释或删除引入的mock.js文件
8.2在编译的mockjs文件中设置判断 8.在jQuery项目中使用mock.js_移除mock
8.1 : 直接注释或删除引入的mock.js文件
8.2在编译的mockjs文件中设置判断
