├── .gitignore ├── README.md ├── backend ├── contrib │ └── env_gen.py ├── manage.py ├── myproject │ ├── __init__.py │ ├── core │ │ ├── __init__.py │ │ ├── admin.py │ │ ├── apps.py │ │ ├── migrations │ │ │ └── __init__.py │ │ ├── models.py │ │ ├── serializers.py │ │ ├── tests.py │ │ ├── urls.py │ │ └── views.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py └── requirements.txt ├── frontend ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── App.vue │ ├── assets │ │ ├── huguinho.png │ │ ├── logo.png │ │ ├── logo.svg │ │ ├── luizinho.png │ │ └── zezinho.png │ ├── components │ │ ├── HelloWorld.vue │ │ └── Users.vue │ ├── main.js │ └── plugins │ │ └── vuetify.js └── vue.config.js └── img ├── django-vue04.png ├── huguinho.png ├── luizinho.png └── zezinho.png /.gitignore: -------------------------------------------------------------------------------- 1 | # Byte-compiled / optimized / DLL files 2 | __pycache__/ 3 | *.py[cod] 4 | *$py.class 5 | 6 | # C extensions 7 | *.so 8 | 9 | # Distribution / packaging 10 | .Python 11 | build/ 12 | develop-eggs/ 13 | dist/ 14 | downloads/ 15 | eggs/ 16 | .eggs/ 17 | lib/ 18 | lib64/ 19 | parts/ 20 | sdist/ 21 | var/ 22 | wheels/ 23 | pip-wheel-metadata/ 24 | share/python-wheels/ 25 | *.egg-info/ 26 | .installed.cfg 27 | *.egg 28 | MANIFEST 29 | 30 | # PyInstaller 31 | # Usually these files are written by a python script from a template 32 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 33 | *.manifest 34 | *.spec 35 | 36 | # Installer logs 37 | pip-log.txt 38 | pip-delete-this-directory.txt 39 | 40 | # Unit test / coverage reports 41 | htmlcov/ 42 | .tox/ 43 | .nox/ 44 | .coverage 45 | .coverage.* 46 | .cache 47 | nosetests.xml 48 | coverage.xml 49 | *.cover 50 | *.py,cover 51 | .hypothesis/ 52 | .pytest_cache/ 53 | 54 | # Translations 55 | *.mo 56 | *.pot 57 | 58 | # Django stuff: 59 | *.log 60 | local_settings.py 61 | db.sqlite3 62 | db.sqlite3-journal 63 | 64 | # Flask stuff: 65 | instance/ 66 | .webassets-cache 67 | 68 | # Scrapy stuff: 69 | .scrapy 70 | 71 | # Sphinx documentation 72 | docs/_build/ 73 | 74 | # PyBuilder 75 | target/ 76 | 77 | # Jupyter Notebook 78 | .ipynb_checkpoints 79 | 80 | # IPython 81 | profile_default/ 82 | ipython_config.py 83 | 84 | # pyenv 85 | .python-version 86 | 87 | # pipenv 88 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. 89 | # However, in case of collaboration, if having platform-specific dependencies or dependencies 90 | # having no cross-platform support, pipenv may install dependencies that don't work, or not 91 | # install all needed dependencies. 92 | #Pipfile.lock 93 | 94 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow 95 | __pypackages__/ 96 | 97 | # Celery stuff 98 | celerybeat-schedule 99 | celerybeat.pid 100 | 101 | # SageMath parsed files 102 | *.sage.py 103 | 104 | # Environments 105 | .env 106 | .venv 107 | env/ 108 | venv/ 109 | ENV/ 110 | env.bak/ 111 | venv.bak/ 112 | 113 | # Spyder project settings 114 | .spyderproject 115 | .spyproject 116 | 117 | # Rope project settings 118 | .ropeproject 119 | 120 | # mkdocs documentation 121 | /site 122 | 123 | # mypy 124 | .mypy_cache/ 125 | .dmypy.json 126 | dmypy.json 127 | 128 | # Pyre type checker 129 | .pyre/ 130 | 131 | 132 | # Logs 133 | logs 134 | *.log 135 | npm-debug.log* 136 | yarn-debug.log* 137 | yarn-error.log* 138 | lerna-debug.log* 139 | 140 | # Diagnostic reports (https://nodejs.org/api/report.html) 141 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 142 | 143 | # Runtime data 144 | pids 145 | *.pid 146 | *.seed 147 | *.pid.lock 148 | 149 | # Directory for instrumented libs generated by jscoverage/JSCover 150 | lib-cov 151 | 152 | # Coverage directory used by tools like istanbul 153 | coverage 154 | *.lcov 155 | 156 | # nyc test coverage 157 | .nyc_output 158 | 159 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 160 | .grunt 161 | 162 | # Bower dependency directory (https://bower.io/) 163 | bower_components 164 | 165 | # node-waf configuration 166 | .lock-wscript 167 | 168 | # Compiled binary addons (https://nodejs.org/api/addons.html) 169 | build/Release 170 | 171 | # Dependency directories 172 | node_modules/ 173 | jspm_packages/ 174 | 175 | # TypeScript v1 declaration files 176 | typings/ 177 | 178 | # TypeScript cache 179 | *.tsbuildinfo 180 | 181 | # Optional npm cache directory 182 | .npm 183 | 184 | # Optional eslint cache 185 | .eslintcache 186 | 187 | # Microbundle cache 188 | .rpt2_cache/ 189 | .rts2_cache_cjs/ 190 | .rts2_cache_es/ 191 | .rts2_cache_umd/ 192 | 193 | # Optional REPL history 194 | .node_repl_history 195 | 196 | # Output of 'npm pack' 197 | *.tgz 198 | 199 | # Yarn Integrity file 200 | .yarn-integrity 201 | 202 | # dotenv environment variables file 203 | .env 204 | .env.test 205 | 206 | # parcel-bundler cache (https://parceljs.org/) 207 | .cache 208 | 209 | # Next.js build output 210 | .next 211 | 212 | # Nuxt.js build / generate output 213 | .nuxt 214 | dist 215 | 216 | # Gatsby files 217 | .cache/ 218 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 219 | # https://nextjs.org/blog/next-9-1#public-directory-support 220 | # public 221 | 222 | # vuepress build output 223 | .vuepress/dist 224 | 225 | # Serverless directories 226 | .serverless/ 227 | 228 | # FuseBox cache 229 | .fusebox/ 230 | 231 | # DynamoDB Local files 232 | .dynamodb/ 233 | 234 | # TernJS port file 235 | .tern-port 236 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # django-rest-framework-vuejs 2 | 3 | Neste projeto eu uso [Django Rest Framework][1] e [VueJS][2] com todos os recursos que o [vue-cli](https://cli.vuejs.org/) pode oferecer. 4 | 5 | ![django-vue04.png](img/django-vue04.png) 6 | 7 | 8 | Em Dev rodar **dois** servidores, back e front. 9 | 10 | ### Backend 11 | 12 | * Clone esse repositório. 13 | * Crie um virtualenv com Python 3. 14 | * Ative o virtualenv. 15 | * Instale as dependências. 16 | * Rode as migrações. 17 | * Crie um super usuário 18 | 19 | ``` 20 | git clone https://github.com/rg3915/django-rest-framework-vuejs.git 21 | cd django-rest-framework-vuejs 22 | cd backend 23 | python -m venv .venv 24 | source .venv/bin/activate 25 | pip install -r requirements.txt 26 | python contrib/env_gen.py 27 | python manage.py migrate 28 | ``` 29 | 30 | Para rodar o Django, dentro da pasta backend, digite: 31 | 32 | ``` 33 | python manage.py runserver 34 | ``` 35 | 36 | Isso vai rodar o servidor de back na porta **8000**. 37 | 38 | 39 | ### Frontend 40 | 41 | Para rodar o VueJS, abra uma **nova aba no terminal**, e faça: 42 | 43 | ``` 44 | cd ../frontend 45 | npm install # primeiro precisa instalar o vue e suas dependências. 46 | npm run serve 47 | ``` 48 | 49 | Isso vai rodar o servidor de front na porta **8080**. 50 | 51 | 52 | ## Comandos pra criar o projeto do zero 53 | 54 | ### Criando o projeto Django 55 | 56 | ``` 57 | mkdir backend 58 | cd backend 59 | python -m venv .venv 60 | source .venv/bin/activate 61 | pip install Django==2.2.12 djangorestframework django-extensions dj-database-url python-decouple django-cors-headers 62 | django-admin startproject myproject . 63 | cd myproject 64 | python ../manage.py startapp core 65 | cd .. 66 | python manage.py migrate 67 | # Crie um super usuário 68 | python manage.py createsuperuser --username="admin" --email="" 69 | ``` 70 | 71 | #### Criando uma pasta chamada contrib com um env_gen.py 72 | 73 | O comando a seguir pega `env_gen.py` do gist e clona na pasta `/tmp`. 74 | 75 | [nvm gist][4] 76 | 77 | ``` 78 | git clone https://gist.github.com/22626de522f5c045bc63acdb8fe67b24.git /tmp/contrib; if [ ! -d contrib ]; then mkdir contrib; fi; cp /tmp/contrib/env_gen.py contrib/ 79 | # rode este comando para gerar o .env (variáveis de ambiente). 80 | python contrib/env_gen.py 81 | ``` 82 | 83 | Em `settings.py` insira em `INSTALLED_APPS`... 84 | 85 | ``` 86 | INSTALLED_APPS = [ 87 | ... 88 | 'django_extensions', 89 | 'rest_framework', 90 | 'corsheaders', 91 | 'myproject.core', 92 | ] 93 | ``` 94 | 95 | Edite este trecho do `settings.py`: 96 | 97 | ``` 98 | import os 99 | from decouple import config, Csv 100 | from dj_database_url import parse as dburl 101 | 102 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 103 | 104 | # SECURITY WARNING: keep the secret key used in production secret! 105 | SECRET_KEY = config('SECRET_KEY') 106 | 107 | # SECURITY WARNING: don't run with debug turned on in production! 108 | DEBUG = config('DEBUG', default=False, cast=bool) 109 | 110 | ALLOWED_HOSTS = config('ALLOWED_HOSTS', default=[], cast=Csv()) 111 | ``` 112 | 113 | Configurando o [django-cors-headers][3]: 114 | 115 | ``` 116 | MIDDLEWARE = [ 117 | ... 118 | 'corsheaders.middleware.CorsMiddleware', 119 | 'django.middleware.common.CommonMiddleware', 120 | ... 121 | ] 122 | 123 | CORS_ORIGIN_ALLOW_ALL = True 124 | ``` 125 | 126 | E este trecho, onde vamos usar o sqlite: 127 | 128 | ``` 129 | default_dburl = 'sqlite:///' + os.path.join(BASE_DIR, 'db.sqlite3') 130 | DATABASES = { 131 | 'default': config('DATABASE_URL', default=default_dburl, cast=dburl), 132 | } 133 | ``` 134 | 135 | No final do arquivo também edite: 136 | 137 | ``` 138 | LANGUAGE_CODE = 'pt-br' 139 | 140 | TIME_ZONE = 'America/Sao_Paulo' 141 | ``` 142 | 143 | E 144 | 145 | ``` 146 | STATIC_URL = '/static/' 147 | STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') 148 | ``` 149 | 150 | Se você mudar a pasta default dos estáticos, então faça: 151 | 152 | ``` 153 | # opcional 154 | STATICFILES_DIRS = [ 155 | os.path.join(BASE_DIR, "static"), 156 | 'myproject/core/templates/static/', 157 | ] 158 | ``` 159 | 160 | Depois entre na pasta `myproject` e vamos editar `urls.py`: 161 | 162 | ``` 163 | cat << EOF > urls.py 164 | from django.contrib import admin 165 | from django.urls import include, path 166 | 167 | urlpatterns = [ 168 | path('api/', include('myproject.core.urls')), 169 | path('admin/', admin.site.urls), 170 | ] 171 | EOF 172 | ``` 173 | 174 | Depois entre na pasta `core`: 175 | 176 | ``` 177 | cd core/ 178 | ``` 179 | 180 | e vamos editar `views.py`: 181 | 182 | ``` 183 | cat << EOF > views.py 184 | from django.contrib.auth.models import User 185 | from rest_framework import viewsets 186 | from .serializers import UserSerializer 187 | 188 | 189 | class UserViewSet(viewsets.ModelViewSet): 190 | ''' 191 | Este viewset fornece automaticamente ações em 'list' e 'detail'. 192 | ''' 193 | queryset = User.objects.all() 194 | serializer_class = UserSerializer 195 | EOF 196 | ``` 197 | 198 | Ainda na pasta `core` vamos criar um `urls.py`: 199 | 200 | ``` 201 | cat << EOF > urls.py 202 | from django.urls import include, path 203 | from rest_framework import routers 204 | from myproject.core import views as v 205 | 206 | 207 | app_name = 'core' 208 | 209 | 210 | router = routers.DefaultRouter() 211 | router.register('user', v.UserViewSet) 212 | 213 | urlpatterns = [ 214 | path('', include(router.urls)), 215 | ] 216 | EOF 217 | ``` 218 | 219 | ... e `serializers.py`: 220 | 221 | ``` 222 | cat << EOF > serializers.py 223 | from rest_framework import serializers 224 | from django.contrib.auth.models import User 225 | 226 | 227 | class UserSerializer(serializers.ModelSerializer): 228 | 229 | class Meta: 230 | model = User 231 | fields = ( 232 | 'id', 233 | 'username', 234 | 'first_name', 235 | 'last_name', 236 | 'email', 237 | ) 238 | EOF 239 | ``` 240 | 241 | #### Gravando alguns dados no banco 242 | 243 | Vamos criar alguns usuários no Django, para isso vá para a pasta onde está o `manage.py` e digite: 244 | 245 | ``` 246 | # pasta backend 247 | python manage.py shell_plus 248 | ``` 249 | 250 | Depois digite: 251 | 252 | ``` 253 | names = ['fulano', 'beltrano', 'cicrano'] 254 | [User.objects.create(username=name) for name in names] 255 | ``` 256 | 257 | Agora vamos para o front. 258 | 259 | ## Frontend 260 | 261 | Volte para a pasta principal do projeto: 262 | 263 | Eu estou usando o Node 12, que instalei via [nvm][4]. 264 | 265 | ``` 266 | # pasta principal do projeto 267 | cd .. 268 | nvm use 12 269 | vue create frontend 270 | cd frontend 271 | npm install axios 272 | vue add vuetify 273 | ``` 274 | 275 | #### Servindo o front 276 | 277 | Para rodar o VueJS, abra uma **nova aba no terminal**, e faça: 278 | 279 | ``` 280 | cd ../frontend 281 | npm run serve 282 | ``` 283 | 284 | Isso vai rodar o servidor de front na porta **8080**. 285 | 286 | #### Rodando o servidor Django 287 | 288 | ``` 289 | cd ../backend 290 | python manage.py runserver 291 | ``` 292 | 293 | Isso vai rodar o servidor de back na porta **8000**. 294 | 295 | ## Finalizando o front 296 | 297 | Entre na pasta `frontend`. 298 | 299 | Repare que instalamos o [vuetifyjs][5], uma poderosa ferramenta de template para VueJS baseado em Material Design. 300 | 301 | Vamos editar `App.vue`: 302 | 303 | Acrescente `` logo abaixo de ``: 304 | 305 | ``` 306 | 307 | 308 | 309 | 310 | ``` 311 | 312 | E acrescente: 313 | 314 | ``` 315 | ... 316 | import Users from './components/Users'; 317 | 318 | components: { 319 | HelloWorld, 320 | Users 321 | }, 322 | ``` 323 | 324 | Agora vamos criar o componente `Users.vue`: 325 | 326 | ``` 327 | cat << EOF > src/components/Users.vue 328 | 372 | 373 | 400 | EOF 401 | ``` 402 | 403 | #### Imagens 404 | 405 | Copie as imagens para o lugar correto. 406 | 407 | ``` 408 | wget -O src/assets/huguinho.png https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/master/img/huguinho.png 409 | wget -O src/assets/zezinho.png https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/master/img/zezinho.png 410 | wget -O src/assets/luizinho.png https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/master/img/luizinho.png 411 | ``` 412 | 413 | 414 | Prontinho!!! 415 | 416 | 417 | ### Links: 418 | 419 | [Django Rest Framework Quickstart][6] 420 | 421 | [Django Rest Framework documentação][1] 422 | 423 | [django-cors-headers][3] 424 | 425 | [VueJS][2] 426 | 427 | [Vuetify][5] 428 | 429 | [Minicurso: Frontend em 2018 - um guia pra quem tá perdido com Tony Lâmpada][12] 430 | 431 | [Minicurso: Vue.JS - O basicão com Tony Lâmpada][13] 432 | 433 | [Construindo um front-end moderno com Vue.js - WorkWeb 2018 com Alefe Souza][7] 434 | 435 | [ComDevShow 2018 - #3 Construindo um front-end moderno com Vue.js com Alefe Souza][8] 436 | 437 | [[Gravação] Live streaming: Vue.js, Vuex e Mirage JS com Fabio Vedovelli][9] 438 | 439 | [[parte 1/2] Vue, Vuex, Computed Properties e Getters com Fabio Vedovelli][10] 440 | 441 | [Vue.js do jeito ninja com Tiago Matos][11] 442 | 443 | [Grupy-SP e VueJS-SP Crossover Out 2019][14] 444 | 445 | [1]: https://www.django-rest-framework.org/ 446 | [2]: https://vuejs.org/ 447 | [3]: https://pypi.org/project/django-cors-headers/ 448 | [4]: https://gist.github.com/rg3915/6fad3d19f2b511ec5da40cef5a168ca5 449 | [5]: https://vuetifyjs.com/en/ 450 | [6]: http://pythonclub.com.br/django-rest-framework-quickstart.html 451 | [7]: https://www.youtube.com/watch?v=UaaYVaEHo9w 452 | [8]: https://www.youtube.com/watch?v=3Po5Cw6cw98 453 | [9]: https://www.youtube.com/watch?v=17Ro7A3AqxU 454 | [10]: https://www.youtube.com/watch?v=d9GKdl3hxas 455 | [11]: https://www.youtube.com/watch?v=07-TvnH7XNo&list=PLcoYAcR89n-qq1vGRbaUiV6Q9puy0qigW 456 | [12]: https://www.youtube.com/watch?v=ZjgT8S65_pk&list=PLgMNBa0XaIgdFwU1I5Y89fAHdWMxY1ji6 457 | [13]: https://www.youtube.com/watch?v=zLCXSLTJNfw&list=PLgMNBa0XaIgdMt8edUbQmFnqL4g9ZgAxT 458 | [14]: https://www.youtube.com/playlist?list=PLs0UShRCaojIoUESSummFnigDE-ZiOKhB 459 | -------------------------------------------------------------------------------- /backend/contrib/env_gen.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | 3 | """ 4 | Django SECRET_KEY generator. 5 | """ 6 | from django.utils.crypto import get_random_string 7 | 8 | 9 | chars = 'abcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*(-_=+)' 10 | 11 | CONFIG_STRING = """ 12 | DEBUG=True 13 | SECRET_KEY=%s 14 | ALLOWED_HOSTS=127.0.0.1, .localhost 15 | #DATABASE_URL=postgres://USER:PASSWORD@HOST:PORT/NAME 16 | #DEFAULT_FROM_EMAIL= 17 | #EMAIL_BACKEND=django.core.mail.backends.smtp.EmailBackend 18 | #EMAIL_HOST= 19 | #EMAIL_PORT= 20 | #EMAIL_USE_TLS= 21 | #EMAIL_HOST_USER= 22 | #EMAIL_HOST_PASSWORD= 23 | """.strip() % get_random_string(50, chars) 24 | 25 | # Writing our configuration file to '.env' 26 | with open('.env', 'w') as configfile: 27 | configfile.write(CONFIG_STRING) 28 | -------------------------------------------------------------------------------- /backend/manage.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env python 2 | import os 3 | import sys 4 | 5 | if __name__ == '__main__': 6 | os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'myproject.settings') 7 | try: 8 | from django.core.management import execute_from_command_line 9 | except ImportError as exc: 10 | raise ImportError( 11 | "Couldn't import Django. Are you sure it's installed and " 12 | "available on your PYTHONPATH environment variable? Did you " 13 | "forget to activate a virtual environment?" 14 | ) from exc 15 | execute_from_command_line(sys.argv) 16 | -------------------------------------------------------------------------------- /backend/myproject/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/e466df294ea1c5ebf86984c85a80392f8781fdba/backend/myproject/__init__.py -------------------------------------------------------------------------------- /backend/myproject/core/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/e466df294ea1c5ebf86984c85a80392f8781fdba/backend/myproject/core/__init__.py -------------------------------------------------------------------------------- /backend/myproject/core/admin.py: -------------------------------------------------------------------------------- 1 | from django.contrib import admin 2 | 3 | # Register your models here. 4 | -------------------------------------------------------------------------------- /backend/myproject/core/apps.py: -------------------------------------------------------------------------------- 1 | from django.apps import AppConfig 2 | 3 | 4 | class CoreConfig(AppConfig): 5 | name = 'core' 6 | -------------------------------------------------------------------------------- /backend/myproject/core/migrations/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/e466df294ea1c5ebf86984c85a80392f8781fdba/backend/myproject/core/migrations/__init__.py -------------------------------------------------------------------------------- /backend/myproject/core/models.py: -------------------------------------------------------------------------------- 1 | from django.db import models 2 | 3 | # Create your models here. 4 | -------------------------------------------------------------------------------- /backend/myproject/core/serializers.py: -------------------------------------------------------------------------------- 1 | from rest_framework import serializers 2 | from django.contrib.auth.models import User 3 | 4 | 5 | class UserSerializer(serializers.ModelSerializer): 6 | 7 | class Meta: 8 | model = User 9 | fields = ( 10 | 'id', 11 | 'username', 12 | 'first_name', 13 | 'last_name', 14 | 'email', 15 | ) 16 | -------------------------------------------------------------------------------- /backend/myproject/core/tests.py: -------------------------------------------------------------------------------- 1 | from django.test import TestCase 2 | 3 | # Create your tests here. 4 | -------------------------------------------------------------------------------- /backend/myproject/core/urls.py: -------------------------------------------------------------------------------- 1 | from django.urls import include, path 2 | from rest_framework import routers 3 | from myproject.core import views as v 4 | 5 | 6 | app_name = 'core' 7 | 8 | 9 | router = routers.DefaultRouter() 10 | router.register('user', v.UserViewSet) 11 | 12 | urlpatterns = [ 13 | path('', include(router.urls)), 14 | ] 15 | -------------------------------------------------------------------------------- /backend/myproject/core/views.py: -------------------------------------------------------------------------------- 1 | from django.contrib.auth.models import User 2 | from rest_framework import viewsets 3 | from .serializers import UserSerializer 4 | 5 | 6 | class UserViewSet(viewsets.ModelViewSet): 7 | ''' 8 | This viewset automatically provides `list` and `detail` actions. 9 | ''' 10 | queryset = User.objects.all() 11 | serializer_class = UserSerializer 12 | -------------------------------------------------------------------------------- /backend/myproject/settings.py: -------------------------------------------------------------------------------- 1 | """ 2 | Django settings for myproject project. 3 | 4 | Generated by 'django-admin startproject' using Django 2.1.12. 5 | 6 | For more information on this file, see 7 | https://docs.djangoproject.com/en/2.1/topics/settings/ 8 | 9 | For the full list of settings and their values, see 10 | https://docs.djangoproject.com/en/2.1/ref/settings/ 11 | """ 12 | 13 | import os 14 | from decouple import config, Csv 15 | from dj_database_url import parse as dburl 16 | 17 | BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 18 | 19 | # SECURITY WARNING: keep the secret key used in production secret! 20 | SECRET_KEY = config('SECRET_KEY') 21 | 22 | # SECURITY WARNING: don't run with debug turned on in production! 23 | DEBUG = config('DEBUG', default=False, cast=bool) 24 | 25 | ALLOWED_HOSTS = config('ALLOWED_HOSTS', default=[], cast=Csv()) 26 | 27 | 28 | # Application definition 29 | 30 | INSTALLED_APPS = [ 31 | 'django.contrib.admin', 32 | 'django.contrib.auth', 33 | 'django.contrib.contenttypes', 34 | 'django.contrib.sessions', 35 | 'django.contrib.messages', 36 | 'django.contrib.staticfiles', 37 | 'django_extensions', 38 | 'rest_framework', 39 | 'corsheaders', 40 | 'myproject.core', 41 | ] 42 | 43 | MIDDLEWARE = [ 44 | 'django.middleware.security.SecurityMiddleware', 45 | 'django.contrib.sessions.middleware.SessionMiddleware', 46 | 'corsheaders.middleware.CorsMiddleware', 47 | 'django.middleware.common.CommonMiddleware', 48 | 'django.middleware.csrf.CsrfViewMiddleware', 49 | 'django.contrib.auth.middleware.AuthenticationMiddleware', 50 | 'django.contrib.messages.middleware.MessageMiddleware', 51 | 'django.middleware.clickjacking.XFrameOptionsMiddleware', 52 | ] 53 | 54 | CORS_ORIGIN_ALLOW_ALL = True 55 | 56 | ROOT_URLCONF = 'myproject.urls' 57 | 58 | TEMPLATES = [ 59 | { 60 | 'BACKEND': 'django.template.backends.django.DjangoTemplates', 61 | 'DIRS': [], 62 | 'APP_DIRS': True, 63 | 'OPTIONS': { 64 | 'context_processors': [ 65 | 'django.template.context_processors.debug', 66 | 'django.template.context_processors.request', 67 | 'django.contrib.auth.context_processors.auth', 68 | 'django.contrib.messages.context_processors.messages', 69 | ], 70 | }, 71 | }, 72 | ] 73 | 74 | WSGI_APPLICATION = 'myproject.wsgi.application' 75 | 76 | 77 | # Database 78 | # https://docs.djangoproject.com/en/2.1/ref/settings/#databases 79 | 80 | default_dburl = 'sqlite:///' + os.path.join(BASE_DIR, 'db.sqlite3') 81 | DATABASES = { 82 | 'default': config('DATABASE_URL', default=default_dburl, cast=dburl), 83 | } 84 | 85 | # Password validation 86 | # https://docs.djangoproject.com/en/2.2/ref/settings/#auth-password-validators 87 | 88 | AUTH_PASSWORD_VALIDATORS = [ 89 | { 90 | 'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 91 | }, 92 | { 93 | 'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 94 | }, 95 | { 96 | 'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 97 | }, 98 | { 99 | 'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 100 | }, 101 | ] 102 | 103 | 104 | # Internationalization 105 | # https://docs.djangoproject.com/en/2.2/topics/i18n/ 106 | 107 | LANGUAGE_CODE = 'pt-br' 108 | 109 | TIME_ZONE = 'America/Sao_Paulo' 110 | 111 | USE_I18N = True 112 | 113 | USE_L10N = True 114 | 115 | USE_TZ = True 116 | 117 | 118 | # Static files (CSS, JavaScript, Images) 119 | # https://docs.djangoproject.com/en/2.2/howto/static-files/ 120 | 121 | STATIC_URL = '/static/' 122 | STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles') 123 | -------------------------------------------------------------------------------- /backend/myproject/urls.py: -------------------------------------------------------------------------------- 1 | """myproject URL Configuration 2 | 3 | The `urlpatterns` list routes URLs to views. For more information please see: 4 | https://docs.djangoproject.com/en/2.1/topics/http/urls/ 5 | Examples: 6 | Function views 7 | 1. Add an import: from my_app import views 8 | 2. Add a URL to urlpatterns: path('', views.home, name='home') 9 | Class-based views 10 | 1. Add an import: from other_app.views import Home 11 | 2. Add a URL to urlpatterns: path('', Home.as_view(), name='home') 12 | Including another URLconf 13 | 1. Import the include() function: from django.urls import include, path 14 | 2. Add a URL to urlpatterns: path('blog/', include('blog.urls')) 15 | """ 16 | from django.contrib import admin 17 | from django.urls import include, path 18 | 19 | urlpatterns = [ 20 | path('api/', include('myproject.core.urls')), 21 | path('admin/', admin.site.urls), 22 | ] 23 | -------------------------------------------------------------------------------- /backend/myproject/wsgi.py: -------------------------------------------------------------------------------- 1 | """ 2 | WSGI config for myproject 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/2.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', 'myproject.settings') 15 | 16 | application = get_wsgi_application() 17 | -------------------------------------------------------------------------------- /backend/requirements.txt: -------------------------------------------------------------------------------- 1 | dj-database-url==0.5.0 2 | Django==2.2.27 3 | django-cors-headers==3.2.1 4 | django-extensions==2.2.9 5 | djangorestframework==3.11.0 6 | python-decouple==3.3 7 | -------------------------------------------------------------------------------- /frontend/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /frontend/README.md: -------------------------------------------------------------------------------- 1 | # frontend 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /frontend/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /frontend/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "frontend", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "axios": "^0.19.2", 12 | "core-js": "^3.6.4", 13 | "vue": "^2.6.11", 14 | "vuetify": "^2.2.11" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "^4.2.0", 18 | "@vue/cli-plugin-eslint": "^4.2.0", 19 | "@vue/cli-service": "^4.2.0", 20 | "babel-eslint": "^10.0.3", 21 | "eslint": "^6.7.2", 22 | "eslint-plugin-vue": "^6.1.2", 23 | "sass": "^1.19.0", 24 | "sass-loader": "^8.0.0", 25 | "vue-cli-plugin-vuetify": "^2.0.5", 26 | "vue-template-compiler": "^2.6.11", 27 | "vuetify-loader": "^1.3.0" 28 | }, 29 | "eslintConfig": { 30 | "root": true, 31 | "env": { 32 | "node": true 33 | }, 34 | "extends": [ 35 | "plugin:vue/essential", 36 | "eslint:recommended" 37 | ], 38 | "parserOptions": { 39 | "parser": "babel-eslint" 40 | }, 41 | "rules": {} 42 | }, 43 | "browserslist": [ 44 | "> 1%", 45 | "last 2 versions" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /frontend/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/e466df294ea1c5ebf86984c85a80392f8781fdba/frontend/public/favicon.ico -------------------------------------------------------------------------------- /frontend/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 12 | 13 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /frontend/src/App.vue: -------------------------------------------------------------------------------- 1 | 46 | 47 | 64 | -------------------------------------------------------------------------------- /frontend/src/assets/huguinho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/e466df294ea1c5ebf86984c85a80392f8781fdba/frontend/src/assets/huguinho.png -------------------------------------------------------------------------------- /frontend/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/e466df294ea1c5ebf86984c85a80392f8781fdba/frontend/src/assets/logo.png -------------------------------------------------------------------------------- /frontend/src/assets/logo.svg: -------------------------------------------------------------------------------- 1 | Artboard 46 2 | -------------------------------------------------------------------------------- /frontend/src/assets/luizinho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/e466df294ea1c5ebf86984c85a80392f8781fdba/frontend/src/assets/luizinho.png -------------------------------------------------------------------------------- /frontend/src/assets/zezinho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/e466df294ea1c5ebf86984c85a80392f8781fdba/frontend/src/assets/zezinho.png -------------------------------------------------------------------------------- /frontend/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 93 | 94 | 152 | -------------------------------------------------------------------------------- /frontend/src/components/Users.vue: -------------------------------------------------------------------------------- 1 | 45 | 46 | 73 | -------------------------------------------------------------------------------- /frontend/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import vuetify from './plugins/vuetify'; 4 | 5 | Vue.config.productionTip = false 6 | 7 | new Vue({ 8 | vuetify, 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /frontend/src/plugins/vuetify.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuetify from 'vuetify/lib'; 3 | 4 | Vue.use(Vuetify); 5 | 6 | export default new Vuetify({ 7 | }); 8 | -------------------------------------------------------------------------------- /frontend/vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "transpileDependencies": [ 3 | "vuetify" 4 | ] 5 | } -------------------------------------------------------------------------------- /img/django-vue04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/e466df294ea1c5ebf86984c85a80392f8781fdba/img/django-vue04.png -------------------------------------------------------------------------------- /img/huguinho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/e466df294ea1c5ebf86984c85a80392f8781fdba/img/huguinho.png -------------------------------------------------------------------------------- /img/luizinho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/e466df294ea1c5ebf86984c85a80392f8781fdba/img/luizinho.png -------------------------------------------------------------------------------- /img/zezinho.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rg3915/django-rest-framework-vuejs/e466df294ea1c5ebf86984c85a80392f8781fdba/img/zezinho.png --------------------------------------------------------------------------------