mock.js相关学习

最新推荐文章于 2024-07-24 10:40:52 发布
最新推荐文章于 2024-07-24 10:40:52 发布
阅读量45 收藏
点赞数 1
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45587805/article/details/131845529
版权

环境搭建

  1. 安装mock.js：命令：npm i mockjs
  2. 安装axios：命令：npm i axios

Mock语法规范

mock.js的语法规范包含两部分：

  1. 数据模版定义规范（DTD）
  2. 数据占位符定义规范（DPD）

数据模版定义规范

  1. 数据模版的每个属性有3个部分构成，属性名、生成规则、属性值
  2. 比如：‘name|rule’:value
    a. 属性名：name
    b. 生成规则：rule
    c. 属性值：value
  3. 注意事项：
    a. 属性名和生成规则之间用竖线|分隔
    b. 生成规则是可选的
    c. 生成规则是由7种格式的
    ⅰ. ‘name|min-max’:value
    ⅱ. name|count’:value
    ⅲ. name|min-max.dmin-dmax’:value
    ⅳ. name|min-max.dcount’:value
    ⅴ. name|count.dcount’:value
    ⅵ. name|+step’:value
    d. 生成规则的含义需要依赖属性值的类型才能确定
    ⅰ. 属性值用可以含有@占位符
    ⅱ. 属性值还指定了最终值的初始值和类型
  4. 生成规则和示例：
    a. 属性值是字符串 String
    ⅰ. ‘name|min-max’:string：通过重复string生成一个字符串，重复次数发育等于min，小于等于max
    ⅱ. name|count’:string：通过重复string生成一个字符串，重复次数等于count
    b. 属性值是数字类型 Number
    ⅰ. name|+1’:number：属性值自动加1，初始值为number
    ⅱ. ‘name|min-max’:number：生成一个大于等于min、小于等于max的整数，属性值number只是用来确定类型的
    ⅲ. name|min-max.dmin-dmax’:number：生成一个浮点数，整数的部分大于等于min、小于等于max，小数部分保留dmin到dmax
Mock.mock({
  'number1|1-100.1-10':1,
   'number2|123.1-10':1,
  'number3|123.3':1,
    'number4|123.10':1,
  
})

==>{
  number1:12.92,
  number2:123.51,
  number3:123.777,
  number4:123.1231031814
  
}

c. 属性值是布尔类型 Boolean
ⅰ. ‘name|1’:boolean：随机生成一个布尔值，值为true的概率是1/2,值为false的概率同样是1/2
ⅱ. ‘name|min-max’:value：随机生成一个布尔值，值为 value 的概率是 min / (min + max)，值为 !value 的概率是 max / min+max).
d. 属性值是对象 Object
ⅰ. ‘name|count’:object：从属性值 object 中随机选取 count 个属性
ⅱ. ‘name|min-max’:object：从属性值 object 中随机选取 min 到 max个属性
e. 属性值为数组Array
ⅰ. ‘name|1’:array：从属性值 array 中随机选取 1个元素，作为最终值
ⅱ. ‘name|+1’:array：从属性值 array 中顺序选取 1个元素，作为最终值
ⅲ. ‘name|min-max’:array：通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于max。
ⅳ. ‘name|count’:array：通过重复属性值 array 生成一个新数组，重复次数为 count。
f. 属性值是函数 function
ⅰ. ‘name’:function ：执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性 name 所在的对象
g. 属性值为正则表达式：RegExp
ⅰ. ‘name’:regexp：根据正则表达式 regexp 反向生成可以匹配它的字符串。用于生成自定义格式的字符串
ⅱ. 例如：

Mock.mock({
  'regexp1':/[a-z][A-Z][0-9]/,
   'regexp2':/\2\W\s\S\d\D/,
   'regexp3':/\d{5,10}/,
  
})

==>{
 	regexp1：pJ7,
	regexp2：F)\fp1G,
    regexp3:561659409
  
}

数据占位符定义规范

  1. 占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中
  2. 占位符的格式为:
    a. @占位符
    b. @占位符（参数 [，参数]）
  3. 注意：
    a. 用@来标识其后的字符串是 占位符
    b. 占位符引用的是 Mock.Random 中的方法
    c. 通过 Mock.Random.extend() 来扩展自定义占位符
    d. 占位也可以引用数据中的属性
    e. 占位符会优先引用数据模板中的属性
    f. 占位符支持 相对路径和绝对路径

模拟请求get、post

<script setup lang="ts">
import axios from 'axios'

import Mock from 'mockjs'
// 模拟get请求
var { userdata, newList, logininfo } = Mock.mock({
  'userdata|1-10': [
    {
      'id|+1': 1,
      name: '@cname',
      'age|18-60': 1,
      email: '@email(163.com)',
      address: '@city(true)',
      'sex|1': ['男', '女']
    }
  ],
  'newList|20-30': [
    {
      // @increment(1)自增1
      id: '@increment(1)',
      title: '@ctitle',
      date: '@date(yyyy-MM-dd HH:mm:ss)',
      // cparagraph,句子在1到3句
      info: '@cparagraph(1,3)',
      avatar: '@image(150X150)'
    }
  ],
  'logininfo|1': [
    {
      'name|1': 'zhangsan',
      'password|1': '123456',
      'age|1': 25,
      token: '@guid',
      email: '@email(163.com)',
      address: '@city(true)',
      avatar: '@image(150X150)',
      'sex|1': '男'
    }
  ]
})
Mock.mock('/api/userinfo', 'get', () => {
  return {
    code: 200,
    message: '请求成功',
    data: userdata
  }
})
Mock.mock('/api/newList', 'get', () => {
  return {
    code: 200,
    message: '请求成功',
    data: newList
  }
})

// 发送get请求
const btn1 = async () => {
  const res = await axios.get('/api/userinfo')
  console.log(res)
}
const btn2 = async () => {
  const res = await axios.get('/api/newList')
  console.log(res)
}
// post请求，又参数的
Mock.mock('/api/login', 'post', (data) => {
  // 我们获取到的是json格式的字符串，需要转换一下
  const user = JSON.parse(data.body)
  console.log(user)

  if (user.username === 'zhangsan' && user.password == '123456') {
    return {
      code: 200,
      message: '请求成功',
      data: logininfo
    }
  } else if (user.username === 'zhangsan' || user.password! == '123456') {
    return { code: 400, message: '用户密码错误', data: logininfo }
  } else {
    return {
      code: 500,
      error: '账号不存在'
    }
  }
})
const btn3 = async () => {
  const res = await axios.post('/api/login', { username: 'zhangsan', password: 123456 })
  console.log(res)
}
</script>

<template>
  <div>
    <el-button @click="btn1">发送get请求1</el-button>
    <el-button @click="btn2">发送get请求2</el-button>
    <el-button @click="btn3">发送post请求2</el-button>
  </div>
</template>

模拟实现登录功能

  1. 模拟接口

mock/login.ts文件

import Mock from 'mockjs'
export const { logininfo } = Mock.mock({
  'logininfo|1': [
    {
      'name|1': 'zhangsan',
      'password|1': '123456',
      'age|1': '25',
      token: '@guid',
      email: '@email(163.com)',
      address: '@city(true)',
      avatar: '@image(150X150)',
      sex: '男',
})

mock/index.ts文件

import Mock from 'mockjs'
import { logininfo, putong } from './login'
Mock.setup({
  //模拟接口的响应时间
  timeout: 2000
})
Mock.mock('/api/login', 'post', (data) => {
  // 我们获取到的是json格式的字符串，需要转换一下
  const user = JSON.parse(data.body)
  console.log(user)
  if (user.username === 'zhangsan' && user.password == '123456') {
    return {
      success: true,
      code: 200,
      message: '请求成功',
      data: logininfo
    }
  } else if (user.username === 'zhangsan' && user.password !== '123456') {
    return { success: false, code: 400, message: '用户密码错误', data: logininfo }
  }  else {
    return {
      success: false,
      code: 400,
      message: '账号不存在'
    }
  }
})
  1. 封装接口
    登录页面类型声明文件 types/login.d.ts
export type loginfo = {
  username: string
  password: string
}

export type userinfo = {
  name: string
  passwoed: string
  age: string
  token: string
  email: string
  address: string
  avatar: string
  sex: string
}

封装接口api

import request from '@/utils/request'

import type { userinfo, loginfo } from '@/types/login'

export const loginAPI = (data: loginfo) => request.post<userinfo>('/api/login', data)
  1. 调用接口
    登录页面
<script setup lang="ts">
//cpIcon是封装的svg图片的相关组件
import cpIcon from '@/components/cp-icon.vue'
import avatarURL from '@/assets/logo.jpg'
import { loginAPI } from '@/api/login'
import type { loginfo } from '@/types/login'
import { ref, reactive } from 'vue'
import type { ElForm } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { userInfoStore } from '@/stores/index'
// router就是路由实例
const router = useRouter()
const store = userInfoStore()
// 图片地址
const state = ref({
  url: avatarURL
})
const loading = ref<boolean>(false)
// 登录的表单信息
const loginform = ref<loginfo>({
  username: '',
  password: ''
})
// 表单校验
const rules = reactive<InstanceType<typeof FormRules>>({
  username: [{ required: true, message: '请输入账户信息', trigger: ['blur', 'change'] }],
  password: [
    { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
    { min: 5, max: 15, message: '密码必须是5-15位', trigger: ['blur', 'change'] }
  ]
})
// 表单的dom元素
// eslint-disable-next-line no-redeclare
type FormInstance = InstanceType<typeof ElForm>
const loginformref = ref<FormInstance>()
//登录功能的实现核心代码
const login = async (formEl: FormInstance | undefined) => {
  loading.value = true
  if (!formEl) return
  await formEl.validate((valid: any) => {
    if (valid) {
      loading.value = true
      loginAPI(loginform.value)
        .then((res) => {
          store.setuserInfo(res.data)
          router.push('/')
          ElMessage.success('登录成功')
        })
        .catch()
        .finally(() => {
          loading.value = false
        })
      // 如果有回跳地址就进行回跳，没有跳转到首页
      // router.push((route.query.returnUrl as string) || '/')
    } else {
      ElMessage.warning('请输入正确的用户名和密码')
      loading.value = false
    }
  })
}
</script>

<template>
  <div class="login">
    <div class="login-main">
      <el-form :model="loginform" :rules="rules" ref="loginformref">
        <el-form-item>
          <el-avatar :size="128" :src="state.url" />
        </el-form-item>
        <el-form-item prop="username">
        
          <el-input placeholder="账户" v-model="loginform.username">
            <template #prefix>
              <cp-icon name="login-user"></cp-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="密码" type="password" show-password v- model="loginform.password">
            <template #prefix>
              <cp-icon name="login-password"></cp-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item class="check">
          <el-checkbox>自动登录</el-checkbox>
          <el-link type="primary" :underline="false">忘记密码</el-link>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login(loginformref)" :loading="loading">登录</el-button>
        </el-form-item>
        <el-form-item class="register">
          <el-link type="primary" :underline="false">注册账号</el-link>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <!-- <cp-icon name="login-user"></cp-icon> -->
</template>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../icons/login/bg.svg) no-repeat center;
  background-size: 100%;
  .login-main {
    width: 368px;
    .el-avatar {
      margin: 0 auto;
      margin-bottom: 81px;
      border-radius: 50%;
    }
    .el-button {
      width: 368px;
    }
  }
}
::v-deep() {
  .check {
    .el-form-item__content {
      display: flex;
      justify-content: space-between;
    }
  }
  .register {
    .el-form-item__content {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
李喻涵
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建
liaozhixiangjava的博客
09-26 340
Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建Vue Mock.js介绍和使用与首页导航栏左侧菜单搭建
Mock.js的学习分享
ych6666的博客
01-01 199
Mock.js 写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,我结合mock的学习视频和官方文档，来记录mock的学习历程， 1.Mock是啥 Mock.js是模拟JSON数据的前端技术，为什么会产生它呢 对于前后端分离的项目，后端API迟迟没有上线 而前端没有json数据进行填充，自己写后端模拟又太繁重 Mock.js就能解决这个问题，让前端工程师独立做自己！ 它可以生成随机数据！ 2.Mock安装 安装方式，我是在node下运行 安装node下的mock npm inst
玩转Mock.js：构建模拟数据的利器
会思想的苇草i的博客
01-18 2384
在本篇文章中，介绍了Mock的基础知识和语法规范，并探讨了它在前端开发中的重要性。此外还分享了如何结合Axios和Mock快速进行接口测试和开发，以提高前端开发效率。最后对常见的mock方案进行简要概述和对比，分析利弊，希望能在日常开发中帮助到大家。
Mock.js语法使用与学习
weixin_47342624的博客
09-09 999
对Mockjs的学习与总结
Vue小项目Mock.js的学习
weixin_43288858的博客
05-11 341
前后端分离项目 前后端约定好API接口&数据&参数 前后端并行开发，前端工程师只需要编写HTM页面，通过HTTP请求调用后端提供的接口服务即可。后端只要愉快的开发接口就行了。无强依赖，如果需求变更,只要接口和参数不变，就不用两边都修改代码，开发效率高。 除了开发阶段分离、在运行期前后端资源也会进行分离部署。 前后端分离已成为互联网项目开发的业界标准使用方式。传统的前后端混合开发模式，虽然久经考验，到现在依然还是能够支撑起应用的开发。但是放眼未来，社会分工更加精细化，前后端分离开发的精细化
Mock.Js学习报告
qq_44451287的博客
12-26 1010
2021_12_26 Mock.Js学习报告 from GXC Mock.Js背景简介： Mock.Js是一种模拟前后端Ajax数据交互的数据方法结构 在我们进行前端页面开发时，可能会又面临到项目需求中 的功能需要与后台进行数据交换得到数据进行相应数据显示 及数据页面交互，但是当时后端的接口还未实现，无法调取 时，我们可以通过安装Mock.Js实现对于前后端数据交互的 简单模拟。 这只是我对于Mock.Js的一点简单的理解，想要深入了解其深层原理的大神可移步其官方文档 Mock.J
mock.js学习记录
qq_41347964的博客
08-29 381
跟随官网学习mock.js，如何在react项目中使用
通俗易懂：Mock.js 模拟数据生成技巧
02-04 458
在本篇文章中，我们将深入探讨，这是一款在前端开发中广泛应用的工具库，专门用于生成模拟数据和拦截 Ajax 请求。
Vue项目中使用Mock.js进行API模拟
interest_ing_的博客
03-05 879
在开发Vue应用时，我们经常需要模拟API响应，以便在后端服务尚未准备好时进行前端开发。Mock.js是一个强大的工具，可以帮助我们轻松创建模拟数据。本教程将指导你如何在Vue项目中集成和使用Mock.js。
Mock.js入门分享
m0_52043522的博客
04-12 1256
Mock.js学习内容分享
前端项目-Mock.js.zip
09-02
这个压缩包“前端项目-Mock.js.zip”包含了一个名为 "Mock-master" 的文件夹，很可能包含了Mock.js库的源代码、示例、文档等相关资源。 Mock.js 的核心功能是生成模拟数据，它可以生成各种类型的随机数据，如字符串...
Vue+mock.js+axios
11-08
Vue.js 是一个流行的前端...综上所述，"Vue+mock.js+axios"项目展示了前端开发中的常见技术栈，涵盖了前端数据获取、组件化开发、数据模拟和状态管理等多个方面，对于学习和理解现代前端开发流程具有很高的参考价值。
Mock.js的Demo
01-13
1. 定义 Mock 规则的 JavaScript 文件，如 `mock.js`。 2. 前端代码，使用这些模拟数据进行界面渲染和逻辑处理，可能包括 HTML、CSS 和 JavaScript 文件。 3. 可能还有测试脚本，用于验证模拟数据的正确性和前端逻辑...
【JavaScript源代码】使用Mock.js生成前端测试数据.docx
12-29
通过学习和熟练掌握Mock.js，前端开发者可以更加自如地进行页面设计和测试，确保在后端接口准备就绪时，前端部分已经准备好无缝对接。如果你正在处理类似的问题，或者想要提升你的前端开发效率，Mock.js绝对值得你...
Vue2.js 静态购物网站（通过Mock.js模拟请求数据）
08-03
Vue2.js 是一款非常流行的前端JavaScript框架，由尤雨溪开发，用于构建用户界面。它以其易学易用、高效灵活的特点受到了广大开发者喜爱。在这个“Vue2.js 静态购物网站”项目中，我们将深入探讨如何使用Vue2.js构建...
前端面试题日常练-day97 【Less】
qq_44640575的博客
07-20 474
border-radius()函数用于在Less中生成圆形边框效果。通过设置border-radius()函数，我们可以为元素的边框添加圆角效果，使边框呈现圆形的外观，从而美化页面元素的边框样式。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 1003
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
TS如何处理js模块的类型？
最新发布
闻人放歌的三寸青草园圃
07-24 92
【代码】TS如何处理js模块的类型？
Odoo Registry 源码解读：前端世界的魔法师
清水欧度 Odoo ERP
07-23 950
它是连接不同模块的桥梁，是实现灵活扩展的关键，是每个Odoo开发魔法师最强大的盟友。下次当你在编写Odoo模块时，请记住，你手中握着的不仅仅是键盘，而是Registry赋予你的魔法杖。想象一下，它就是Odoo世界里的预言球，所有的秘密都逃不过它的法眼。Registry会用它的魔法排序棒，确保每个生物都按照正确的顺序出场，场面蔚为壮观。Registry会把常用的魔法结果记在它的魔法笔记本里，下次再用时就不用重新计算了，节省了大量的魔法能量。Registry设置了强大的防御魔法，确保没有人能破坏它的魔法秩序。
如何使用Mock.js来mock动态生成数据
03-29
Mock.js可以动态生成各种类型的数据，包括数字、字符串、布尔值、数组、对象等等。以下是使用Mock.js来mock动态生成数据的步骤： 1. 安装Mock.js 可以通过npm安装Mock.js，命令如下： ``` npm install mockjs ``` 也可以在HTML文件中直接引用Mock.js的CDN链接： ``` <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script> ``` 2. 定义Mock数据模板 Mock.js的核心是数据模板，它是一个JavaScript对象，用来描述Mock数据的结构和类型。例如，以下是一个简单的Mock数据模板： ``` var data = { name: '@cname', // 随机生成中文名字 age: '@integer(18, 60)', // 随机生成18到60之间的整数 gender: '@boolean', // 随机生成布尔值 hobbies: ['@word', '@word', '@word'] // 随机生成三个英文单词组成的数组 }; ``` 3. 使用Mock数据模板生成Mock数据 使用Mock.js的`Mock.mock()`方法可以根据数据模板生成Mock数据，例如： ``` var mockData = Mock.mock(data); ``` `mockData`就是根据`data`模板生成的Mock数据。 4. 使用Mock数据 生成Mock数据后，可以将其用于测试、演示或其他目的。例如，将Mock数据渲染到页面中： ``` document.getElementById('name').innerHTML = mockData.name; document.getElementById('age').innerHTML = mockData.age; document.getElementById('gender').innerHTML = mockData.gender ? '男' : '女'; document.getElementById('hobbies').innerHTML = mockData.hobbies.join(', '); ``` 以上就是使用Mock.js来mock动态生成数据的基本步骤。Mock.js还支持更多高级功能，例如数据占位符、数据生成规则、拦截Ajax请求等等，可以根据需要进行学习和使用。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值