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 相关文章推荐
springboot+vue实现文件上传下载
Nov 17 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 Vue.js
vue+openlayers绘制省市边界线
Dec 24 Vue.js
vue中activated的用法
Jan 03 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
Vue通过懒加载提升页面响应速度
May 10 Vue.js
详解Vue的options
May 15 Vue.js
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
el-table-column 内容不自动换行的解决方法
Aug 14 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
从Web查询数据库之PHP与MySQL篇
2009/09/25 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
检测是否已安装 .NET Framework 3.5的js脚本
2009/02/14 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
2014/03/03 Javascript
JavaScript中的变量定义与储存介绍
2014/12/31 Javascript
JS实现的系统调色板完整实例
2016/12/21 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
[41:56]Spirit vs Liquid Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
mysql 之通过配置文件链接数据库
2017/08/12 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
机器学习10大经典算法详解
2017/12/07 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
python实现字符串和字典的转换
2018/09/29 Python
Python读取txt内容写入xls格式excel中的方法
2018/10/11 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Python猜数字算法题详解
2020/03/01 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
Java servlet面试题
2012/03/04 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
英文求职信写作小建议
2014/02/16 职场文书
基层党支部整改方案
2014/10/25 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
优秀志愿者感言
2015/08/01 职场文书
安全生产会议制度
2015/08/06 职场文书
商业计划书格式、范文
2019/03/21 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android