码迷,mamicode.com
首页 > 移动开发 > 详细

axios的使用与数据的mock

时间:2018-06-06 23:39:22      阅读:939      评论:0      收藏:0      [点我收藏+]

标签:desc   .com   info   img   set   png   ESS   class   哈哈哈   

 

?记在前面

           人,不经过长夜的痛哭,是不能了解人生的,我们将这些苦痛当作一种功课和学习,

           直到有一日真正的感觉成长了时,甚至会感谢这种苦痛给我们的教导                      

                                                                                                                             ——三毛

一、axios官方文档基本阅读

我们先从官方实例上上看看axios的用法:https://github.com/axios/axios

技术分享图片

上面的这个记个大概就好,下面一起来实践一下

 

二、新建mock.json

1.首先新建一个mock文件,里面放上首页所需要的数据:轮播图、活动、推荐


 

技术分享图片


 

技术分享图片


 

技术分享图片


 

②mock.json

{

  "code": 200,
  "msg": "",
  "data": {
    "swiper": [
      "../static/carousel1.png",
      "../static/carousel2.png",
      "../static/carousel3.png"
    ],
    "activity": [
      {
        "img": "../static/carousel1.png",
        "name": "品牌:Minoz Store",
        "desc": "温柔了岁月,惊艳了时光"
      },
      {
        "img": "../static/carousel2.png",
        "name": "品牌:Minoz Store",
        "desc": "你是人间四月天"
      },
      {
        "img": "../static/carousel1.png",
        "name": "品牌:Minoz Store",
        "desc": "你好,欢迎光临Minoz Store"
      }
    ],
    "recommend": [
      {
        "img": "@/assets/logo1.png",
        "name": "品牌:Minoz Store",
        "desc": "Hello World"
      },
      {
        "img": "@/assets/logo2.png",
        "name": "品牌:Minoz Store",
        "desc": "你好啊,哈哈哈"
      },
      {
        "img": "../static/carousel1.png",
        "name": "品牌:Minoz Store",
        "desc": "Welcome to my store"
      }
    ]
  }
}

 三、axious的安装和数据mock的一些配置

1.先来安装axios和express,为什么要用到express?因为我们数据的mock中需要用到express框架实现,后面再详细讲解express

①安装axios和express


 

技术分享图片

技术分享图片

同样在package.json中可以看到:

技术分享图片


 

②在build->webpack.dev.conf.js的头部引入

// mock数据
const express = require(‘express‘)
const app = express()
var appData = require(‘./../mock/mock.json‘)
var router = express.Router()

// 通过路由请求本地数据
app.use(‘/api‘, router)

 技术分享图片


 

③在build->webpack.dev.conf.js里的devSever中添加before方法

// 添加before方法
    before(app) {
      app.get(‘/api/index‘, (req, res) => {
        res.json({
          errno: 0,
          data: appData
        })
      })
    }

技术分享图片

 

 

四、使用axios获取mock数据

1.我们进入home.vue页面先引入axios


 

技术分享图片

 

2.然后在methods中写个函数:用axios获取首页数据并打印,然后当vue生命周期为mounted阶段时调用它:

mounted() {
      this.getIndexData();
    },
    methods: {
      getIndexData() {
        axios.get("/api/index").then(res => {
          let data = res.data;
          console.log(data);
        });
      }
    }

技术分享图片

 


 

3.最后进入浏览器中看看数据是不是打印出来了

 技术分享图片

 

【补充】两个比较实用的:

1.IDE里直接编译运行,就不用每次cmd了


 ①

技术分享图片


 ②

技术分享图片


 ③

技术分享图片

 

 2.这个项目之前先是打开cmd运行,但是后来修改了build里面的conf.js的配置,所以,在浏览器中看到的是404not found之类的错误,

此时的解决方法:关闭cmd,重新再运行一次!!!

如果在①的方法中:

技术分享图片

OK,mock的数据就获取到了,下一步就是把值传给组件,然后将数据渲染到页面上

 

 

 以上,完成~~~~

 

axios的使用与数据的mock

标签:desc   .com   info   img   set   png   ESS   class   哈哈哈   

原文地址:https://www.cnblogs.com/crystral/p/9147671.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!