testdrivenio / flask-vue-crud Goto Github PK

View Code? Open in Web Editor NEW

784.0 23.0 345.0 475 KB

Single Page App with Flask and Vue.js

License: MIT License

JavaScript 6.13% HTML 2.20% Vue 77.44% Python 14.22%

flask vuejs vue python javascript crud restful-api

flask-vue-crud's Introduction

Developing a Single Page App with Flask and Vue.js

Want to learn how to build this?

Check out the tutorial.

Want to use this project?

Fork/Clone

Run the server-side Flask app in one terminal window:

$ cd server
$ python3 -m venv env
$ source env/bin/activate
(env)$ pip install -r requirements.txt
(env)$ flask run --port=5001 --debug

Navigate to http://localhost:5001

Run the client-side Vue app in a different terminal window:
```
$ cd client
$ npm install
$ npm run dev
```
Navigate to http://localhost:5173

flask-vue-crud's People

Contributors

Stargazers

Watchers

Forkers

podovzhniy projetosparalelos partrita tesla9527 bechir01985 goryszewskig dannystella enixdark tuanhtr efeng1st izderic yijxiang fikrihaikalrizki baiyongzhen arkadi81 chilismaug avishayp gridl sethips papayaer eecevit phanslik-tgm amessner-tgm odeveci-tgm mmatouschek mwintersperger-tgm tfnick faydin-tgm vschwartz-tgm risaruu dgreyling ghamarian ymiao-tgm pmazzolini-tgm brasic-tgm mseemann-tgm sappel-tgm pzhanel-tgm ovicovac-tgm netesanovic dariobruckner davidminh-vu dsamwald-fhtw ycmytot harrywang snowind yhjohn163 hhy5277 zhengger thindo jitendraky aalmir beshe maschzh hello-kukoo jorgerpo jjemio mrhm9527 jhengy johnc-alaya ahmadswd le-fantosme sujeetsharma1980 blockchain-bobby bilalmerokhel xrm66666 stabacco ivnle knuckerr spatialhast ronenabr k9coates ksadowskinomtek dausech rams502 szmufo a58982284 hhoox vzxxbacq weijianxing igorgorovoy shirishkz stjordanis gxhelp mckang juan-pe intherye sunmoonsan pasca15 qiqid93 cn1289 joysnow paulkarayan drupalio stackriot-labs mariuswallin taonguyen740 stephen-fang codecore-kadamski brulejr

flask-vue-crud's Issues

itsdangerous, MarkupSafe installation errors on Ubuntu 18.04

I had to 'pip install wheel' in my virtual environment to avoid the following errors.

jeffl@ubuntu1804:~/flask-vue-crud$ source venv/bin/activate
(venv) jeffl@ubuntu1804:~/flask-vue-crud$ ls
app.py  venv
(venv) jeffl@ubuntu1804:~/flask-vue-crud$ pip install Flask==1.0.2 Flask-Cors==3.0.4
Collecting Flask==1.0.2
  Using cached https://files.pythonhosted.org/packages/7f/e7/08578774ed4536d3242b14dacb4696386634607af824ea997202cd0edb4b/Flask-1.0.2-py2.py3-none-any.whl
Collecting Flask-Cors==3.0.4
  Using cached https://files.pythonhosted.org/packages/61/f8/6a978ee0a2592463f8ab9e8834789126a32d5244a57b3f58b5cb4cd6cfe5/Flask_Cors-3.0.4-py2.py3-none-any.whl
Collecting Jinja2>=2.10 (from Flask==1.0.2)
  Using cached https://files.pythonhosted.org/packages/7f/ff/ae64bacdfc95f27a016a7bed8e8686763ba4d277a78ca76f32659220a731/Jinja2-2.10-py2.py3-none-any.whl
Collecting Werkzeug>=0.14 (from Flask==1.0.2)
  Using cached https://files.pythonhosted.org/packages/20/c4/12e3e56473e52375aa29c4764e70d1b8f3efa6682bef8d0aae04fe335243/Werkzeug-0.14.1-py2.py3-none-any.whl
Collecting click>=5.1 (from Flask==1.0.2)
  Using cached https://files.pythonhosted.org/packages/34/c1/8806f99713ddb993c5366c362b2f908f18269f8d792aff1abfd700775a77/click-6.7-py2.py3-none-any.whl
Collecting itsdangerous>=0.24 (from Flask==1.0.2)
  Using cached https://files.pythonhosted.org/packages/dc/b4/a60bcdba945c00f6d608d8975131ab3f25b22f2bcfe1dab221165194b2d4/itsdangerous-0.24.tar.gz
Collecting Six (from Flask-Cors==3.0.4)
  Using cached https://files.pythonhosted.org/packages/67/4b/141a581104b1f6397bfa78ac9d43d8ad29a7ca43ea90a2d863fe3056e86a/six-1.11.0-py2.py3-none-any.whl
Collecting MarkupSafe>=0.23 (from Jinja2>=2.10->Flask==1.0.2)
  Using cached https://files.pythonhosted.org/packages/4d/de/32d741db316d8fdb7680822dd37001ef7a448255de9699ab4bfcbdf4172b/MarkupSafe-1.0.tar.gz
Building wheels for collected packages: itsdangerous, MarkupSafe
  Running setup.py bdist_wheel for itsdangerous ... error
  Complete output from command /home/jeffl/flask-vue-crud/venv/bin/python3.6 -u -c "import setuptools, tokenize;__file__='/tmp/pip-build-shu01tov/itsdangerous/setup.py';f=getattr(tokenize, 'open', open)(__file__);code=f.read().replace('\r\n', '\n');f.close();exec(compile(code, __file__, 'exec'))" bdist_wheel -d /tmp/tmpfnrwuvmfpip-wheel- --python-tag cp36:
  usage: -c [global_opts] cmd1 [cmd1_opts] [cmd2 [cmd2_opts] ...]
     or: -c --help [cmd1 cmd2 ...]
     or: -c --help-commands
     or: -c cmd --help

  error: invalid command 'bdist_wheel'

  ----------------------------------------
  Failed building wheel for itsdangerous
  Running setup.py clean for itsdangerous
  Running setup.py bdist_wheel for MarkupSafe ... error
  Complete output from command /home/jeffl/flask-vue-crud/venv/bin/python3.6 -u -c "import setuptools, tokenize;__file__='/tmp/pip-build-shu01tov/MarkupSafe/setup.py';f=getattr(tokenize, 'open', open)(__file__);code=f.read().replace('\r\n', '\n');f.close();exec(compile(code, __file__, 'exec'))" bdist_wheel -d /tmp/tmprr7yctaqpip-wheel- --python-tag cp36:
  usage: -c [global_opts] cmd1 [cmd1_opts] [cmd2 [cmd2_opts] ...]
     or: -c --help [cmd1 cmd2 ...]
     or: -c --help-commands
     or: -c cmd --help

  error: invalid command 'bdist_wheel'

  ----------------------------------------
  Failed building wheel for MarkupSafe
  Running setup.py clean for MarkupSafe
Failed to build itsdangerous MarkupSafe
Installing collected packages: MarkupSafe, Jinja2, Werkzeug, click, itsdangerous, Flask, Six, Flask-Cors
  Running setup.py install for MarkupSafe ... done
  Running setup.py install for itsdangerous ... done
Successfully installed Flask-1.0.2 Flask-Cors-3.0.4 Jinja2-2.10 MarkupSafe-1.0 Six-1.11.0 Werkzeug-0.14.1 click-6.7 itsdangerous-0.24
(venv) jeffl@ubuntu1804:~/flask-vue-crud$

I recognize that this issue isn't specific to your code. I though I'd point this out in case you think a note on the blog page and/or the README might be appropriate. Great tutorial, btw.

rest.api

hello,
I finished both sides for the beginning. flask is working in local (5000) I sent ping and its turning pong.
after that, I finished the second part but they are not speaking with each other. There is no text on the button . both of them is working separately but they are not working at the same time what is my fault. if you can help me I will be so appreciated

fresh install doesnt work?

I cloned the repo and followed the readme but when navigating to /ping I get this:

I see this error in the logs:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/sockjs-node/info?t=1571936072469. (Reason: CORS request did not succeed).

I am new to VUE. Thanks for your repo, any help is appreciated.

Edit: So it appears that if I access http://localhost:8080/ping from the same box I am hosting the front/backends on, it works. Trying to access this from another IP/computer it fails.

Usage without building / npm

For simplicity, it would be great to have a version that works without having building/packing tools.

The current version uses ... 223 MB of Node modules, and probably more: on Windows npm install stops at this point because some modules are node available for the Windows platform.

For such a simple CRUD, it would be great to have a simple version without many required libraries, do you think it is possible? A little bit like https://dzone.com/articles/vue-js-application-without-build

Update main.js to use router.js missing in your tutorial

Hello Michael,
Thanks for your tutorial.
I had some trouble to get started though, I was blocked at "You should now see Hello! in the browser at http://localhost:8080/ping.".
After a few head-scratching minutes, I figured out (thanks to this repo), that your tuto doesn't mention the update of main.js, where the router needs to be added:

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

I hope you can find a few minutes to update the tuto and save the hair of future strangers finding your good work ;)
Thanks!

tutorial inconsistency

tutorial says

Finally, within client/src/App.vue, remove the navigation:

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

but the actual code says

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

and removing this breaks the entire app.

tutorial says

Update client/src/router.js to map '/ping' to the Ping component like so:

but there is no router.js. there is client/src/router/index.js but it looks different than what is provided in the tutorial.

Thanks!!

How to deploy this?

Does the project need to be restructured in order be deployed?

Would love to see a tutorial on how to deploy this?

Alerts only show the first time

Booth add book and update book (haven't done delete yet) only show the first they're used.

tutorial incorrect?

I get to this point in the tutorial

Update client/src/router.js to map '/ping' to the Ping component like so:

but there is no router.js. There is router/index.js but it doesnt seem to behave as described. Any advice?

Changes are not persistent

Thanks for the tutorial, Michael. Very illustrative.

However, the added or the updated books are not kept when you restart the application. Changes are not persistent. If this is normal because the part to save changes to the backend is not included, I'd be grateful for some tips about which path one should go to add that.

THanks.
Cheers, Manuel

How to serve the dist directory

Hello Arsenio

YOur code works very well using the vue.js dev environnement .

I'm planning to deploy it to heroku, so I have mixed the client and the server code that you have provided.

I'm running npm run build to generate the vue.js front end .

But how can I display this website using the python server you provide, please .

I 've tried this code with no luck ,

app = Flask(__name__,
            static_folder = "./dist/static",
            template_folder = "./dist")


@app.route('/')
def index():
    return render_template("index.html")

This is what I have in the console

`GET http://localhost:5000/js/chunk-vendors.4a46bf50.js [HTTP/1.0 404 NOT FOUND 89ms]

GET http://localhost:5000/css/app.4cdb3310.css [HTTP/1.0 404 NOT FOUND 63ms]

GET http://localhost:5000/css/chunk-vendors.66440731.css`

than I run the server but I can't call localhost:80 on my navigator .

Using node.js, I have this working in server.js to serve a vue.js generated app:

// VUE APP DIRECTORY ( GENERATED WITH NPM RUN BUILD )
app.use(serveStatic(__dirname + "/dist"));

// UPLOADS : IMAGES AND FILES STORING DIRECTORY
app.use(express.static(__dirname + "/uploads"));

But how could I do using Python flask please ?

EDIT : I think I have something : I 've added this to your app.py code 👍

from flask import Flask, request, render_template
app = Flask(__name__,
            static_folder="dist/static", # place that webpack builds to
            template_folder="dist")
# enable CORS
CORS(app, resources={r'/*': {'origins': '*'}})


@app.route('/')
def index():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(host='0.0.0.0', port=5000, debug=True)

So now, I can run app.py , and gettin access to the 'dist' vue application on port 5000. And , if I open a second CMD window and hit NPM RUN SERVE, I can have both dev http://localhost:8080/ and build http://localhost:5000/ running on one unique python server

Flask-vue-curd on Google Cloud

Hi,

Can you please tell me how I can load this on Google Cloud ? Since it needs 2 ports to be used(5000 and 8080), How can I deploy and access it on Google Cloud ?

alert

When adding the alert, you reference the new component in the Books.vue template, but your containers change from

to and it's unclear if we're in the right spot. Great guide though!

Update without updating anything does not work with 'Read?' true

Hi Michael,
thank you for the tutorial, it's really helpful. For that reason, I want to report a bug. When one clicks the Update button on a book that has the Read value set to Yes and then just clicks Submit without actually changing anything, the title and author aren't changed. However, the Read value is set to No. This is because the variable editForm.read should be a list of length 1, but the program loads a bool value when getBooks() is called, causing no value being assigned to the Read? checkbox.

The declaration of BOOKS in server/app.py should look as

BOOKS = [
    {
        'id': uuid.uuid4().hex,
        'title': 'On the Road',
        'author': 'Jack Kerouac',
        'read': [True]
    },
    {
        'id': uuid.uuid4().hex,
        'title': 'Harry Potter and the Philosopher\'s Stone',
        'author': 'J. K. Rowling',
        'read': [False]
    },
    {
        'id': uuid.uuid4().hex,
        'title': 'Green Eggs and Ham',
        'author': 'Dr. Seuss',
        'read': [True]
    }
]

and this should propagate to the file client/src/components/Book.vue to methods onSubmit and onSubmitUpdate, so the true/false check should look as

      let read = [false];
      if (this.addBookForm.read[0]) read = [true];

cURL command error

Every time I try to run this cURL command I get this error. Did some Googling and it looks like 'get' in line 52 of the code in ap.py at the point in your tutorial:

With the Flask server running, you can test the POST route in a new terminal tab:

$ curl -X POST http://localhost:5000/books -d
'{"title": "1Q84", "author": "Haruki Murakami", "read": "true"}'
-H 'Content-Type: application/json'

Any idea? Thanks! Great tutorial by the way.

Traceback (most recent call last):
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\venv\lib\site-packages\flask\app.py", line 2309, in __call__
    return self.wsgi_app(environ, start_response)
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\venv\lib\site-packages\flask\app.py", line 2295, in wsgi_app
    response = self.handle_exception(e)
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\venv\lib\site-packages\flask_cors\extension.py", line 161, in wrapped_function
    return cors_after_request(app.make_response(f(*args, **kwargs)))
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\venv\lib\site-packages\flask\app.py", line 1741, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\venv\lib\site-packages\flask\_compat.py", line 35, in reraise
    raise value
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\venv\lib\site-packages\flask\app.py", line 2292, in wsgi_app
    response = self.full_dispatch_request()
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\venv\lib\site-packages\flask\app.py", line 1815, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\venv\lib\site-packages\flask_cors\extension.py", line 161, in wrapped_function
    return cors_after_request(app.make_response(f(*args, **kwargs)))
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\venv\lib\site-packages\flask\app.py", line 1718, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\venv\lib\site-packages\flask\_compat.py", line 35, in reraise
    raise value
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\venv\lib\site-packages\flask\app.py", line 1813, in full_dispatch_request
    rv = self.dispatch_request()
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\venv\lib\site-packages\flask\app.py", line 1799, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "C:\Users\1010\Desktop\crudTest\flask-vue-crud\server\app.py", line 52, in all_books
    'title': post_data.get('title'),
AttributeError: 'NoneType' object has no attribute 'get'

-->
curl: (3) [globbing] unmatched brace in column 2
curl: (6) Could not resolve host: 1Q84,
curl: (6) Could not resolve host: author
curl: (3) Host name 'Haruki Murakami,' contains bad letter
curl: (6) Could not resolve host: read
curl: (3) [globbing] unmatched close brace/bracket in column 5
curl: (6) Could not resolve host: \
curl: (6) Could not resolve host: application