基于宝塔Linux + vue3 + pythonFlask + mysql 完整项目方案运行总结

一定要先用空白页面调试前后端接口环境！

重要的写在前面、因为我是在学习过程中徐徐渐进地部署的环境。本来是打算只vue的，结果想上传到云服务器让大家都看到，于是开始学搭建阿里云服务器；然后因为有点Linux的底子，就搭建的Linux的操作系统的环境；虽然是大多情况用的宝塔面板进行的项目上传，但是所有的Bug飘红，加起来也真够喝一壶了。

本文主要用来记录所有开发环境下的报错异常。供他人参考。具体的代码不做过多解释。

Vue

因为我一开始使用的是从 vite.config.js中配置路径，就像这样

 server:{

    proxy:{
      "/regist":{
        target:"http://127.0.0.1:5000/regist",
        changeOrigin:true,
        rewrite: (path) => path.replace(/^\/regist/, ''),
      },
      "/checkLogin":{
        target:"http://127.0.0.1:5000/checkLogin",
        changeOrigin:true,
        rewrite: (path) => path.replace(/^\/checkLogin/, ''),
      },
    }
  },

之后在前端页面这样调用：

const checkLogin = function () {
  let params = new URLSearchParams();
  params.append("userName", userAccount);
  params.append("userPass", userPass);
  axios
    .post("/checkLogin", params, {
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
    })
    .then((res) => {
      if (res.data.state == 0) {
        ElMessage({
          message: res.data.message,
          type: "success",
        });
        router.push({ path: "/indexContent" });
      } else {
        ElMessage({
          message: res.data.message,
          type: "warning",
        });
      }
    })
    .catch(function (error) {
      ElMessage({
        message: "发生未知错误，编码：" + error + "，请联系管理员",
        type: "warning",
      });
    });
};

看似没有问题，并且在本地服务器上正常运行。但是一上传到服务器，他就跑到localHost/checkLogin寻找路径去了，完全无视了127.0.0.1:5000，特别是无视掉了这个端口号！找不到具体的端口号自然就没法发送HTTP请求啊，所以报错也是理所当然....

解决方案：使用绝对路径。就不要在 vite.config.js 中定义了，直接将axios中的' /checkLogin' 改为http://##你的域名##:5000/checkLogin。这个地方可能在本地服务器会出现跨域的问题，虽然在谷歌浏览器的组件中下载Proxy SwitchyOmega可以短暂解决本地调试的问题。但是实际上传到云服务器还是会出现跨域的问题。

前端vue设置的跨域解决方案：调试的过程其实安装谷歌的组件就可以了。但是如果上传到服务器，前端在请求头中可以声明 'Access-Control-Allow-Origin': '*' ；这样就可以了。因为主要的跨域配置大多需要在服务器端通过CORS解决。所以前端的代码中不太需要呈现过多的跨域解决方案。

其实前端的最最最主要的问题就是正确找到服务器端的接口，并正确提供数据的问题。搞清楚你发送的POST的请求是JSON数据还是表单数据，搞清楚你的请求头到底是"Content-Type": "application/x-www-form-urlencoded" 还是 application/json ，之后问明白你的服务器端的开发人员，有没有设置其他的匹配选项。设置跨域声明 'Access-Control-Allow-Origin': '*' 。剩下的就是开发好交互页面就可以了。

Python

宝塔面板配置Python的运行环境是比较令人头疼的。

首先，确保你的运行端口。我一开始没有意识到这个问题，于是在python的代码最后一个片段，声明了运行端口：

if __name__ == '__main__':
    app.run(host='127.0.0.1', port=5000)

看似没有什么问题。本地调试也可以正常运行，并且端口号5000一点问题也没有。但是一旦上传到服务器，立马报错，前后端的接口找不到！

解决方案：此代码片段可以解释为，我后台Python的程序跑在本地5000的端口上。结果我Vue中访问的是域名:5000 这个端口号，自然得不到想要的结果。这个部分其实可以将127.0.0.1修改为自己服务器的域名，也可以修改为0.0.0.0 ，后者在大型服务器中不建议使用，但是在平常的小规模开发中，还是绰绰有余的。

关于python宝塔面板的搭建，

先将python打包上传到云服务器，然后添加python项目

大概就是这么设置。

这个地方提交完后，python是没法正常运行的。原因就是你代码中的片段，导入的第三方库，他并不能自动下载安装、导入。

通过模块功能下载所需要的第三方库，此处我导入了

import flask 
import flask_cors
import mysql-connector-python

安装完后运行，便可以正常运行了。如果出现问题，可以点击设置，进入日志查看原因

Mysql

先从本地导出.sql文件，之后添加数据库，确保数据库名和服务端请求的数据库名相同（或者和本地的调试数据库名相同），之后导入数据库.sql文件，即可。

其实调试的过程中，bug飘红的次数远比目前写下的多。但是等项目调试完成后，总结出来也就那么大体几个问题。

前后端接口的调用。跨域问题是一个大问题。

云服务器需要开放相应接口安全组，或者防火墙。

之所以建议使用空白页面调试前后端接口开发环境，是因为在项目的后期，如果出现问题，有些时候报404和500错误，没法辨别是前端axios出了问题，还是后端提供的接口出了问题。

但是在以后的具体项目开发中，一定要标注好使用localhost或者127.0.0.1域名端口的位置。在后期上传到云服务器的过程中，都要更改为相应的域名端口，以便他人访问、

先写到这，后期想到什么代表性BUG再加...