Django 部署html页面

偏执的太偏执、 2022-04-24 13:28 262阅读 0赞

基于上一篇文章，已创建一个项目 syztoo，并通过nginx能正常访问到 django 页面，目录结构如下：

[root@syztoo syztoo]# tree
    .
    ├── db.sqlite3
    ├── manage.py
    ├── nohup.out
    ├── syztoo
    │   ├── __init__.py
    │   ├── __pycache__
    │   │   ├── __init__.cpython-37.pyc
    │   │   ├── settings.cpython-37.pyc
    │   │   ├── urls.cpython-37.pyc
    │   │   ├── view.cpython-37.pyc
    │   │   └── wsgi.cpython-37.pyc
    │   ├── settings.py
    │   ├── urls.py
    │   └── wsgi.py
    ├── syztoo.ini
    └── syztoo.sock

接下来部署一个 html 页面，一个可以手动拖动的3D旋转正方体页面；

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

**一、创建APP**

在每个 django 项目中可以包含多个 APP，相当于一个大型项目中的分系统、子模块、功能部件等等，相互之间比较独立，但也有联系。所有的 APP 共享项目资源。

[root@syztoo syztoo]# python3 manage.py startapp apptoo

将我们新建的应用（apptoo）添加到 settings.py 中的 INSTALLED\_APPS中，也就是告诉Django有这么一个应用。

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

如果只是部署一个 html 页面，也可不 创建 app ，直接在项目下定义 view 文件内容；

**二、设置 url 路由映射方式**

路由在 urls.py 文件里定义，它将浏览器输入的 url 映射到相应的业务逻辑下处理。

[root@syztoo syztoo]# cat syztoo/urls.py 
    from django.conf.urls import url
     
    from apptoo import views
     
    urlpatterns = [
        url(r'^$', views.syztoo),
    ]

**三、编写 apptoo 下的 views.py 文件**

[root@syztoo apptoo]# cat views.py 
    from django.shortcuts import render
    
    # Create your views here.
    
    def syztoo(request):
        return render(request,'monkey3d.html',)

**四、在 settings.py 文件中定义 html 文件的路径**

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

TEMPLATES 的 DIRS 选项定义 html 文件的路径，在项目目录下创建 html 目录；

[root@syztoo syztoo]# mkdir html

**五、定义 images、css，js 静态文件的路径**

在项目下创建 static/\{css,js,images\} 目录：

[root@syztoo syztoo]# mkdir -pv static/{css,js,images}
    mkdir: created directory ‘static’
    mkdir: created directory ‘static/css’
    mkdir: created directory ‘static/js’
    mkdir: created directory ‘static/images’

并在 settings.xml 文件中定义静态文件的路径：

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

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

**六、获取3d旋转正方体 html 源码**

[root@syztoo html]# cat monkey3d.html 
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>syztoo</title>
    <style>
    h3{
    text-align: center;
    color: #5A5A5A;
    }
            body{
                    background: #000;
            }
            #box{
                    width: 200px;
                    height: 200px;
                    margin:150px auto;
                    background: #ccc;
                    position: relative;
                    transform:perspective(800px) rotateY(-60deg) rotateX(45deg);
                    transform-style:preserve-3d;
            }
            #box div{
                    width:100%;
                    height:100%;
                    position: absolute;
                    top:0;
                    left: 0;
                    background-size:cover; 
                    -webkit-box-shadow:0 0 100px #5fbcff;
                    opacity: .8;
            }
            .front{
                    transform:translateZ(100px);
                    background: url(/static/images/syztoo.jpg);
            }
            .back{
                    transform:translateZ(-100px);
                    background: url(/static/images/syztoo.jpg);
            }
            .left{
                    transform:translateX(-100px) rotateY(90deg);
                    background: url(/static/images/syztoo.jpg);
            }
            .right{
                    transform:translateX(100px) rotateY(90deg);
                    background: url(/static/images/syztoo.jpg);
            }
            .top{
                    transform:translateY(-100px) rotateX(90deg);
                    background: url(/static/images/syztoo.jpg);
            }
            .bottom{
                    transform:translateY(100px) rotateX(90deg);
                    background: url(/static/images/syztoo.jpg);
            }
    </style>
    <script>
            window.onload=function()
            {
                    var oBox=document.querySelector('#box');
    
                    var y=-60;
                    var x=45;
                    oBox.onmousedown=function(ev)
                    {
                            var oEvent=ev||event;
                            var disX=oEvent.clientX-y;
                            var disY=oEvent.clientY-x;
                            document.onmousemove=function(ev)
                            {
                                    var oEvent=ev||event;
                                    x=oEvent.clientY-disY;
                                    y=oEvent.clientX-disX;
                                    oBox.style.transform='perspective(800px) rotateX('+x+'deg) rotateY('+y+'deg)';
                            };
                            document.onmouseup=function()
                            {
                                    document.onmousemove=null;
                                    document.onmouseup=null;
                            };
                            return false;
                    };
            };
    </script>
    </head>
    <body>
    <h3>按住鼠标左键拖动</h3>
    <div id="box">
            <div class="front"></div>
            <div class="back"></div>
            <div class="top"></div>
            <div class="bottom"></div>
            <div class="left"></div>
            <div class="right"></div>
    </div>
    
    <div style="text-align:center;clear:both">
    <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
    <script src="/follow.js" type="text/javascript"></script>
    </div>
    </body>
    </html>

网上下的，源码中的图片的调用路径已设置好了。

[root@syztoo syztoo]# tree
    .
    ├── apptoo
    │   ├── admin.py
    │   ├── apps.py
    │   ├── __init__.py
    │   ├── migrations
    │   │   └── __init__.py
    │   ├── models.py
    │   ├── __pycache__
    │   │   ├── __init__.cpython-37.pyc
    │   │   └── views.cpython-37.pyc
    │   ├── tests.py
    │   └── views.py
    ├── db.sqlite3
    ├── html
    │   └── monkey3d.html
    ├── manage.py
    ├── nohup.out
    ├── static
    │   ├── css
    │   ├── images
    │   │   └── syztoo.jpg
    │   └── js
    ├── syztoo
    │   ├── __init__.py
    │   ├── __pycache__
    │   │   ├── __init__.cpython-37.pyc
    │   │   ├── settings.cpython-37.pyc
    │   │   ├── urls.cpython-37.pyc
    │   │   ├── view.cpython-37.pyc
    │   │   └── wsgi.cpython-37.pyc
    │   ├── settings.py
    │   ├── urls.py
    │   └── wsgi.py
    ├── syztoo.ini
    └── syztoo.sock
    
    10 directories, 25 files

重启服务：

[root@syztoo syztoo]# ps -ef | grep syztoo.ini | awk 'NR<4{print $2}' | xargs kill -9
    [1]+  Killed                  nohup uwsgi --ini syztoo.ini
    [root@syztoo syztoo]# nohup uwsgi --ini syztoo.ini &
    [1] 32704

页面已可访问；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU5NTAxMg_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU5NTAxMg_size_16_color_FFFFFF_t_70]: /images/20220214/c8bd048f365549ae81fa53f5070950b1.png