您现在的位置：程式師世界 >> 編程語言 > >> 更多編程語言 >> Python

Django - basic usage and HTML loading issues

編輯：Python

Django - Basic use and HTML Loading problem

PS: Documents are used to record daily notes , Not applicable to guidance

1. Project creation and launch

 install pip install django
Create project django-admin startproject xmyweb
Create an python mange.py startapp homeweb
Start the application python mange.py runserver 0.0.0.0:8000

2. HTML problem

2.1 How to use HTML,js,css,img…

 Create a folder teamplates, Used to store html
Create a folder static Used to store js,css,img
Create location ： And applications app At the same directory

2.2 Set up

(1) setting.py
Set the static file location , Give Way django Know where to get resources

STATIC_URL = '/static/' # Slashes must be added , The folder name can be changed 
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATICFILES_DIRS = (
('css', os.path.join(STATIC_ROOT, 'css')),
('js', os.path.join(STATIC_ROOT, 'js')),
('img', os.path.join(STATIC_ROOT, 'img')),
)

 TEMPLATES = [
{

'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [
os.path.join(BASE_DIR, 'templates') #html Upper folder name , Location 
]
,
'APP_DIRS': True,
'OPTIONS': {

'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]

(2) views.py
app add to html

def home(request):
return render(request,'index.html')

(3) inidex.html
html File loading settings in
Add... At the beginning {% load static %}
Resource loading src = “{% static ‘css/c.css’ %}”

<!DOCTYPE html>
{% load static %}
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="{% static 'css/c.css' %}">
<script type="text/javascript" src="{% static 'js/j.js' %}"></script>
</head>

Link jump href = {% url ‘index’ %}

<div class="content_container">
<a class="business_item" href={% url 'index' %}>
<i class="fa fa-home" aria-hidden="true"></i>
<h2> test </h2>
</a>
</div>

Reference documents
https://blog.csdn.net/weixin_43184774/article/details/97970167
https://www.jianshu.com/p/405fa6038318/