动态网页"/>
简单动态网页
一、运行环境
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>{{itemame}}</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 timeconn = 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()
connmit()
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 IDsID=request.POST.get("id")if request.method=="GET":global IDsreturn render(request,"login.html")IDs=0else: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_professiont_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 viewsurlpatterns = [# 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.使用以下账号登录
更多推荐
简单动态网页
发布评论