简单动态网页--网络应用程序设计实验（python+django+pymysql）

最新推荐文章于 2023-07-09 20:00:25 发布

红色1

最新推荐文章于 2023-07-09 20:00:25 发布

阅读量576

点赞数

文章标签： python django html mysql

本文链接：https://blog.csdn.net/weixin_43934702/article/details/109492872

版权

一、运行环境

pycharm
需要：time，pymysql，django等第三方库。
在cmd中pip install pymysql和pip install django

二、创建项目
1.在命令提示符中创建一个项目
django-admin startproject 项目名
在这里插入图片描述

在这里插入图片描述
2.进入刚创建的login目录下创建具体功能应用

3.使用pycharm打开创建的项目，创建模板文件和静态文件
模板文件即为存放.html文件夹，静态文件是存放.css、.js、图片等文件的文件夹。
在这里插入图片描述文件组织形式如下：
4.在settings.py中配置模板路径和静态文件路径
找到templates在’DIRS’加入os.path.join(BASE_DIR,“template”)
将csrf注释，防止表单无法提交
在settings.py最后添加静态文件路径
三、编写具体代码

<!--登录界面-->

<!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/login.css">
</head>
<body>
    <div class="back">
        <div class="position">
            <form  method="post" action="/login/">
                <input type="text" class="name" name="name">
                <input type="text" class="id" name="id">
                <input type="password" class="key" name="password">
                <input type="submit" value="login" class="submit">
            </form>
            <div class="error">{{error}}</div>
        </div>
    </div>
</body>
</html>

/*登录界面样式*/
*{
    padding: 0px;
    margin: 0px;
}
/* 解决margin塌陷 */
.back::before,.back::after{
    content: "";
    display: table;
    clear: both;
}
body{
    background-image: url(/static/background.jpg);
    /* 背景图像完全覆盖背景 */
    background-size:cover;
    opacity: 0.5;
}

.back{
    width: 200px;
    height: 230px;
    margin: 100px 200px auto;
    background-color:black;
} 
.back .position .error{
    margin-top:10px;
    text-align:center;
    color:red;
    font-size:10px;
}
.back .position form .name,
.back .position form .key,
.back .position form .id,
.back .position form .submit
{
    margin: 0 auto;
    display: block;
    margin-top: 28px;
    border-radius: 5px;
}
.back .position form .submit{
    width: 50px;
}
.back .position form .submit:hover{
    background-color:rgba(0, 0, 0, 0.3);
    color: #fff;
}

```html
<!--主页面-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HomePage</title>
    <link rel="stylesheet" href="/static/homepage.css">
</head>
<body>
    <div id="demo"><h1>欢迎来到信息管理系统！</h1></div>
    <div class="back">
        <aside class="content">
            <p>姓名:{{name}}</p>
            <p>学号:{{id}}</p>
            <p>密码:{{password}}</p>
            <p>班级:{{class}}</p>
            <p>专业:{{profession}}</p>
            <p><a href="#" class="hr">修改个人信息</a></p>
            <div class="time">{{time}}</div>
        </aside>
        <div class="right">
            <form class="find" method="post" action="/find/">
                选课查询：<input type="text" name="id1">
                <input type="submit" value="查询" class="item">
            </form>
            <table class="table">
                <thead>
                    <tr>
                        <td>学号</td>
                        <td>选修课程</td>
                        <td>课程教师</td>
                    </tr>
                </thead>
                <tbody>
                    {% for item in list %}
                        <tr>
                            <td>{{item.id}}</td>
                            <td>{{item.cname}}</td>
                            <td>{{item.teacher}}</td>
                        </tr>
                    {% endfor %}
                </tbody>

            </table>
            <p>{{error1}}</p>
        </div>
    </div>
</body>
</html>

主页面样式
*{
    margin: 0;
    padding: 0;
}

#demo{
    width: 960px;
    margin: 20px auto;
    text-align: center;
}

.back{
    position: relative;
    height: 400px;
    width: 990px;
    margin: 10px auto;
    background-color: #f5f5f5;
    border: 1px solid  rgba(0, 0, 0, 0.5);
}
/* ----------左边框------------ */
.back .content{
    position: absolute;
    left: 40px;
    top: 20px;
    height: 360px;
    width: 300px;
    background-image: url(/static/background_p.jpg);
    background-size: 100% 100%;
    opacity: 0.5;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
.back .content p{
    margin-left: 20%;
    margin-top:28px;
}
.back .content p .hr{
    color:#000;
    text-decoration:none;
}
.back .content .time{
    position: absolute;
    right: 20px;
    bottom: 20px;
    text-align: right;
    width: 100px;
    height: 14px;
}
/* -----------右边框----------------- */
.right{
    margin-left: 380px;
    margin-top: 20px;
    height: 360px;
    width:560px;
    background-image: url(/static/background_right1.jpg);
    background-size: 100% 100%;
    opacity: 0.5;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.5);
}
/* ---------------查询---------------------- */
.back .right .find{
    width: 400px;
    height: 20px;
    margin: 0 auto;
    margin-top:28px;
}
.back .right .find input{
    border-radius: 5px;
}
.back .right .find .item{
    width: 50px;
}
.back .right .find .item:hover{
    background-color: #f5f5f5;
    color: #000;

}
.back .right .table{
    margin-top:28px;
    width: 400px;
    margin: 0 auto;

}
.back .right .table tr{
    margin-top:20px;
}
.back .right>p{
    width:400px;
    margin:0 auto;
    margin-top:20px;
}
/* 解决margin塌陷问题 */
.back::before,.back::after,.back .right::before{
    content: "";
    display: table;
    clear: both;
}

在views.py中编写数据库连接和登录验证及返回数据到模板
```python
#************************************
# author:红色1
# data:2020.11.2
#************************************
from django.shortcuts import render,redirect

# Create your views here.
import pymysql
import time

conn = pymysql.connect(
    host='localhost',
    user ='root',
    password ='159357',
    database ='studentmanagement',
    charset ='utf8')
cursor=conn.cursor(cursor=pymysql.cursors.DictCursor)
# 初始化数据库，即将空的表格加入以下数据内容
# sql='''
#     insert into student() values
#     (1001,"sun",'1234q','1-1','软件工程'),
#     (1002,'li','1235','1-2','软件工程'),
#     (1003,'liu','23556','1-1','软件工程'),
#     (1010,'wang','1245','2-1','机械'),
#     (1011,'alex','sk374','2-1','机械'),
#     (1012,'nius','3456k','2-1','机械');
#     '''
# cursor.execute(sql)
# sql1='''
#     insert into t_course() values
#     (1001,'计算机导论','李东生'),
#     (1001,'美学原理','昭仪'),
#     (1002,'计算机导论','芬利'),
#     (1003,'计算机导论','芬利'),
#     (1003,'美学原理','昭仪'),
#     (1003,'社会心里学','刘思达'),
#     (1010,'流体力学','刘思达'),
#     (1011,'流体力学','刘思达'),
#     (1012,'流体力学','刘思达');
#     '''
# cursor.execute(sql1)
# cursor.execute('select * from t_course')
# course_list=cursor.fetchall()
cursor.execute('select * from student')
student_list=cursor.fetchall()
conn.commit()
cursor.close()
conn.close()
t_name="1"
t_id="1"
t_password="1"
t_class="1"
t_profession="1"
IDs=1
def login(request):
    global IDs
    ID=request.POST.get("id")
    if request.method=="GET":
        global IDs
        return render(request,"login.html")
        IDs=0
    else:
        name=request.POST.get("name")
        idn=request.POST.get("id")
        pwd=request.POST.get("password")
        # print(name)
        # print(idn)
        # print(pwd)
        for item in student_list:
            if name==item.get("name") and int(idn)==item.get("id") and pwd==item.get("password") :
                global t_name,t_id,t_password,t_class,t_profession
                t_name=item.get("name")
                t_id=item.get("id")
                t_password=item.get("password")
                t_class=item.get("class")
                t_profession=item.get("profession")
                return redirect("/homepage/")
        return render(request,"login.html",{
                    "error":"用户名或密码错误"
                })

def homePage(request):

        return render(request, 'homepage.html',
            {
                 "name": t_name,
                 "id": t_id,
                 "password": t_password,
                 "class": t_class,
                 "profession": t_profession,
                 "time": time.ctime()
            })


def find(request):
    ID=request.POST.get("id1")
    ID = int(ID)
    conn = pymysql.connect(
        host='localhost',
        user='root',
        password='159357',
        database='studentmanagement',
        charset='utf8')
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    cursor.execute('select * from t_course where id=%d' % ID)
    course_list = cursor.fetchall()
    cursor.close()
    conn.close()
    if len(course_list) != 0:
        return render(request, 'homepage.html',
                      {
                          "name": t_name,
                          "id": t_id,
                          "password": t_password,
                          "class": t_class,
                          "profession": t_profession,
                          "time": time.ctime(),
                          "list": course_list
                      })
    else:
        return render(request, 'homepage.html',
                      {
                          "name": t_name,
                          "id": t_id,
                          "password": t_password,
                          "class": t_class,
                          "profession": t_profession,
                          "time": time.ctime(),
                          "error1": "该学生没有选修课程"
                      })
    print('--------------')
在urls.py中对函数和数据库匹配

```python
from django.contrib import admin
from django.urls import path
#解决nomoudle问题
import sys
import os
curPath = os.path.abspath(os.path.dirname(__file__))
rootPath = os.path.split(curPath)[0]
sys.path.append(rootPath)
from mylogin import views

urlpatterns = [
    # path('admin/', admin.site.urls),
    path('login/',views.login),
    path('homepage/',views.homePage),
    path('find/',views.find),
    # path('find/',views.redirct)
]

四、运行
1.在命令提示符中打开服务器，默认地址为127.0.0.1：8000

在这里插入图片描述

2.在浏览器打开网页
在这里插入图片描述 3.使用以下账号登录

红色1

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
简单动态网页--网络应用程序设计实验（python+django+pymysql）

一、运行环境pycharm需要：time，pymysql，django等第三方库。在cmd中pip install pymysql和pip install django二、创建项目1.在命令提示符中创建一个项目django-admin startproject 项目名2.进入刚创建的login目录下创建具体功能应用3.使用pycharm打开创建的项目，创建模板文件和静态文件模板文件即为存放.html文件夹，静态文件是存放.css、.js、图片等文件的文件夹。文件组织形式如下：
复制链接

扫一扫