菜单 学习猿地 - LMONKEY

VIP

开通学习猿地VIP

尊享10项VIP特权 持续新增

知识通关挑战

打卡带练!告别无效练习

接私单赚外块

VIP优先接,累计金额超百万

学习猿地私房课免费学

大厂实战课仅对VIP开放

你的一对一导师

每月可免费咨询大牛30次

领取更多软件工程师实用特权

入驻
63
0

django 开发网站-准备并加载静态资源

原创
05/13 14:22
阅读数 349

主要还是介绍在win10上面的操作过程

主要用的技术:python3.8;django2

编辑器/ide:vscode、sublime——text、powershell、web

python开发,虚拟环境第一步。


    PS F:\demo> virtualenv env --no-site-packages

    Using base prefix 'd:\\program files\\python\\python38-32'

    New python executable in F:\demo\env\Scripts\python.exe

    Installing setuptools, pip, wheel...

    done.

    PS F:\demo>

准备静态资源

这里主要还是在模板之家、github等等网站上找到一个自己中意的前端静态网站

比如我再模板之家找的:

静态文件存在我的github上哦:

?点我

可以先利用这个下载然后跟着教程一起使用哦。

之后我们再根据我们的需求更改前端样式,当有有些小框框还是要自己做的。感觉是cv其实在后面我们建站的过程中,整个静态资源都被我们重构了。

创建apps和index加载静态资源

首先创建一个apps,来储存之后加载的各个app


    (env) PS F:\demo\django_blog> mkdir apps

    (env) PS F:\demo\django_blog> ls

        目录: F:\demo

    Mode                LastWriteTime         Length Name

    ----                -------------         ------ ----

    d-----       2019/12/23      7:51                apps

    d-----       2019/12/23      7:08                django_blog

    -a----       2019/12/23      7:08              0 db.sqlite3

    -a----       2019/12/23      7:04            558 manage.py

进入项目文件夹创建第一个app,index,用来加载我们整个网站的基础静态资源


    (env) PS F:\demo\django_blog> python .\manage.py startapp index

    (env) PS F:\demo\django_blog> ls

        目录: F:\demo\django_blog

    Mode                LastWriteTime         Length Name

    ----                -------------         ------ ----

    d-----       2019/12/23      7:51                apps

    d-----       2019/12/23      7:08                django_blog

    d-----       2019/12/23      7:26                index

    -a----       2019/12/23      7:08              0 db.sqlite3

    -a----       2019/12/23      7:04            558 manage.py

之后再将app——index移动到apps


    (env) PS F:\demo\django_blog> mv .\index\ .\apps\

在index文件夹中创建static和templates文件夹,用来存放前端静态资源样式:

并且将主目录下的templates导入到系统访问的templates目录中,同理导入static目录:

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',
            ],
        },
    },
]
# 静态文件收集
STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'compressor.finders.CompressorFinder',)
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

    (env) PS F:\demo\django_blog\apps\index> ls

    Mode                LastWriteTime         Length Name

    ----                -------------         ------ ----

    d-----       2019/12/23      7:26                migrations

    d-----       2019/12/23      7:39                static

    d-----       2019/12/23      7:39                templates

    -a----       2019/12/23      7:26             66 admin.py

    -a----       2019/12/23      7:26             90 apps.py

    -a----       2019/12/23      7:26             60 models.py

    -a----       2019/12/23      7:26             63 tests.py

    -a----       2019/12/23      7:26             66 views.py

    -a----       2019/12/23      7:26              0 __init__.py

解压我们之前下载好的静态文件:

我们将静态资源中的js、css、images文件夹全部复制到static中

并将静态资源的所有html文件全部复制到templates中:


    (env) PS F:\demo\django_blog\static> ls

        目录: F:\demo\django_blog\static

    Mode                LastWriteTime         Length Name

    ----                -------------         ------ ----

    d-----       2019/12/23      7:45                css

    d-----       2019/12/23      7:45                fonts

    d-----       2019/12/23      7:45                images

    d-----       2019/12/23      7:45                js

    (env) PS F:\demo\django_blog\templates> ls

        目录: F:\demo\django_blog\templates

    Mode                LastWriteTime         Length Name

    ----                -------------         ------ ----

    -a----        2018/8/20     11:00          24497 about-2.html

    -a----        2018/8/20     11:00          25597 about.html

    -a----        2018/8/20     11:00          28849 author.html

    -a----        2018/8/20     11:00          30416 blog-2-column.html

    -a----        2018/8/20     11:00          27182 blog-3-column.html

    -a----        2018/8/20     11:00          28514 blog.html

    -a----        2018/8/20     11:00          22673 category.html

    -a----        2018/8/20     11:00          21561 galleries.html

    -a----        2018/8/20     11:00          37272 index.html

    -a----        2018/8/20     11:00          35178 index2.html

    -a----        2018/8/20     11:00          38199 index3.html

    -a----        2018/8/20     11:00          32703 other-features.html

    -a----        2018/8/20     11:00          39411 single-post.html

然后我们修改settings的默认文件:

对语言和时间进行重新赋值:


    LANGUAGE_CODE = 'zh-hans'  # 有改动

    TIME_ZONE = 'Asia/Shanghai'  # 有改动

将我们生成的index加载到settings的apps中:


INSTALLED_APPS = [

    'django.contrib.admin',

    'django.contrib.auth',

    'django.contrib.contenttypes',

    'django.contrib.sessions',

    'django.contrib.messages',

    'django.contrib.staticfiles',

    #apps

    'apps.index',

]

修改完毕后在修改一下数据库:


    (env) PS F:\demo\django_blog> python manage.py migrate

    Operations to perform:

      Apply all migrations: admin, auth, contenttypes, sessions

    Running migrations:

      Applying contenttypes.0001_initial... OK

      Applying auth.0001_initial... OK

      Applying admin.0001_initial... OK

      Applying admin.0002_logentry_remove_auto_add... OK

      Applying contenttypes.0002_remove_content_type_name... OK

      Applying auth.0002_alter_permission_name_max_length... OK

      Applying auth.0003_alter_user_email_max_length... OK

      Applying auth.0004_alter_user_username_opts... OK

      Applying auth.0005_alter_user_last_login_null... OK

      Applying auth.0006_require_contenttypes_0002... OK

      Applying auth.0007_alter_validators_add_error_messages... OK

      Applying auth.0008_alter_user_username_max_length... OK

      Applying auth.0009_alter_user_last_name_max_length... OK

      Applying sessions.0001_initial... OK

在demo\django_blog\django_blog>下的urls中修改当我们访问主页的时候,加载apps.index.urls:


    from django.contrib import admin

    from django.urls import path

    from django.conf.urls import include

    urlpatterns = [

        path('admin/', admin.site.urls),

        # index

        path('', include('apps.index.urls'), name='index'),

    ]

为了让主页有东西可以展示,我们在index文件夹中的models.py文件中添加友链的类:

from django.db import models

import re

# Create your models here.

# 友情链接表

class FriendLink(models.Model):
    name = models.CharField('网站名称', max_length=50)
    description = models.CharField('网站描述', max_length=100, blank=True)
    link = models.URLField('友链地址', help_text='请填写http或https开头的完整形式地址')
    logo = models.URLField('网站LOGO', help_text='请填写http或https开头的完整形式地址', blank=True)
    create_date = models.DateTimeField('创建时间', auto_now_add=True)
    is_active = models.BooleanField('是否有效', default=True)
    is_show = models.BooleanField('是否首页展示', default=False)

    class Meta:
        verbose_name = '友情链接'
        verbose_name_plural = verbose_name
        ordering = ['create_date']

    def __str__(self):
        return self.name

    def get_home_url(self):
        """提取友链的主页"""
        u = re.findall(r'(http|https://.*?)/.*?', self.link)
        home_url = u[0] if u else self.link
        return home_url

    def active_to_false(self):
        self.is_active=False
        self.save(update_fields=['is_active'])

    def show_to_false(self):
        self.is_show = True
        self.save(update_fields=['is_show'])

因为我们是将index这个app拿出来放到了apps文件夹中,所以在apps.py中修改:

from django.apps import AppConfig

class IndexConfig(AppConfig):
    name = 'apps.index'

admin.py中修改,加载友链设置到admin中,到时候我们可以访问admin界面来添加数据:

from django.contrib import admin
from .models import FriendLink
# Register your models here.
# # 自定义管理站点的名称和URL标题

admin.site.site_header = '网站管理'
admin.site.site_title = '博客后台管理'

@admin.register(FriendLink)
class FriendLinkAdmin(admin.ModelAdmin):
        list_display = ('name', 'description', 'link', 'create_date', 'is_active', 'is_show')
        date_hierarchy = 'create_date'
        list_filter = ('is_active', 'is_show')

在index中创建urls.py文件:

 New-Item urls.py

写入以下代码

from django.conf.urls import url
from .views import IndexView
app_name='blog'
urlpatterns = [
    # 首页
    url(r'^$', IndexView.as_view(template_name='index.html'), name='index'),  # 主
]

同时在index中的views.py中添加:

from django.shortcuts import render
from django.views import generic
from django.conf import settings
# Create your views here.
class IndexView(generic.ListView):
    template_name = 'index.html'

生成数据库中的表:


(env) PS F:\demo\django_blog> python .\manage.py makemigrations

Migrations for 'index':

  apps\index\migrations\0001_initial.py

    - Create model FriendLink

(env) PS F:\demo\django_blog> python .\manage.py migrate

Operations to perform:

  Apply all migrations: admin, auth, contenttypes, index, sessions

Running migrations:

  Applying index.0001_initial... OK

以后每次创建修改models文件都需要进行数据迁移:python .\manage.py makemigrationspython .\manage.py migrate

那为了使静态界面index加载到web中我们还需要修改views文件:


from django.shortcuts import render

from django.views import generic

from django.conf import settings

from .models import FriendLink

# Create your views here.

class IndexView(generic.ListView):

    model = FriendLink

    template_name = 'index.html'

    context_object_name = 'test'

最后运行项目


python manage.py runserver

就可以看到加载的html界面了。但是没有css样式和js?!,那我们需要在html中进行修改,使用django前端的模板函数,只需要修改加载css和js的方式就可以了:

<!DOCTYPE html>
<html lang="en-US">

{% load static %}
<head>
    <title>Eskimo - HTML Template</title>
    <!-- META TAGS -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="description" content="">
    <meta name="keywords" content="">
        <!-- CSS FILES -->
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
    <link href="{% static 'css/style.css' %}?v=20191223.09" rel="stylesheet" type="text/css">

</head>
=================html代码

<!-- JS FILES -->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/salvattore/1.0.9/salvattore.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    <script src="{% static 'js/panel.js' %}"></script>
    <script src="{% static 'js/reading-position-indicator.js' %}"></script>
    <script src="{% static 'js/custom.js' %}"></script>
    <script src="js/custom.js"></script>

加载到这里我们可以了解到,前端html代码想要访问静态资源必须加载static文件,并通过模板函数进行访问。

我们再次运行网站可以看到有了基本的显示了:

利用cdn进行加速

另外可以看到,我把许多本地资源修改成了cdn服务器的资源,这是为了利用cdn来对网站进行加速

根据传统的网络结构,用户的访问流程基本如下:

  • 用户在自己的浏览器中输入要访问的网站的域名

  • 浏览器向本地DNS请求对该域名的解析

  • 本地DNS将请求发到网站授权的DNS服务器

  • 授权DNS将服务器的IP地址作为解析结果送给本地DNS

  • 本地DNS将解析结果返还给用户,同时将该解析结果保存在自己的缓存中,直到相应的TTL(生存周期)过期,才再向网站的授权DNS请求解析

  • 用户在得到IP地址后,向该地址所指向的网站的服务器进行访问;

上述传统的访问模式存在着如下几个严重影响互联网用户的访问效率和质量的环节:

  1. 首先,传统的DNS解析过程在将网站主机域名转换为IP地址时,并不预先判断该服务器是否正常工作;即使该服务器已经宕机不能提供服务了,用户的请求仍将被发往这台服务器,造成服务的中断。

  2. 其次,互联网从诞生的第一天起,就缺乏一个专门的中央管理结构,也缺乏统一的产品和技术标准。这一点曾是互联网得以迅速发展的优势。但是,随着互联网的规模越来越大,这一点造成了众多不同网络结构并存的局面。不同网络间的兼容以及不同网络运营商/ISP之间的传输瓶颈等问题使得数据的流通受到限制。据统计,现有互联网上的平均传输速率不高于30Kbps。

  3. 另外,现有的互联网以数据包传输为基础,任何一个数据包的丢失或出错都必须重新发送,而平均一个重传过程需要3秒钟,从而导致延迟。并且现有的HTTP协议也有诱发延迟的因素,据调查,完整下载一个网页,需要在用户和服务器之间往返20~100次。

  4. 最后,现有的路由技术以路由器工作状态的历史数据为依据来确定当前数据包的传输路径,无法真实反应当前的路由和网络连接状况。这往往会导致数据传输所经过的路径并不是当前的最佳路径。而且,众多的路由器和交换机不但使数据传输的时间延迟增大,还会增加出错的几率,因为任何一个路由器出现问题都会影响到整个传输过程。

下载github 0x00分支的源码:https://github.com/Freen247/django_blog/tr...

初始前端文件存储在:https://github.com/Freen247/django_blog/tr...

本作品采用《CC 协议》,转载必须注明作者和本文链接

发表评论

0/200
63 点赞
0 评论
收藏