zoukankan      html  css  js  c++  java
  • Electron-vue实战(二)— 请求Mock数据渲染页面

    Electron-vue实战(二)— 请求Mock数据渲染页面

    作者:狐狸家的鱼

    本文链接

    GitHub:sueRimn

    一、环境搭建

    1、安装Mock.js

    如果仅仅用作脱离后台的模拟数据,就安装在开发环境中:

    npm install mockjs -D

    2、安装axios-mock-adapter

    axios-mock-adapter是一款axios的请求模拟调试器,可以使用它来实现请求拦截并模拟后台回复。

    npm install axios-mock-adapter -D

    二、使用

    (1)建立文件

    src/renderer目录下新建mock文件夹与api文件夹,然后mock文件夹下建立data文件夹存放各类模拟数据,再建立index.js文件与mock.js文件,如下:

    // mock
    mock
    ├─ data
    │    ├─ flignt.js
    │    └─ planList.js
    ├─ index.js
    └─ mock.js
    // api
    api
    ├─ api.js
    └─ index.js

    api文件下下的api.js用于封装接口函数。

    (2)模拟数据

    打开data/planList.js

    关于如何Mcok数据在官网已经提及,简单明了。

    Mcok.mock()是数据模板,一共有五种方式。

    以下数据作为示例使用:

    // 引入mock
    import Mock from 'mockjs'
    const Random = Mock.Random 
    const List = []
    const count = 300
    
    for (let i = 0; i < count; i++) {
        List.push(Mock.mock({
            id:Random.integer(2, 10), // 随机生成由2-10的整数
            name: Random.cname(), // 名字
            'sex|1': ['男', '女'], // 属性名sex|规则:属性值  从数组里随机选一个
            date: Random.date(), // 默认日期为Y-M-D
            port: Random.string('upper', 2), // 随机的两个大写字母构成的字符串
            bay: Random.string('lower', 2), // 随机的两个小写字母构成的字符串
            externalState: Random.csentence(3), // 三个字构成的一段文语句
            'vipGrade|1': ['★', '★★', '★★★'], // 随机选择      
        }))
    }

    第一种:Mock.mock(template)

    仅根据数据模板生成模拟数据。

    List.push(Mcok.mock(...)) // 里面的数据即为模板数据生成的

    第二种:Mock.mock(rurl, template)

    记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时,将根据数据模板 template生成模拟数据,并作为响应数据返回。

    即生成模板数据之后,可以用Mock拦截模板数据

    Mock.mock('/flight/list',List)

    第三种:Mock.mock(rurl, function( options ) )

    记录用于生成响应数据的函数。当拦截到匹配 rurl 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。

    Mock.mock('/flight/list', function(options))

    第四种:Mock.mock(rurl, rtype, template)

    记录数据模板。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,将根据数据模板 template 生成模拟数据,并作为响应数据返回。

    这种是比较常用的。

    Mock.mock('/flight/list', 'post|get', List)

    第五种:Mock.mock(rurl, rtype, function( options ) )

    记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。

    Mock.mock('/flight/list', 'post|get', function(options))

    (3)封装接口函数

    api/api.js中封装接口函数:

    import axios from 'axios'
    
    let baseURL = '' // 自定义请求路径
    // 获取列表分页
    export const getPlanListPage = params => {
      return axios.get(`${baseURL}/flight/getListPage`, { params: params })
    }

    (4)拦截请求

    由于我们使用的是axios-mock-adapter请求模拟调试器,可以直接在mock.js中写:

    import axios from 'axios'
    import MockAdapter from 'axios-mock-adapter'
    import { List } from './data/planList'
    let _planList = List
    
    export default {
      bootstrap () {
        // 模拟调试器实例
        let mock = new MockAdapter(axios)
    
        // mock success request
        mock.onGet('/success').reply(200, {
          msg: 'success'
        })
    
        // mock error request
        mock.onGet('/error').reply(500, {
          msg: 'failure'
        })
    
        // 获取列表(分页) 模拟接收'/flight/getListPage'接口
        mock.onGet('/flight/getListPage').reply(config => {
          let { page, pageSize, id } = config.params
          let total = mockList.length // 数据总数
          let mockList = _planList.filter((u, index) => index < pageSize * page && index >= pageSize * (page - 1)) // 分页数据显示
          return new Promise((resolve, reject) => { // 返回响应数据
            setTimeout(() => {
              resolve([200, {
                total: total,
                list: mockList
              }])
            }, 1000)
          })
        })
      }
    }

    (5)渲染数据

    简单情况下,一般直接在页面中渲染就可以了,如果数据比较多,单页面之间存在共享的数据,可以使用Vuex进行数据存储管理,这个会在单独的博客中详细描述,这里只做简单的请求数据,渲染处理:

    import { getPlanListPage } from '@/api/api'
    export default {
      components: {
        ListForm
      },
      data () {
        return {
          listLoading: false, // 加载效果
          total: 0, // 数据总数
          currentPage: 1, // 当前页
          pageSize: 20, // 每页数据数量
          tableData: [], // 数据
          multipleSelection: []
        }
      },
      mounted () {
        this.getPlanList()
      },
      computed: {
        ...mapGetters('planList', ['list'])
      },
      methods: {
        getPlanList () {
        let para = {
          page: this.currentPage,
          pageSize: this.pageSize
        }
        this.listLoading = true
        this.$axios.get('/flight/getListPage', {para: para})
          .then(res => {
            console.log(res.data)
            this.total = res.data.total
            this.tableData = res.data.list
            this.listLoading = false
          })
          .catch(error => {
            console.log(error)
            console.log()
          }),
         // 显示每页多少条数据
        handleSizeChange (val) {
          this.pageSize = val
          this.currentPage = 1
          this.getPlanList()
        },
        // 显示当前页数
        handleCurrentChange (val) {
          this.currentPage = val
          this.getPlanList()
        }
        }
    <!-- 表格数据 -->
          <el-table 
              :data="tableData" 
              highlight-current-row 
              style=" 100%;margin-bottom: 20px;"
              height="800px"
              v-loading="listLoading"
              size="medium"
              class="planListTable el-table__column-filter-trigger"
              @cell-dblclick="rowDbClick"
              >
            </el-table>
    
    
    <!-- 分页 -->
            <el-col :span="24" class="">
              <el-pagination 
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                style="float:right;"
                >
              </el-pagination>

    最终效果如下:

  • 相关阅读:
    常用模块
    二分查找算法
    递归函数
    文件操作
    day02--Python基础二(基础数据类型)
    Python学习笔记day01--Python基础
    Python2X和Python3X的区别
    testdisk修复文件系统
    机器学习入门 快速版
    tableau教程 快速入门
  • 原文地址:https://www.cnblogs.com/suRimn/p/11130447.html
Copyright © 2011-2022 走看看