mock+vue-cli+element-ui完成数据模拟及表格数据分页

最新推荐文章于 2023-09-10 00:50:05 发布

置顶

WPS二次开发

最新推荐文章于 2023-09-10 00:50:05 发布

阅读量2.6k

点赞数 8

分类专栏： #Vue进阶篇文章标签： vue elment el-table mock axios

本文链接：https://blog.csdn.net/weixin_41788705/article/details/103002727

版权

1. 环境准备

实现本案例之前，需要以下环境

node.js
cnpm/yarn
vue-cli

node.js及cnpm点击此处查看参考

配置好的环境如下图所示：

在这里插入图片描述

2. 项目创建

vue环境搭建好以后，可使用vue-cli命令创建项目，创建项目的命令如下：

vue create mock-element-table

项目的创建过程如下：

在这里插入图片描述

等待安装成功，vue项目创建成功后如图所示：

在这里插入图片描述

3. 依赖插件安装

在本案例中，需要用到以下依赖插件：

Element：一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
Axios :一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Mock.js: 生成随机数据,拦截Ajax 请求开始前后端分离让前端攻城师独立于后端进行开发。增加单元测试的真实性通过随机数据,模拟各种场景。

各个组件安装的命令如下：

vue add element #通过vue-cli添加element插件
cnpm i mockjs --save #安装mock.js
cnpm i axios --save #安装axios

安装过程如下图所示：

在这里插入图片描述

安装成功后可在项目根目录package.json找到下列依赖：

在这里插入图片描述

4. 项目运行

找到根目录下的package.json，鼠标右键选择，找到"Show npm Scripts"，然后双击"serve"命令，运行vue项目

在这里插入图片描述

在浏览器中输入地址:http://localhost:8080，查看项目运行效果

在这里插入图片描述

5. 创建mock模拟数据

5.1 添加工具函数

分页数据请求为get请求，请求的参数将会被封装在url中，故需要一个工具函数将url中的参数转换成对象。在src目录下创建一个util目录，在目录中添加一个js文件名为util.js

在这里插入图片描述

在util.js文件中添加获取url参数对象方法

/**
 * 获取url参数对象
 */
export const getQueryParameters = (options) => {
   
    const url = options.url
    
    //分隔url，获取参数
    const search = url.split('?')[1]
    if (!search) {
   
        return {
   }
    }
    
    //将参数转换成对象
    return JSON.parse('{"' + decodeURIComponent(search)
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"') + '"}')
}

5.2 创建mock函数

在src目录下分别创建mock文件夹，然后src/mock目录下创建student.js和index.js

在这里插入图片描述

创建后的工程目录如下所示：

在这里插入图片描述

在src/mock/student.js中，模拟json数据

import Mock from 'mockjs'
import {
   getQueryParameters} from "../util/util"

//对外输出对应的数据接口
export  default ()=>{
   

    Mock.mock(/\/student\/studentPagedList/,'get',(params)=>{
   
        const paramObj=getQueryParameters(params)

        const classList=['计算机一班','软件工程','网络工程']

        const studentList=[]

        const totalCount=500

        const pageIndex=parseInt(paramObj.pageIndex)
        const pageSize=parseInt(paramObj.pageSize)
        const totalPage=Math.ceil(totalCount/pageSize)//向上取整

        const startNo=(pageIndex-1)*pageSize+1//计算开始Id
        const endNo=pageIndex<totalPage?pageIndex*pageSize:totalCount

        for(let i=startNo;i<=endNo;i++){
   
            studentList.push(Mock.mock({
   
                studentId:i,
                studentName:Mock.mock('@cname'),
                studentNo:Mock.mock('@natural(17434010103,17434010300)'),
                gender:Mock.mock('@natural(1,2)'),
                age:Mock.mock('@natural(18,22)'),
                registerTime:Mock.Random.date('yyyy-MM-dd'),
                address:Mock.Random.city(true),
                className:Mock.Random.pick(classList)
            }))
        }

        return {
   
            total:totalCount,
            data:studentList
        }

    })
}

在src/mock/index.js中，添加mock请求拦截

import student from "./student"

student({
   mock:true})

在项目根目录main.js中，引入mock

//引入mock文件
import './mock'

6. 创建api

对于mock中模拟的数据，可通过axios访问api来获取对应的数据。

6.1 创建api访问方法

在项目的src目录下，创建api文件夹，并在文件夹中创建student.js。

在这里插入图片描述

在/src/api/student.js中，创建api访问方法

import request from 'axios'

//获取学生分页列表数据
export const getStudentPagedList=(pageIndex,pageSize,params)=>request({
   
    url:'/student/studentPagedList',
    method: 'get',
    params:{
   
        ...params,
        pageIndex,
        pageSize
    }
})

6.2 测试api数据访问

打开src/App.vue，通过created()生命周期钩子函数访问获取数据的api，再从浏览器控制台中获取模拟的数据。

import HelloWorld from './components/HelloWorld.vue'
import {
   getStudentPagedList} from "./api/student"

export default {
   
  name: 'app',
  created(){
   
    getStudentPagedList(1,10).then(res=>{
   
      debugger
    })
  },
  components: {
   
    HelloWorld
  }
}