Django学习笔记：虚拟环境与简单网页

来源：互联网发布：r数据分析师编辑：程序博客网时间：2024/06/07 20:14

django入门教程：

https://djangogirlstaipei.gitbooks.io/django-girls-taipei-tutorial/content/

新建名为mysite的project，再新建名为zhuanzhuan58_web的app，django会自动生成依赖文件。

在项目文件夹下分别新建两个名为static与templates的文件夹，static文件夹存放网页调用的CSS和图片资源，templates文件夹存放html文件。

project下的文件结构如下图所示：

修改settings.py中的三处：

INSTALLED_APPS = [    'django.contrib.admin',    'django.contrib.auth',    'django.contrib.contenttypes',    'django.contrib.sessions',    'django.contrib.messages',    'django.contrib.staticfiles',    'zhuanzhuan58_web',]

TEMPLATES = [    {        'BACKEND': 'django.template.backends.django.DjangoTemplates',        'DIRS': [os.path.join(BASE_DIR,'templates')],        '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',            ],        },    },]

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

使用命令更新：

python manage.py migrate

在命令行中创建管理员账户：

python3 manage.py createsuperuser

views.py代码：

from django.shortcuts import render# Create your views here.def index(requst):    return render(requst,'index.html')         #返回index.html

urls.py代码：

from django.conf.urls import urlfrom django.contrib import adminfrom zhuanzhuan58_web.views import indexurlpatterns = [    url(r'^admin/', admin.site.urls),           #admin结尾的url跳转到管理页面    url(r'^index/', index)           #index结尾的url跳转到index]

在项目文件夹下执行命令启动服务器：

python3 manage.py runserver

在浏览器中输入：

http://127.0.0.1:8000/admin

即为打开管理页面

输入：

http://127.0.0.1:8000/index

即为请求index.html页面。

CSS与HTML文件来源于某网易云课堂，好像CSDN不能传文件，干脆在下面给出其代码。

CSS:

body {    padding: 0 0 0 0;    background-color: #ffffff;    background-image: url(../images/bg3-dark.jpg);    background-position: top left;    background-repeat: no-repeat;    background-size: cover;    font-family: Helvetica, Arial, sans-serif;}.main-content {    width: 500px;    padding: 20px 20px 20px 20px;    border: 1px solid #dddddd;    border-radius:15px;    margin: 30px auto 0 auto;    background: #fdffff;    -webkit-box-shadow: 0 0 22px 0 rgba(50, 50, 50, 1);    -moz-box-shadow:    0 0 22px 0 rgba(50, 50, 50, 1);    box-shadow:         0 0 22px 0 rgba(50, 50, 50, 1);}.main-content p {    line-height: 26px;}.main-content h2 {    color: #585858;}.articles {    list-style-type: none;    padding: 0;}.articles img {    float: left;    padding-right: 11px;}.articles li {    border-top: 1px solid #F1F1F1;    background-color: #ffffff;    height: 90px;    clear: both;}.articles h3 {    margin: 0;}.articles a {    color:#585858;    text-decoration: none;}.articles p {    margin: 0;}.article-info {    float: left;    display: inline-block;    margin: 8px 0 8px 0;}.rate {    float: right;    display: inline-block;    margin:35px 20px 35px 20px;}.rate-score {    font-size: 18px;    font-weight: bold;    color: #585858;}.rate-score-hot {}.meta-info {}.meta-cate {    margin: 0 0.1em;    padding: 0.1em 0.7em;    color: #fff;    background: #37a5f0;    font-size: 20%;    border-radius: 10px ;}.description {    color: #cccccc;}.nav {    padding-left: 0;    margin: 5px 0 20px 0;    text-align: center;}.nav li {    display: inline;    padding-right: 10px;}.nav li:last-child {    padding-right: 0;}.header {    padding: 10px 10px 10px 10px;}.header a {    color: #ffffff;}.header img {    display: block;    margin: 0 auto 0 auto;}.header h1 {    text-align: center;}.footer {    margin-top: 20px;}.footer p {    color: #aaaaaa;    text-align: center;    font-weight: bold;    font-size: 12px;    font-style: italic;    text-transform: uppercase;}

html，对比原始的html文件需要做适当修改，html首行加入：

{% load static %}

对于本地资源的调用格式需要由原来的PATH改为{% static ‘PATH’ %})，完整代码如下：

{% load static %}<html><head>    <link rel="stylesheet" type="text/css" href="{% static 'css/new_blah.css' %}"></head><body>    <div class="header">        <img src="{% static 'images/blah.png' %}">        <ul class="nav">            <li><a href="#">Home</a></li>            <li><a href="#">Site</a></li>            <li><a href="#">Other</a></li>        </ul>    </div>    <div class="main-content">        <h2>Article</h2>        <ul class="articles">            <li>                <img src="{% static 'images/0001.jpg' %}" width="100" height="91">                <div class="article-info">                    <h3><a href="#">The blah</a></h3>                    <p class="meta-info">                        <span class="meta-cate">fun</span>                        <span class="meta-cate">Wow</span>                    </p>                    <p class="description">Just say something.</p>                </div>                <div class="rate">                    <span class="rate-score">4.5</span>                </div>            </li>            <li>                <img src="{% static 'images/0002.jpg' %}" width="100" height="91">                <div class="article-info">                    <h3><a href="#">The blah</a></h3>                    <p class="meta-info">                        <span class="meta-cate">butt</span>                        <span class="meta-cate">NSFW</span>                    </p>                    <p class="description">Just say something.</p>                </div>                <div class="rate">                    <img src="{% static 'images/Fire.png' %}" width="18" height="18">                    <span class="rate-score">5.0</span>                </div>            </li>            <li>                <img src="{% static 'images/0003.jpg' %}" width="100" height="91">                <div class="article-info">                    <h3><a href="#">The blah</a></h3>                    <p class="meta-info">                        <span class="meta-cate">sea</span>                    </p>                    <p class="description">Just say something.</p>                </div>                <div class="rate">                    <span class="rate-score">3.5</span>                </div>            </li>            <li>                <img src="{% static 'images/0004.jpg' %}" width="100" height="91">                <div class="article-info">                    <h3><a href="#">The blah</a></h3>                    <p class="meta-info">                        <span class="meta-cate">bay</span>                        <span class="meta-cate">boat</span>                        <span class="meta-cate">beach</span>                    </p>                    <p class="description">Just say something.</p>                </div>                <div class="rate">                    <span class="rate-score">3.0</span>                </div>            </li>        </ul>    </div>    <div class="footer">        <p>&copy; Mugglecoding</p>    </div></body></html>

阅读全文

0 0