front-end and back-end confusion about vue.py

[stefanhoelzl]

The server side should be the same flask application, does not matter if you use vue.py or Vue.js.
So you should be able to takes this as is from the exercise.

I would suggest to try a simple vue.py app to see if the server communication is working.
A simple starting point to test the server communication could be this vue.py app:

from vue import VueComponent

class App(VueComponent):
    template = "<div />"

    def mounted(self):
        req = ajax.ajax()
        req.open("GET", "http://localhost:5000/ping", True)
        req.bind("complete", self.read)
        req.send()

    def read(self, ev):
        console.log(ev.text)

App("#app")

[aaronchn]

Hi @stefanhoelzl

I'm very sorry, I may not have expressed my meaning clearly. Or I may not even be able to express my meaning accurately.

I tried to make Flask as a RESTful API provider (backend) like that in app.py

@app.route('/ping', methods=['GET'])
def ping_pong():
    return jsonify('pong!')

Ideally, after I execute vue-cli deploy flask, the api should be ready and waiting for a request from the client browser (may be by vue.py).

However, as far as I know for the app.py,it looks like everything is ready for vue ( VueComponent, VueRouter, VueRoute / class Router(VueRouter), class App( VueComponent) ), I don't know where and how I should define the RESTful API, or in other words, I need to make the RESTful API ready at the same time while ensuring that vue(.py) works.

If possible, it would be nice to include an example of a simple front-to-back interaction of ping->pong in the demo, and if the attempt is successful, I would be happy to contribute this example to the demo for this project if I can achieve this with your help.

By the way, some of the Demo of vue.py don't work properly in my environment, either because some dependencies are out of date or because some features have changed.

I can't do much about this at the moment due to my existing skills. If possible, I'd like to see these demos continue to work properly. A good demo will help people who are new to vue.py related concepts to get used to it quickly.

Thank you very much!

[stefanhoelzl]

so to clarify things:
vue-cli deploy flask does start a flask server but only to serve the things required by the vue.py frontend.
So far it is not intended to run other backend endpoints.

app.py with your VueComponent runs inside the browser.
app.py from your exercise, setting up the flask /ping endpoint runs as a regular python process on your machine.
These are two different files, do not mix them up

So create a backend.py with this content (simplified from your exercise)

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/ping', methods=['GET'])
def ping_pong():
    return jsonify('pong!')

if __name__ == '__main__':
    app.run()

and run python backend.py. This will start your backend service.

Then create app.py for your vuepy application

from vue import VueComponent

class App(VueComponent):
    template = "<div />"

    def mounted(self):
        req = ajax.ajax()
        req.open("GET", "http://localhost:5000/ping", True)
        req.bind("complete", self.read)
        req.send()

    def read(self, ev):
        console.log(ev.text)

App("#app")

and run vue-cli deploy flask to serve the frontend.

Regarding the examples not working:
Please create a new issue for them with a error description.

[aaronchn]

Got it
Thx!

[aaronchn]

Hi @stefanhoelzl

I have expressed my current understanding of vue. py in a small example, which I also think is newbie friendly.

Limited by my English expression and code level, I would like to send you this small example as an email instead of trying to PR it directly, and expect that it will be mentioned in the examples after you review it and make the necessary small changes.

If my idea is not too abrupt and offensive, please ping me by email and I will reply as soon as possible.

Thanks!

[stefanhoelzl]

Please open a PR for it, then it is easy to discuss it and get it ready to be merged

[stefanhoelzl]

closed due to inactivity