mpvue + express + MongoDB + flyio 实现数据请求

清疚 2023-07-21 11:14 18阅读 0赞

###### 这篇文章涉及的东西有点零散 ######

###### mpvue 搭建微信小程序 [链接][Link 1] ######

###### Node + Express + MongoDB 搭建后台服务[链接][Link 2] ######

###### 基于express 实现商品的插入和查询 [链接][Link 3] ######

这篇文章是基于这些之上的

请求是基于 flyio 的，使用之前，对 flyio 进行封装

###### src/utils/request.js ######

function createFly () { 
      // mpvue框架提供的全局变量，判断当前运行的平台
      if (mpvuePlatform === 'wx') { 
        const Fly = require('flyio/dist/npm/wx')
        return new Fly()
      } else { 
        return null
      }
    }
    
    function handleError (err) { 
      console.log(err)
    }
    
    // get请求
    export function get (url, params = { }) { 
      const fly = createFly()
      if (fly) { 
        return new Promise((resolve, reject) => { 
          fly.get(url, params).then(response => { 
            console.log(response)
            resolve(response)
          }).catch(err => { 
            handleError(err)
            reject(err)
          })
        })
      }
    }
    
    // post 请求
    export function post (url, params = { }) { 
      const fly = createFly()
      if (fly) { 
        return new Promise((resolve, reject) => { 
          fly.post(url, params).then(response => { 
            console.log(response)
            resolve(response)
          }).catch(err => { 
            console.log(err)
            handleError(err)
            reject(err)
          })
        })
      }
    }

###### 接口大致长这个样子 ######

router.get('/list', function (req, res, next) { 
        Goods.find({ }, function (err, doc) { 
            if (err) { 
                res.json({ 
                    status: 1,
                    msg: err.meaasge,
                    result: ''
                })
            } else { 
                res.json({ 
                    status: 0,
                    msg: '',
                    result: { 
                        list: doc
                    }
                })
            }
        })
    })

在 src 目录下新建一个 api 文件夹，里面添加一个 index.js 文件

// 之前说的对 flyio 的封装
    import {  get } from '../utils/request'
    
    // 使用 express 搭建的后台
    const API_URL = 'http://localhost:3000'
    
    // 首页请求数据
    export function getGoodsList () { 
        return get(`${ API_URL}/goods/list`)
    }

在你想要使用的组件里面

###### 出现如下情况的 ######

![在这里插入图片描述][2020040316305448.PNG_pic_center]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]

#### 就可以解决了 ####

[Link 1]: https://blog.csdn.net/qq_43477721/article/details/104248529
[Link 2]: https://blog.csdn.net/qq_43477721/article/details/104558427
[Link 3]: https://blog.csdn.net/qq_43477721/article/details/105238772
[2020040316305448.PNG_pic_center]: https://img-blog.csdnimg.cn/2020040316305448.PNG#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNDc3NzIx_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/9616bd0ddb434ee7aff21280195da14e.png