Executing an external Python script within a Vue application's terminal locally

Question

Executing an external Python script within a Vue application's terminal locally

Hello, I am new to using Vue.js and Firebase. Currently, I am working on creating a user interface for a network intrusion detection system with Vue.js. I have developed a Python script that allows me to send the terminal output to Firebase. Right now, I am testing the app on localhost:8080.

My goal in the Vue app is to be able to trigger the local python script from the terminal by clicking a start button and stop the process by clicking a stop button.

I've come across information online suggesting that accomplishing this task requires a server. Does anyone have any recommendations on how I can achieve this?

I've also heard that using 'child_process' from Node.js might be easier, but unfortunately, it cannot be used directly in Vue.js.

What would be the best or simplest approach to implementing this functionality?

<template>
  <div id="new-packet">
    <h3>Start/Stop Analysis</h3>
    <button type="submit" class="btn">Start</button>
    <router-link to="/home" class="btn green">Stop</router-link>
  </div>
</template>

<script>
export default {
  name: 'new-packet',
  data () {
    return {}
  }
}
</script>

javascript firebase vue.js server

Answer 1

Answer №1

FLASK/DJANGO can be used to establish a restFul API for your python function, as suggested by @mustafa. However, if you prefer not to set up those frameworks, you can create a simple http server handler with the following code:

# Implementation of methods to handle requests to various URIs in the app
class MyHandler(SimpleHTTPRequestHandler):
    def do_HEAD(self):
        self.send_response(200)
        self.send_header('Content-type', 'text/html')
        self.end_headers()

    # Check the URI of the request to serve the appropriate content.
    def do_GET(self):
        if "URLToTriggerGetRequestHandler" in self.path:
            # Execute the corresponding python script if the URI contains URLToTriggerGetRequestHandler and retrieve the data
            # The response sent to "respond" will be returned to the client
            content = pythonScriptMethod()
            self.respond(content)
        else:
            super(MyHandler, self).do_GET() 

    def handle_http(self, data):
        self.send_response(200)
        self.send_header('Content-type', 'application/json')
        self.end_headers()
        return bytes(data, 'UTF-8')

    def respond(self, data):
        response = self.handle_http(data)
        self.wfile.write(response)

# Main method to start the server
if __name__ == '__main__':
    server_class = HTTPServer
    httpd = server_class((HOST_NAME, PORT_NUMBER), MyHandler)
    print(time.asctime(), 'Server Starts - %s:%s' % (HOST_NAME, PORT_NUMBER))
    try:
        httpd.serve_forever()
    except KeyboardInterrupt:
        pass
    httpd.server_close()
    print(time.asctime(), 'Server Stops - %s:%s' % (HOST_NAME, PORT_NUMBER))

You can then make a call to the server from Vue using AXIOS like this:

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('/URLToTriggerGetRequestHandler')
      .then(response => (this.info = response))
  }
})

Directly calling a python script from JavaScript or Vue does not seem feasible.

Answer 2

FLASK/DJANGO can be used to establish a restFul API for your python function, as suggested by @mustafa. However, if you prefer not to set up those frameworks, you can create a simple http server handler with the following code:

# Implementation of methods to handle requests to various URIs in the app
class MyHandler(SimpleHTTPRequestHandler):
    def do_HEAD(self):
        self.send_response(200)
        self.send_header('Content-type', 'text/html')
        self.end_headers()

    # Check the URI of the request to serve the appropriate content.
    def do_GET(self):
        if "URLToTriggerGetRequestHandler" in self.path:
            # Execute the corresponding python script if the URI contains URLToTriggerGetRequestHandler and retrieve the data
            # The response sent to "respond" will be returned to the client
            content = pythonScriptMethod()
            self.respond(content)
        else:
            super(MyHandler, self).do_GET() 

    def handle_http(self, data):
        self.send_response(200)
        self.send_header('Content-type', 'application/json')
        self.end_headers()
        return bytes(data, 'UTF-8')

    def respond(self, data):
        response = self.handle_http(data)
        self.wfile.write(response)

# Main method to start the server
if __name__ == '__main__':
    server_class = HTTPServer
    httpd = server_class((HOST_NAME, PORT_NUMBER), MyHandler)
    print(time.asctime(), 'Server Starts - %s:%s' % (HOST_NAME, PORT_NUMBER))
    try:
        httpd.serve_forever()
    except KeyboardInterrupt:
        pass
    httpd.server_close()
    print(time.asctime(), 'Server Stops - %s:%s' % (HOST_NAME, PORT_NUMBER))

You can then make a call to the server from Vue using AXIOS like this:

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('/URLToTriggerGetRequestHandler')
      .then(response => (this.info = response))
  }
})

Directly calling a python script from JavaScript or Vue does not seem feasible.

Answer 3

Answer №2

If you're looking to create a restful API, consider installing either Django or Flask on your local machine. You can follow this guide for setting up a minimal API using Flask:

Make sure to write your Python code accordingly.
You can then call the Python code from Vue.js by utilizing the restful URL.

Answer 4

If you're looking to create a restful API, consider installing either Django or Flask on your local machine. You can follow this guide for setting up a minimal API using Flask:

Make sure to write your Python code accordingly.
You can then call the Python code from Vue.js by utilizing the restful URL.

Executing an external Python script within a Vue application's terminal locally

Answer №1

Answer №2

Similar questions

What steps should I take to resolve the 'Uncaught Error: Cannot find module 'path'' issue in my React.js application?

Identifying child elements in jQuery with identical IDs

Having trouble sending HTTP requests in Angular 6

What is the best way to trigger an AJAX function every 15 seconds?

`Vue Component failing to display data from Blade File`

What is the method to retrieve the local filepath from a file input using Javascript in Internet Explorer 9?

"Upon loading the page, I encounter JavaScript errors related to Angular's ngOnInit function. However, despite these errors,

How can a particular route parameter in Vue3 with Typescript be used to retrieve an array of strings?

I am excited to create a Dynamic Routing system that selects specific elements from an array of objects using Typescript

Error encountered when utilizing a specialized jQuery extension: "not a function"

Python: Mimicking Splinter/Selenium Functionality to Test a JavaScript-Driven Website

Deciphering the occurrence of jQuery-Mobile page firing events: the mystery behind dialog pages appearing upon closure

The functionality of List.js is currently not optimized for use with tables

Updating the head() properties in Nuxt.js via asyncData() is not possible

Creating dynamic values in data-tables using Vuetify

Which SSO framework works best for integrating Facebook and Twitter logins?

Styling multiple Higher Order Components (HoCs) using Material UI withStyles

Developing a counter/timer feature in a web application using PHP and MySQL

What is the best way to manage asynchronous functions when using Axios in Vue.js?

Learn how to dynamically switch the background image of a webpage using a button in AngularJS