前端向后端请求数据,后端向数据库请求并回传过程

一个select下拉框,点击不同的选项向后端请求相应机位的图片。

1.首先在下拉框的@change=*********中添加向后端获取请求的接口

function getOtherImage(camera) {
  axios
    .get('/image/other-image', {
     //自带了机位信息、图片名称、数据集Id
      params: {
        camera: camera,
        imageName: view.imageInfo.name,
        datasetId: store.transmit.enterAnnotation.datasetId
      }
    })
    .then((res) => {
     //请求 id,url,camera,deviceId等
      view.imageInfo.id=res.data.id,
      view.imageInfo.url=res.data.url,
      view.imageInfo.camera=res.data.camera,
      view.imageInfo.deviceId=res.data.deviceId
    })
    .catch((err) => {
      console.log(err)
    })
}

想要向后端请求一个数据,需要写一个js后端接口向数据库请求数据,本次请求的图片信息与之前请求数量等不太一样,因为真实的图片数据在250服务器,但是我们是向245请求的资源,245相当于一个转存功能 它是将250请求的图片静态放到245本地的,所以本次增加了一个245服务器转存的接口。整个流程:    前端-->245-->250 然后250-->245-->前端

中转功能的245服务器:添加一个软连接

在****************image.js中******************

// 请求其他机位图片
router.get('/other-image', function (req, res, next) {
//这是向250服务器请求数据,真实的接口/dataset/other-image'在这里
  request(
    {
      url: 'http://192.168.2.250:4001/dataset/other-image',
      method: 'get',
      json: true,
      headers: {
        Accept: 'application/json, text/plain, */*',
        'content-type': 'application/json',
        token: req.headers.token,
        groupid: req.headers.groupid,
        userid: req.headers.userid
      },
      qs: req.query
    },
    function (error, response, body) {
//这些是从250服务器返回过来的数据,如果中转这里没问题,前端是可以接收到数据的
    console.log('body', body)//不确定哪里出了问题查看
      if (error === null) {
        execSync(
          'ln -fs "' + body.path + '/' + body.imageName + '" "' + cache.systemPath + '/public/linkImage/' + body.imageName + '"'
        )
        body['url'] = 'http://iseeserver:6508/linkImage/' + body.imageName

        res.send(body)
      } else {
        res.send({ error: error })
        log(error)
      }
    }
  )
})

真实的250服务器:添加了一个/other-image的一个请求其他机位图片的接口

***************dataset.js中***************

// 请求数据集中其他机位的图片
router.get('/other-image', async (req, res) => {
  console.log('可以响应到啦!', req.query)
  // let cameraIfo = await dbMysql.select(req.body.groupId, 'dataset_' + req.query.datasetId, { camera: req.query.camera }, null, null)
  if (req.query.imageName) {
    let imageCount = req.query.imageName.split('-')[3].split('.')[0]
    let cameraInfo = await dbMysql.sql(
      req.body.groupId,
      'select * from dataset_' +
        req.query.datasetId +
        ' where camera = "' +
        req.query.camera +
        '" and imageName like "%-' +
        imageCount +
        '.%"'
    )
    let maxImageObj = cameraInfo[0]; // 默认最大的对象为第一个
    for (let i = 1; i < cameraInfo.length; i++) {
      let imageName = cameraInfo[i].imageName;
      let currentImageCount = imageName.split('-')[1];
      if (parseInt(currentImageCount) > parseInt(maxImageObj.imageName.split('-')[1])) {
        maxImageObj = cameraInfo[i]; //保留最大的也就是最近的
      }
    }
    res.send(maxImageObj)
    console.log('maxImageObj', maxImageObj)
  }
})

验证250服务器上的接口有没有回应或者查看console.log打印的东西,可以连接到服务器

1.pm2 ls     //列出所有进程
2.pm2 restart 0  //重新启用相应的进程
3.pm2 log 0  //显示指定进程的日志信息

通过以上命令查看。我个人最大的毛病就是健忘+思路不清晰 要请求什么样的数据

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
App前端后端数据交互是指在移动应用程序中,前端后端之间进行数据的传输和交换。前端是指App用户界面的展示层,负责与用户交互,收集用户的输入并展示数据后端是指服务器端的处理层,负责接收前端发送请求并处理数据,最终将结果返回给前端。 在数据交互过程中,前端要向后端发送请求获取所需的数据或执行相应的操作。请求可以通过HTTP协议发送,常见的请求类型有GET、POST、PUT、DELETE等。前端需要组装请求,如用户认证信息、查询条件等,并将其发送后端后端在接收到前端请求之后,会对请求进行解析,并根据请求内容进行相关的数据处理。后端可以通过访问数据库、调用其他接口或进行计算等操作来获取、处理或生成数据。处理完成后,后端会将处理结果封装成HTTP响应并发送前端前端在接收到后端的响应之后,会对响应进行解析,提取出所需的数据并进行展示或执行相应的操作。前端可以根据后端返回的状态码和响应内容来处理异常情况,并根据需要进行相应的错误提示或重试操作。 为了实现高效的数据交互,可以采用一些优化策略。例如,可以使用数据缓存来减少网络请求,使用压缩算法压缩数据体积,使用异步请求来提升用户体验等。 总之,App前端后端数据交互是移动应用程序中至关重要的一环,它通过前后端之间的数据传输和交换,实现了用户界面和服务器端的无缝连接,满足了用户获取数据和执行操作的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值