vue实现通过mock 渲染出数据

最新推荐文章于 2023-05-24 17:13:16 发布

巧克力豆成了开心果

最新推荐文章于 2023-05-24 17:13:16 发布

阅读量1.4k

点赞数

分类专栏： vue 学习

本文链接：https://blog.csdn.net/xingyunzqq/article/details/100178142

版权

本文介绍如何在Vue项目中使用Mock数据来实现前后端分离的开发流程。首先介绍了安装Mockjs和axios的环境配置，然后详细讲解了页面设计过程，包括创建表格样式。接着，重点阐述了Mock数据的使用，详细说明了创建mock数据的各个步骤，如编写api/tabledata.js、mock/tabledata.js、mock/index.js等文件，以及在utils文件夹中导入axios和env.js，以便于模拟后台接口数据。

摘要由CSDN通过智能技术生成

使用mock数据开发vue实现前后端分离：

环境配置:

mock: npm install mockjs --save-dev

2)axios: npm install axios

页面设计：

在这里插入图片描述

采用mock方式模拟获取后台数据：

1）编写表格样式：

<!--表格内容-->
        <!--selection-change当选择项发生变化时触发事件-->
        <el-table
                ref="multipleTable"
                :data="tableData"
                stripe
                @selection-change="handleSelectionChange"
                class="table el-table--enable-row-transition el-table--medium el-table--striped"
                border>
            <!--多选框 type="selection"-->
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="编号"
                    width="70"
                    prop="id">
            </el-table-column>
            <el-table-column
                    label="日期"
                    prop="date"
                    sortable
                    width="200">