美文网首页PuffBook项目总结小记
[PuffBook项目总结]mock.js模拟数据,axios做

[PuffBook项目总结]mock.js模拟数据,axios做

作者: Yixi_Li | 来源:发表于2019-04-11 15:21 被阅读0次
    1. mock.js源码:https://github.com/nuysoft/Mock
    2. 替换原生的XMLHttpRequest,使用简便,不需要改变现有的请求代码
    3. 本项目采用axios做网络请求数据,请求完毕后,代码在线上和线下都是一样的,不需要去替换,在线下本地调试的时候,axios请求完,mockjs会把原生的XMLHttpRequest做一个替换,然后返回mock.js的接口
    4. 提供丰富的数据类型
    5. 无法支持blob类型,无法模拟下载(我们的电子书下载的时候会使用Blob类型)

    使用mock.js

    • 安装mock.js
    npm i mockjs --D
    
    • 安装axios
    npm i axios --save
    
    • 创建mock文件夹,提供原数据(一些json文件,用来做接口数据的模拟)


      image.png
    • mock文件夹下创建index.js 并在项目的main.js中引入

    • 在index.js中做初始化

    import Mock from 'mockjs'
    import home from './bookHome' // 首页的所有数据
    import shelf from './bookShelf' // 书架的所有数据
    import list from './bookList' // 图书的所有列表
    import flatList from './bookFlatList' // 方便做查询用的
    
    // 第一个参数,正则表达式匹配所请求的URL
    Mock.mock(/\/book\/home/, 'get', home) // 前端请求/book/home的时候,就会请求home里的数据
    Mock.mock(/\/book\/shelf/, 'get', shelf)
    Mock.mock(/\/book\/list/, 'get', list)
    Mock.mock(/\/book\/flat-list/, 'get', flatList)
    
    • 在src目录下创建api目录,创建store.js利用axios做数据请求
    import axios from 'axios'
    export function home() {
      return axios({
        method: 'get',
        url: `${process.env.VUE_APP_BASE_URL}/book/home`
      })
    }
    

    这样做就可以请求mock里Home中的数据

    • 在StoreHome组件中调用接口home(),这里异步拿到的response就是Home中的数据
    mounted () {
          // 发送请求 异步方式拿到结果
          home().then(response => {
            if (response && response.status === 200) {
              const data = response.data
              const randomIndex = Math.floor(Math.random() * data.random.length)
              this.random = data.random[randomIndex]
              this.banner = data.banner
              this.guessYouLike = data.guessYouLike
              this.recommend = data.recommend
              this.featured = data.featured
              this.categoryList = data.categoryList
              this.categories = data.categories
            }
          })
        }
    
    • 比如再把这里的random传给FlapCard子组件
    <flap-card :data="random"></flap-card>
    

    大致就是这样一套完整的流程

    相关文章

      网友评论

        本文标题:[PuffBook项目总结]mock.js模拟数据,axios做

        本文链接:https://www.haomeiwen.com/subject/jodtwqtx.html