├── .gitignore ├── Pipfile ├── Pipfile.lock ├── README.md ├── config ├── __init__.py ├── asgi.py ├── settings.py ├── urls.py └── wsgi.py ├── fixtures └── tasks.json ├── manage.py ├── static ├── css │ └── base.css └── img │ └── demo.png ├── templates ├── base.html └── home.html └── todo ├── __init__.py ├── admin.py ├── apps.py ├── migrations ├── 0001_initial.py └── __init__.py ├── models.py ├── serializers.py ├── urls.py └── views.py /.gitignore: -------------------------------------------------------------------------------- 1 | ### Django ### 2 | *.log 3 | *.pot 4 | *.pyc 5 | __pycache__/ 6 | local_settings.py 7 | db.sqlite3 8 | 9 | # pyenv 10 | .python-version 11 | 12 | 13 | # Environments 14 | .env 15 | .venv 16 | env/ 17 | venv/ 18 | ENV/ 19 | env.bak/ 20 | venv.bak/ 21 | pythonenv* 22 | 23 | 24 | .DS_Store 25 | .idea/ 26 | -------------------------------------------------------------------------------- /Pipfile: -------------------------------------------------------------------------------- 1 | [[source]] 2 | name = "pypi" 3 | url = "https://pypi.org/simple" 4 | verify_ssl = true 5 | 6 | [dev-packages] 7 | 8 | [packages] 9 | django = "*" 10 | djangorestframework = "*" 11 | 12 | [requires] 13 | python_version = "3.6" 14 | -------------------------------------------------------------------------------- /Pipfile.lock: -------------------------------------------------------------------------------- 1 | { 2 | "_meta": { 3 | "hash": { 4 | "sha256": "7170c759a0bf62fafec72413a891fce42967cc8adf408ead7bb3298544702e3d" 5 | }, 6 | "pipfile-spec": 6, 7 | "requires": { 8 | "python_version": "3.6" 9 | }, 10 | "sources": [ 11 | { 12 | "name": "pypi", 13 | "url": "https://pypi.org/simple", 14 | "verify_ssl": true 15 | } 16 | ] 17 | }, 18 | "default": { 19 | "asgiref": { 20 | "hashes": [ 21 | "sha256:5ee950735509d04eb673bd7f7120f8fa1c9e2df495394992c73234d526907e17", 22 | "sha256:7162a3cb30ab0609f1a4c95938fd73e8604f63bdba516a7f7d64b83ff09478f0" 23 | ], 24 | "markers": "python_version >= '3.5'", 25 | "version": "==3.3.1" 26 | }, 27 | "django": { 28 | "hashes": [ 29 | "sha256:5c866205f15e7a7123f1eec6ab939d22d5bde1416635cab259684af66d8e48a2", 30 | "sha256:edb10b5c45e7e9c0fb1dc00b76ec7449aca258a39ffd613dbd078c51d19c9f03" 31 | ], 32 | "index": "pypi", 33 | "version": "==3.1.4" 34 | }, 35 | "djangorestframework": { 36 | "hashes": [ 37 | "sha256:0209bafcb7b5010fdfec784034f059d512256424de2a0f084cb82b096d6dd6a7" 38 | ], 39 | "index": "pypi", 40 | "version": "==3.12.2" 41 | }, 42 | "pytz": { 43 | "hashes": [ 44 | "sha256:16962c5fb8db4a8f63a26646d8886e9d769b6c511543557bc84e9569fb9a9cb4", 45 | "sha256:180befebb1927b16f6b57101720075a984c019ac16b1b7575673bea42c6c3da5" 46 | ], 47 | "version": "==2020.5" 48 | }, 49 | "sqlparse": { 50 | "hashes": [ 51 | "sha256:017cde379adbd6a1f15a61873f43e8274179378e95ef3fede90b5aa64d304ed0", 52 | "sha256:0f91fd2e829c44362cbcfab3e9ae12e22badaa8a29ad5ff599f9ec109f0454e8" 53 | ], 54 | "markers": "python_version >= '3.5'", 55 | "version": "==0.4.1" 56 | } 57 | }, 58 | "develop": {} 59 | } 60 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue.js alongside django 2 | 3 | A simple crud app using Vue alongside Django Template. 4 | 5 | ![todo app](static/img/demo.png) 6 | 7 | ### get started 8 | 9 | ```bash 10 | 11 | $ pipenv shell 12 | 13 | $ python manage.py migrate 14 | 15 | $ python manage.py loaddata fixtures/tasks.json 16 | 17 | $ python manage.py runserver 18 | ``` 19 | 20 | now, visit: http://127.0.0.1:8000/ 21 | -------------------------------------------------------------------------------- /config/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aymaneMx/vuejs-alongside-django/46fa72ce968319303b42521843592ddd2c652c2b/config/__init__.py -------------------------------------------------------------------------------- /config/asgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | ASGI config for vuejs_alongside_django project. 3 | 4 | It exposes the ASGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.1/howto/deployment/asgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.asgi import get_asgi_application 13 | 14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'vuejs_alongside_django.settings') 15 | 16 | application = get_asgi_application() 17 | -------------------------------------------------------------------------------- /config/settings.py: -------------------------------------------------------------------------------- 1 | import os 2 | from pathlib import Path 3 | 4 | # Build paths inside the project like this: BASE_DIR / 'subdir'. 5 | BASE_DIR = Path(__file__).resolve().parent.parent 6 | 7 | 8 | # Quick-start development settings - unsuitable for production 9 | # See https://docs.djangoproject.com/en/3.1/howto/deployment/checklist/ 10 | 11 | # SECURITY WARNING: keep the secret key used in production secret! 12 | SECRET_KEY = os.environ.get('SECRET_KEY', 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag') 13 | 14 | # SECURITY WARNING: don't run with debug turned on in production! 15 | DEBUG = os.getenv("DEBUG", True) 16 | 17 | ALLOWED_HOSTS = [] 18 | 19 | 20 | # Application definition 21 | 22 | INSTALLED_APPS = [ 23 | 'django.contrib.admin', 24 | 'django.contrib.auth', 25 | 'django.contrib.contenttypes', 26 | 'django.contrib.sessions', 27 | 'django.contrib.messages', 28 | 'django.contrib.staticfiles', 29 | 30 | # my apps 31 | 'todo', 32 | ] 33 | 34 | MIDDLEWARE = [ 35 | 'django.middleware.security.SecurityMiddleware', 36 | 'django.contrib.sessions.middleware.SessionMiddleware', 37 | 'django.middleware.common.CommonMiddleware', 38 | 'django.middleware.csrf.CsrfViewMiddleware', 39 | 'django.contrib.auth.middleware.AuthenticationMiddleware', 40 | 'django.contrib.messages.middleware.MessageMiddleware', 41 | 'django.middleware.clickjacking.XFrameOptionsMiddleware', 42 | ] 43 | 44 | ROOT_URLCONF = 'config.urls' 45 | 46 | TEMPLATES = [ 47 | { 48 | 'BACKEND': 'django.template.backends.django.DjangoTemplates', 49 | 'DIRS': ['templates'], 50 | 'APP_DIRS': True, 51 | 'OPTIONS': { 52 | 'context_processors': [ 53 | 'django.template.context_processors.debug', 54 | 'django.template.context_processors.request', 55 | 'django.contrib.auth.context_processors.auth', 56 | 'django.contrib.messages.context_processors.messages', 57 | ], 58 | }, 59 | }, 60 | ] 61 | 62 | WSGI_APPLICATION = 'config.wsgi.application' 63 | 64 | 65 | # Database 66 | # https://docs.djangoproject.com/en/3.1/ref/settings/#databases 67 | 68 | DATABASES = { 69 | 'default': { 70 | 'ENGINE': 'django.db.backends.sqlite3', 71 | 'NAME': BASE_DIR / 'db.sqlite3', 72 | } 73 | } 74 | 75 | 76 | # Password validation 77 | # https://docs.djangoproject.com/en/3.1/ref/settings/#auth-password-validators 78 | 79 | AUTH_PASSWORD_VALIDATORS = [ 80 | { 81 | 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 82 | }, 83 | { 84 | 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 85 | }, 86 | { 87 | 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 88 | }, 89 | { 90 | 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 91 | }, 92 | ] 93 | 94 | 95 | # Internationalization 96 | # https://docs.djangoproject.com/en/3.1/topics/i18n/ 97 | 98 | LANGUAGE_CODE = 'en-us' 99 | 100 | TIME_ZONE = 'UTC' 101 | 102 | USE_I18N = True 103 | 104 | USE_L10N = True 105 | 106 | USE_TZ = True 107 | 108 | 109 | # Static files (CSS, JavaScript, Images) 110 | # https://docs.djangoproject.com/en/3.1/howto/static-files/ 111 | 112 | STATIC_URL = '/static/' 113 | STATIC_ROOT = '' 114 | STATICFILES_DIRS = (os.path.join('static'), ) 115 | 116 | -------------------------------------------------------------------------------- /config/urls.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | from django.urls import path, include 3 | from django.conf import settings 4 | from django.conf.urls.static import static 5 | 6 | urlpatterns = [ 7 | path('', include('todo.urls')), 8 | path('admin/', admin.site.urls), 9 | ] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) 10 | -------------------------------------------------------------------------------- /config/wsgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | WSGI config for vuejs_alongside_django project. 3 | 4 | It exposes the WSGI callable as a module-level variable named ``application``. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/3.1/howto/deployment/wsgi/ 8 | """ 9 | 10 | import os 11 | 12 | from django.core.wsgi import get_wsgi_application 13 | 14 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'vuejs_alongside_django.settings') 15 | 16 | application = get_wsgi_application() 17 | -------------------------------------------------------------------------------- /fixtures/tasks.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "model": "todo.task", 4 | "pk": 1, 5 | "fields": { 6 | "title": "Write an article about X", 7 | "description": "here is some links that may help me:\r\n- aymaneMx.com/posts xD", 8 | "status": 3 9 | } 10 | }, 11 | { 12 | "model": "todo.task", 13 | "pk": 2, 14 | "fields": { 15 | "title": "Read the X book", 16 | "description": "I should definitely find some time to read this book!!!", 17 | "status": 2 18 | } 19 | }, 20 | { 21 | "model": "todo.task", 22 | "pk": 3, 23 | "fields": { 24 | "title": "Learn X framework", 25 | "description": "this one looks really interesting, I should take a look at it!", 26 | "status": 1 27 | } 28 | }, 29 | { 30 | "model": "todo.task", 31 | "pk": 4, 32 | "fields": { 33 | "title": "Fix duplicated X bug", 34 | "description": "", 35 | "status": 0 36 | } 37 | }, 38 | { 39 | "model": "todo.task", 40 | "pk": 5, 41 | "fields": { 42 | "title": "Write an article about Y", 43 | "description": "this one looks really interesting, I should take a look at it!", 44 | "status": 0 45 | } 46 | } 47 | ] -------------------------------------------------------------------------------- /manage.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | """Django's command-line utility for administrative tasks.""" 3 | import os 4 | import sys 5 | 6 | 7 | def main(): 8 | """Run administrative tasks.""" 9 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'config.settings') 10 | try: 11 | from django.core.management import execute_from_command_line 12 | except ImportError as exc: 13 | raise ImportError( 14 | "Couldn't import Django. Are you sure it's installed and " 15 | "available on your PYTHONPATH environment variable? Did you " 16 | "forget to activate a virtual environment?" 17 | ) from exc 18 | execute_from_command_line(sys.argv) 19 | 20 | 21 | if __name__ == '__main__': 22 | main() 23 | -------------------------------------------------------------------------------- /static/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #eff0eb; 3 | background-image: url('https://i.postimg.cc/MTbfnkj6/bg.png'); 4 | background-size: cover; 5 | background-repeat: no-repeat; 6 | } -------------------------------------------------------------------------------- /static/img/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aymaneMx/vuejs-alongside-django/46fa72ce968319303b42521843592ddd2c652c2b/static/img/demo.png -------------------------------------------------------------------------------- /templates/base.html: -------------------------------------------------------------------------------- 1 | {% load static %} 2 | 3 | 4 | 5 | 6 | 7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | {% block title %}Home{% endblock %} 16 | {% block stylesheet %}{% endblock %} 17 | 18 | 19 | {% block body %} 20 |
21 | {% block content %} 22 | {% endblock %} 23 |
24 | {% endblock body %} 25 | 26 | 27 | {% block javascript %}{% endblock %} 28 | 29 | 30 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /templates/home.html: -------------------------------------------------------------------------------- 1 | {% extends 'base.html' %} 2 | 3 | {% block title %}My Tasks{% endblock %} 4 | 5 | {% block content %} 6 |
7 |
8 |

Your Tasks!

9 |
10 | 11 | 12 |
13 |

We're sorry, we're not able to retrieve this information at the moment, please try back later

14 |
15 | 16 |
17 |
Loading...
18 | 19 |
20 | 21 |
22 |
Backlog
23 | 24 | 25 | 26 |
27 |
28 |
Todo
29 | 30 | 31 | 32 |
33 |
34 |
In Progress
35 | 36 | 37 |
38 |
39 |
Done
40 | 41 | 42 |
43 |
44 | 45 |
46 |
47 |
48 | 49 | aymaneMx© 50 | 51 |
52 | 53 | {% endblock %} 54 | 55 | 56 | {% block javascript %} 57 | 267 | {% endblock %} -------------------------------------------------------------------------------- /todo/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aymaneMx/vuejs-alongside-django/46fa72ce968319303b42521843592ddd2c652c2b/todo/__init__.py -------------------------------------------------------------------------------- /todo/admin.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | 3 | from todo.models import Task 4 | 5 | admin.site.register(Task) 6 | -------------------------------------------------------------------------------- /todo/apps.py: -------------------------------------------------------------------------------- 1 | from django.apps import AppConfig 2 | 3 | 4 | class TodoConfig(AppConfig): 5 | name = 'todo' 6 | -------------------------------------------------------------------------------- /todo/migrations/0001_initial.py: -------------------------------------------------------------------------------- 1 | # Generated by Django 3.1.4 on 2021-01-02 01:04 2 | 3 | from django.db import migrations, models 4 | 5 | 6 | class Migration(migrations.Migration): 7 | 8 | initial = True 9 | 10 | dependencies = [ 11 | ] 12 | 13 | operations = [ 14 | migrations.CreateModel( 15 | name='Task', 16 | fields=[ 17 | ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')), 18 | ('title', models.CharField(max_length=50)), 19 | ('description', models.TextField(blank=True)), 20 | ('status', models.PositiveIntegerField(choices=[(0, 'backlog'), (1, 'todo'), (2, 'in progress'), (3, 'done')], default=0)), 21 | ], 22 | ), 23 | ] 24 | -------------------------------------------------------------------------------- /todo/migrations/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aymaneMx/vuejs-alongside-django/46fa72ce968319303b42521843592ddd2c652c2b/todo/migrations/__init__.py -------------------------------------------------------------------------------- /todo/models.py: -------------------------------------------------------------------------------- 1 | from django.db import models 2 | 3 | 4 | class Task(models.Model): 5 | class Status(models.IntegerChoices): 6 | BACKLOG = 0, "backlog" 7 | TODO = 1, "todo" 8 | IN_PROGRESS = 2, "in progress" 9 | DONE = 3, "done" 10 | 11 | title = models.CharField(max_length=50) 12 | description = models.TextField(blank=True) 13 | status = models.PositiveIntegerField(choices=Status.choices, default=Status.BACKLOG) 14 | 15 | def __str__(self): 16 | return ( 17 | f"task (" 18 | f"title: {self.title}, " 19 | f"status: {self.status})" 20 | ) 21 | -------------------------------------------------------------------------------- /todo/serializers.py: -------------------------------------------------------------------------------- 1 | from rest_framework import serializers 2 | 3 | from todo.models import Task 4 | 5 | 6 | class TaskSerializer(serializers.ModelSerializer): 7 | class Meta: 8 | model = Task 9 | fields = "__all__" 10 | -------------------------------------------------------------------------------- /todo/urls.py: -------------------------------------------------------------------------------- 1 | from django.urls import path 2 | 3 | from todo.views import home_view, TaskUpdateView, ListTasksView, TaskDeleteView 4 | 5 | urlpatterns = [ 6 | path('', home_view, name='home'), 7 | path('api//', TaskUpdateView.as_view(), name='update-task'), 8 | path('api//delete/', TaskDeleteView.as_view(), name='delete-task'), 9 | path('api/', ListTasksView.as_view(), name='list-task'), 10 | ] -------------------------------------------------------------------------------- /todo/views.py: -------------------------------------------------------------------------------- 1 | from django.shortcuts import render 2 | from rest_framework import generics 3 | 4 | from todo.models import Task 5 | from todo.serializers import TaskSerializer 6 | 7 | 8 | def home_view(request): 9 | return render(request, 'home.html', {}) 10 | 11 | 12 | class TaskUpdateView(generics.RetrieveUpdateAPIView): 13 | queryset = Task.objects.all() 14 | serializer_class = TaskSerializer 15 | 16 | 17 | class TaskDeleteView(generics.DestroyAPIView): 18 | queryset = Task.objects.all() 19 | serializer_class = TaskSerializer 20 | 21 | 22 | class ListTasksView(generics.ListCreateAPIView): 23 | queryset = Task.objects.all() 24 | serializer_class = TaskSerializer 25 | --------------------------------------------------------------------------------