Python云端系统开发——将Python数据分析代码发布到Django网站上

本文档详细介绍了使用Django框架搭建一个Python数据分析实训项目的步骤，包括新建工程、创建应用、设置静态和模板文件夹、定义视图函数以及配置URL。项目提供了一个展示不同数据分析主题的网页，用户通过下拉菜单选择不同主题，页面会跳转到相应的内容。此外，还展示了HTML和JavaScript代码实现的背景动态效果。

摘要由CSDN通过智能技术生成

文章目录

步骤1：新建工程：
步骤2-1：修改工程：
步骤2-2：在showapp文件夹下新建templates文件夹
步骤2-3：在mysite文件夹下新建static文件夹（与mysite/mysite文件夹同级）
项目构成
步骤2-4：修改showapp文件夹下的views.py，对URL的具体响应功能
步骤2-5：修改mysite文件夹下的urls.py，指定URL与响应之间的关系
index.html文件
完整代码
运行效果

步骤1：新建工程：

django-admin startproject mysite

cd mysite

步骤2-1：修改工程：

python manage.py startapp showapp

步骤2-2：在showapp文件夹下新建templates文件夹

把html文件放在templates文件夹下

步骤2-3：在mysite文件夹下新建static文件夹（与mysite/mysite文件夹同级）

把所用的图片放在这个文件夹下

项目构成

在这里插入图片描述

步骤2-4：修改showapp文件夹下的views.py，对URL的具体响应功能

from django.shortcuts import render

# Create your views here.
def show(request):
    return render(request,"index.html")
def showdemo1(request):
    return render(request, "demo1.html")
def showdemo2(request):
    return render(request, "demo2.html")
def showdemo3(request):
    return render(request, "demo3.html")
def showdemo4(request):
    return render(request, "demo4.html")
def showdemo5(request):
    return render(request, "demo5.html")
def showdemo6(request):
    return render(request, "demo6.html")
def showdemo7(request):
    return render(request, "demo7.html")
def showdemo8(request):
    return render(request, "demo8.html")

步骤2-5：修改mysite文件夹下的urls.py，指定URL与响应之间的关系

"""mysite URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from showapp import views

urlpatterns = [
    path('index/',views.show),
    path('demo1/',views.showdemo1),
    path('demo2/',views.showdemo2),
    path('demo3/',views.showdemo3),
    path('demo4/',views.showdemo4),
    path('demo5/',views.showdemo5),
    path('demo6/',views.showdemo6),
    path('demo7/',views.showdemo7),
    path('demo8/',views.showdemo8),
    path('admin/', admin.site.urls),
]

index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
    <style>
        body{background-color:#000}
        #nei{height:250px;width:100%;}
        #wai{height:500px;width:100%;background-color:#000;overflow: hidden;}
        .list1{list-style:none;display:block;}
        .div1{width:365px;float:right;margin:0 auto}
        select{height:50px;width:250px}
        h2{color:white;font-family:"楷体"}
        *{
            margin: 0;
            padding: 0;
        }

        h1{
            font-family:"楷体";
            position: absolute;
            line-height: 50px;
            letter-spacing: 5px;
            color: #fff;
            width: 300px;
            top: 40%;
            left: 50%;
            margin-left: -200px;
            font-size: 30px;
        }

    </style>
</head>
<body>
<div id="nei">
    <br>
    <br>
    <h2 align="center">Python数据分析实训</h2>
    <br>
    <br>
    <ul>
        <div class="div1">
            <select onchange="window.location=this.value;">
        <option value="http://127.0.0.1:8000/demo1/">Matplotlib图形配置</option>
        <option value="http://127.0.0.1:8000/demo2/">Matplotlib子图与多子图</option>
            </select>
        </div>
        <div class="div1">
            <select onchange="window.location=this.value;">
        <option value="http://127.0.0.1:8000/demo3/">三维图</option>
        <option value="http://127.0.0.1:8000/demo4/">Basemap和Seaborn</option>
            </select>
        </div>
        <div class="div1">
            <select onchange="window.location=this.value;">
        <option value="http://127.0.0.1:8000/demo5/">电商精准营销—数据预处理概述</option>
        <option value="http://127.0.0.1:8000/demo6/">电商精准营销—数据清洗</option>
            </select>
        </div>
        <div class="div1">
            <select onchange="window.location=this.value;">
        <option value="http://127.0.0.1:8000/demo7/">电商精准营销—数据探索与可视化</option>
        <option value="http://127.0.0.1:8000/demo8/">电商精准营销—购买意向预测</option>
            </select>
        </div>
    </ul>
</div>

<div id="wai">
    <h1>

    </h1>
<canvas></canvas>
    <script>
        var canvas=document.querySelector("canvas");
            ctx=canvas.getContext("2d");
            w=canvas.width=window.innerWidth;
            h=canvas.height=window.innerHeight;
            var canvas2=document.createElement("canvas");
                ctx2=canvas2.getContext("2d");
                canvas2.width=100;
                canvas2.height=100;
            var a=canvas2.width/2;
        var grandient=ctx.createRadialGradient(a,a,0,a,a,a);
            grandient.addColorStop(0.025,'#fff');
            grandient.addColorStop(0.1, 'hsl(220,59%,18%)');
            grandient.addColorStop(0.025, 'hsl(220,60%,33%)');
            grandient.addColorStop(1,"transparent");
            ctx2.fillStyle=grandient;
            ctx2.beginPath();
            ctx2.arc(a,a,a,0,Math.PI*2);
            ctx2.fill();
            ctx2.closePath();
            var stars=[];
            var count=0;
            function Star(){
                this.pos=Math.floor(Math.random()* w/2-100);
                this.r=Math.floor(Math.random()*100);
                this.dx=w/2;
                this.dy=h/2;
                this.rand=Math.floor(Math.random()*360);
                this.speed=this.pos/100000;
                stars[count]=this;
                count ++;
            }
            Star.prototype.draw=function(){
                var x=Math.sin(this.rand+1)* this.pos+this.dx;
                    y=Math.cos(this.rand)*this.pos/2+this.dy;
                ctx.drawImage(canvas2,x-this.r/2,y-this.r/2,this.r,this.r);
                this.rand=this.rand+this.speed;
            }
            for(var i=0;i<1000;i++){
                new Star();
            }
            function anmit(){
                ctx.clearRect(0,0,w,h);
                for(var i=0;i<stars.length;i++){
                    stars[i].draw();
                }
                requestAnimationFrame(anmit);
            }
            anmit();
            var oH=document.getElementsByTagName("h1")[0];
            var arr=["基于Python","电商精准营销","数据分析"],
                index=0,
                arrLen=arr.length,
                strLen=arr[0].length;
                pos=0,
                row=0,
                str="",
                timer=null;
            function print() {
                while(row<index){
                    str=str+arr[row]+"<br>";
                    row++;
                }
                oH.innerHTML=str+arr[index].substring(0,pos);
                if(pos==strLen){
                    index++;
                    pos =0;
                    if(index<arr.length){
                        strLen=arr[index].length;
                        timer=setTimeout(print,250);
                    }
                }else{
                    pos++;
                    timer=setTimeout(print,250);
                }
            }
            setTimeout(print,250);
    </script>
</div>
</body>
</html>