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.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
如何实现vue的tree组件
Dec 03 Vue.js
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
vue-cropper组件实现图片切割上传
May 27 Vue.js
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue如何清除浏览器历史栈
May 25 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
相对路径转化成绝对路径
2007/04/10 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
2014/08/20 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
javascript contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2010/02/04 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
javascript实现的图片切割多块效果实例
2015/05/07 Javascript
jQuery中的ajax async同步和异步详解
2015/09/29 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
JS控制FileUpload的上传文件类型实例代码
2016/10/07 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
深入理解angular2启动项目步骤
2017/07/15 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
[49:54]Ti4 循环赛第三日 LGD vs Titan
2014/07/12 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
Python模糊查询本地文件夹去除文件后缀的实例(7行代码)
2017/11/09 Python
Django Serializer HiddenField隐藏字段实例
2020/03/31 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
英国日常交易网站:Wowcher
2018/09/04 全球购物
网络安全方面的面试题
2015/11/04 面试题
实习护士自我鉴定
2013/10/13 职场文书
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
连锁经营管理专业大学生求职信
2013/10/30 职场文书
幼儿园中秋节活动反思
2014/02/16 职场文书
新学期标语
2014/06/30 职场文书
好媳妇事迹材料
2014/12/24 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
校运会加油稿大全
2015/07/22 职场文书
golang为什么要统一错误处理
2022/04/03 Golang