需装上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 简单实例(二)的更多相关文章

  1. vue mock(模拟后台数据) 最简单实例(一)——适合小白

    开发是前后端分离,不需要等待后台开发.前端自己模拟数据,经本人测试成功. 我们在根目录新建存放数据的json文件,存放我们的数据data.json //data.json{ "status& ...

  2. vue项目模拟后台数据

    这次我们来模拟一些后台数据,然后去请求它并且将其渲染到界面上.关于项目的搭建鄙人斗胆向大家推荐我的一篇随笔<Vue开发环境搭建及热更新> 一.数据建立 我这里为了演示这个过程所以自己编写了 ...

  3. 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)

    mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...

  4. Mock模拟后台数据接口--再也不用等后端的API啦

    ok,在开发中经常需要从后台获取数据,那么有时候后台的数据接口并没有写好,所以这时候,就需要自己模拟数据接口,来实现前端逻辑, 今天数的就是阿里巴巴的一款mock产品,很好用的哦!!!! ok!这是我 ...

  5. vue mock 模拟接口数据

    日常总结 希望能帮到大家 1 mock/sever.js  //创建服务 let http=require('http') let fs=require('fs') let url=require(' ...

  6. mock模拟后台数据

    import Mock from 'mockjs' const Random = Mock.Random // 获取random对象,随机生成各种数据,具体请翻阅文档 const domain = ' ...

  7. mock数据(模拟后台数据)

    mock数据(模拟后台数据) - Emily恩 - 博客园 https://www.cnblogs.com/enboke/p/vue.html Mock.js http://mockjs.com/ 前 ...

  8. vue-cli模拟后台数据交互

    作为一个前端入坑的妹子,在学习vue的道路上挣扎徘徊,由一开始的对vue一直蒙圈只知道双向数据绑定和一些'V-x'的指令,慢慢通过一个视频的学习渐渐入坑,对于我这个js基础不怎么好而且编程思维又不是很 ...

  9. express+mockjs实现模拟后台数据发送

    前言: 大多数时候,前端会和后端同时进行开发,即在我们开发完页面的时候,很可能还不能立马进入联调阶段,这个时候,为了保证我们接口的有效性和代码的功能完整,我们可能需要模拟数据. 模拟数据方法 1.通过 ...

随机推荐

  1. BZOJ1029:[JSOI2007]建筑抢修(贪心,堆)

    Description 小刚在玩JSOI提供的一个称之为“建筑抢修”的电脑游戏:经过了一场激烈的战斗,T部落消灭了所有z部落的 入侵者.但是T部落的基地里已经有N个建筑设施受到了严重的损伤,如果不尽快 ...

  2. 4196. [NOI2015]软件包管理器【树链剖分】

    Description Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖( ...

  3. c# datetime用法总结

    备忘:YYYY-mm-dd HH:MM:SS部分解释 d 月中的某一天.一位数的日期没有前导零. dd 月中的某一天.一位数的日期有一个前导零. ddd 周中某天的缩写名称,在 Abbreviated ...

  4. jenkins权限配置

    1. 授权匿名账户权限 2 注册新用户,并且把匿名权限删除,添加用户权限 Overall(全局) Credentials(凭证) Slave(节点) Job(任务) View(视图) Administ ...

  5. 在linux中禁用一块硬盘

    笔记本采用固态加机械的硬盘组合使用中完全用不到机械部分 但它总是在启动后运行并发出响声 1 启动后的禁用 无需重启 (sdx是你的磁盘  udev的更新可能会导致磁盘重新出现 在向系统添加/删除磁盘也 ...

  6. 【转】matplotlib制图——图例legend

    转自:https://www.cnblogs.com/alimin1987/p/8047833.html import matplotlib.pyplot as pltimport numpy as ...

  7. overflow:hidden 影响inline-block元素周围元素下移

    前言: 最近在切页中,我想实现左边一个类似下拉选框,且不允许输入,右边有一段垂直居中的文字描述的效果.我对文字用的是p标签.其实可以用个i/b/em等其他行内标签,同时也具有一定语义,做为强调提示,( ...

  8. 自适应和响应式布局的区别,em与rem

    自适应布局:不同终端上显示的文字,图片,等位置排版都是一样的,只是大小不同. 响应式布局:通过媒体查询监听屏幕大小的变化,做出响应式的改变,在不同设备可能展现不同的样式效果. em:是相对其父元素的. ...

  9. modbustcp封装使用获取设备数据示例

    //接受数据请求public function client($pz){    //参数1是:网络协议,    //AF_INET:   IPv4 网络协议.TCP 和 UDP 都可使用此协议.一般都 ...

  10. 06_Java基础语法_第6天(自定义类、ArrayList集合)_讲义

    今日内容介绍 1.自定义类型的定义及使用 2.自定义类的内存图 3.ArrayList集合的基本功能 4.随机点名器案例及库存案例代码优化 01引用数据类型_类 * A: 数据类型 * a: java ...