Webová aplikace Roztomilé kočky (Django + VueJs) - Nastavení

Nemohu najít žádné přátelské zdroje o projektu stavby pomocí Djanga jako backendové služby a VueJs jako frontendu. Cílem je zachovat výhody obou rámců.

  • Django pro správu databází, výpočetní techniky a poskytování dat
  • VueJS vytvoří výkonné webové komponenty a znovu je použije kdekoli a požádá o Django API Rest

souhrn

Část I - Nastavení

Část II - Vytvoření pohledů VueJs

Část III - Vytvořte Rest API s DRF

Část IV - Získejte data z API s VueJs

Začínáme zde!

Co teď potřebujete?

- Django - VueJs 2.0 - Webpack -

Je nutné nainstalovat Python a NodeJs dříve.

Vytvořte projekt Django

Otevřete příkazový shell a vytvořte svůj django projekt

python pip install django // instalace django
django-admin startproject  // vytváření django projektu
cd 
manage.py runserver // spuštění lokálního serveru

Otevřete prohlížeč a přejděte na adresu http: // localhost: 8000. Tento text byste měli vidět na stránce.

V průzkumníku byste měli mít novou složku pojmenovanou s názvem vašeho projektu.

můj projekt
| _ myproject
| _ manage.py

Práce je hotová! Váš projekt vykreslí šablonu. Nyní chceme integrovat VueJS do našeho projektu

Integrujte část VueJS

Předpokládejme, že je NodeJ nainstalován na vašem počítači. Spusťte následující příkaz ve shellu. Musíte být ve složce myproject

npm install -g vue-cli
vue init webpack-simple

Poslední příkaz vytvoří projekt VueJs nakonfigurovaný pro práci s Webpackem. Shell vyvolá několik otázek

Vygenerovat projekt v aktuálním adresáři? Ano
? Název projektu: myproject
? Popis projektu: použijte výchozí popis
? Autor: výchozí
? Lincense: výchozí
? Použijte Sass: Ano

Pokud hledáte složku myproject, jsou k dispozici nové soubory.

-můj projekt
| _ myProject
| _ src
  | _ aktiva
  | _ App.vue
  | _ main.js
| _ .babelrc
| _ .editorconfig
| _ index.html
| _ manage.py
| _ package.json
| _ README.md
| _ webpack.config.js

Soubor package.json obsahuje všechny informace o závislostech, které vaše aplikace potřebuje, aby správně fungovala. Vypadá to takto:

"name": "myproject",
  "description": "Projekt A Vue.js",
  "version": "1.0.0",
  "skripty": {
    "dev": "cross-env NODE_ENV = vývojový webpack-dev-server - otevřený --hot",
    "build": "cross-env NODE_ENV = produkční webpack - postup - skrýt moduly"
  },
  "závislosti": {
    "vue": "^ 2.5.11"
  },
  ...
  "devDependencies": {
    "babel-core": "^ 6.26.0",
    "babel-loader": "^ 7.1.2",
    "babel-preset-env": "^ 1.6.0",
    "babel-preset-stage-3": "^ 6.24.1",
    "cross-env": "^ 5.0.5",
    "css-loader": "^ 0,28,7",
    "file-loader": "^ 1.1.4",
    "node-sass": "^ 4.5.3",
    "sass-loader": "^ 6.0.6",
    "vue-loader": "^ 13.0.5",
    "vue-template-compiler": "^ 2.4.4",
    "webpack": "^ 3.6.0",
    "webpack-dev-server": "^ 2.9.1"
  }
}

Pokud používáte instalaci npm, budou všechny závislosti nainstalovány do složky node_module.

npm install // a počkejte

Nyní je vaše aplikace VueJs připravena k práci.

npm běh dev

Vaše aplikace je stavěna v režimu vývoje. Váš prohlížeč vstoupí do index.html. V tomto najdete návod k načtení src / main.js

src \ main.js
importovat Vue z 'vue'
importovat aplikaci z './App.vue'
nová Vue ({
  el: '#app',
  render: h => h (aplikace)
})

Zde vytváříme Vue a vykreslujeme obsah aplikace z src / App.vue

src \ App.vue

Takže při spuštění aplikace na localhost: // 8080 byste měli v prohlížeči zobrazit šablonu App.vue

Skvělý hukot! Tady jsme. Máme zadní část pracující na localhost a přední část na jiném localhost. Udělejte si čas a užijte si to.

Nyní uvidíme, jak se připojit k komponentě aplikace VueJs k šabloně Django. Znamená to, že když provozujeme místní server s Djangem, uvidíme šablonu aplikace.

Fúze

Do našeho projektu musíme přidat nějaké nástroje.

npm install webpack-bundle-tracker --save-dev
npm install write-file-webpack-plugin - save-dev

mělo by to být přidávání do vašeho balíčku.json devdependecies.

Kompilace přední části

Co teď chceme?

Mým nápadem bylo zkompilovat přední část, dostat ji do souboru. Tímto způsobem jsem ho mohl nazvat kamkoli chci. K tomu musíme trochu upravit konfigurační soubor Webpack. Otevřete ji a uvidíte, co můžeme dělat.

var cesta = vyžadovat ('cesta')
var webpack = vyžadovat ('webpack')
module.exports = {
  položka: 'main.js',
  výstup: {
    path: path.resolve (__ dirname, './dist'),
    název souboru: 'bundle.js'
  },
  modul: {
    pravidla: [
      {
        test: /\.css$/,
        použití: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      ...
    ]
  },
  vyřešit: {
    alias: {
      'vue $': 'vue / dist / vue.esm.js'
    },
    přípony: ['*', '.js', '.vue', '.json']
  }
}
  • položka: je váš výchozí bod.
  • cesta: kde najít kompilovaný soubor
  • název souboru: …
  • pravidla: řekněte společnosti Webpack, jaký nástroj použít, když splní tato rozšíření

Jak jsme viděli dříve, tato konfigurace funguje, ale na konci nemáme žádný soubor. Pojďme přidat nějaké vyžadují. Jedním z nich je sledování a uložení do souboru umístění zkompilovaného souboru. Kompilovaný soubor je bohužel uložen v paměti. Přidáme tedy další nástroj k uložení tohoto do počítače.

Pojďme přidat nějaké vyžadují

var BundleTracker = vyžadovat ('webpack-bundle-tracker')
var WriteFilePlugin = vyžadovat ('write-file-webpack-plugin')

A řekněte Webpacku, že je chceme používat

položka: '...',
výstup: {
  ...
  },
pluginy: [
  new BundleTracker ({filename: 'webpack-statistics.json'}),
  nový WriteFilePlugin ()
  ],
modul: {
  ...
  }

Před spuštěním kompilace se musíme rozhodnout, kde je náš výchozí bod a kam uložit výstupní kompilovaný soubor.

položka: './src/main.js',
výstup: {
    path: path.resolve (__ dirname, './dist/'),
    název souboru: 'bundle.js'
},

Přejděte do příkazového shellu a spusťte sestavení npm run build. Počkejte několik sekund a TADA! Máme nový soubor webpack-statistics.json. Pokud ji otevřeme, můžeme vidět, že soubor bundle.js je umístěn ve složce ./dist/.

-můj projekt
| _ dist
  | _ aktiva
    | _ bundles.js
| _ myProject
| _ src
  | _ App.vue
  | _ main.js
| _ index.html
| _ package.json
| _ webpack-statistics.json
| _ webpack.config.js

Jak používat tento soubor svazku s Django

Chystáme se vytvořit zobrazení Django a zavolat existující soubor index.html. V tomto souboru použijeme značku definovanou aplikací App.vue a vykreslíme ji.

index.html


  
    ...
  
  
    
            
  

Nejprve musíme nainstalovat nástroj, který Djangovi povolí pomocí souboru bundle.js

pip install django-webpack-loader
# Pak v settings.py
# Přidat 'webpack_loader' do INSTALLED_APP
# Přidat cestu k STATICFILES_DIRS
# vložte ji
STATIC_URL = '/ public /'
STATIC_ROOT = os.path.join (BASE_DIR, 'public')
STATICFILES_DIRS = (
    os.path.join (BASE_DIR, 'dist'),
)
WEBPACK_LOADER = {
    „VÝCHOZÍ“: {
        'CACHE': ne DEBUG,
        'BUNDLE_DIR_NAME': '',
        'STATS_FILE': os.path.join (BASE_DIR, 'webpack-statistics.json'),
        'POLL_INTERVAL': 0,1,
        'TIMEOUT': Žádné,
        'IGNORE': ['. + \. Hot-update.js', '. + \. Map']
    }
}
# Více nastavení
# Přidat cestu do TEMPLATES_DIR
TEMPLATES = [
    {
        'DIRS': [BASE_DIR],
        ...
    },
]

Nyní můžete tento soubor bundle.js načíst jako statický soubor v index.html

index.html


  
    ...
  
  
    {% load render_bundle from webpack_loader%}
    
            
   {% render_bundle 'main'%}
  

Nakonec musíme tyto index.html nasměrovat na adresu urls.py.

-můj projekt
| _ dist
| _ myProject
  | _ settings.py
  | _ urls.py
| _ src
  | _ App.vue
  | _ main.js
| _ index.html

V urls.py

z adresy django.conf.urls import URL
ze souboru django.contrib import admin
z django.contrib.staticfiles.urls importovat staticfiles_urlpatterns
z django.views.generic import TemplateView
urlpatterns = [
    url (r '^ $',
        TemplateView.as_view (template_name = 'index.html'),
        name = 'uHome'
    ),
    url (r '^ admin /', admin.site.urls),
]
urlpatterns + = staticfiles_urlpatterns ()

Main.js se trochu změní, aby definovaly značku .

importovat Vue z 'vue'
importovat aplikaci z './App.vue'
nová Vue ({
  el: '#app',
  komponenty: {
    'app': App
  }
})

Hádej co !? jsme hotovi!

// Kompilace aplikace VueJS
npm run build
#collect statické soubory ve veřejné složce
python manage.py collectstatic
#run Django server
python manage.py runserver

Přejděte na stránku a na vašem místním portu Django by se měla zobrazit šablona aplikace Vue.Js.

Dobrá práce ! Udělali jsme to společně. V další části vám ukážu, jak si vytvořit vlastní Vue s Djangem.

Další část - vlastní šablona VueJs