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

2023-11-05

一个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  //显示指定进程的日志信息

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端向后端请求数据,后端向数据库请求并回传过程 的相关文章

随机推荐

  • 最全的中文编码

    GB18030
  • PTA L2-010 排座位 (25 分)

    include
  • 百亿级数据分表后怎么分页查呢?

    当业务规模达到一定规模之后 像淘宝日订单量在5000万单以上 美团3000万单以上 数据库面对海量的数据压力 分库分表就是必须进行的操作了 而分库分表之后一些常规的查询可能都会产生问题 最常见的就是比如分页查询的问题 一般我们把分表的字段称
  • HCIP VRRP技术

    一 VRRP概述 VRRP Virtual Router Pedundancy Protocol 虚拟路由器冗余协议 既能够实现网关的备份 又能够解决多个网关之间互相冲突的问题 从而提高网络可靠性 局域网中的用户的终端通常采用配置一个默认网
  • osg学习(六十)setTextureMode setTextureAttributeAndModes

    ss setTextureMode unit mode value ss setTextureAttributeAndModes unit tex get osg StateSet cpp void StateSet setTextureM
  • linux系统gpio中断的实现(提供例程)

    该接口基于linux提供的通用中断API接口实现 1 流程 gpio外部引脚发生电平变化 上升沿 下降沿 gt 触发驱动层 driver c 的中断服务函数 gt 在中断服务函数中通过异步消息机制通知到应用层 app c 2 中断响应时间测
  • linux内核SPI总线驱动分析(一)

    原文地址 http www cnblogs com liugf05 archive 2012 12 03 2800457 html SPI总线驱动分析 1 SPI概述 SPI是英语Serial Peripheral interface的缩写
  • ubuntu20.04设置静态ip文件的地址

    旧版本在eth0 新版本在 etc netplan 01 network manager all yaml 可配置关闭hdcp实现静态ip设置及DNS和网关 具体设置内容网上教程很多
  • 设置button按钮背景色,及字体的颜色

    新建一个对话框工程 在对话框中添加一个按钮 然后 从button类继承一个子类 CNewButton 重载 PreSubclassWindow 修改按钮的属性 ModifyStyle 0 BS OWNERDRAW 告诉系统 用户手绘按钮 然
  • python练习

    题目 一个数如果恰好等于它的因子之和 这个数就称为 完数 例如6 1 2 3 编程找出1000以内的所有完数 from sys import stdout for j in range 2 1001 k n 1 s j for i in r
  • 泛统计理论初探——机器学习的欠采样算法

    统计学习 经典欠采样方法简介 机器学习中的欠采样方法 在之前的文章中己经介绍了重采样的方法和使用情况 本次文章将会介绍欠采样方法的原理和经典欠采样算法的步骤以及使用背景 从原理上来说 欠采样方法的思路是和重采样方法刚好相反的 因为重采样是针
  • 用于获得个股MACD数据及每日收盘数据的python程序

    用于获得个股MACD数据及每日收盘数据的python程序 几年前上一波股票牛市的时候 曾经编写了一个判断股价的python程序 最近几日股票市场又开始比较火热 估计有的朋友可能需要进行股票数据的获得和分析 现在把那个程序中用于获得macd数
  • STM32G0系列ADC扫描序列模式解读

    有人在使用STM32G0芯片的ADC模块时 往往因为扫描模式的理解不到位或选择不当导致些问题 这里就该话题做点简单分享介绍 不妨以一个实例展开 现在共用到ADC1模块的4个ADC通道 即1个片内Vrefint通道和其它三个外部通道CH8 C
  • 浏览器强制刷新页面

    Chrome官方推荐使用如下快捷键 就可以不使用页面缓存进行刷新 Windows和Linux操作系统 Shift F5 或 Ctrl Shift R Mac OS Cmd Shft R 如果上面方法没有效果 可以按下F12 Windows
  • 基于卡尔曼滤波进行四旋翼动力学建模(Simulink&Matlab)

    欢迎来到本博客 博主优势 博客内容尽量做到思维缜密 逻辑清晰 为了方便读者 座右铭 行百里者 半于九十 本文目录如下 目录 1 概述 2 运行结果 3 参考文献 4 Matlab代码实现 1 概述 文献来源 摘要 由于近年来民用和军事领域对
  • redis的安装与配置

    解压redis包 make isntall进行安装 但是报错 找了半天 找到一个方法 在安装的时候加入参数 make MALLOC libc 就解决了 当然还有其他帖子的步骤 1 获取安装文件 wget http download redi
  • Caused by: java.lang.ClassNotFoundException常见异常解决方法!

    常见的Caused by java lang ClassNotFoundException异常原因 ClassNotFoundException属于checkException 检查异常 一般在项目启动的时候出现 出现该问题原因归纳为 1
  • 如何删除重复字符

    算法思路 第一种方法 蛮力法 最简单的方法就是把这个字符串看作是一个字符数组 对该数组使用双重循环进行遍历 如果发现有重复的字符 就把该字符置为 0 最后再把这个字符数组中所有的 0 去掉 此时得到的字符串就是删除重复字符后的目标字符串 代
  • vue3+ts的父子组件传参以及withDefaults、defineExpose用法介绍

    1 父组件给子组件传参 以及withDefaults用法介绍 父组件代码
  • 前端向后端请求数据,后端向数据库请求并回传过程

    一个select下拉框 点击不同的选项向后端请求相应机位的图片 1 首先在下拉框的 change 中添加向后端获取请求的接口 function getOtherImage camera axios get image other image