前后端分离项目通过宝塔面板部署到云服务器上,前端页面不显示数据

当我这个前端项目部署到云服务器时没有数据显示。正常来说这个页面的表格里会有信息显示的

img

但是我本地的前端项目可以访问到服务器上的后端数据

解决了 跨域问题 在后端加了一个注解解决了

  • 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7536800
  • 你也可以参考下这篇文章:网上书城项目分析及前端页面
  • 除此之外, 这篇博客: 前后端分离,从云服务器到项目部署,真正的保姆级教程,一篇搞定!中的 2.项目部署是个意思 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 部署项目之前,我觉得部署项目很复杂,很神秘,部署成功后,我觉得就这?

    在具体介绍之前,我想告诉你,其实你已经部署过一次了,而且成功了,只不过是在你的本机而已,

    你说咋可能呢,我自己都不知道,但其实你可以试一下,不信你在你的浏览器输入 127.0.0.1:8080

    我相信如果,你的项目现在还没有启动的话,一定是这个样子,这就是正常的样子
    在这里插入图片描述

    但是 一旦你的项目启动,以Vue项目举例
    在这里插入图片描述
    再访问127.0.0.1:8080,就可以看见你的项目了
    在这里插入图片描述

    这是不是很相似?你现在有了云服务器,你就有它的IP地址,你通过IP地址去访问它,啥都看不见,只显示无法访问,这不就和你没跑项目前一样吗。

    项目部署逻辑其实是这样

    在这里插入图片描述
    明白了这一步,咱们就可以开始在咱们云服务器上部署项目了

  • 您还可以看一下 CSDN讲师老师的基于机器学习的阿里智能助理在电商领域的架构构建与实践课程中的 基于机器学习的阿里智能助理在电商领域的架构构建与实践(上)小节, 巩固相关知识点
  • 以下回答由chatgpt基于相关博客总结生成:

    问题可能出现的原因: 1. 网络连接问题,导致前端无法正确访问后端数据; 2. 服务器配置出现问题,导致后端无法正确处理请求; 3. 前端代码与后端代码不兼容,导致前端无法正确获取后端数据; 4. 数据库连接出现问题,导致后端无法正确读取数据库中的数据。

    调试方法: 1. 检查网络连接,确保服务器和前端能够正确相互通信; 2. 检查服务器端口和防火墙设置,确保后端能够正常接收和处理请求; 3. 查看前端代码和后端代码之间的交互方式,尝试模拟请求并查看响应结果,检查是否有数据格式和编码问题; 4. 检查数据库连接的设置和配置,确保后端能够正确读取数据。

    解决方案: 针对可能出现的原因,可以采用以下解决方案: 1. 确认服务器和前端网络连接正常,并检查DNS是否正常; 2. 检查服务器端口号和防火墙设置,确保后端代码能够正确处理网络请求,并给出正确的响应结果; 3. 检查前端代码和后端代码之间的数据格式是否一致,尝试使用调试工具查看前后端的交互信息,定位问题并排除; 4. 检查数据库连接设置和配置,尝试重新配置和连接数据库,并确保后端能够正确读取数据。

    可能的代码演示如下: 1. 确认网络连接

    // 在前端模拟请求
    fetch('/backendurl')
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
    
    // 在后端检查是否监听了正确的端口
    const http = require('http');
    http.createServer((req, res) => {
      res.writeHead(200, {'Content-Type': 'text/plain'});
      res.end('Hello World!');
    }).listen(8080);
    
    1. 检查服务器端口和防火墙设置

      // 在后端设置监听端口 const http = require('http'); http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Hello World!'); }).listen(80);

      // 检查防火墙配置 sudo ufw allow 80/tcp

    2. 检查前后端交互

      // 在前端模拟请求并输出响应结果 fetch('/backendurl') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));

      // 在后端处理请求,并返回正确的响应结果 const http = require('http'); http.createServer((req, res) => { res.writeHead(200, {'Content-Type': 'application/json'}); const data = {'message': 'Hello World!'}; res.end(JSON.stringify(data)); }).listen(80);

    3. 检查数据库连接设置和配置

      // 在后端设置和调试数据库连接 const mysql = require('mysql'); const connection = mysql.createConnection({ host: 'localhost', user: 'root', password: 'password', database: 'mydatabase' }); connection.connect(); connection.query('SELECT 1 + 1 AS solution', function (error, results, fields) { if (error) throw error; console.log('The solution is: ', results[0].solution); }); connection.end();

你的后端也要部署到后端呀,还有数据库信息,ip 也都要同步

哥们如何解决的 我也是这个问题 无报错 无反应 登录之后就是数据不显示 全是空白页