mockjs+vue页面直接展示数据的方法


Posted in Javascript onDecember 19, 2018

最近想往数据库里导一些数据,同事推荐了mock,了解一下觉得不错,现将在vue用的mock贴上来

写在前默认看此文的盆友都是有vue基础的哟~~

一、导读

将 mockjs 的数据直接展示在 vue 页面上

mockjs官网链接

关于mockjs,官网描述的是

1.前后端分离

2.不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。

3.数据类型丰富

4.通过随机数据,模拟各种场景。

等等优点。

二、安装mockJS

//安装mockJS
npm install mockjs

不说废话,贴代码。

三、将 mockjs 的数据直接展示在 vue 页面上

引用

import Mock from 'mockjs';

注意

  • 使用 <pre> 标签能格式化输出 json 代码
  • 使用 mockjs 的随机函数 Random 要先定义常量
  • 自定义随机函数用 extend

代码

<template>
 <div>
  <pre>{{text }}</pre>
 </div>
</template>
<script>
 import Mock from 'mockjs';
 const Random = Mock.Random;
 Random.cname();
 Random.guid();
 Random.extend({
  sex:function(data){
   var arr=["男","女"]
   //随机选取
   return this.pick(arr)
  }});
  export default {
 name:"detail",
 data:function(){
   return {
     text:"",
   }
 },
 methods:{
  mockInfo(){

   let data = Mock.mock({
    // 属性 list 的值是一个数组,其中含有 1 到 10 个元素
    'list|1-20': [{
     // 属性 id 是一个自增数,起始值为 1,每次增 1
     'uuid':'@guid()',
     'name' :'@cname()',
     'age|20-35' : 20,
     'sex' : "@sex",
    }]
   })
// 输出结果
   return data
  },
 },
 mounted:function(){
  this.text=JSON.stringify(this.mockInfo(), null, 4);
 }
}
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
myFocus slide3D v1.1.0 使用方法与下载
Jan 12 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
JS中artdialog弹出框控件之提交表单思路详解
Apr 18 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
May 03 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
vue组件从开发到发布的实现步骤
Nov 11 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 #Javascript
vue使用Google地图的实现示例代码
Dec 19 #Javascript
JS实现获取自定义属性data值的方法示例
Dec 19 #Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 #Javascript
js指定日期增加指定月份的实现方法
Dec 19 #Javascript
动态内存分配导致影响Javascript性能的问题
Dec 18 #Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 #Javascript
You might like
wordpress之wp-settings.php
2007/08/17 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十一)
2014/06/25 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
PHP转盘抽奖接口实例
2015/02/09 PHP
实现png图片和png背景透明(支持多浏览器)的方法
2009/09/08 Javascript
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
jQuery Validate插件实现表单验证
2016/08/19 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
微信小程序中做用户登录与登录态维护的实现详解
2017/05/17 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
vue2.0 watch里面的 deep和immediate用法说明
2020/10/30 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
Python中的index()方法使用教程
2015/05/18 Python
使用Pyinstaller的最新踩坑实战记录
2017/11/08 Python
Python根据指定日期计算后n天,前n天是哪一天的方法
2018/05/29 Python
利用python求积分的实例
2019/07/03 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
HTML5单选框、复选框、下拉菜单、文本域的实现代码
2020/12/01 HTML / CSS
蒂娜商店:Tiina the Store
2019/12/07 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
中专药剂专业应届毕的自我评价
2013/12/27 职场文书
优秀少先队辅导员先进事迹材料
2014/05/18 职场文书
工作作风承诺书
2014/08/30 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
搬迁通知
2015/04/20 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书