花生_TL007

这个屌丝很懒，什么也没留下！

热门标签

Django实战项目 ------ 学生信息管理系统_jango显示学生信息

作者：花生_TL007 | 2024-02-27 15:25:52

踩

jango显示学生信息

文章目录

1. 数据库表的结构设计

2. 后台引入母板

3. 查询班级信息

4. 添加班级信息

5. 编辑班级信息

6. 删除班级信息

7. 查询学生信息

8. 添加学生信息

9. 编辑学生信息

10. 删除学生信息

11. Bootstrap介绍

12. AJAX添加班级信息

13. AJAX编辑班级信息

14. AJAX删除班级信息

15. 数据库操作代码复用

16. AJAX添加学生信息

17. AJAX编辑学生信息

18. AJAX删除学生信息

19. 分页展示学生表

20. 数据库操作封装

21. 添加教师信息

22. 查询教师和任课班级信息

23. 编辑教师信息

24. AJAX删除教师信息

25. AJAX添加教师信息

1. 数据库表的结构设计

# 创建test数据库
create database test default character set utf8;
# 创建学生表
create table student(id int auto_increment primary key,name varchar(10) not null,class_id int not null);
# 创建班级表
create table class(id int auto_increment primary key, title varchar(20) not null);
# 创建教师表
create table teacher(id int auto_increment primary key,name varchar(10) not null);
# 创建教师班级表
create table teacher2class(id int primary key auto_increment,teacher_id int not null,class_id int not null);
1
2
3
4
5
6
7
8
9
10

2. 后台引入母板

把重复用到的html代码放到一个html文件中，这个html文件被称为母板，需要用到这些代码的模板可以直接继承这个母板。这个html文件使用的标签是：{% block xxx %} {% endblock %},{% extends '母板.html'%}。

3. 查询班级信息

首先要向班级表中插入一条测试数据：

insert class values(null,'软件工程'),(null,'计算机科学与技术');
1

可以在项目名所在的目录下创建一个名为 app01 的目录，并在该目录下创建 views.py 文件，下面开始在 urls.py 文件中加入查询班级的路由：

from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    # 查询班级信息的路由以及对应的函数(对应views下的classes函数)
    path('classes/', views.classes),
]
1
2
3
4
5
6
7
8
9

在 views 下的 classes 函数写查询班级信息的逻辑代码：

# 导入返回模板的函数render和重定向的redirect函数
from django.shortcuts import render, redirect
# 导入pymysql模块用来连接数据库，这里暂时使用pymysql
import pymysql

def classes(request):
    '''
    查询班级id、班级名称
    :param request:对象相关的数据
    :return:渲染后的模板
    '''
    # 创建连接
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='test')
    # 创建游标
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    # 执行sql语句
    cursor.execute("select id,title from class")
    # 获取查询到的所有信息
    classes_list = cursor.fetchall()
    # 关闭游标
    cursor.close()
    # 关闭连接
    conn.close()
    # 返回模板和数据
    return render(request, 'classes.html', {
   'classes_list': classes_list})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在 templates 文件夹下新建 classes.html 文件，也就是我们的模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级信息</title>
</head>
<body>
<p><a href="/add-class/">添加</a></p>
{
   % for row in classes_list %}
    <tr>
        <td>{
   {
    row.id }}</td>
        <td>{
   {
    row.title }}</td>
    </tr>
    <br>
{
   % endfor %}
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

查询班级信息页面：
在这里插入图片描述

4. 添加班级信息

添加“添加班级信息”的路由，

from django.contrib import admin
from django.urls import path
from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('classes/', views.classes),
    path('add-class/', views.add_class),
]
1
2
3
4
5
6
7
8
9

在 templates 目录下新建名为 add_class.html 的模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加班级信息</title>
</head>
<body>
<h1>添加班级</h1>
<form action="/add-class/" method="post">
    <label>班级名称：</label>
    <input type="text" name="class_title">
    <input type="submit" value="提交">
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在 views.py 的 add_class 函数中写添加学生班级信息的逻辑代码：

def add_class(request):
    # 如果是get请求就返回add_class.html模板就可以
    if request.method == 'GET':
        return render(request, 'add_class.html')
    # 如果是post请求则执行下面的代码
    else:
        # 获取班级的标题
        class_title = request.POST.get('class_title')
        # 创建数据库连接对象
        conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='test')
        # 创建游标
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        # 将班级的名称传到sql语句中
        cursor.execute('insert into class(title) values(%s)', class_title)
        # cursor.execute("insert into class(title) values(%s)", [class_title, ])
        # 提交(查询不需要，其它如添加、修改、更新数据是需要执行commit方法才能将数据插入成功)
        conn.commit()
        # 关闭游标
        cursor.close()
        # 关闭连接
        conn.close()
        # 添加之后就会重定向到/classes/路由，会显示添加后的班级
        return redirect('/classes/')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

在班级信息页面中点击添加按钮进入添加班级信息界面，添加班级信息后，页面会自动跳转到班级信息页面。

添加班级信息页面效果：
在这里插入图片描述

5. 编辑班级信息

根据客户端传过来的班级id就可编辑班级信息，逻辑代码：

def edit_class(request):
	# 如果是get请求，这里额外也需要查询下数据库，把原来的信息也展示出来
    if request.method == 'GET':
    	# 获取客户端传过来的班级id
        nid = request.GET.get('nid')
        # 创建数据库连接
        conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='test')
        # 执行游标
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        # 执行sql语句
        cursor.execute('select id,title from class where id=%s', nid)
        # 获取查询到的所有数据
        result = cursor.fetchone()
        # 创建游标
        cursor.close()
        # 关闭连接
        conn.close()
        # 返回模板和数据
        return render(request, 'edit_class.html', {
   'result': result})
    # post请求用来修改班级信息
    else:
        # nid = request.POST.get('nid')  # 放到请求体
        nid = request.GET.get('nid')  # 放到请求头
        title = request.POST.get('title')
        # 创建数据库连接
        conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='test')
        # 创建游标
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        # 执行sql语句
        cursor.execute('update class set title=%s where id = %s', [title, nid])
         # 提交事务
    	conn.commit()
    	# 关闭游标
    	cursor.close()
    	# 关闭连接
    	conn.close()
        return redirect('/classes/')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

需要跳转到编辑信息的模板，将其命名为：edit_class.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改班级信息</title>
</head>
<body>
<h3>编辑班级信息</h3>
<form action="/edit-class/?nid={
    { result.id }}" method="post">
    <label>班级名称：</label>
    {#    <input type="text"style="display: none" value="{
  { result.id }}">#}
    <input type="text" name="title" value="{
    { result.title }}">
    <input type="submit" value="提交">
</form>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

编辑班级信息页面：
在这里插入图片描述

6. 删除班级信息

浏览器向服务端发送删除数据的请求，服务端接收请求删除数据后向浏览器发送响应，告诉浏览器重定向到 /classes/。服务端向浏览器发送响应的响应头中有 location:http://127.0.0.1:8000/classes/，即是：告诉浏览器向此链接发送一次请求。

直接删除就可以了，删除的逻辑是：

def del_class(request):
    # 获取客户端传过来的nid，我们要个根据nid来删除数据
    nid = request.GET.get('nid')
    # 创建连接对象
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='test')
    # 创建游标
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    # 执行sql语句
    cursor.execute('delete from class where id=%s', nid)
    # cursor.execute("insert into class(title) values(%s)", [class_title, ])
    # 提交事务
    conn.commit()
    # 关闭游标
    cursor.close()
    # 关闭连接
    conn.close()
    return redirect('/classes/')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

7. 查询学生信息

首先向学生表中插入测试数据：

insert into student values(null,'thanlon',1);
insert into student values(null,'kiku',2);
1
2

查询学生信息的逻辑代码：

def students(request):
    '''
    学生列表
    :param request:封装了请求相关的所有信息
    :return:返回模板和数据
    '''
    # 创建连接对象
    conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='test')
    # 创建游标
    cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
    # 执行sql语句
    cursor.execute(
        'select student.id,student.name,class.title from  student left join class on student.class_id=class.id')
    # 获取查询到的所有数据
    student_list = cursor.fetchall()
    # 关闭游标
    cursor.close()
    # 关闭连接
    conn.close()
    # 返回模板和数据
    return render(request, 'students.html', {
   'student_list': student_list})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

新建显示学生信息的模板 students.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>学生信息</title>
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">
</head>
<body>
<div class="container" style="margin-top: 20px">
    <div class="row">
        <div class="col-md-4">
            <a class="btn btn-default" href="">添加</a></p>
            <table class="table table-hover text-center">
                <tr>
                    <th class="text-center">ID</th>
                    <th class="text-center">学生姓名</th>
                    <th class="text-center">学生班级</th>
                    <th class="text-center">操作</th>
                </tr>
                {% for row in student_list %}
                    <tr>
                        <td>{
  { row.id }}</td>
                        <td>{
  { row.name }}</td>
                        <td>{
  { row.title }}</td>
                        <td><a href="/">编辑</a> <a href="">删除</a>
                        </td>
                    </tr>
                {% endfor %}
            </table>
        </div>
    </div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

查询学生信息页面：
在这里插入图片描述

8. 添加学生信息

和添加班级信息同样的逻辑：

def add_student(request):
	# 如果是get请求
    if request.method == 'GET':
    	# 创建连接对象
        conn = pymysql.connect(host='127.0.0.1', port=3306, user='root', passwd='123456', db='test')
        # 创建游标
        cursor = conn.cursor(cursor=pymysql.cursors.DictCursor)
        # 执行查询的sql语句
        cursor.execute("select id,title from class")
        # 获取查询到的所有数据
        classe_list = cursor.fetchall()
        # 关闭游标
        cursor.close()
        # 关闭连接
        conn.close()
        # 返回模板和数据
        return render(request, 'add_student.html', {
   &#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/154030