Django 部署html页面

最新推荐文章于 2024-01-16 15:16:38 发布

syztoo

最新推荐文章于 2024-01-16 15:16:38 发布

阅读量3.2k

点赞数 1

分类专栏： Django

本文链接：https://blog.csdn.net/weixin_42595012/article/details/89554026

版权

Django 专栏收录该内容

3 篇文章 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

页面已可访问；

syztoo

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
Django 部署html页面

基于上一篇文章，已创建一个项目 syztoo，并通过nginx能正常访问到 django 页面，目录结构如下：[root@syztoo syztoo]# tree.├── db.sqlite3├── manage.py├── nohup.out├── syztoo│ ├── __init__.py│ ├── __pycache__│ │ ├── __init_...
复制链接

扫一扫