Vue项目中使用mock.js的完整步骤


Posted in Vue.js onJanuary 12, 2021

在Vue项目中使用mock.js

  • 开发工具选择:Vscode

1. 使用命令行创建vue项目(手动选择Babel,Router,Vuex)

2. 导入element-ui(为了显示效果好一点),命令行输入

npm i element-ui -S

3.在main。js中进行引用

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';//样式文件一定要引入

Vue.use(ElementUI)

4.新建src/views/main/List.vue使用elememnt-ui中的自定义列模板

<template>
<div>
  <el-table
  :data="tableData"
  style="width: 100%">
  <el-table-column
   label="日期"
   width="180">
   <template slot-scope="scope">
    <i class="el-icon-time"></i>
    <span style="margin-left: 10px">{{ scope.row.date }}</span>
   </template>
  </el-table-column>
  <el-table-column
   label="姓名"
   width="180">
   <template slot-scope="scope">
    <el-popover trigger="hover" placement="top">
     <p>姓名: {{ scope.row.name }}</p>
     <p>住址: {{ scope.row.address }}</p>
     <div slot="reference" class="name-wrapper">
      <el-tag size="medium">{{ scope.row.name }}</el-tag>
     </div>
    </el-popover>
   </template>
  </el-table-column>
  <el-table-column label="操作">
   <template slot-scope="scope">
    <el-button
     size="mini"
     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
    <el-button
     size="mini"
     type="danger"
     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
   </template>
  </el-table-column>
 </el-table>
</div>
</template>

<script>
 export default {
  data() {
   return {
    tableData: [{
     date: '2016-05-02',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1518 弄'
    }, {
     date: '2016-05-04',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1517 弄'
    }, {
     date: '2016-05-01',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1519 弄'
    }, {
     date: '2016-05-03',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1516 弄'
    }]
   }
  },
  methods: {
   handleEdit(index, row) {
    console.log(index, row);
   },
   handleDelete(index, row) {
    console.log(index, row);
   }
  }
 }
</script>

5.router/index.js配置如下

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入组件
import List from '../views/main/List.vue'

Vue.use(VueRouter)

const routes = [
 {
  path: '/',
  name: 'List',
  component: List
 },

]

const router = new VueRouter({
 routes
})

export default router

现在的网页显示效果如下

Vue项目中使用mock.js的完整步骤

5. 安装mockjs 和axios

npm install --save-dev mockjs
npm install --save axios

6.新建api/getData.js和request.js

request.js

import axios from 'axios'
const service = axios.create({
  baseURL : "http://localhost:8080",
})
export default service

getData.js

import axios from '../request'
//数据列表接口
export const getList = () => axios.get("/list")

7.在src下新建mock/mockServer.js

import Mock from 'mockjs'
//import data from './data.json'

Mock.mock('http://localhost:8080/list', {
  code: 0, data:
  {
    'data|1000': [
      {  
        id: '@id',//随机id
        name: '@name',//随机名称
        nickName: '@last',//随机昵称
        phone: /^1[34578]\d{9}$/,//随机电话号码
        'age|11-99': 1,//年龄
        address: '@county(true)',//随机地址
        email: '@email',//随机邮箱
        isMale: '@boolean',//随机性别
        createTime: '@datetime',//创建时间
        avatar() {
          //用户头像
          return Mock.Random.image('100×100', Mock.Random.color(), '#757575', 'png', this.nickName)
        }
      }
    ]
  }

})

8.在main.js中导入mockServer

import './mock/mockServer'

9.修改src/views/main/List.vue(数据获取与绑定,设置表格居中)

<template>
 <div>
  <el-table :data="tableData" style="width: 600px;margin: 0 auto">
   <el-table-column label="随机ID" width="200">
    <template slot-scope="scope">
     <i class="el-icon-time"></i>
     <span style="margin-left: 10px">{{ scope.row.id }}</span>
    </template>
   </el-table-column>
   <el-table-column label="姓名" width="180">
    <template slot-scope="scope">
     <el-popover trigger="hover" placement="top">
      <p>姓名: {{ scope.row.name }}</p>
      <p>住址: {{ scope.row.address }}</p>
      <div slot="reference" class="name-wrapper">
       <el-tag size="medium">{{ scope.row.name }}</el-tag>
      </div>
      <p>邮箱: {{ scope.row.email }}</p>
      <p>性别: {{ scope.row.isMale }}</p>
      <p>昵称: {{ scope.row.nickName }}</p>
      <p>手机号: {{ scope.row.phone }}</p>
      <p>头像:</p>
     </el-popover>
    </template>
   </el-table-column>
   <el-table-column label="操作">
    <template slot-scope="scope">
     <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
      >编辑</el-button
     >
     <el-button
      size="mini"
      type="danger"
      @click="handleDelete(scope.$index, scope.row)"
      >删除</el-button
     >
    </template>
   </el-table-column>
  </el-table>
 </div>
</template>

<script>
import { getList } from "../../api/getData";
export default {
 data() {
  return {
   tableData: [
    //  {
    //   date: "2016-05-02",
    //   name: "王小虎",
    //   address: "上海市普陀区金沙江路 1518 弄",
    //  },
    //  {
    //   date: "2016-05-04",
    //   name: "王小虎",
    //   address: "上海市普陀区金沙江路 1517 弄",
    //  },
    //  {
    //   date: "2016-05-01",
    //   name: "王小虎",
    //   address: "上海市普陀区金沙江路 1519 弄",
    //  },
    //  {
    //   date: "2016-05-03",
    //   name: "王小虎",
    //   address: "上海市普陀区金沙江路 1516 弄",
    //  },
   ],
  };
 },
 methods: {
  handleEdit(index, row) {
   console.log(index, row);
  },
  handleDelete(index, row) {
   console.log(index, row);
  },

  async getMockList() {
   try {
    const result = await getList();
    //console.log(result);
    if (result.data.code == 0) {
     this.tableData = result.data.data.data;
    }
    //console.log(result.data.data.data);
   } catch (error) {
    console.log(error);
   }
  },
 },

 mounted() {
  this.getMockList();
 },

};
</script>

10.再次运行

Vue项目中使用mock.js的完整步骤

鼠标放在姓名上,会有更多信息显示

Vue项目中使用mock.js的完整步骤

显示测试的数据1000条

Vue项目中使用mock.js的完整步骤

分页就懒得做了。。。。

总结

到此这篇关于Vue项目中使用mock.js的文章就介绍到这了,更多相关项目使用mock.js内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
Vue项目利用axios请求接口下载excel
Nov 17 Vue.js
vue实现登录功能
Dec 31 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
vue响应式原理与双向数据的深入解析
Jun 04 Vue.js
vue代码分块和懒加载非必要资源文件
Apr 11 Vue.js
vue项目配置sass及引入外部scss文件
Apr 14 Vue.js
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
vue 页面跳转的实现方式
Jan 12 #Vue.js
Vue过滤器,生命周期函数和vue-resource简单介绍
Jan 12 #Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 #Vue.js
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 #Vue.js
vue实现防抖的实例代码
Jan 11 #Vue.js
Vuex实现简单购物车
Jan 10 #Vue.js
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 #Vue.js
You might like
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
snoopy 强大的PHP采集类使用实例代码
2010/12/09 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
php解决约瑟夫环示例
2014/04/09 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
PHP易混淆知识整理笔记
2015/09/24 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
js 强制弹出窗口代码研究-又一款代码
2010/03/20 Javascript
调试Javascript代码(浏览器F12及VS中debugger关键字)
2013/01/25 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
jQuery中cookie插件用法实例分析
2015/12/04 Javascript
深入理解node exports和module.exports区别
2016/06/01 Javascript
JS获取url参数、主域名的方法实例分析
2016/08/03 Javascript
详解angular element()方法使用
2017/04/08 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
2020/07/20 Javascript
Python重新引入被覆盖的自带function
2014/07/16 Python
浅谈Python 的枚举 Enum
2017/06/12 Python
Python实现解析Bit Torrent种子文件内容的方法
2017/08/29 Python
python 使用递归实现打印一个数字的每一位示例
2020/02/27 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
python爬取股票最新数据并用excel绘制树状图的示例
2021/03/01 Python
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
施工安全协议书
2013/12/11 职场文书
实习鉴定范文
2013/12/19 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
中学生评语大全
2014/04/18 职场文书
英文演讲稿
2014/05/15 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
会计试用期工作总结2015
2015/05/28 职场文书