Question

因此，一个朋友给了我一个半完成的网站，以帮助完成他的创业。问题是，我不知道PHP和其他开发人员在项目上走了走！我留在后面跟着工作。我发现php系统简陋，因此我使用Vue.JS和Flask重新开发了该网站的另一部分。我使用Google的Firebase部署了vue.js前端，并在pythonanywhere上部署了Flask。但是，主站点托管在Linode上，这是我也不熟悉的平台。我试图弄清楚，如何将我所做的事情附加到主站点（用PHP和SQL数据库编程）中足够长的时间，以完全在Vue.js和flask中重新开发该站点？

因此，目前，我已经从他们的git存储库下载了整个文件，基本上我浏览了一下，并有一个朋友帮助我删除了他们站点上的许多冗余和错误。我不适应该语言，因此我使用Vue.JS进行了前端的重新开发，并将前端部署在firebase和Flask python上作为后端，并使用了SQLAlchemy数据库，该数据库可以在pythonanywhere上运行。 >

这是我如何调用烧瓶API的代码段

       async setAuthenticated(login_status, user_data) {
      // Update the states
      this.logged_user_id = user_data.id;
      this.logged_user_username = user_data.username;
      this.authenticated = login_status;
      this.token = user_data.token;

      // Initialize Pusher JavaScript library
      pusher = new Pusher(process.env.VUE_APP_PUSHER_KEY, {
        cluster: process.env.VUE_APP_PUSHER_CLUSTER,
        authEndpoint: "https://theApiFrom.pythonanywhere/api/pusher/auth",
        auth: {
          headers: {
            Authorization: "Bearer " + this.token
          }
        }
      });

      // Get all the users from the server
      const users = await this.axios.get("https://theApiFrom.pythonanywhere.com/api/users", {
        headers: { Authorization: "Bearer " + this.token }
      });

      // Get all users excluding the current logged user
      this.users = users.data.filter(
        user => user.userName != user_data.username
      );

      var notifications = pusher.subscribe(
        `private-notification_user_${this.logged_user_id}`
      );

      notifications.bind("new_chat", data => {
        const isSubscribed = pusher.channel(data.channel_name);
        if (!isSubscribed) {
          const one_on_one_chat = pusher.subscribe(data.channel_name);

          this.$set(this.messages, data.channel_name, []);

          one_on_one_chat.bind("new_message", data => {
            // Check if the current chat channel is where the message is comming from
            if (
              data.channel !== this.current_chat_channel &&
              data.from_user !== this.logged_user_id
            ) {
              // Get the index of the user that sent the message
              const index = this.users.findIndex(
                user => user.id == data.from_user
              );
              // Set the has_new_message status of the user to true
              this.$set(this.users, index, {
                ...this.users[index],
                has_new_message: true
              });
            }

            this.messages[data.channel].push({
              message: data.message,
              sentiment: data.sentiment,
              from_user: data.from_user,
              to_user: data.to_user,
              channel: data.channel
            });
          });
        }
      });
    },
    getMessage: function(channel_name) {
      this.axios
        .get(`https://theApiFrom.pythonanywhere/api/get_msg/${channel_name}`, {
          headers: { Authorization: "Bearer " + this.token }
        })
        .then(response => {
          this.$set(this.messages, channel_name, response.data);
        });
    },

    chat: function(id) {
      this.active_chat_id = id;

      // Get index of the current chatting user...
      this.active_chat_index = this.users.findIndex(
        user => user.id == this.active_chat_id
      );

      // Set the has_new_message status of the user to true
      this.$set(this.users, this.active_chat_index, {
        ...this.users[this.active_chat_index],
        has_new_message: false
      });

      this.axios
        .post(
          "https://theApiFrom.pythonanywhere/api/request_chat",
          {
            from_user: this.logged_user_id,
            to_user: this.active_chat_id
          },
          { headers: { Authorization: "Bearer " + this.token } }
        )
        .then(response => {
          this.users[this.active_chat_index]["channel_name"] =
            response.data.channel_name;

          this.current_chat_channel = response.data.channel_name;

          // Get messages on this channel
          this.getMessage(response.data.channel_name);

          var isSubscribed = pusher.channel(response.data.channel_name);

          if (!isSubscribed) {
            var channel = pusher.subscribe(response.data.channel_name);

            this.$set(this.messages, response.data.channel_name, []);

            channel.bind("new_message", data => {
              //Check if the current chat channel is where the message is comming from
              if (
                data.channel !== this.current_chat_channel &&
                data.from_user !== this.logged_user_id
              ) {
                // Set the has_new_message status of the user to true
                this.$set(this.users, this.active_chat_index, {
                  ...this.users[this.active_chat_index],
                  has_new_message: true
                });
              }

              this.messages[response.data.channel_name].push({
                message: data.message,
                sentiment: data.sentiment,
                from_user: data.from_user,
                to_user: data.to_user,
                channel: data.channel
              });
            });
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    send_message: function(message) {
      this.axios.post(
        "https://theApiFrom.pythonanywhere/api/send_msg",
        {
          from_user: this.logged_user_id,
          to_user: this.active_chat_id,
          message: message,
          channel: this.current_chat_channel
        },
        { headers: { Authorization: "Bearer " + this.token } }
      );
    }

我要实现的目标是将我创建的内容添加到主站点文件中，以便可以将域名配置为在实际站点下，以便人们可以导航到主站点上的其他功能。我主要致力于将Vue.js（客户端）文件放到主站点文件中，因为我有Webhooks指向前端将调用的python端。

Answer 1

尝试使用Apache虚拟主机。

在不同的端口上运行每个站点“ php”和“ flask”

然后使用apache vhost将localhost / php和localhost / flask指向localhost：ports

示例：

本地主机：8000 <-本地主机/ php
本地主机：8080 <-本地主机/烧瓶

如何整合两个不同的后端框架？

1 个答案: