需装上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. python pandas dataframe 操作记录

    从数据看select出数据后如何转换为dataframe df = DataFrame(cur.fetchall()) 如何更改列名,选取列,进行groupby操作 df.columns = ['me ...

  2. 1875: [SDOI2009]HH去散步

    Time Limit: 20 Sec Memory Limit: 64 MB Submit: 2333 Solved: 1204 [Submit][Status][Discuss] Descripti ...

  3. 使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹

    使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹,而且div的id命名为id=content,这个和已有id重复 ...

  4. AE-----界面介绍

    AE-----界面介绍 一.大纲leiji 层级: 比如:高楼一层一层的盖起来的.千层蛋糕(一层一层的).地质(一层一层构造的) 图层的特征:有顺序.上面的一层总会覆盖掉下面的一层. AfterEff ...

  5. 东芝线阵CCD芯片TCD1305DG驱动时序设计

    最近在做微型光谱仪,用到了东芝的CCD芯片TCD1305DG,该芯片是单行3648像素,输出信号是时间上离散的模拟信号,典型输出速率为0.5M,即每2000ns输出一个像素值(模拟信号),芯片内部集成 ...

  6. Kafka设计解析(十六)Kafka 0.11消息设计

    转载自 huxihx,原文链接 [原创]Kafka 0.11消息设计 目录 一.Kafka消息层次设计 1. v1格式 2. v2格式 二.v1消息格式 三.v2消息格式 四.测试对比 Kafka 0 ...

  7. PAT乙级1017

    1017 A除以B (20 分)   本题要求计算 A/B,其中 A 是不超过 1000 位的正整数,B 是 1 位正整数.你需要输出商数 Q 和余数 R,使得 A=B×Q+R 成立. 输入格式: 输 ...

  8. JavaScript小例子

    1. alert.html <html> <head> <title></title> <script type="text/javas ...

  9. 以代码爱好者角度来看AMD与CMD(转)

    随着浏览器功能越来越完善,前端已经不仅仅是切图做网站,前端在某些方面已经媲美桌面应用.越来越庞大的前端项目,越来越复杂的代码,前端开发者们对于模块化的需求空前强烈.后来node出现了,跟随node出现 ...

  10. cocoapods导入三方库头文件找不到问题

    问题描述:使用cocoapods时,import 找不到头文件. 问题原因: 1.缓存导致 2.没设置头文件的目录. 1.解决办法: command + k 清理工程 ,找到DerivedData文件 ...