前端mock了所有……

鹤渺2024-09-19 12:44

目录

一、背景描述

二、开发流程

1.引入Mock

2.创建文件

3.需求描述

4.Mock实现

三、总结

一、背景描述

前提：

事情是这样的，老板想要我们写一个demo拿去路演/拉项目，有一些数据，希望前端接一下，写几个表格，画几个图，然后leader们又有其他考量，决定把数据处理完（处理成一群JSON数据）给前端，前端自己写一些查询，分页，绘图，因为数据量不算太大，一个JSON也就最多5MB，所以客户端处理完全OK，于是就这样，前端写所有的一切开始了。

哦，故事的开始是，我使用的是RuoYi的模板，感谢！很规范，让我少了很多繁琐的工作。

二、开发流程

第一步，关于RouYi:若依管理系统

文档：介绍 | RuoYi

第二步，关于Mock:Mock.js

1.引入Mock

因为前端处理所有，所以不是--save dev

复制代码 
npm install mockjs -g

src\main.js

复制代码 
import './mock'; // 执行 mock.js 中的副作用
import Mock from 'mockjs'; // 导入 Mock 对象，我们在main中不使用这个，暂时引入来打印数据，等下就删掉

console.log(Mock);

试试打印Mock，如果出现这些，代表引入正常了：

2.创建文件

创建如下的结构------data是存放我的一些mock数据，modules是不同模块的mock处理。

src\mock\index.js

javascript 复制代码 
import './modules/user' // 引入登录用户模块的 mock 
export default {}

src\mock\modules\user.js

javascript 复制代码 
import Mock from 'mockjs'

// 模拟用户登录数据
Mock.mock('/login', 'post', (options) => {
  const { username, password } = JSON.parse(options.body)
  // 检查用户名和密码
  if (username === 'admin' && password === '123456') {
    return {
      code: 200,
      msg: '登录成功',
      token: '111111' // 模拟一个 token
    }
  } else {
    return {
      code: 500,
      msg: '用户不存在/密码错误'
    }
  }
})

// 模拟路由数据
Mock.mock('/getRouters', 'get', {
  code: 200,
  msg: '操作成功',
  data: [
    {
      name: 'Project',
      path: '/project',
      hidden: false,
      redirect: 'noRedirect',
      component: 'Layout',
      alwaysShow: false,
      meta: {
        title: '项目管理',
        icon: 'form',
        noCache: false,
        link: null
      },
      children: [
        //...
      ]
    },

  ]
})

// 模拟获取用户信息接口
Mock.mock('/api/user/info', 'get', {
  code: 200,
  message: '获取成功',
  data: {
    name: 'admin',
    roles: ['admin'],
    avatar: 'https://example.com/avatar.png'
  }
})

// 模拟用户列表接口
Mock.mock('/api/users', 'get', {
  code: 200,
  message: '获取成功',
  data: Mock.mock({
    'users|10': [
      {
        id: '@id',
        name: '@cname',
        age: '@integer(20, 50)',
        gender: '@pick(["male", "female"])',
        email: '@email'
      }
    ]
  })
})

Mock.mock('/logout', 'post', {
  code: 200,
  message: '退出登录成功'
})

export default Mock

上述的操作都是在基于rouyi的Demo定义的返回值，上面写了一些简单的用户登录和获取路由信息的mock，也就相当于平时跟后端接接口的一些过程，只是这部分前端来写了，比较难的是下面部分，前端处理列表数据，并且进行查询等等处理。

3.需求描述

我需要展示一个项目列表，那么项目列表支持，分页和查询功能。

除此之外，我还需要点击列表的某一行，能显示这一个项目里的角色列表，并且也支持分页查询。

首先，我需要的参数和接口如下：

src\api\project.js

javascript 复制代码 
import request from '@/utils/request'

// 查询项目列表
export function listProject(query) {
  return request({
    url: '/project/list',
    method: 'get',
    params: query
  })
}

// 查询项目内的角色列表
export function listData(query) {
  return request({
    url: '/project/role/data/list',
    method: 'get',
    params: query
  })
}

//query就是下面的queryParams，字段可以根据需求增减
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    projectId: undefined,
    projectStage: undefined,
    firstStartDate: undefined,
    endDate: undefined
  },
  rules: {
    projectName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
  }
})

4.Mock实现

官网上有一个简单的例子：

Mock.mock(/\.json/, function(options) {

return options

})

我这里的数据结构如下：

src\mock\data\projects.json

javascript 复制代码 
[
  {
    "id": 1,
    "projectId": "projectAA",
    "projectName": "测试项目名称",
    "totalCases": 174,
    "firstStartDate": "2022-03-01",
    "endDate": "",
    "projectStage": "正在进行中"
  }
]

src\mock\data\project_role.json

javascript 复制代码 
{
  "projectAA": [
    {
      "id": 1,
      "projectId": "projectAA",
      "roleName": "角色名称111",
      "region": "北区",
      "province": "天津",
      "roleProvince": "天津",
      "roleCity": "天津",
      "department": "管理组",
      "roleStatus": "在组",
      "startDate": ""
    }
  ]
}

有了数据结构，那么根据官网的例子再扩展一番，就能得到以下：

src\mock\modules\project.js

javascript 复制代码 
import Mock from 'mockjs'
const baseUrl = 'http://localhost'

import projectData from '../data/projects.json'

// 项目列表
Mock.mock(/\/project\/list/, 'get', (options) => {
  const url = new URL(options.url, baseUrl)
  const params = new URLSearchParams(url.search)

  const pageNum = params.get('pageNum') || 1
  const pageSize = params.get('pageSize') || 10
  const projectId = (params.get('projectId') || '').toLowerCase()
  const projectStage = (params.get('projectStage') || '').toLowerCase()
  const startDateRange = params.get('firstStartDate') || ''
  const endDateRange = params.get('endDate') || ''

  const filteredProjects = projectData.filter((project) => {
    const projectStartDate = new Date(project.firstStartDate)
    const projectEndDate = new Date(project.endDate)
    const startDate = new Date(startDateRange)
    const endDate = new Date(endDateRange)

    return (
      (!projectId || project.projectId.toLowerCase().includes(projectId)) &&
      (!projectPhase || project.projectPhase.toLowerCase().includes(projectPhase)) &&
      (!projectStage || project.projectStage.toLowerCase().includes(projectStage)) &&
      (!startDateRange || projectStartDate >= startDate) &&
      (!endDateRange || projectEndDate <= endDate)
    )
  })

  const total = filteredProjects.length
  const start = (pageNum - 1) * pageSize
  const end = start + parseInt(pageSize)
  const pageData = filteredProjects.slice(start, end)

  return {
    code: 200,
    msg: '操作成功',
    data: {
      list: pageData,
      total: total,
      allList: filteredProjects
    }
  }
})

import projectAndRoleData from '../data/project_role.json'
Mock.mock(/\/project\/role\/data\/list/, 'get', (options) => {
  const url = new URL(options.url, baseUrl)
  const params = new URLSearchParams(url.search)

  const projectId = (params.get('projectId') || '').toLowerCase()
  const pageNum = parseInt(params.get('pageNum')) || 1
  const pageSize = parseInt(params.get('pageSize')) || 10
  const roleId = (params.get('roleId') || '').toLowerCase()
  const roleName = (params.get('roleName') || '').toLowerCase()
  const department = (params.get('department') || '').toLowerCase()
  

  // 过滤项目数据
  const filteredProjects = Object.keys(projectAndRoleData)
    .filter((key) => !projectId || key.toLowerCase() === projectId) // 按 projectId 筛选
    .map((key) => projectAndRoleData[key]) // 获取 projectId 对应的数据
    .flat() // 将结果从嵌套的数组展平

  // 进一步过滤数据
  const filteredRoles = filteredProjects.filter((role) => {
    return (
      (!roleId || role.roleId.toLowerCase().includes(roleId)) &&
      (!roleName || role.roleName.toLowerCase().includes(roleName)) &&
      (!department || role.department.toLowerCase().includes(department))
    )
  })

  const total = filteredRoles.length
  const start = (pageNum - 1) * pageSize
  const end = start + pageSize
  const pageData = filteredRoles.slice(start, end)

  return {
    code: 200,
    msg: '操作成功',
    data: {
      list: pageData,
      total: total,
      allList: filteredRoles
    }
  }
})

以上主要做了这些工作：支持大小写、模糊搜索；支持数字类型的输入；支持日期范围筛选；支持分页

三、总结

上面只是讲了一个简单的例子，关于前端处理列表，其实通过这个，前端可以讲所有的从服务器端获取数据的操作，都通过mock进行拦截，然后自定义返回数据，只是我这里是写一个demo，主要是展示数据，所以对于返回的数据，我并没有做很多处理，只是简单的返回了数据，如果大家有需要，可以自己根据需要，对返回的数据进行处理。

相关推荐
zhougl9967 分钟前
html处理Base文件流
linux·前端·html
花花鱼11 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_14 分钟前
marked库（高效将 Markdown 转换为 HTML 的利器）
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类，到底有什么用？——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击！！！5 小时前
优选算法系列（5.位运算）
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
热门推荐
01我决定放弃搞 Java 了02DeepSeek各版本说明与优缺点分析03如何在WPS和Word/Excel中直接使用DeepSeek功能04RAG 实践- Ollama+RagFlow 部署本地知识库05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07如何本地部署AI智能体平台，带你手搓一个AI Agent08苍穹外卖面试总结09DeepSeek RAGFlow构建本地知识库系统10【芯片封测学习专栏 -- D2D 和 C2C 之间的区别】