文章目录

一、提出任务
二、实现步骤
- （一）创建Django项目 - students
- （二）准备静态资源
- - 1、创建静态目录
  - 2、创建样式文件
  - 3、添加layui框架
  - 4、创建脚本文件
- （三）完成基本配置
- - 1、配置数据库信息
  - 2、配置静态文件目录
  - 3、进行数据迁移
  - - （1）创建数据库 - students
    - （2）设置数据库连接模块
    - （3）执行数据迁移命令
    - （4）添加超级管理员
  - 4、路由配置
  - （1）路由需求
  - （2）主路由配置
- （四）创建应用 - index
- - 1、创建index应用
  - 2、注册index应用
  - 3、创建学生模型 - Student
  - 4、创建视图函数（空视图函数）
  - 5、做数据迁移，生成学生表
- （五）修改视图函数
- - 1、定义初始化函数 - init()
  - 2、修改首页视图函数 - indexView
  - 3、修改添加学生视图 - addStudentView
  - 4、修改显示学生视图 - showStudentView
- （六）创建模板页面
- - 1、创建框架模板页面 - frame.html
  - 2、创建首页模板 - index.html
  - 3、创建添加学生页面 - addstudent.html
  - 4、创建显示学生信息模板 - showstudent.html
三、拓展练习
- 任务：给学生信息管理增加“删除学生信息”和“编辑学生信息”功能

一、提出任务

添加学生与显示学生信息

二、实现步骤

（一）创建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
启动项目，测试显示学生信息功能

三、拓展练习

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

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

实训项目二：学生信息管理相关推荐

常见的预设分栏包括_计算机应用基础_实训项目二Word综合应用
. 专业学习资料 . 实训项目二 Word 综合应用示例实训项目二 Word 综合应用实训满分 20 分 . 以日常应用为基础 , 设计一个综合运用 Word 基本操作技能解决实际问题的文档 . ...
计算机基础实训项目二 Word 综合应用,计算机应用基础-实训项目二 Word 综合应用[优质文档]...
实训项目二Word 综合应用实训满分20分. 以日常应用为基础,设计一个综合运用Word 基本操作技能解决实际问题的文档.文档内容要求包括以下基本操作和元素: 标题.正文.页眉/页脚/页码.首行缩进 ...
计算机应用基础实训项目任务说明,计算机应用基础实训项目二综合应用.docx
实训项目二Word 综合应用示例实训项目二Word 综合应用实训满分20 分. 以日常应用为基础,设计一个综合运用 Word 基本操作技能解决实际问题的文档.文档内容要求包括以下基本操作和元素: ...
Linux实训项目二用户和组的管理
实训项目用户和组的管理一.实训目的 ● 熟悉Linux用户的访问权限. ● 掌握在Linux系统中增加.修改.删除用户或用户组的方法. ● 掌握用户账户管理及安全管理. 二.项目背景某公司有60 ...
JAVA实训项目之学生管理系统（JDBC+GUI）
本系统设计采用的是Java作为设计语言,MySQL作为数据库,简单来说整个系统涉及到Swing界面的开发.以及对于数据库的一些操作,查询.增加.删除等,通过上述的操作来完成相应的学生管理系统的基本功能 ...
计算机会计实训,项目二计算机会计实训.ppt
<项目二计算机会计实训.ppt>由会员分享,可在线阅读,更多相关<项目二计算机会计实训.ppt(20页珍藏版)>请在人人文库网上搜索. 1.2020/9/16,1,项目二计算机 ...
VB实训项目：学生成绩管理系统V1.0
文章目录一.项目概述二.运行效果演示 1.启动界面 2.用户登录 3.系统主界面
头歌实训项目【学生信息转换】
#include <iostream> #include <string> using namespace std;// 前置声明 Teacher 类 class Teache ...
计算机应用基础实训项目三excel,计算机应用基础实训项目三 Excel 综合应用
计算机应用基础实训项目三 Excel 综合应用Tag内容描述: 1.计算机应用基础实训教程计算机应用基础实训项目二,Word,综合应用以日常应用为基础,设计一个综合运用 Word 基本操作技能解决实 ...

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

文章目录

一、提出任务

二、实现步骤

（一）创建Django项目 - students

（二）准备静态资源

1、创建静态目录

2、创建样式文件

3、添加layui框架

4、创建脚本文件

（三）完成基本配置

1、配置数据库信息

2、配置静态文件目录

3、进行数据迁移

（1）创建数据库 - students

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

（3）执行数据迁移命令

（4）添加超级管理员

4、路由配置

（1）路由需求

（2）主路由配置

（四）创建应用 - index

1、创建index应用

2、注册index应用

3、创建学生模型 - Student

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

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

（五）修改视图函数

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

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

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

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

（六）创建模板页面

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

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

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

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

三、拓展练习

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

实训项目二：学生信息管理相关推荐

最新文章

热门文章