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
Edit manage.py (add MySQL)
manage.py
import pymysql
pymysql.install_as_MySQLdb()
Creating an .env file in config
config/.env
DB_NAME = XXXXX
DB_PWD = XXXXX
DB_USER = XXXXX
DB_HOST = XXXXX
Edit 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,#Database name
'USER': DB_USER,#username
'PASSWORD': DB_PWD,#password
'HOST': DB_HOST,#Local host etc.
'PORT': '3306',#Connection port
}
}
config/settings.py
#Logging settings
LOGGING = {
"version": 1,
"disavle_existing_loggers": False,
#Logger settings
"logger":{
"django": {
"handlers": ["console"],
"lebel": "INFO",
}
},
#Logger to use the accounts app
"diary": {
"handlers": ["console"],
"level": "DEBUG",
},
#Handler settings
"handlers": {
"console": {
"level": "DEBUG",
"class": "logging.StreamHandler",
"formatter": "dev"
},
},
#Formatter settings
"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"))
]
Create new file: 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")
]
Create a new directory "templates" Created in accounts / templates
Create a new file index.html
accouts/templates/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>top page</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Verification
python manage.py runserver
Download Bootstrap (https://startbootstrap.com/themes/one-page-wonder)
Create a new static folder directly under the project
Put the downloaded BootStrap in a static folder
├── accounts
├── config
├── static
| ├── css
| ├── img
| └── vender
├── manage.py
Set views.py to display 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">
<!--Navi header-->
<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 %}
Created in a new folder "js" in static Create index.js in js Not to be confused with Django's system delimiters: ['[[',']]'] is important
static/js/index.js
var app = new Vue({
delimiters: ['[[', ']]'],
el: '#indexapp',
data: {
title: "TestTitle"
},
})
python manage.py runserver
Recommended Posts