zoukankan      html  css  js  c++  java
  • Vue---mock.js 使用

    mockjs 概述

    在我们的生产实际中,后端的接口往往是较晚才会出来,并且还要写接口文档,于是我们的前端的许多开发都要等到接口给我们才能进行,这样对于我们前端来说显得十分的被动,于是有没有可以制造假数据来模拟后端接口呢,答案是肯定的。应该有人通过编写json文件来模拟后台数据,但是很局限,比如增删改查这些接口怎么实现呢,于是今天我们来介绍一款非常强大的插件Mock.js,可以非常方便的模拟后端的数据,也可以轻松的实现增删改查这些操作。

     

    mock.js官网

    引入mockjs

    npm install mockjs

    安装完成之后去查看 package.json 如果 "mockjs": "^1.0.1-beta3" 说明安装成功

    在src目录下 新建一个mock.js文件

    简单使用

    (1)、首先在mock.js文件下

    const Mock = require('mockjs')
    
    const Random = Mock.Random
    
    const produceNewsData = function(){
        let articles = []
        for(let i = 0;i<100;i++){
            let data = {
                id:i,
                name:Random.first(),
                age:Random.integer(20, 100),
                sex:'M',
                birthday:Random.date()
            }
            articles.push(data)
        }
        return{
            articles:articles
        }
    }
    
    const getChange = function(){
        return{
            articles:{
                resCode:0,
                errmsg:'你好呀'
            }
        }
    }
    
    Mock.mock('/api/getList','get',produceNewsData)
    Mock.mock('/api/getChange','get',getChange)

    (2)、在main.js中引入

    require('./mock')

     (3)、新建一个页面

    <template>
      <div>
        <h1>主页</h1>
        <el-button type="primary" @click="export_Excel">生成表格</el-button>
    
        <el-table :data="tableData" border fit highlight-current-row style=" 100%;text-align: center;">
          <el-table-column prop="id" label="ID" width="180" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.id==1">停用</span>
              <span v-else-if="scope.row.id==2">过期</span>
              <span v-else-if="scope.row.id==3">作废</span>
              <span v-else="scope.row.id>3">{{scope.row.id}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180" align="center">
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="180" align="center">
          </el-table-column>
          <el-table-column prop="sex" label="性别" width="180" align="center">
          </el-table-column>
          <el-table-column prop="birthday" label="生日" width="180" align="center">
          </el-table-column>
          <el-table-column label="编辑" align="center">
            <template slot-scope="scope">
              <el-button>编辑</el-button>
              <el-button @click="cli">点击</el-button>
            </template>
          </el-table-column>
        </el-table>
    
      </div>
    
    </template>
    
    <script>
      export default {
        data() {
          return {
            tableData: null
          }
        },
        methods: {
          cli() {
            this.axios.get('/api/getChange').then((response) => {
              console.log(response.data.articles);
            })
          }
        },
    
        created() { 
          this.axios.get('/api/getList').then((response) => {
            console.log(response.data.articles);
            this.tableData = response.data.articles;
          })
        }
      }
    </script>
    
    <style>
    
    </style>

     运行结果

  • 相关阅读:
    今天上传公司服务器出现的.net framework版本错误问题
    浮动后父容器高度自适应
    asp net 编程问题 实现下一篇 和上一篇效果
    注意:"AspNetPager”的控件“AspNetPager1”必须放在具有 runat=server 的窗体标记内
    SqlDbHelper备份,做项目时方便应用(目前不太全,把自己项目中的逐渐转移过来)
    域名状态,域名查询看是否被注册
    关于403 由于扩展配置问题而无法提供您请求的页面的问题
    让qq图标在自己的网站上显示方法
    Tomcat基于虚拟路径的发布和web.xml配置
    Tomcat虚拟目录配置方法及原理
  • 原文地址:https://www.cnblogs.com/zyulike/p/9714774.html
Copyright © 2011-2022 走看看