The core of the third round of snowballing is Python Web Related knowledge , That inevitably involves the front-end technology stack , If you are right about HTML,CSS Completely zero basis , It may be hard to learn , It is suggested that some front-end knowledge can be added first , Convenient for follow-up study , You can also go directly to Django Learning phase , No big problem .
This blog starts to build the front page of the menu system , The basic knowledge involved is web template framework and front end , Priority will start from the user authentication system , The model related content of the last blog , Put it first , It will continue to be used soon .
Now start to write the front-end code of the home page , What we chose is [BootStrap3 frame ], This framework is easier to accept .
stay Django Implementation of a page in , Two steps are required , First step , Create a template HTML file , The second step , modify views.py file , Complete the view processing function .
Create directories and files
stay menuapp Create under the application directory templates Folder , Then continue to create a menuapp A subdirectory , It's a little twisted , Look at the picture .
The next in templates/menuapp Create a new one in the directory index.html The file of , This page is the template file of the home page , Here's the code section , It involves the front-end knowledge points .
Someone must have asked , Are all the codes typed out by themselves ？ It's definitely not , If so , No front-end knowledge , We can't learn any more , These contents are modified .
open [Bootstrap3 Template page ], Select a template in it , For example, the following .
In the open page , Right click to view the source code , Copy what you want on the source page , Remove the relative path related part of the code , For example, the following .
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
such ../../ All of them have to be removed , You get the final source code .
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- Above 3 individual meta label * must * Put it at the front , Anything else * must * followed by ！ --> <meta name="description" content="" /> <meta name="author" content="" /> <link rel="icon" href="../../favicon.ico" /> <title>Jumbotron Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" > <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a rel="nofollow" class="navbar-brand" href="#">Project name</a> </div> <div id="navbar" class="navbar-collapse collapse"> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control" /> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control" /> </div> <button type="submit" class="btn btn-success">Sign in</button> </form> </div> <!--/.navbar-collapse --> </div> </nav> <!-- Main jumbotron for a primary marketing message or call to action --> <div class="jumbotron"> <div class="container"> Hello, world! <p> This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique. </p> <p> <a rel="nofollow" class="btn btn-primary btn-lg" href="#" role="button" >Learn more »</a > </p> </div> </div> <div class="container"> <!-- Example row of columns --> <div class="row"> <div class="col-md-4"> <h2>Heading</h2> <p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p> <a rel="nofollow" class="btn btn-default" href="#" role="button" >View details »</a > </p> </div> <div class="col-md-4"> <h2>Heading</h2> <p> Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p> <p> <a rel="nofollow" class="btn btn-default" href="#" role="button" >View details »</a > </p> </div> <div class="col-md-4"> <h2>Heading</h2> <p> Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p> <p> <a rel="nofollow" class="btn btn-default" href="#" role="button" >View details »</a > </p> </div> </div> <hr /> <footer> <p>© 2016 Company, Inc.</p> </footer> </div> <!-- /container --> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </body> </html>
After the template file is written , You can try to run Django Website , We have achieved our ultimate goal .
Before running , There's still some preparatory work to be done , The first is to modify the default home page .
Edit the image below urls.py file .
Modify the code as follows ：
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
# take menuapp Applied URL Set the URL Setting up
path("", include("menuapp.urls"))
]Django The general advice is for each different APP Application design alone URL file , So it needs to be in menuapp In file , Add a new one urls.py file , That's the part of the above code reference path("", include("menuapp.urls")), The location of the code is shown in the figure below .
The code in the file is as follows ：
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="defalut"),
] When accessing the default path , namely http://127.0.0.1:8000/, Would call views Module index Method , So it needs to be modified views.py file , The code is as follows ：
from django.shortcuts import render # Create your views here. def index(request): return render(request, "menuapp/index.html")
Come here , I found that the template file has been loaded .
You can use python manage.py runserver Running our app , But there's a problem again , That is the following error .
This error indicates that the template file was not loaded into , There are two reasons , The first is the location of the template file , Pay attention to it menuapp Under the application directory , If you're not sure , Please go back to the picture above , The second reason is , We're not here yet settings.py Zhongba menuapp Add to settings.INSTALLED_APPS Go inside , Import failed to load app , modify settings.py file , The code is as follows ：
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'menuapp' ]
At this point, the code is running , If successful, the following interface will appear , Indicates that the template file has been loaded .
In the above code index.html In file , The following is used , All of these are called CDN Speed up links to web sites （ After a comprehensive study of the front end , We can supplement this part of knowledge ）, It's all up to these addresses , It's not in our hands , So next, you need to change the following content into the static file of the menu project .
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
open Bootstrap 3 Official website , Download source material in advance ,
Create static file directories and files
Copy the downloaded file to static Catalog , The final result is shown in the figure below .
The next step is how to Django Template file to the application of static file related knowledge .
First step ： Insert... In the first line of the template page where you need to use a static file {% load static %} sentence .
The second step ： Use... Where static files are used later static Tag and path , For example, using bootstrap.min.js file , Statement for {% static 'js/bootstrap.min.js' %}
The third step ： The above path will be due to settings.py Set in the STATIC_URL Value plus path value , Become the final address , for example static/js/bootstrap.min.js
Step four ： stay urls.py Add static file processing code in
The modification of the code file involved in the above steps is as follows ：
index.html Modification and improvement
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title> Menu system ---- home page </title>
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
</head>
<body>
<!-- The rest is the same as above -->
</div> <!-- /container -->
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>urls.py The file is modified as follows , Note that this file is part of the project directory , No menuapp Application directory
from django.contrib import admin
from django.urls import path, include
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
path('admin/', admin.site.urls),
# take menuapp Applied URL Set the URL Setting up
path("", include("menuapp.urls"))
]
urlpatterns += staticfiles_urlpatterns() Reuse python manage.py runserver Run the program , Browse the page to see that the data is normal .
Used above {% Statement part %} Namely Django Template language in , Templates are different from ordinary text files in two ways , Templates contain variables , This variable is used when a page is rendered , Will be replaced with the corresponding value , The template also includes logic processing code , This part of knowledge is called labels .
Variables are represented by double curly braces in the template {{ Variable name }}, Here variable related knowledge also involves filter content , It will be mentioned later .
Tags in templates use {% %} To said , Tags can contain business logic code , Sometimes there are start tags and end tags .
For example, implement if The label of the statement , It is written as follows ：
<ul>
{% if menu %}
<li>{{ menu.name }}</li>
</ul>
{% endif %}Template language uses block and extends Two tags implement inheritance , Simple understanding is a bunch of common templates .
Used in the parent template block To carry on the placeholder , Use... In sub templates extends Inheritance .
Next, split the template , take index.html The header in the file is extracted . stay templates/menuapp Create a new file in the directory .
among frame.html The code is as follows , Just show the core , Otherwise, the article will be too long , Be careful frame.html As a parent template , among {% block title %}{% endblock%} As a placeholder ,{% block content %}{% endblock %} As a placeholder .
{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<title>{% block title %}{% endblock%}</title>
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<!-- The contents are omitted -->
</div>
</nav>
<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
<!-- The contents are omitted -->
</div>
{% block content %}{% endblock %}
<script src="{% static 'js/bootstrap.min.js' %}"></script>
</body>
</html>index.html The document code is as follows ：
{% extends "menuapp/frame.html" %} {% block title %} Menu system ---- home page {%
endblock %} {% block content %}
<div class="container"> Code content </div>
<!-- /container -->
{% endblock %}views.py The source code remains unchanged , As follows ：
from django.shortcuts import render # Create your views here. def index(request): return render(request, "menuapp/index.html")
The running effect is as follows ：
This blog mainly introduces Django In the most simple home page production , Try to be without front-end knowledge , Help you learn Python Web Related knowledge , Just like it .
In this paper, from https://www.jianshu.com/p/1c81e86252f4, If there is any infringement , Please contact to delete .
Python -- estimation of coefficients in regression analysis equations based on least square method and maximum likelihood method
One 、 introduction Univariate
