vue mock(模拟后台数据) +axios 简单实例(二)
需装上axios,build文件夹中webpack.dev.conf.js文件添加上vue mock配置的东东, 如,继(一)
//组件
<template>
<div>
<ul class="product">
<li v-for="(item, index) in goodsList">
<img v-bind:src="'/static/image/'+item.prodcutImg" >
<h5>{{item.productName}}</h5>
<p>{{item.prodcutPrice}}</p>
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'AppHome',
data(){
return{
goodsList:[]
}
}
,mounted:function(){
this.getGoodsList();
},
methods:{
getGoodsList(){
axios.get("/api/goodList").then((result)=>{
var res = result.data;
this.goodsList = res.result;
}) }
}
}
</script>
OK,正常输出
vue mock(模拟后台数据) +axios 简单实例(二)的更多相关文章
- vue mock(模拟后台数据) 最简单实例(一)——适合小白
开发是前后端分离,不需要等待后台开发.前端自己模拟数据,经本人测试成功. 我们在根目录新建存放数据的json文件,存放我们的数据data.json //data.json{ "status& ...
- vue项目模拟后台数据
这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立 我这里为了演示这个过程所以自己编写了 ...
- 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)
mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...
- Mock模拟后台数据接口--再也不用等后端的API啦
ok,在开发中经常需要从后台获取数据,那么有时候后台的数据接口并没有写好,所以这时候,就需要自己模拟数据接口,来实现前端逻辑, 今天数的就是阿里巴巴的一款mock产品,很好用的哦!!!! ok!这是我 ...
- vue mock 模拟接口数据
日常总结 希望能帮到大家 1 mock/sever.js //创建服务 let http=require('http') let fs=require('fs') let url=require(' ...
- mock模拟后台数据
import Mock from 'mockjs' const Random = Mock.Random // 获取random对象,随机生成各种数据,具体请翻阅文档 const domain = ' ...
- mock数据(模拟后台数据)
mock数据(模拟后台数据) - Emily恩 - 博客园 https://www.cnblogs.com/enboke/p/vue.html Mock.js http://mockjs.com/ 前 ...
- vue-cli模拟后台数据交互
作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...
- express+mockjs实现模拟后台数据发送
前言: 大多数时候,前端会和后端同时进行开发,即在我们开发完页面的时候,很可能还不能立马进入联调阶段,这个时候,为了保证我们接口的有效性和代码的功能完整,我们可能需要模拟数据. 模拟数据方法 1.通过 ...
随机推荐
- 函数式编程的类型系统:typeclass--Functor的解释--构造类型
函数式编程的类型系统:typeclass Typeclass是带有关联构造类型的抽象接口,抽象接口的行为用于约束构造类型. 构造类型实现了抽象接口的行为约束,就称这个实现为这个构造类型的函子. 要素: ...
- OSSpinLockLock加锁机制,保证线程安全并且性能高
在aspect_add.aspect_remove方法里面用了aspect_performLocked, 而aspect_performLocked方法用了OSSpinLockLock加锁机制,保证线 ...
- 2018年1月12日--微信小程序----出错报告(40kb的原因)---并解决方法
一. 报错的原因是因为,图片的文件太大了,已经超过了40kb...不能超过40kb. 在这里查看图片文件的大小:
- Python中numpy.random.randn()与rand(),numpy.zeros、ones、eye
转自:https://blog.csdn.net/u010758410/article/details/71799142
- zabbix 主动模式和被动模式配置文件对比
1.主动模式: 在web上看zabbix available 是红色 [root@python ~]# egrep -v '^#|^$' /etc/zabbix/zabbix_agentd.conf ...
- centos7下部署iptables环境纪录(关闭默认的firewalle)(转)
下面介绍centos7关闭firewall安装iptables,并且开启80端口.3306端口的操作记录:[root@localhost ~]# cat /etc/redhat-release Cen ...
- GIt帮助文档之创建新的Git仓库——现有目录下,通过导入所有文件来创建
1.新建仓库初始化操作 1.1打开Git Bash命令窗口,切换到项目文件夹目录: $ cd weixin 1.2执行命令: $ git init 初始化操作,把项目weixin纳入Git管理.初始化 ...
- Mac开发中遇到的一些小问题解析
通过mac开发的过程中,有一些小问题出现,列如下,后续会持续增加: 1. 命令行清空废纸篓(jar包太多,倾倒废纸篓太慢) sudo rm -rfv ~/.Trash /Volumes/*/.Tras ...
- 树莓派3B+学习笔记:1、安装官方系统
1.登录树莓派官方网站www.raspberrypi.org,点击Downloads: 2.点击NOOBS: 3.选择下载方式,可以选择下载BT种子或直接下载,这里我用迅雷直接下载,下载速度还是很快的 ...
- R语言学习笔记—K近邻算法
K近邻算法(KNN)是指一个样本如果在特征空间中的K个最相邻的样本中的大多数属于某一个类别,则该样本也属于这个类别,并具有这个类别上样本的特性.即每个样本都可以用它最接近的k个邻居来代表.KNN算法适 ...