python3 django框架开发（一） html调用static文件

转载请注明：https://blog.csdn.net/weixin_40490238/article/details/84573309

django的准备工作：

打开pycharm创建的django项目，并新建一个python虚拟环境

打开命令行，输入：创建一个新的APP应用

python manage.py startapp robotWeb

创建成功后新建文件夹static，并在static文件下创建用来储存css，js，img的文件夹

文件目录如下：

settings.py文件，注册APP

static文件配置：settings.py最后添加

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]

在css，js，img创建文件

css调用img例子：

body.style-2 {
  background-color: #ffffff;
  background-size: cover;
  background-position: -30% center;
  background-repeat: no-repeat;
  background-image: url(/static/img/bg_2.jpg);
  height: 100%;
}

在templates创建一个HTML页面：forgot.html （最后附上forgot.html代码）

html调用 js，css：

{% load static %}

<link rel="stylesheet" href={% static 'css/style.css' %}>

<script src={% static 'js/modernizr-2.6.2.min.js' %}></script>

访问forgot.html规则，views.py：

from django.shortcuts import render

# Create your views here.
def forgot(request):
    return render(request, 'forgot.html')

路径访问urls.py:

from django.urls import path
from robotWeb import views
urlpatterns = [
    path('', views.forgot),
]

最后成功运行

forgot.html:

<!DOCTYPE html >
<html lang="en">
{% load static %}

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Minimal and Clean Sign up / Login and Forgot Form by FreeHTML5.co</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Free HTML5 Template by FreeHTML5.co" />
	<meta name="keywords" content="free html5, free template, free bootstrap, html5, css3, mobile first, responsive" />
	

  

  	<!-- Facebook and Twitter integration -->
	<meta property="og:title" content=""/>
	<meta property="og:image" content=""/>
	<meta property="og:url" content=""/>
	<meta property="og:site_name" content=""/>
	<meta property="og:description" content=""/>
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />

	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,300' rel='stylesheet' type='text/css'>
	
	<link rel="stylesheet" href={% static 'css/bootstrap.min.css' %}>
	<link rel="stylesheet" href={% static 'css/animate.css' %}>
	<link rel="stylesheet" href={% static 'css/style.css' %}>

	<!-- Modernizr JS -->
	<script src={% static 'js/modernizr-2.6.2.min.js' %}></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src={% static 'js/respond.min.js' %}></script>
	<![endif]-->

	</head>
	<body class="style-2">

		<div class="container">
			
			<div class="row">
				<div class="col-md-4">
					<!-- Start Sign In Form -->
					<form action="#" class="fh5co-form animate-box" data-animate-effect="fadeInLeft">
						<h2>Forgot Password</h2>
						<div class="form-group">
							<div class="alert alert-success" role="alert">Your email has been sent.</div>
						</div>
						<div class="form-group">
							<label for="email" class="sr-only">Email</label>
							<input type="email" class="form-control" id="email" placeholder="Email" autocomplete="off">
						</div>
						<div class="form-group">
							<p><a href="sign-in.html">Sign In</a> or <a href="sign-up.html">Sign Up</a></p>
						</div>
						<div class="form-group">
							<input type="submit" value="Send Email" class="btn btn-primary">
						</div>
					</form>
					<!-- END Sign In Form -->


				</div>
			</div>
			<div class="row" style="padding-top: 60px; clear: both;">
				<div class="col-md-12 text-center">
				<p><small>&copy; All Rights Reserved  <a href="http://47.107.56.104:8080" target="_blank" title="周定坤">周定坤</a></small></p></div>
			</div>
		</div>

	<!-- jQuery -->
	<script src={% static 'js/jquery.min.js' %}></script>
	<!-- Bootstrap -->
	<script src={% static 'js/bootstrap.min.js' %}></script>
	<!-- Placeholder -->
	<script src={% static 'js/jquery.placeholder.min.js' %}></script>
	<!-- Waypoints -->
	<script src={% static 'js/jquery.waypoints.min.js' %}></script>
	<!-- Main JS -->
	<script src={% static 'js/main.js' %}></script>

	</body>
</html>

python3 django框架开发（一） html调用static文件

猜你喜欢