什么是网站的功能模块,设计制作生态瓶教学视频,手游传奇发布网站,地方门户网站管理系统目录
一、背景描述
二、开发流程
1.引入Mock
2.创建文件
3.需求描述
4.Mock实现
三、总结 一、背景描述
前提#xff1a;
事情是这样的#xff0c;老板想要我们写一个demo拿去路演/拉项目#xff0c;有一些数据#xff0c;希望前端接一下#xff0c;写几个表格
事情是这样的老板想要我们写一个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
import ./modules/user // 引入登录用户模块的 mock
export default {}src\mock\modules\user.js
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
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
[{id: 1,projectId: projectAA,projectName: 测试项目名称,totalCases: 174,firstStartDate: 2022-03-01,endDate: ,projectStage: 正在进行中}
]
src\mock\data\project_role.json
{projectAA: [{id: 1,projectId: projectAA,roleName: 角色名称111,region: 北区,province: 天津,roleProvince: 天津,roleCity: 天津,department: 管理组,roleStatus: 在组,startDate: }]
}
有了数据结构那么根据官网的例子再扩展一番就能得到以下 src\mock\modules\project.js
import Mock from mockjs
const baseUrl http://localhostimport 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) || 1const pageSize params.get(pageSize) || 10const 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.lengthconst start (pageNum - 1) * pageSizeconst 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)) || 1const pageSize parseInt(params.get(pageSize)) || 10const 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.lengthconst start (pageNum - 1) * pageSizeconst end start pageSizeconst pageData filteredRoles.slice(start, end)return {code: 200,msg: 操作成功,data: {list: pageData,total: total,allList: filteredRoles}}
})以上主要做了这些工作支持大小写、模糊搜索支持数字类型的输入支持日期范围筛选支持分页 三、总结 上面只是讲了一个简单的例子关于前端处理列表其实通过这个前端可以讲所有的从服务器端获取数据的操作都通过mock进行拦截然后自定义返回数据只是我这里是写一个demo主要是展示数据所以对于返回的数据我并没有做很多处理只是简单的返回了数据如果大家有需要可以自己根据需要对返回的数据进行处理。
