需装上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. 1898: [Zjoi2005]Swamp 沼泽鳄鱼

    1898: [Zjoi2005]Swamp 沼泽鳄鱼 Time Limit: 5 Sec Memory Limit: 64 MB Submit: 1582 Solved: 870 [Submit][S ...

  2. [USACO08NOV]Mixed Up Cows

    嘟嘟嘟 一看n那么小,那一定是状压dp了(表示从没写过,慌). 首先dp[i][j](i 是一个二进制数,第x位为1代表选了第x头牛),表示 i 这个状态最后一头牛是第 j 头牛时的方案数. 然后当 ...

  3. centos7 tengine 安装

    Tengine是由淘宝网发起的Web服务器项目.它在Nginx的基础上,针对大访问量网站的需求,添加了很多高级功能和特性.Tengine的性能和稳定性已经在大型的网站如淘宝网,天猫商城等得到了很好的检 ...

  4. 20145203盖泽双实验一 Java开发环境的熟悉(Linux + Eclipse)

    实验一 Java开发环境的熟悉(Linux + Eclipse) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 实验要求 1.没 ...

  5. LayIM.AspNetCore Middleware 开发日记(一)闲言碎语

    前言 前几天写博客的时候突然看见了历史上的今天.不禁感慨时光如梭,这系列博客后来被我标注了已经过时,但是还有很多小伙伴咨询我.既然过时就要更新,正好 .NET Core 也出来很久了,于是乎想到把La ...

  6. Python自动化之django model验证(很弱,感觉应用场景不多)

    django model的数据验证 使用full_clean进行验证 obj = models.UserInfo(name="alex",email="tiantian& ...

  7. ROS——rqt

    $ rosrun rqt_plot rqt_plot   # 画出发布在topic上的数据变化图 $ rosrun rqt_graph rqt_graph #画出node关系图 $ rosrun rq ...

  8. c++——类和对象初探

    2.1 基本概念 1)类.对象.成员变量.成员函数 2)面向对象三大概念 封装.继承.多态 3)编程实践 类的定义和对象的定义,对象的使用 求圆形的面积 定义Teacher类,打印Teacher的信息 ...

  9. SM30 客户端 有“不可修改”的状态

    SM30维护自定义数据表时,遇到提示信息,有“不可修改”的状态,无法修改数据. 查询详细信息,有一条:客户端特定对象不能在此客户端中进行更改. 检查了一下自定表设置,发现自定义表之前创建时,Deliv ...

  10. jQuery----jquery实现Tab键切换

    使用Jquery实现tab键切换,代码简洁易懂,实现逻辑清晰明了.具体总结如下: 需求分析: 鼠标进入tab切换模块,鼠标当前的模块上边框变为红色,并显示对应的商品名称.鼠标离开后,上边框恢复原色,图 ...