基于Django框架搭建简易网盘

一支薛定谔的猫

已于 2023-08-29 22:38:09 修改

阅读量482

点赞数

文章标签： django python

于 2023-08-29 18:46:53 首次发布

本文链接：https://blog.csdn.net/m0_70097208/article/details/132566943

版权

第一步：准备工作

一、环境要求

window7及以上系统

python3.7及以上解释器并安装Django框架

二、生成项目

在想要生成该项目的文件夹中运行cmd，并输入以下命令

django-admin startproject mysite

此时在文件夹下会生成一个名为onliness的文件夹，onliness为项目名称，可以在生成时任意更改，但注意应为英文名称

三、生成app

在生成的mysite文件夹中，运行cmd，并执行以下命令：

python manage.py startapp polls

此命令可以生成一个名为polls的app，polls名称可以任意修改

四、注册app

在mysite文件夹下，找到setting.py文件，在setting.py文件中找到INSTALLED_APPS列表，在后面添加'polls.apps.PollsConfig'命令，其中polls为app名称

五、创建文件夹

在创建的app文件夹中，创建两个文件夹，一个为templates，另一个为static，在static文件中创建css，js，img三个文件夹备用。在项目根目录下创建名为file的文件夹，在file文件夹中创建file与username两个文件夹，其中username文件夹中是登录账户，可以新建txt文件，文件名为账户，文件内容为密码

六、准备素材

素材包

将图片放在img文件夹下

第二步：后端代码

一、编辑URL

在项目文件夹下找到urls.py文件，将内容替换成

"""
URL configuration for onliness project.

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.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 mysite import views #mysite为项目名称，项目名称有变动应更改

urlpatterns = [
    path('',views.indexex),
    path('login/',views.login),
    path('index/',views.index),
    path('upload/',views.upload),
    path('download/',views.download),
    path('adminslogin/',views.adminlogin),
    path('admins/',views.admin),
    path('shutdown/',views.shutdown),
    path('delete/',views.delete),
]

二、编辑视图函数

在app文件夹中找到views.py文件，并将内容替换为

from django.shortcuts import render,HttpResponse,redirect
from django.http import FileResponse
import os
from django.conf import settings

# Create your views here.
def indexex(request):
    return redirect('/login/')
    
def login(request):
    if request.method=='GET':
        dec={'js':'login'}
        return render(request,'login.html',dec)  
        
    a=request.POST.get('user')
    c=request.POST.get('pwd')
    b=''
    d=''
    for i in a:
        b=b+i
    for j in c:
        d=d+j
    _path=os.getcwd()
    print(_path)
    if os.path.exists(f'{_path}/file/username/{b}.txt'):
        with open(f'{_path}/file/username/{b}.txt','r')as file:
            z=file.readline()
        if z==d:
            dec={'picture':'/static/img/right.png','login':'登陆成功，正在跳转...','js':'loginright'}
            return render(request,'login.html',dec)
        else:
            dec={'picture':'/static/img/wrong.png','login':'账户或密码错误，请重试'}
            return render(request,'login.html',dec)
    else:
        dec={'picture':'/static/img/wrong.png','login':'账户或密码错误，请重试'}
        return render(request,'login.html',dec)
def index(request):
    if request.method=='GET':
        lst=os.listdir('./file/file')
        a=0
        for i in lst:
            a=a+os.path.getsize(f'./file/file/{i}')
        b=a/1024#kb
        c=a/1024/1024#mb
        d=a/1024/1024/1024#gb
        if b>1 and b<1024:
            b=round(b,2)
            z=f'{b}KB'
        elif c>1 and c<1024:
            c=round(c,2)
            z=f'{c}MB'
        elif d>1 and d<1024:
            d=round(d,2)
            z=f'{d}GB'
        return render(request,'index.html',{'file':lst,'num':z})
def upload(request):
    if request.method=='GET':
        return render(request,'upload.html')
    b=request.FILES.get('file')
    f = open(f'./file/file/{b.name}', mode='wb')
    for chunk in b.chunks():
        f.write(chunk)
    f.close()
    return HttpResponse("上传成功")
def download(request):
    lst=os.listdir('./file/file')
    if request.method=='GET':
        lst2=[]
        a=1
        for i in lst:
            lst2.append(str(a)+'.'+i)
            a+=1
        return render(request,'download.html',{'file':lst2})
    a=request.POST.get('filename')
    b=int(a)
    c=lst[b-1]
    f=open(f'./file/file/{c}','rb')
    return FileResponse(f,as_attachment=True,filename=c)
def admin(request):
    if request.method=='GET':
        return render(request,'admins.html') 
    a=request.POST.get('username')
    b=request.POST.get('password')
    with open(f'./file/username/{a}.txt','w')as file:
        file.write(b)
    return HttpResponse('添加成功')
def shutdown(request):
    os.system('shutdown -s')
    return HttpResponse('关机成功')
def adminlogin(request):
    return render(request,'adminslogin.html')
def delete(request):
    lst=os.listdir('./file/file')
    if request.method=='GET':
        lst2=[]
        a=1
        for i in lst:
            lst2.append(str(a)+'.'+i)
            a+=1
        return render(request,'delete.html',{'file':lst2})
    a=request.POST.get('filename')
    b=int(a)
    c=lst[b-1]
    os.remove(f'./file/file/{c}')
    return HttpResponse('删除成功')

第三步：编写前端代码

一、html文件

在templates文件夹下，分别新建并编写以下代码:

admins.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="/admins/" method="post">
        {% csrf_token %}
        <div>添加用户</div>
        <input type="text" placeholder="输入用户名" name="username">
        <input type="password" placeholder="输入密码" name="password"> 
        <input type="submit" value="确定">
    </form>
    <button>对服务器关机</button>
    <script>
        a=document.querySelector('button')
        a.onclick=function(){
            location.href='/shutdown'
        }
    </script>
</body>
</html>

adminslogin.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="password" placeholder="输入管理密码" name="password"> 
    <button>确定</button>
    <script>
        a=document.querySelector('button')
        a.onclick=function(){
            b=document.querySelector('input').value
            if (b=='')//单引号内为登录服务器管理员的密码，自行设置
            {
                location.href='/admins'
            }
            else{
                alert('密码错误')
            }
        }
    </script>
</body>
</html>

delete.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网盘</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <style>
        li{
        background-color: rgb(0, 225, 255);
        text-align: center;
        font-size: 27px;
        margin: 1px;
        opacity: 0.5;
    }
    </style>
</head>
<body>
    <div class="father" id="father">
        <div>选择需要删除的文件，并输入序号</div>
        <form action="/delete/" method="post">
            {% csrf_token %}
            <input type="text" class="sixth" name="filename">
            <input type="submit" value="确定" id="first" class="first">
        </form>
    </div>
    <ul>
        {% for i in file %}
        <li>{{i}}</li>
        {% endfor %}
    </ul>
    <script src="/static/js/index.js"></script>
</body>
</html>

download.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网盘</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <style>
        li{
        background-color: rgb(0, 225, 255);
        text-align: center;
        font-size: 27px;
        margin: 1px;
        opacity: 0.5;
    }
    </style>
</head>
<body>
    <div class="father" id="father">
        <div>选择需要删除的文件，并输入序号</div>
        <form action="/delete/" method="post">
            {% csrf_token %}
            <input type="text" class="sixth" name="filename">
            <input type="submit" value="确定" id="first" class="first">
        </form>
    </div>
    <ul>
        {% for i in file %}
        <li>{{i}}</li>
        {% endfor %}
    </ul>
    <script src="/static/js/index.js"></script>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网盘</title>
    <link rel="stylesheet" href="/static/css/index.css">
    <style>
        li{
        background-color: rgb(0, 225, 255);
        text-align: center;
        font-size: 27px;
        margin: 1px;
        opacity: 0.5;
    }
    </style>
</head>
<body>
    <div class="father" id="father">
        <button class="first" id="first">上传</button>
        <button class="fifth" id="fifth">下载</button>
        <button class="second" id="second">删除</button>
        <button class="third" id="third">服务器管理员</button>
        <div class="fourth" id="fourth">当前网盘已用空间 &nbsp;{{num}}</div>
    </div>
    <ul>
        {% for i in file %}
        <li>{{i}}</li>
        {% endfor %}
    </ul>
    <script src="/static/js/index.js"></script>
</body>
</html>

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录网盘</title>
    <link rel="stylesheet" href="/static/css/login.css">
</head>
<body>
    <img src="/static/img/bg.jpg" alt="" class="one">
    <div class="first" id="first">
        <div class="second">登录</div>
        <form action="/login/" method="post">
            {% csrf_token %}
            <input type="text"  name="user" placeholder="账号" class="input_first" id="input_first">
            <div class="third">
                <input type="password" name="pwd" id="input_second" placeholder="密码" class="input_second">
            <img src="/static/img/close.png" alt="" class="img1" id="img1">
            </div>
            <div class="fourth" id="fourth">
                <img src="{{picture}}" alt="" id="img">
                <div class="divvvv">{{login}}</div>
            </div>
            <input type="submit" value="确定" id="button">
        </form>
    </div>
    <script src="/static/js/{{js}}.js"></script>
</body>
</html>

upload.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传文件</title>
    <link rel="stylesheet" href="/static/css/upload.css">
</head>
<body>
    <div class="father">
        <div class="first">上传文件</div>
        <form action="/upload/" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="file" name="file" class="second">
            <input type="submit" name="" id="" value="确定" class="third">
        </form>
    </div>
</body>
</html>

二、css文件

在css文件夹下，分别新建并编辑以下文件

index.css

.father{
    position: absolute;
    width: 150px;
    height: 100%;
    background-color: rgb(0, 255, 242);
}
.first,.second,.third,.fifth{
    width: 130px;
    height: 40px;
    margin:  20px 10px 20px 10px ;
    background-color: #fff;
    text-align: center;
    font-size: 30px;
}
.sixth{
    width: 130px;
    height: 20px;
}
.third{
    font-size:10px;
    line-height: 25px;
}
.fourth{
    position: absolute;
    top: 800px;
    left: 4px;
    color: red;
    text-align: center;
}
ul{
    position: absolute;
    top: 0;
    left: 180px;
    width: 100%;
    height: 50px;
    line-height: 30px;
    list-style-type: none;
    }

.one{
    width: 1227px;
    height: 960px;
}
.first{
    width: 670px;
    height: 580px;
    position: absolute;
    top: 150px;
    left:1290px;
}
.second{
    position: absolute;
    top:30px;
    left: 40px;
    font-size: 40px;
    font-family: 黑体;
}
.input_first{
    position: absolute;
    top: 100px;
    left:40px;
    height: 48px;
    width: 600px;
    font-size: 20px;
}
.third{
    position: absolute;
    top: 196px;
    left:40px;
    height: 48px;
    width: 600px;
    font-size: 20px;
}
.input_second{
    height: 48px;
    width: 552px;
    font-size: 20px;
}
.img1{
    position: absolute;
    top: 0px;
    left: 560px;
}
#button{
    position: absolute;
    top: 320px;
    left: 300px;
    width: 120px;
    height: 50px;
    font-size: 20px;
}
#img{
    position: absolute;
    top: 280px;
    left: 300px;
}
#fifth{
    position: absolute;
    top: 277px;
    left: 318px;
}
.right{
    color: green;
    font-size: 15px;
}
.wrong{
    color: red;
    font-size: 15px;
}   
.divvvv{
    position: absolute;
    top: 275px;
    left: 320px;
}

upload.css

html{
    background-color: rgb(0, 255, 242);
}
.father{
    position: absolute;
    top: 40%;
    left: 40%;
    background-color: #fff;
    width: 300px;
    height: 200px;
}
.first{
    text-align: center;
    font-size: 25px;
}
.second{
    position: relative;
    left: 20%;
    height: 35px;
}
.third{
    position: absolute;
    top: 40%;
    left: 40%;
    width: 80px;
    height: 35px;
}

三、编辑js文件

在js文件夹下，分别新建并编辑以下文件

index.js

var a=document.querySelectorAll('li')
var i
var b=document.getElementById('fifth')
var d=document.querySelectorAll('input')
for(i=0;i<a.length;i++)
{
    a[i].onmouseover=function(){
        this.style.backgroundColor='rgb(255,72,0)';
        this.style.opacity=1
        this.onmouseout=function(){
            this.style.backgroundColor='rgb(0,255,255)';
            this.style.opacity=0.5
        }
    } 
}
b.onclick=function(){
    location.href='/download'
}
c=document.getElementById('first')
c.onclick=function(){
    location.href='/upload'
}
e=document.getElementById('third')
e.onclick=function(){
    location.href='/adminslogin'
}
f=document.getElementById('second')
f.onclick=function(){
    location.href='/delete'
}

var a=document.getElementById('button');
        var eye=document.getElementById('img1');
        var flag=0;
        var pwd=document.getElementById('input_second');
        var first=document.getElementById('first');
        eye.onclick=function()
        {
            if (flag==0)
            {
                pwd.type='text';
                eye.src='/static/img/open.png';
                flag=1;
            }
            else if (flag==1)
            {
                pwd.type='password';
                eye.src='/static/img/close.png';
                flag=0;
            }
        }
        a.onclick=function()
        {
            var b=document.getElementById('input_first').value;
            var c=document.getElementById('input_second').value;
            var d=document.getElementById('img')
            var e=document.getElementById('fifth')
        }

loginright.js

setTimeout(function(){
    location.href='/index'
},2000)

第四步：运行

在manage.py所在的目录下，运行cmd，运行以下命令

python manage.py runserver

在显示

Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
August 29, 2023 - 18:44:56
Django version 4.2.4, using settings 'onliness.settings'
Starting development server at http://127.0.0.1:8000/   
Quit the server with CTRL-BREAK.

则代表运行成功