当前位置： 首页 > news >正文

新乡高端网站建设,怎么在百度里面找网站,图片瀑布流代码wordpress,wordpress博客密码mock自定义接口完整流程 官网语法规范:https://github.com/nuysoft/Mock/wiki/Syntax-Specification 首先: 要有一个项目,我这里是vue3项目,以下从vue3项目搭建开始,已搭建好的请直接看2 1.空目录下新建vue3项目 运行创建项目命令#xff1a; 在bash中:(文件路径处输入cm…mock自定义接口完整流程 官网语法规范:https://github.com/nuysoft/Mock/wiki/Syntax-Specification 首先: 要有一个项目,我这里是vue3项目,以下从vue3项目搭建开始,已搭建好的请直接看2 1.空目录下新建vue3项目 运行创建项目命令 在bash中:(文件路径处输入cmd回车进入bash)

使用npm

npm create vitelatest

使用yarn

yarn create vite

使用pnpm

pnpm create vite输入项目名称默认是 vite-project 选择前端框架 选择项目语言 我这里暂时选的是js,大家看情况选 创建完毕 进入项目目录,拖入vscode打开

1. 进入vscode进行相关配置下载 npm /yarn 根据各自语法自行下载 打开终端下载依赖 pnpm i 下载mockjs pnpm i mockjs 下载axios pmpn i axios 运行程序(package.json可查看项目启动命令) pnpm run dev 3. mock配置 1)创建文件夹src/mock/index.js 2)在main.js全局引入 import ./mock/index3)在mock/index.js中引入与测试 注意这里的 | 两边不能有空格 //引入mock模块 import Mock from mockjs; const data Mock.mock({string|4: test, //生成4次 }) console.log(data);直接在页面控制台可以看到打印了四次test就是Ok了 4. mock模拟接口发送请求 在mock/index.js中模拟请求 Mock.mock(/api/get/user,get,{status: 200,message: 获取用户信息数据成功 })在vue.app或任意vue页面 templatediv这是vue3的框架!/div /template script setup import axios from axios axios.get(/api/get/user).then(res {console.log(res); }) /script style /style 在页面的控制台可以看到获取成功 5. mock模拟数据发送请求(模拟简单用户信息列表) // 准备数据 const data Mock.mock({list|10-20: [{id: word(10), name: cname,address: city(true), },], });Mock.mock(/api/get/new,get,{status: 200,message: 获取用户信息数据成功,data:data.list })调用 script setup import axios from axios; axios.get(/api/get/new).then(res {console.log(res); }) /script效果 6. mock模拟数据并实现分页获取数据功能(get) 接口地址/api/get/news 接口参数pageindex: 页码 pagesize每页的条数 请求类型GET //引入mock模块 import Mock from mockjs; // 定义数据 const data Mock.mock({newsList|20-30: [{id: increment(),title: ctitle(10,15),content: cparagraph(5,15),img_url: image(100x100,#FFE4B5,#fff,暂无图片),add_time: date(yyyy-MM-dd hh:mm:ss)}] })// 定义分页功能 // 获取参数 const getUrlQuery (url,name) {const index url.indexOf(?)if(index-1){const searchStr url.substr(index1)const searchArr searchStr.split()for(var i0;isearchArr.length;i){const itemArr searchArr[i].split()console.log(name,itemArr[0])if(name itemArr[0]){return itemArr[1]}}} } // 定义获取新闻列表的接口 Mock.mock(/\/api\/get\/news/,get,(options) { // 获取页码 const pageindex getUrlQuery(options.url,pageindex) // 获取每页条数 const pagesize getUrlQuery(options.url,pagesize) // 数据总条数 const total data.newsList.length // 数据总页数 const totalPage Math.ceil(total/pagesize) // 截取的开始位置 const start (pageindex - 1)*pagesize // 截取的结束位置 const end pageindex*pagesize // 数据截取 const list pageindextotalPage?data.newsList.slice(start,end):[] return {status: 200,message: 获取新闻列表成功,list: list,total: total } })调用接口获取数据: // 分页获取数据 axios({url: /api/get/news,method: get,params: {pageindex: 1,pagesize: 10} }).then(res {console.log(res); })效果: 7. mock模拟数据实现添加数据功能(post) 接口地址/api/add/news 接口参数title: 标题 content内容 请求类型POST mock模拟数据: // 添加 Mock.mock(/api/add/news,post,(options) {const body JSON.parse(options.body)const {newsList} datanewsList.unshift(Mock.mock({id: increment(),title: body.title,content: body.content,img_url: image(100x100,#FFE4B5,#fff,暂无图片),add_time: date(yyyy-MM-dd hh:mm:ss)}))return {status: 200,message: 添加成功,list: newsList} })调用接口: // 新增 axios({url: /api/add/news,method: post,data: {title: 标题,content: 内容} }).then(res {console.log(res); })效果: 8. mock模拟数据实现删除数据功能(delete) 接口地址/api/delete/news 接口参数id: 新闻id 请求类型POST mock中: // 删除接口 Mock.mock(/api/delete/news,delete,(options){var body JSON.parse(options.body)const {newsList} dataconst index newsList.findIndex(item{return item.id body.id})newsList.splice(index,1)return {status: 200,message: 删除成功,list: newsList} })调用接口: //删除 axios({url: /api/delete/news,method: delete,data: {id: 1} }).then(res {console.log(res); })效果:
   
2. mock常用语法 (1) 生成字符串 生成指定次数字符串 import Mock from mockJs const data Mock.mock({string|4: 哎呦 })生成指定范围长度字符串 const data Mock.mock({string|1-8: 哎呦 })(2) 生成文本 生成一个随机字符串 const data Mock.mock({string: cword })生成指定长度和范围 const data Mock.mock({string: cword(1),str: cword(10,15) })(3) 生成标题和句子 生成标题和句子 const data Mock.mock({title: ctitle,sentence: csentence })生成指定长度的标题和句子 const data Mock.mock({title: ctitle(8),sentence: csentence(50) })生成指定范围的 const data Mock.mock({title: ctitle(5,8),sentence: csentence(50,100) })(4) 生成段落 随机生成段落 const data Mock.mock({content: cparagraph() })(5) 生成数字 生成指定数字 const data Mock.mock({number|80: 1 })生成范围数字 const data Mock.mock({number|1-999: 1 })(6) 生成增量id 随机生成标识 const data Mock.mock({id: increment() })(7) 生成姓名-地址-身份证号 随机生成姓名-地址-身份证号 const data Mock.mock({name: cname(),idCard: id(),address: city(true) })​(8) 随机生成图片 生成图片image(“300x250”,“#ff0000”,“#fff”,“gif”,“坤坤”) 参数1图片大小 [300x250, 250x250, 240x400, 336x280, 180x150, 720x300, 468x60, 234x60, 88x31, 120x90, 120x60, 120x240, 125x125, 728x90, 160x600, 120x600, 300x600 ]参数2图片背景色 参数3图片前景色 参数4图片格式 参数5图片文字
   (9) 生成时间 Date生成指定格式时间date(yyyy-MM-dd hh:mm:ss) (10) 指定数组返回的条数 指定长度‘data|5’ 指定范围‘data|5-10’ const data Mock.mock({list|50-99:[{name: cname(),address: city(true),id: increment()}] })10. mock拦截请求 见段落4-8