实训项目二：学生信息管理

Posted 2022-07-29 howard2005

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实训项目二：学生信息管理相关的知识，希望对你有一定的参考价值。

文章目录

一、提出任务
二、实现步骤
三、拓展练习
- 任务：给学生信息管理增加“删除学生信息”和“编辑学生信息”功能

一、提出任务

添加学生与显示学生信息

二、实现步骤

（一）创建Django项目 - students

设置Django项目的位置与名称

（二）准备静态资源

1、创建静态目录

2、创建样式文件

在static里创建css目录，然后在css里创建main.css样式文件

* 
    margin: 0px;
    padding: 0px;
    border: none;


html, body 
    height: 100%;


.w1200 
    width: 1200px;


.layui-header, .layui-footer 
    text-align: center;
    margin: auto;


.layui-header 
    padding: 40px 0px;
    line-height: 1.5em;
    position: fixed;
    background-image: linear-gradient(to bottom, olive, deepskyblue, cornflowerblue, mediumorchid);


.layui-footer 
    padding: 30px 0px;
    position: relative;
    background-image: linear-gradient(to bottom, mediumorchid, cornflowerblue, deepskyblue, olive);


.layui-footer a 
    margin: 0px 20px;


.layui-footer a:hover 
    color: red;


.layui-footer p 
    margin: 15px 0px;


.bold 
    font-weight: bold;


.middle 
    display: flex;
    flex-direction: row;
    margin: 5px 0px;
    min-height: 500px;


.left-menu 
    flex: 1;
    background: azure;
    padding: 20px;


.right-content 
    flex: 5;
    margin-left: 5px;
    background: azure;
    padding: 20px;


.test-info h4 
    font-size: 20px;
    font-weight: bolder;


.test-info p 
    font-size: 15px;
    line-height: 2em;
    text-indent: 2em;


form 
    margin: auto;


form table 
    width: 400px;
    margin: auto;
    border: 1px solid black;
    padding: 50px 20px !important;


form table th 
    width: 100px;
    text-align: right;


form table td 
    width: 250px;
    padding: 0px 10px;


tr 
    line-height: 4em;


table tr:last-child 
    text-align: center;


table caption 
    font-weight: bolder;
    padding: 10px 0px;
    font-size: 1.5em;


.stuinfo 
    width: 90% !important;
    margin: auto;
    text-align: center;


.stuinfo table 
    margin: auto !important;
    width: 90% !important;


.stuinfo table td 
    width: 25%;


.stuinfo table tr 
    border-bottom: 1px solid black;


.stuinfo thead 
    background: black;


.stuinfo thead th 
    color: white;
    border-right: 1px solid white;


.stuinfo table tr:nth-child(even) 
    background: #2D93CA;


.stuinfo table tr:hover td 
    background: #00FFFF;

3、添加layui框架

在static里添加layui框架
下载链接：https://pan.baidu.com/s/1gXt5Qd5U5GJUUSk2dzYNtA 提取码：cgn6

4、创建脚本文件

在static里创建js目录，然后在js里创建main.js文件

（三）完成基本配置

1、配置数据库信息

在配置文件settings.py里配置数据库信息（注意密码要换成自己数据库的密码）

2、配置静态文件目录

在配置文件settings.py里配置静态文件目录

3、进行数据迁移

（1）创建数据库 - students

（2）设置数据库连接模块

在项目的初始化文件里设置数据库连接模块

（3）执行数据迁移命令

在控制台依次执行两条数据迁移命令，生成数据表
查看生成的数据表

（4）添加超级管理员

Django初始化admin账号和密码：admin - p@ssw0rd
python manage.py createsuperuser

4、路由配置

（1）路由需求

主页面：路由地址为空，对应视图indexView，名称为index
添加学生：路由地址addstudent/，对应视图addStudentView，名称为addstudent
显示学生：路由地址showstudent/，对应视图showStudentView，名称为showstudent

（2）主路由配置

配置主路由 - students里的urls.py

（四）创建应用 - index

1、创建index应用

在控制台执行python manage.py startapp index

2、注册index应用

在配置文件settings.py里注册index应用

3、创建学生模型 - Student

在index的models.py里创建Student模型类

4、创建视图函数（空视图函数）

在index的views.py里创建三个视图函数
在主路由文件里导入上述三个视图函数

5、做数据迁移，生成学生表

在控制台依次执行两条命令
查看生成的学生表

（五）修改视图函数

1、定义初始化函数 - init()

在index的views.py里创建init()函数

2、修改首页视图函数 - indexView

3、修改添加学生视图 - addStudentView

4、修改显示学生视图 - showStudentView

（六）创建模板页面

1、创建框架模板页面 - frame.html

在templates里创建frame.html
设置静态资源的Django内置标签 - % load static %、% static ... %
设置路由的Djang内置标签 - % url ... %
设置块内容的Django内置标签 - % block content %% endblock content %
frame.html的源码

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    % load static %
    <meta charset="UTF-8">
    <title> title </title>
    <link href="% static 'css/main.css' %" type="text/css" rel="stylesheet">
    <link href="% static 'layui/css/layui.css' %" type="text/css" rel="stylesheet">
    <script src="% static 'layui/layui.js' %"></script>
    <script src="% static 'js/main.js' %"></script>
</head>
<body>
<div class="layui-container">
    <div class="w1200 margin-auto">
        <div class="layui-header w1200">
            <p class="bold">
                2021年秋期《Web应用程序设计》期末检测
            </p>
            <p>
                <span class="bold">测试时间：</span> baseInfos.testtime 
            </p>
            <p>
                <span class="bold">测试班级：</span>  baseInfos.clazz 
            </p>
            <p>
                <span class="bold">姓名：</span> baseInfos.name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="bold">学号： baseInfos.number </span>
            </p>
            <p>
                <span class="bold">当前时间：</span><span id="time"></span>
            </p>
        </div>
        <div class="middle w1200">
            <div class="left-menu">
                <div class="layui-btn-container">
                    <div class="layui-btn">
                        <a href="% url 'index' %" title="回到测试首页">回到测试首页</a>
                    </div>
                </div>
                <div class="layui-btn-container">
                    <div class="layui-btn">
                        <a href="% url 'addstudent' %" title="添加学生信息">添加学生信息</a>
                    </div>
                </div>
                <div class="layui-btn-container">
                    <div class="layui-btn">
                        <a href="% url 'showstudent' %" title="查看学生信息">查看学生信息</a>
                    </div>
                </div>
            </div>
            <div class="right-content">
                % block content %% endblock content %
            </div>
        </div>
        <div class="layui-footer w1200">
            <p>
                <a href="javascript:;">&copy;版权所有(2021-2025)</a>
                <a href="mailto:375912360@qq.com">技术支持（QQ:375912360）</a>
                <a href="javascript:;">关于我们</a>
            </p>
            <p>
                <a href="javascript:;">设为首页</a>
                <a href="javascript:;">添入收藏</a>
                <a href="/admin">管理入口</a>
            </p>
        </div>
    </div>
</div>
</body>
</html>

2、创建首页模板 - index.html

在templates里创建index.html
启动项目，测试首页

3、创建添加学生页面 - addstudent.html

在templates里创建addstudent.html
启动项目，测试添加学生信息功能
单击左边【添加学生信息】按钮
输入姓名、学号、班级和姓名
单击【提交】按钮
查看学生表记录
同理，通过添加学生信息功能，再添加几条记录

4、创建显示学生信息模板 - showstudent.html

在templates里创建showstudent.html
启动项目，测试显示学生信息功能

三、拓展练习

任务：给学生信息管理增加“删除学生信息”和“编辑学生信息”功能

在主页左侧面板添加两个按钮：【删除学生信息】和【编辑学生信息】
单击【删除学生信息】按钮，出现浏览全部学生页面，每条记录右边有个【删除】按钮，单击【删除】按钮，弹出消息框询问用户是否删除，如果单击【确定】，删除之后重新显示全部学生记录
单击【编辑学生信息】按钮，出现浏览全部学生页面，每条记录右边有个【编辑】按钮，单击【编辑】按钮，出现编辑学生信息的页面，修改数据后，如果单击【提交】，更新记录之后重新显示全部学生记录

以上是关于实训项目二：学生信息管理的主要内容，如果未能解决你的问题，请参考以下文章

C语言程序设计班级学生成绩管理系统

用C语言写学生成绩管理系统基本功能:1、输入一个班级的学生基本信息（包括学号，姓名，性别，5门课程成绩

学生成绩管理项目

c语言设计,编程实现学生基本信息管理程序

C语言实训

2020年Java实训项目GUI学生信息管理系统目录