github https://github.com/foasho/Django_Vue_template
・ Django version.2.1.0 ・ Vue.js ・ MySQL
django-admin startproject config .
python manage.py startapp accounts
config/setting.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
"accounts.apps.AccountsConfig",
]
config/setting.py
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'
pip install pymysql
pip install python-dotenv
Modifier manage.py (ajouter MySQL)
manage.py
import pymysql
pymysql.install_as_MySQLdb()
Créer un fichier .env dans la configuration
config/.env
DB_NAME = XXXXX
DB_PWD = XXXXX
DB_USER = XXXXX
DB_HOST = XXXXX
Modifier setting.py
config/setting.py
from os.path import join, dirname
from dotenv import load_dotenv
config/setting.py
dotenv_path = join(dirname(__file__), '.env')
load_dotenv(dotenv_path)
DB_NAME = os.environ.get("DB_NAME")
DB_PWD = os.environ.get("DB_PWD")
DB_USER = os.environ.get("DB_USER")
DB_HOST = os.environ.get("DB_HOST")
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': DB_NAME,#Nom de la base de données
'USER': DB_USER,#Nom d'utilisateur
'PASSWORD': DB_PWD,#mot de passe
'HOST': DB_HOST,#Hôte local, etc.
'PORT': '3306',#Port de connexion
}
}
config/settings.py
#Paramètres de journalisation
LOGGING = {
"version": 1,
"disavle_existing_loggers": False,
#Paramètres de l'enregistreur
"logger":{
"django": {
"handlers": ["console"],
"lebel": "INFO",
}
},
#Logger pour utiliser l'application de comptes
"diary": {
"handlers": ["console"],
"level": "DEBUG",
},
#Paramètres du gestionnaire
"handlers": {
"console": {
"level": "DEBUG",
"class": "logging.StreamHandler",
"formatter": "dev"
},
},
#Paramètres du formateur
"formatters": {
"dev": {
"format": "\t".join([
"%(asctime)s",
"[%(levelname)s]",
"%(pathname)s(Line:%(lineno)d)",
"%(message)s"
])
},
},
}
config/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path("", include("accounts.urls"))
]
Créer un nouveau fichier: accounts / urls.py
accounts/urls.py
from django.urls import path
from . import views
app_name = "accounts"
urlpatterns = [
path("", views.IndexView.as_view(), name="index")
]
Créer un nouveau répertoire "templates" Créé dans les comptes / modèles
Créer un nouveau fichier index.html
accouts/templates/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>haut de page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Vérification
python manage.py runserver
Télécharger Bootstrap (https://startbootstrap.com/themes/one-page-wonder)
Créer un nouveau dossier statique directement sous le projet
Placez le BootStrap téléchargé dans un dossier statique
├── accounts
├── config
├── static
| ├── css
| ├── img
| └── vender
├── manage.py
Définissez views.py pour afficher le HTML.
accounts/views.py
from django.shortcuts import render
from django.views import generic
class IndexView(generic.TemplateView):
template_name = "index.html"
config/settings.py
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
accounts/templates/base.html
{% load static %}
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>{% block title %}{% endblock %}</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/one-page-wonder.min.css' %}" rel="stylesheet">
<!-- My style -->
<link rel="stylesheet" type="text/css" href="{% static 'css/mystyle.css' %}">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue"></script>
{% block head %}{% endblock %}
</head>
<body>
<div id="wrapper">
<!--En-tête Navi-->
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top">
<div class="container">
<a class="navbar-brand" href="{% url 'accounts:index' %}">TITLE</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item {% block active_inquiry %}{% endblock %}">
<a class="nav-link" href="#">INQUIRY</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log In</a>
</li>
</ul>
</div>
</div>
</nav>
{% block contents%}{% endblock %}
<!-- Footer -->
<footer class="py-5 bg-black">
<div class="container">
<p class="m-0 text-center text-white small">©Foa TemplatesCode 2020</p>
</div>
<!-- /.container -->
</footer>
<!-- Vue.js JavaScript -->
{% block scripts%}{% endblock %}
<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
</div>
</body>
</html>
accounts/templates/index.html
{% extends 'base.html' %}
{% load static %}
{% block title %}TITLE --Subtitle{% endblock %}
{% block contents %}
<div id="indexapp">
<header class="masthead text-center text-white">
<div class="masthead-content">
<div class="container">
<h1 class="masthead-heading mb-0">[[ title ]]</h1>
<h2 class="masthead-subheading mb-0">SubTitle</h2>
<a href="#" class="btn btn-primary btn-xl rounded-pill mt-5">LOG IN</a>
</div>
</div>
<div class="bg-circle-1 bg-circle"></div>
<div class="bg-circle-2 bg-circle"></div>
<div class="bg-circle-3 bg-circle"></div>
<div class="bg-circle-4 bg-circle"></div>
</header>
<div class="py-5 text-white" style="background-image: linear-gradient(to bottom, rgba(0, 0, 0, .75), rgba(0, 0, 0, .75)), url(https://static.pingendo.com/cover-bubble-dark.svg); background-position: center center, center center; background-size: cover, cover; background-repeat: repeat, repeat;">
<div class="container">
<div class="row">
<div class="p-3 col-md-8 col-lg-6 ml-auto text-right text-white">
<p class="lead">"I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks."</p>
<p><b>Johann Goethe</b><br><small>CEO and founder</small></p>
</div>
</div>
</div>
</div>
<div class="py-5" style="background-image: linear-gradient(to left bottom, rgba(189, 195, 199, .75), rgba(44, 62, 80, .75)); background-size: 100%;">
<div class="container">
<div class="row">
<div class="text-center mx-auto col-md-12">
<h1 class="text-white mb-4">Testimonials</h1>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6 p-3">
<div class="card">
<div class="card-body p-4">
<div class="row">
<div class="col-md-4 col-3"> <img class="img-fluid d-block rounded-circle" src="https://static.pingendo.com/img-placeholder-2.svg"> </div>
<div class="d-flex col-md-8 flex-column justify-content-center align-items-start col-9">
<p class="mb-0 lead"> <b>J. W. Goethe</b> </p>
<p class="mb-0">Co-founder</p>
</div>
</div>
<p class="mt-3 mb-0">I throw myself down among the tall grass by the trickling stream; and, as I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 p-3">
<div class="card">
<div class="card-body p-4">
<div class="row">
<div class="col-md-4 col-3"> <img class="img-fluid d-block rounded-circle" src="https://static.pingendo.com/img-placeholder-1.svg"> </div>
<div class="d-flex col-md-8 flex-column justify-content-center align-items-start col-9">
<p class="mb-0 lead"> <b>G. W. John</b> </p>
<p class="mb-0">CEO & founder</p>
</div>
</div>
<p class="mt-3 mb-0" >I lie close to the earth, a thousand unknown plants are noticed by me: when I hear the buzz of the little world among the stalks, and grow familiar with the countless indescribable forms of the insects and flies.</p>
</div>
</div>
</div>
<div class="col-lg-4 p-3">
<div class="card">
<div class="card-body p-4">
<div class="row">
<div class="col-md-4 col-3"> <img class="img-fluid d-block rounded-circle" src="https://static.pingendo.com/img-placeholder-3.svg"> </div>
<div class="d-flex col-md-8 flex-column justify-content-center align-items-start col-9">
<p class="mb-0 lead"> <b>J. G. Wolf</b> </p>
<p class="mb-0">CFO</p>
</div>
</div>
<p class="mt-3 mb-0">Oh, would I could describe these conceptions, could impress upon paper all that is living so full and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="py-5 text-center">
<div class="container">
<div class="row">
<div class="mx-auto col-md-8">
<h1>{{ this.title }}</h1>
<p class="mb-4"> Oh, would I could describe these conceptions, could impress upon paper all that is living so full and warm within me, that it might be the mirror of my soul, as my soul is the mirror of the infinite God! O my friend -- but it is too much for my strength -- I sink under the weight of the splendour of these visions!</p>
<div class="row text-muted">
<div class="col-md-2 col-4 p-2"> <i class="d-block fa fa-angellist fa-3x"></i> </div>
<div class="col-md-2 col-4 p-2"> <i class="d-block fa fa-cc-visa fa-3x"></i> </div>
<div class="col-md-2 col-4 p-2"> <i class="d-block fa fa-empire fa-3x"></i> </div>
<div class="col-md-2 col-4 p-2"> <i class="d-block fa fa-paypal fa-3x"></i> </div>
<div class="col-md-2 col-4 p-2"> <i class="d-block fa fa-rebel fa-3x"></i> </div>
<div class="col-md-2 col-4 p-2"> <i class="d-block fa fa-first-order fa-3x"></i> </div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script src="{% static 'js/index_vue.js' %}"></script>
{% endblock %}
Créé dans un nouveau dossier "js" en statique Créer index.js dans js À ne pas confondre avec le système de Django délimiteurs: ['[[', ']]'] est important
static/js/index.js
var app = new Vue({
delimiters: ['[[', ']]'],
el: '#indexapp',
data: {
title: "TestTitle"
},
})
python manage.py runserver