type
status
date
slug
summary
tags
category
icon
password
经过大概一个星期的学习,从创建项目到完成项目,学到了Python Django的架构,并且优化了前端,对网站的不同构建有了不同的理解。
创建学生管理系统
1. 创建项目:
1.1 在桌面上新建一个testproject:
1.2 进入testproject,输入django-admin startproject Student,生成的一个主目录如下:
在Student下有manage.py
1.3 在Student下生成了如下代码:
1.4 我们另外创建一个应用,在mange.py的路径中输入python manage.py startapp infomation:
2.展示页面:
3. 应用目录
Mode LastWriteTime Length Name
d----- 2021/10/4 1:56 .idea
d----- 2021/10/4 1:56 app
d----- 2021/10/4 1:56 Djangotest
d----- 2024/5/22 19:44 static
d----- 2021/9/29 13:15 templates
-a---- 2021/9/29 19:18 139264 db.sqlite3
-a---- 2021/9/29 13:15 688 manage.py
4、学生管理系统概述
页面布局与设计
- 响应式设计:页面采用了响应式设计,确保在不同设备(如桌面、平板和手机)上都能提供良好的浏览体验。这得益于
<meta name="viewport">
标签和灵活的CSS布局,使得页面元素能够自适应屏幕大小。
- 视觉风格:整个页面采用了温和的蓝色调(#E0F2F7)作为背景,配合Arial字体,营造出清晰、专业的视觉效果。关键操作元素如按钮采用#007BFF蓝色,鼠标悬停时颜色加深,增加了交互性。
核心功能区
- 学生信息修改表单:
- 提供了一组输入框用于编辑学生的基本信息,包括学号(只读)、姓名、电话、地址、院系和专业。
- 表单提交至
/update/
端点,暗示有一个后端接口负责处理信息更新逻辑。 - 使用了Django的
{% csrf_token %}
标签,确保表单提交安全,防止跨站请求伪造攻击。
- 学生信息预览:
- 通过后端数据(如
{% for s in info %}
)动态生成的表格,展示数据库中所有学生的信息概览。 - 表格设计包括学号、姓名、电话、地址、院系和专业等列,便于快速浏览和核对信息。
- 图片展示:
- 在学生信息修改区域上方新增了学生个人照片的展示区域,通过
{{ student.picture_url }}
动态加载图片,增强了页面的个性化和直观性。 - 图片采用圆形边框和淡蓝色边框装饰,符合整体设计风格,同时通过
object-fit: cover;
保证图片裁剪合适。
- 交互反馈:
- 成功或错误消息区域(
.message.success
和.message.error
)通过JavaScript动态显示,用于反馈表单提交的结果,提升用户体验。
- 导航:
- 页面底部提供了“确定”按钮用于提交表单修改,以及“返回”链接回到首页或欢迎页面,方便用户操作。
技术栈与特点
- 前端:使用了HTML、CSS和原生JavaScript构建页面结构和样式,以及简单的客户端逻辑处理。
- 后端:虽然代码中未直接体现,但提到了Django框架的模板语法,表明后端可能使用Python的Django框架处理数据逻辑和页面渲染。
- 响应式设计:确保了良好的移动设备兼容性和多平台访问能力。
- 安全性:通过CSRF保护增强了表单的安全性。
综上所述,您的学生管理页面是一个设计周到、功能全面的系统,旨在简化学生信息的维护工作,同时保证了用户体验和数据的安全性。
📝 主旨内容
观点1
路虽远,行则将至;事虽难,做则必成!
观点2
接下来还得继续优化前端,让页面更美化些
🤗 总结归纳
继续学习!
- 作者:Ceyf
- 链接:ns.ceyfn.cloudns.org/article/17d3d552-63a5-45b8-aa15-ef61ad911907
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。