mysteriousHerb

from flask import Flask, render_template, jsonify, request, send_from_directory
from config import Config
from flask_sqlalchemy import SQLAlchemy
from flask_restful import Resource, Api
from flask_cors import CORS

# https://flask-marshmallow.readthedocs.io/en/latest/
from flask_marshmallow import Marshmallow

from werkzeug.utils import secure_filename

mysteriousHerb

<template>
  <div>
    <vueDropzone
      ref="myVueDropzone"
      id="myVueDropzone"
      @vdropzone-success="upload_complete"
      @vdropzone-removed-file="cancel_upload"
      :options="dropzoneOptions"
      :useCustomSlot="false"
    >

mysteriousHerb

<template>
  <div>
    <v-container grid-list-md text-xs-center>
      <v-layout align-center justify-center>
        <v-flex>
          <v-btn large dark color="green" @click="read_todo()">
            <v-icon dark>refresh</v-icon>Fetch database
          </v-btn>
        </v-flex>
        <v-progress-circular :value="progress"></v-progress-circular>

mysteriousHerb

<template>
  <div id="app">
    <v-app>
      <!-- drawer is the section popup from the left-->
      <v-navigation-drawer fixed v-model="drawer" app>
        <v-list dense>
          <!-- use a v-for to automatically generate  -->
          <li v-for="route in routes" :key="route.id">
            <v-list-tile @click="change_view(route.name)">
              <v-list-tile-action>

mysteriousHerb

<template>
  <div id="todos-vue">
    <div>
      <label>New task:</label>
      <!-- use v-model for 2-way binding, call method when user press enter @keyup.enter-->
      <input id="new_todo" v-model="new_todo" placeholder="edit me" @keyup.enter="add_todo()">
      <button @click="update_todo(id=-1, content=new_todo, done=false, delete_=false)">Add</button>
    </div>
    <div>
      <div v-for="(todo) in todos" :key="todo.id">

mysteriousHerb

import requests
# using requests library to test backend without using frontend

def query():
    response = requests.get('http://localhost:5000/todo_db')
    print(response.json())

query()

# add new item

mysteriousHerb

from flask import Flask, render_template, jsonify, request
from config import Config
from flask_sqlalchemy import SQLAlchemy
from flask_restful import Resource, Api
from flask_cors import CORS
# https://flask-marshmallow.readthedocs.io/en/latest/
from flask_marshmallow import Marshmallow
import os

mysteriousHerb

import os

class Config(object):
    SQLALCHEMY_DATABASE_URI = 'sqlite:///test.db'
    SECRET_KEY = os.environ.get("SECRET_KEY") or "super-secret-key"
    DEBUG = True
    CSRF_ENABLED = True

mysteriousHerb

<template>
  <div class="todo">
      <todo_comp/>
  </div>
</template>

<script>
// @ is an alias to /src
import todo_comp from '@/components/todo_comp.vue'

mysteriousHerb

<script>
export default {
  name: "todo_comp",
  data: function() {
    return {
      new_todo: "",
      todos: [
        { id: 1, content: "write paper", done: false },
        { id: 2, content: "read paper", done: false },
        { id: 3, content: "review paper", done: false }