项目目标
学习django框架下的环境搭建,基于前后端分离的开发模式,了解路由表创建、数据库表创建及增删改查操作、Python前后端交互功能实现。
该项目主要实现的功能,包括登录、注册、学生档案、课程管理、成绩管理。
开发环境:Pycharm(2021.1.1)(Community版)、Python3.8、Django2.1.5、sqlite数据库
环境搭建
1.安装pycharm软件
2.打开cmd,安装python,如果已经有Python环境,直接进行下一步
canda create -n python-my python=3.8
3.进入pycharm的终端
activate python-my(进入虚拟环境)
安装django,输入命令pip install Django==2.1.5
创建hjsms项目,输入命令django-admin startproject hjsms
4.进入项目所在的文件地址,启动服务器,python manage.py runserver 81,在浏览器中输入网址(http://127.0.0.1:81)测试是否安装成功
5.之后每次启动项目的命令:
activate python-my(进入虚拟环境)
python manage.py runserver 81(启动服务器)
按住Ctrl+backspace,重启项目
创建项目
路由表
1.主路由(进入项目中的每个模块的路由)
2.子路由(每个模块下的具体功能的路由)
这里的路由可以选择跳转到后端方法进行数据处理,也可直接跳转到前端页面。
数据库
1.生成项目自带的数据库文件
进入pycharm终端,输入python manage.py migrate
就会在 项目的根目录下面 生成一个指定的数据库文件 db.sqlite3
2.创建common项目文件
在pycharm终端,输入python manage.py startapp common,会生成如下文件夹
进入该文件夹下的models.py,在其中创建数据库
from django.db import models
class Customer(models.Model):
# 客户名称
name = models.CharField(max_length=200)
# 联系电话
phonenumber = models.CharField(max_length=200)
# 地址
address = models.CharField(max_length=200)
找到settings.py文件,在 INSTALLED_APPS 配置项 加入如下内容:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
# 加入下面这行
'common.apps.CommonConfig',
]
在终端输入python manage.py makemigrations common
再输入python manage.py migrate,如果出现如下代码,证明创建成功
Operations to perform:
Apply all migrations: admin, auth, common, contenttypes, sessions
Running migrations:
Applying common.0001_initial... OK
3.安装sqlite数据库工具—— sqlite studio
下载后直接解压,运行exe文件就能使用。 运行该工具, 然后打开项目文件 db.sqlite3,在sqlite studio中,能找到common_customer表,这个就是刚刚创建的表,然后可以在sqlite studio中,手动创建其他表
4.本项目的数据库设计
**myu(用户信息) **
列名
类型
Id
Integer
主键,自增
Username
Varchar(200)
用户名
Password
Varchar(200)
密码
student(学生信息)
列名
类型
Id
integer
主键,自增
sno
Varchar(200)
学号
sname
Varchar(200)
姓名
sex
Varchar(200)
性别
cid
Varchar(200)
班级
Phone
Varchar(200)
电话
class(课程信息)
列名
类型
Id
integer
主键,自增
Cno
Varchar(200)
课程号
cname
Varchar(200)
课程名
ctime
Varchar(200)
开课时间
grade(成绩信息)
列名
类型
cno
Varchar(200)
课程号
sno
Varchar(200)
学号
gradenum
Varchar(200)
成绩
cname
Varchar(200)
课程名
Id
integer
主键,自增
具体功能实现
1.注册
from django.http import JsonResponse
from django.contrib.auth import authenticate, login, logout
from django.http import HttpResponse, JsonResponse
# 处理
from django.shortcuts import render
from common.models import Student
from common.models import myu
def reg(request):
#获取用户信息
userName = request.GET.get('username')
passWord = request.GET.get('password')
#插入记录
record = myu.objects.create(username=userName,
password=passWord)
#页面跳转
return HttpResponse("<script>alert('添加成功'),window.location.href='http://127.0.0.1:83/student/stu/'</script>")
#根据请求中的action值,判断是进行什么操作,并调用指定方法处理
def dispatcher(request):
action = request.GET.get('action',None)
#显示信息列表
if action == 'list_customer':
return listcustomers(request)
#添加
elif action == 'add_customer':
return addcustomer(request)
#修改
elif action == 'modify_customer':
return modifycustomer(request)
# return HttpResponse("<script>alert('数据错误'),window.history.back()</script>")
#删除
else action == 'del_customer':
return deletecustomer(request)
<div class="login-box">
<div class="login-logo">
<a href="#" style="color:#32779f">学生信息管理系统</a>
</div>
<div class="login-box-body text-center">
<p class="login-box-msg">输入用户名、密码登录</p>
<div>
<form action="http://127.0.0.1:83/student/re/" method="get">
<div class="form-group has-feedback">
<input type="username" class="form-control" name="username" placeholder="用户名" >
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="密码" name="password" >
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-primary btn-block btn-flat" >注册</button>
</div>
</div>
</div>
2.登录
登录前端设计
<div class="login-box-body text-center">
<p class="login-box-msg">输入用户名、密码登录</p>
<div>
<div class="form-group has-feedback">
<input type="username" class="form-control" id="username" placeholder="用户名" onkeydown="on_return()">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="密码" id="password" onkeydown="on_return()">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-12">
<button type="submit" class="btn btn-primary btn-block btn-flat" onclick="postLoginRequest()">登录</button>
</div>
</div>
</div>
<div class="social-auth-links text-center">
</div>
<a href="http://127.0.0.1:83/mgr/register.html" class="text-center">注册新账号</a>
</div>
</div>
<script>
function postLoginRequest(){
var e=$("#username").val(),n=$("#password").val();
0!==e.length?0!==n.length?$.ajax({url:"http://127.0.0.1:83/student/signin",type:"GET",data:"username="+e+"&password="+n,success:function(e,n,t){0===e.ret?window.location.href="/student/stu/":(alert("登录失败 : "+e.msg),$("#password").val(""))},error:function(e,n,t){alert("错误: "+e.status+t)}}):alert("请输入密码"):alert("请输入用户名")}
</script>
</body>
后端处理
def signin(request):
# 从 HTTP POST 请求中获取用户名、密码参数
userName = request.GET.get('username')
passWord = request.GET.get('password')
if myu.objects.get(username=userName).id:
if myu.objects.get(username=userName).password==passWord:
#0表示登录成功,直接跳转到下一个界面
return JsonResponse({'ret': 0})
else: return JsonResponse({'ret': 1, 'msg': '密码错误'})
else: return JsonResponse({'ret': 1, 'msg': '用户名错误'})
3.学生档案
界面设计及数据显示(在views.py中编辑html)
# 先定义好HTML模板
html_template = '''
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生档案</title>
<style>
</style>
<script language="javascript">
function change(){
//设置元素样式
document.getElementById("sno").type='text';
document.getElementById("btn").type='hidden';
document.getElementById("sname").type='text';
document.getElementById("sex").type='text';
document.getElementById("cid").type='text';
document.getElementById("pwd").type='text';
document.getElementById("phone").type='text';
document.getElementById("m").name='action';
document.getElementById("d").name='n';
}
function change1(){
document.getElementById("btn1").type='submit';
document.getElementById("m").name='action';
document.getElementById("d").name='n';}
function change2(){
document.getElementById("btn1").type='button';
document.getElementById("m").name='n';
document.getElementById("d").name='action';
document.getElementById("btn").type='hidden';
}
</script>
</head>
<body>
<div id="top">
<div id="top-l">
<span style="font-size:30px;color:white;padding-top:10px;">学生管理信息系统</span>
</div>
<div id="top-r">
<a id="u1" href="http://127.0.0.1:83/student/stu/" style="color:white;padding-right:10px;font-size:20px;text-decoration:none ;">学生档案</a>
<a href="http://127.0.0.1:83/grade/stu/" style="color:white;padding-right:10px;font-size:20px;text-decoration:none ;">成绩管理</a>
<a href="http://127.0.0.1:83/teacher/class/" style="color:white;padding-right:10px;font-size:20px;text-decoration:none ;">课程管理</a>
<a href="http://127.0.0.1:83/student/signout" style="color:white;padding-right:10px;font-size:20px;text-decoration:none ;">退出</a>
</div>
<div style="clear:both"></div>
</div>
<a href='http://127.0.0.1:83/student/option/?action=add'>添加</a><br>
<table >
<tr>
<th>id</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>班级</th>
<th>密码</th>
<th>电话</th>
<th>操作</th>
</tr>
<!--设置占位符,当调用后台的查询方法时,系统自动将数据插入到这里并在前端显示-->
%s
</table>
</body>
</html>
'''
from django.http import HttpResponse
from django.http import JsonResponse
from common.models import Student
#编辑后台处理方法
#查询
def liststudent(request):
# 返回一个 QuerySet 对象 ,包含所有的表记录
qs = Student.objects.values()
# 生成html模板中要插入的html片段内容
tableContent = ''
for student in qs:
tableContent += "<form action='http://127.0.0.1:83/student/option/' id='"+str(student['id'])+"' method='get'/><tr>"
for name,value in student.items():
tableContent += f'<td><input type="hidden" name={name} id={name} value={value}>{value}</td>'
tableContent += "<td><input type='hidden' name='action' id='m' value='modify_customer'>" \
"<a href='http://127.0.0.1:83/mgr/update.html?id="+str(student['id'])+"'>修改</td>" \
"<td><input type='hidden' name='action' id='d' value='del_customer'>" \
"<input type='hidden' name='idd' value='"+str(student['id'])+"'>" \
"<input onClick='change2()' type='submit' id='btn2' value='删除'></td><td>" \
"<input type='button' onClick='change1()' id='btn1' value='确定'></td></tr>"
return HttpResponse(html_template%tableContent)
修改
def modifycustomer(request):
# 从请求消息中 获取修改客户的信息
# 找到该客户,并且进行修改操作
id = request.GET.get('id', None)
name = request.GET.get('sname', None)
no=request.GET.get('sno', None)
sex=request.GET.get('sex', None)
cid=request.GET.get('cid', None)
phone=request.GET.get('phone', None)
try:
# 根据 id 从数据库中找到相应的客户记录
customer = Student.objects.get(id=id)
except Student.DoesNotExist:
return HttpResponse("<script>alert('数据错误'),window.history.back()</script>")
if name!=None:
customer.sname = name
if sex != None:
customer.sex = sex
if cid != None:
customer.cid = cid
if phone != None:
customer.phone = phone
if no != None:
customer.sno = no
# 注意,一定要执行save才能将修改信息保存到数据库
customer.save()
return HttpResponse("<script>alert('修改成功'),window.location.href='http://127.0.0.1:83/student/stu/'</script>")
** 添加**
def addcustomer(request):
# 从请求消息中 获取添加客户的信息
# 找到该客户,并且进行添加操作
id = request.GET.get('id', None)
name = request.GET.get('sname', None)
no=request.GET.get('sno', None)
sex=request.GET.get('sex', None)
cid=request.GET.get('cid', None)
phone=request.GET.get('phone', None)
record = Student.objects.create(sname=name,
phone=phone,
sno=no,sex=sex,cid=cid)
return HttpResponse("<script>alert('添加成功'),window.location.href='http://127.0.0.1:83/student/stu/'</script>")
删除
def deletecustomer(request):
#获取用户id
id = request.GET.get('idd', None)
try:
# 根据 id 从数据库中找到相应的客户记录
customer = Student.objects.get(id=id)
except Student.DoesNotExist:
return HttpResponse("<script>alert('数据错误'),window.history.back()</script>")
# delete 方法就将该记录从数据库中删除了
customer.delete()
return HttpResponse("<script>window.location.href='http://127.0.0.1:83/student/stu/'</script>")
4.退出登录
def signout(request):
# 使用系统自带的登出方法
logout(request)
return HttpResponse("<script>window.location.href='http://127.0.0.1:83/mgr/sign.html'</script>")
版权归原作者 绚烂的萤火 所有, 如有侵权,请联系我们删除。