重庆市建设工程造价管理站,网站空间商排名,asp.net网站开发实例视频教程,简洁手机购物网站会员中心模板#x1f31f; 前言 欢迎来到我的技术小宇宙#xff01;#x1f30c; 这里不仅是我记录技术点滴的后花园#xff0c;也是我分享学习心得和项目经验的乐园。#x1f4da; 无论你是技术小白还是资深大牛#xff0c;这里总有一些内容能触动你的好奇心。#x1f50d; #x… 前言 欢迎来到我的技术小宇宙 这里不仅是我记录技术点滴的后花园也是我分享学习心得和项目经验的乐园。 无论你是技术小白还是资深大牛这里总有一些内容能触动你的好奇心。 洛可可白个人主页 个人专栏✅前端技术 ✅后端技术 个人博客洛可可白博客 代码获取bestwishes0203 封面壁纸洛可可白wallpaper 文章目录 Mock.js 基本语法与应用笔记1. Mock 基本语法生成指定字符生成随机字符生成标题和句子生成段落生成数字生成增量 ID身份证号、姓名、地址生成图片生成时间指定数组返回的长度和范围 2. Mock 拦截请求3. Vue 中测试4. 另一种使用方式5. vite 项目 往期精彩回顾 Mock.js 基本语法与应用笔记
Mock.js 是一个基于 JavaScript 的模拟数据生成库它可以帮助开发者在前端开发过程中模拟后端API提供测试数据。Mock.js 的主要功能是生成各种类型的模拟数据包括文本、数字、日期、数组等同时也支持拦截请求和响应使得前端可以在不依赖后端API的情况下进行开发和测试。
1. Mock 基本语法
生成指定字符
import Mock from mockjs;const data Mock.mock({str:
});console.log(data);指定字符和具体个数
const data Mock.mock({str|3:
});指定字符和区间
const data Mock.mock({str|3-5:
});生成随机字符
const data Mock.mock({// 一串字母str: word// 一个汉字// str: cword
});指定个数
const data Mock.mock({// 3 个中文汉字str|3: cword// str: cword(3)
});指定区间
const data Mock.mock({// 3 到 5 个中文字符str|3-5: cword// str: cword(3, 5)
});生成标题和句子
const data Mock.mock({title: ctitle,sentence: csentence
});可以指定标题和句子的汉字长度和范围
// 长度
const data Mock.mock({title: ctitle(3),sentence: csentence(10)
});// 范围
const data Mock.mock({title: ctitle(3, 5),sentence: csentence(10, 15)
});生成段落
const data Mock.mock({content: cparagraph
});指定段落的个数和范围
// 注意这里 3 代表的是 3 个段落而不是 3 个中文字符
// 1 个句号是 1 段
const data Mock.mock({content: cparagraph(3)
});生成数字
生成指定数字
const data Mock.mock({// number: 20,// 如果是数值型的 value 将失去意义最终都表示竖线右边的 20一般写个 1number|20: 1
});生成数字区间
const data Mock.mock({number|1-10: 1
});生成增量 ID
for (let i 0; i 10; i) {const data Mock.mock({// 默认 1每次增加 1// id: increment// 每次增加 10id: increment(10)});console.log(data);
}身份证号、姓名、地址
const data Mock.mock({id: id,name: cname,address: city(true)
});生成图片
const data Mock.mock({// 大小、背景色、前景色、格式、文字// 注意颜色要是十六进制不支持关键字例如 redimage: image(200x200, #f00, #fff, jpg, H)
});生成时间
const data Mock.mock({time1: date, // 年-月-日time2: date(yyyy-MM-dd HH:mm:ss)
});指定数组返回的长度和范围
const data Mock.mock({list|1-3: [{name: cname,address: city(true),id: increment(1)}]
});2. Mock 拦截请求
增
POST /api/users
Mock.mock(/^\/api\/users/, post, (options) {const user JSON.parse(options.body);user.id data.list.length ? data.list[data.list.length - 1].id 1 : 1;data.list.push(user);return {status: 200};
});删
DELETE /api/users/:id
Mock.mock(/^\/api\/user\/./, delete, (options) {const id options.url.split(/).pop();// !注意 id 变成了字符串const idx data.list.findIndex((item) item.id id);data.list.splice(idx, 1);return {status: 200};
});改
PUT /api/users/:id
Mock.mock(/^\/api\/users\/./, put, (options) {const user JSON.parse(options.body);const idx data.list.findIndex((item) item.id user.id);data.list[idx] user;return {status: 200};
});查
GET /api/users
Mock.mock(/^\/api\/user/, get, (options) {const {pagenum,pagesize,query,id} qs.parse(options.url.split(?)[1]);if (id) {const user data.list.find((item) item.id id);return {status: 200,user};}// 1 10 0 ~ 10// 2 10 10 ~ 20const start (pagenum - 1) * pagesize;const end pagenum * pagesize;const total data.list.length;const totalPage Math.ceil(data.list.length / pagesize);let list [];if (pagenum totalPage) {list [];} else {list data.list.slice(start, end);}return {status: 200,list,total};
});GET /api/users/:id
Mock.mock(/^\/api\/users\/./, get, (options) {const id options.url.split(/).pop();const user data.list.find((item) item.id id);return {status: 200,user};
});3. Vue 中测试
User.vue
templatediv classusersel-card classbox-cardel-table :datatableData stylewidth: 100%el-table-column propdate label日期 width180 /el-table-column propname label姓名 width130 /el-table-column propaddress label地址 width180 /el-table-columnfixedrightlabel操作width80alignrighttemplate slot-scopescopeel-buttonclickdeleteRow(scope.row)typetextsizesmall删除/el-button/template/el-table-column/el-tableel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pageq.pagenum:page-sizes[5, 10, 15, 20]:page-sizeq.pagesizelayouttotal, sizes, prev, pager, next, jumper:totaltotal/el-pagination/el-card/div
/templatescript
import axios from axios;
export default {data() {return {tableData: [],q: {pagenum: 1,pagesize: 5,query: },total: 0};},created() {this.getUsers();},methods: {async getUsers() {const {data: { list, total }} await axios.get(/api/users, {params: this.q});this.tableData list;this.total total;},handleSizeChange(pagesize) {this.q.pagesize pagesize;this.getUsers();},handleCurrentChange(pagenum) {this.q.pagenum pagenum;this.getUsers();},async deleteRow({ id }) {const { data } await axios.delete(/api/user/${id})if (data.status 200) {this.getUsers();this.$message.success(删除成功);}}}
};
/script
style
.box-card {margin: 40px auto 0;width: 630px;
}
.clearfix:before,
.clearfix:after {display: table;content: ;
}
.clearfix:after {clear: both;
}
.el-pagination {margin-top: 15px;
}
/style4. 另一种使用方式
vue.config.js
const qs require(querystring);
const Mock require(mockjs);
const data Mock.mock({list|27: [{id: increment(1),date: date(yyyy-MM-dd hh:mm:ss),name: cname,address: city(true)}]
});
module.exports {devServer: {before(app) {app.get(/api/users, (req, res) {const { pagenum, pagesize, query } qs.parse(req.url.split(?)[1]);const start (pagenum - 1) * pagesize;const end pagenum * pagesize;const total data.list.length;const totalPage Math.ceil(data.list.length / pagesize);let list [];if (pagenum totalPage) {list [];} else {list data.list.slice(start, end);}res.send({status: 200,list,total});});app.delete(/api/users/:id, (req, res) {const idx data.list.findIndex((item) item.id req.params.id);data.list.splice(idx, 1);res.send({status: 200});});}}
};5. vite 项目
vite.config.js
import { defineConfig } from vite;
import vue from vitejs/plugin-vue;
import { viteMockServe } from vite-plugin-mock;// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),viteMockServe({mockPath: mock,localEnabled: true,}),],
});mock/index.js
import Mock from mockjs
// 内存模拟数据
const arr []
for (let i 0; i 10; i) {arr.push({id: Mock.mock(guid),name: Mock.mock(cname),place: Mock.mock(county(true)),})
}
export default [{url: /list,method: get,response: () {return arr}},{url: /del,method: delete,response: ({query}) {const index arr.findIndex((item) item.id query.id)arr.splice(index, 1)return { success: true }}}
]如果对你有帮助点赞、收藏、关注是我更新的动力 往期精彩回顾 VS Code上搭建Vue开发环境 文章浏览阅读10.1k次点赞64次收藏13次。 Color-UI 简介及使用教程 文章浏览阅读5.9k次点赞13次收藏2次。 Vue.2Vue.3项目引入Element-UI教程踩坑 文章浏览阅读9.2k次点赞82次收藏22次。 VS code搭建C/C运行环境简单易上手 文章浏览阅读2.7k次点赞8次收藏5次。 入门指南使用uni-app构建跨平台应用 文章浏览阅读1.2k次点赞29次收藏9次。
