暑期实践第三周：暑期实践项目（网站开发类）报告（P10-P25）
P10.Django创建程序步骤
1.创建project
2.配置
-模板路径
-静态文件路径
3.额外配置
MIDDLEWARE{
CsrfViewMiddleware注释掉
}
P11.Django用户登录示例
P11源代码
两种请求:
GET
POST
前端获取
以字典发送到后端
{
user:username,
pwd:123,
}
获取用户POST提交到后端
request.POST
直接索引:request.POST['user'] 找不到会报错
间接索引:request.POST.get('user’) 找不到会返回None
redirect("new_url") 重定向到
错误提示{{ msg }}
P12.Django模板语言特殊标记（一）（P12源代码）
url对应关系
/login/ --> login
def login(request):
request.method --> 请求头的url中
request.POST --> 请求体
request.GET
return HttpResponse(...)
return render(request, '.html', {...})
return redirect('')
GET请求 --> 只有request.GET有值
POST请求 --> request.GET和request.POST都可能有值
模板渲染
引擎中的特殊标记
列表和字典读取方式和python不一样
url.py
def index(request):
# return HttpResponse('index')
return render(request, 'index.html',
{
'name': 'alex',
'users': ['lizhi', 'lijie'],
'user_dict': {'k1': 'v1', 'k2': 'v2'},
'user_list_dict': [
{'id': 1, 'name': 'alex', 'email': 'alex@.com'},
{'id': 2, 'name': 'alex2', 'email': 'alex1@.com'},
{'id': 3, 'name': 'alex3', 'email': 'alex2@.com'},
]
}
)
index.html
<body>
<h1>模板标记学习</h1>
<p>{{ name }}</p>
<p>{{ users.0 }}</p>
<p>{{ users.1 }}</p>
<p>{{ user_dict.k1 }}</p>
<p>{{ user_dict.k2 }}</p>
<h3>循环</h3>
<table border="1">
{% for row in user_list_dict %}
<tr>
<td>{{ row.id }}</td>
<td>{{ row.name }}</td>
<td>{{ row.email }}</td>
<td>
<a href="/del/?nid={{ row.id }}">编辑</a>
<a href="/del/?nid={{ row.id }}"删除</a>
</td>
</tr>
{% endfor %}
</table>
</body>
P13.今日作业
Django + pymysql 实现
-用户登录
-查看用户列表
P14.今日内容概要
学员管理：
表：
班级
学生
老师
单表操作：增删查改
一对多操作：增删查改
多对多操作：增删查改
Django基础
前端知识(html,css)
P15.上节内容回顾
1.Web框架本质
-本质socket
-Http协议
-头
-体
-本质上传递的是字符串（模板替换）
2.Django
-安装
-django-admin startproject mysite
-配置
-模板路径
-静态文件
-CSRF注释
-urls.py
url -> 函数
-函数：
def index(request):
request.method
request.GET
request.POST
return HttpResponse(…)
return render(request, ‘.html’, {…})
-模板渲染
P16.学员管理之数据库表结构设计
学员管理：
表：
班级(class)
id title
学生(student)
id name 班级ID（FK）
老师(teacher)
id name
老师班级关系对应表(teacher2class)
id 老师ID 班级ID
单表操作：增删查改
一对多操作：增删查改
多对多操作：增删查改
P17.学员管理之查看班级列表以及添加班级（P17源代码）
Python开发【第十九篇】：Python操作MySQL
https://www.cnblogs.com/wupeiqi/articles/5713330.html
P18.学员管理之删除班级（P18源代码）
cursor.execute(“delete from class where id=%s”, [nid, ])
form的action地址和url要保持一致，action后面有斜杠，匹配的url后面也要有
P19.学员管理之编辑班级（P19源代码）
P20.今日作业
参考课程表写学生表老师表
添加对话框添加、删除
P21.今日内容概要以及上节回顾
1.创建Django项目步骤
2.新url方式：添加，编辑，删除
今日内容：
1.学生管理
2.模态对话框
3.Ajax
作业：
多对多操作（老师课程对应表）
P22.学员管理之查看学生列表（P22源代码）
后端
def students(request):
conn = pymysql.connect(host=‘localhost’, port=3306, user=‘root’, passwd=‘tianfuzhen’, db=‘mysite’, charset=‘utf8’)
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
cursor.execute(“SELECT * FROM student LEFT JOIN class ON student.class_id = class.id”)
student_list = cursor.fetchall()
# conn.commit()
cursor.close()
conn.close()
return render(request, ‘students.html’, {‘student_list’: student_list})
前端
学生列表
{% for row in student_list %}
{% endfor %}
| ID | 学生姓名 | 所属班级 | 操作 |
|---|
| {{ row.id }} | {{ row.name }} | {{ row.title }} |
编辑
||
删除
|
P23.学员管理之创建学生信息
后端
def add_student(request):
conn = pymysql.connect(host=‘localhost’, port=3306, user=‘root’, passwd=‘tianfuzhen’, db=‘mysite’, charset=‘utf8’)
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
cursor.execute(“SELECT * FROM class”)
class_list = cursor.fetchall()
# conn.commit()
cursor.close()
conn.close()
return render(request, ‘add_student.html’, {‘class_list’: class_list})
前端
添加学生
学生姓名
所属班级
{% for row in class_list %}
{{ row.title }}
{% endfor %}
P24.学员管理之编辑学生信息（P24源代码）
utils
slqhelper
import pymysql
def get_list(sql, args):
conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='tianfuzhen', db='mysite', charset='utf8')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
cursor.execute(sql, args)
result = cursor.fetchall()
cursor.close()
conn.close()
return result
def get_one(sql, args):
conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='tianfuzhen', db='mysite', charset='utf8')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
cursor.execute(sql, args)
result = cursor.fetchone()
cursor.close()
conn.close()
return result
def modify(sql, args):
conn = pymysql.connect(host='localhost', port=3306, user='root', passwd='tianfuzhen', db='mysite', charset='utf8')
cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
cursor.execute(sql, args)
conn.commit()
cursor.close()
conn.close()
return None
解决无法引入utils中的sqlheler，在pycharm中把mysite设置为根目录
TypeError: 'module' object is not callable （已解决）
使用如下导入方式重试，大概率会解决问题。from module import *
后端：
def edit_student(request):
if request.method == 'GET':
nid = request.GET.get('nid')
class_list = sqlhelper.get_list('select id,title from class', [])
current_student_info = sqlhelper.get_one('select * from student where id=%s', [nid, ])
return render(request, 'edit_student.html', {'class_list': class_list, 'current_student_info': current_student_info})
else:
nid = request.GET.get('nid')
name = request.POST.get('name')
class_id = request.POST.get('class_id')
sqlhelper.modify('update student set name=%s,class_id=%s where id=%s', [name, int(class_id), nid, ])
return redirect('/students/')
前端：edit_student.py
<body>
<h1>编辑学生</h1>
<form method="POST" action="/edit_student/?nid={{ current_student_info.id }}">
<p>学生姓名<input type="text" name="name" value="{{ current_student_info.name }}"/> </p>
<p>
所属班级
<select name="class_id">
{% for row in class_list %}
{% if row.id == current_student_info.class_id %}
<option selected value="{{ row.id }}">{{ row.title }}</option>
{% else %}
<option value="{{ row.id }}">{{ row.title }}</option>
{% endif %}
{% endfor %}
</select>
</p>
<p><input type="submit" value="提交"/></p>
</form>
</body>
P25.学员管理之基于Ajax创建班级（一）（P25原代码）
项目的几个问题：
添加班级空的也可以提交
解决办法：后端加一个判断（views中对用户提交的数据进行判断）（Django自带的FORM组件）
模态对话框
form表单一提交页面就会刷新(redirect,HttpResponse,render)
后端:
def modal_add_class(request):
title = request.POST.get('title')
try:
if len(title) > 0:
sqlhelper.modify('insert into class(title) values (%s)', [title, ])
return HttpResponse('ok')
else:
return HttpResponse('not ok')
except:
return HttpResponse('not ok')
# title = request.POST.get('title')
# if len(title) > 0:
# sqlhelper.modify('insert into class(title) values (%s)', [title, ])
# return redirect('/classes/')
# else:
# # 页面不要刷新，提示错误信息
# # 不能用form表单
# pass
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class</title>
<style>
.hide{
display: none;
}
.shadow{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: black;
opacity: 0.4;
z-index: 999;
}
.modal{
z-index: 1000;
position: fixed;
left: 50%;
top: 20%;
height: 300px;
width: 400px;
background-color: white;
margin-left: -200px;
}
</style>
</head>
<body>
<h1>班级列表</h1>
<div>
<a href="/add_class/">添加</a>
<a onclick="showModal();">对话框添加</a>
</div>
<table>
<thead>
<tr>
<th>ID</th>
<th>班级名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for row in class_list %}
<tr>
<td>{{ row.id }}</td>
<td>{{ row.title }}</td>
<td>
<a href="/edit_class/?nid={{ row.id }}">编辑</a>
||
<a href="/del_class/?nid={{ row.id }}">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div id="shadow" class="shadow hide"></div>
<div id="modal" class="modal hide">
<form method="POST" action="/modal_add_class/">
<p><input type="text" name="title"></p>
<p><input type="button" value="提交" onclick="AjaxSend();"/></p>
</form>
</div>
<script src="/static/jquery-3.6.0.js"></script>
<script>
function showModal(){
document.getElementById('shadow').classList.remove('hide')
document.getElementById('modal').classList.remove('hide')
}
function AjaxSend(){
$.ajax({
url: '/modal_add_class/',
type: 'POST',
data: {'title': $('#title').val()},
success: function(data){
//当服务端处理完成返回数据后自动调用
console.log(data)
if(data == 'ok'){
alert('添加成功')
}else{
alert('添加失败')
}
}
})
}
</script>
</body>
</html>
|