login-vuejs-django-ninja
Sistema de Login entre VueJS e Django-Ninja
Frontend
- Template: Windmill
- Github: windmill-dashboard
Instalação
npm install -g @vue/cli
Use node com nvm.
nvm use 18.3.0
Criando o projeto
npm create vite@latest frontend -- --template vue cd frontend yarn # vue create frontend yarn add vue-router@4 --save yarn add axios vue add pinia vee-validate yarn dev # ou # npm run serve
https://vueschool.io/lessons/installing-and-setting-up-vue-router-with-vite-vite-only
# dentro da pasta frontend mkdir src/plugins touch src/plugins/vee-validate.js touch src/plugins/axios.js
Ref: alpinejs-tailwindcss-example
Instalando TailwindCSS
Dados com json-server (Opcional)
npm i -g json-server
Crie db.json
mkdir api touch api/db.json { "todos": [ { "id": 1, "task": "One" }, { "id": 2, "task": "Two" }, { "id": 3, "task": "Three" } ] }
Rode o json-server
json-server --watch api/db.json
Backend
Bibliotecas
Criando o projeto
python -m venv .venv source ./venv/bin/activate # ou # .venv\Scripts\activate # Windows pip install django-ninja-auth python-decouple django-extensions isort autopep8 django-admin startproject backend . cd backend/
Autenticação
TODO: django-ninja-jwt
Rotas
Edite backend/urls.py
# urls.py from django.contrib import admin from django.http import JsonResponse from django.urls import path from .api import api def todo(request): data = [ { "id": 1, "task": "The quick brown fox" }, { "id": 2, "task": "over the lazy dog" } ] return JsonResponse(data, safe=False) def about(request): return JsonResponse({'status': 'OK'}) urlpatterns = [ path('todo/', todo), path('about/', about), path('admin/', admin.site.urls), path('api/v1/', api.urls), ]
Crie e edite backend/api.py
# api.py from ninja import NinjaAPI from ninja_auth.api import router as auth_router api = NinjaAPI(csrf=True) api.add_router('/auth/', auth_router)
Rode as migrações e crie um super usuário.
python manage.py migrate python manage.py createsuperuser
Rode a aplicação.
python manage.py runserver
Acesse a doc em /api/v1/docs/