django实训案例--学生信息管理

项目创建–students

(这里因为用的是学校机房的电脑,所以项目路径就在C盘,平时学习还是安排在其他盘好)在这里插入图片描述

准备静态资源

创建静态目录

在主应用students下新建目录static

(因为写博客的时候已经完成一些了,所以下图就是项目大致目录图,不过我们这一步主要还是创建静态资源目录static)在这里插入图片描述

创建样式文件

  • 在static里创建css目录,然后在css里创建main.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;
}

添加layui框架

创建脚本文件

  • 在static里创建js目录,然后在js里创建main.js文件
    在这里插入图片描述
    main.js
layui.config({
    base: '../static/js'
}).use(['jquery'],function () {
    var $ = layui.$;
    setInterval(function () {
        var date = new Date();
        var weeks = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
        var timeConTent = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日"
        +weeks[date.getDay()]+" "+prefix(date.getHours())+":"+prefix(date.getMinutes())+":"+prefix(date.getSeconds());
        $('#time').text(timeConTent);

    },1000);
    var prefix = function (num) {
        if (num < 10){
            return "0" + num;
        } else {
            return num + "";
        }

    }

});

完成基本配置

配置数据库信息

在配置文件settings.py里配置数据库信息(这里照例使用了MySQL数据库,Python原版数据库是sqlite,可自己权衡是否改换数据库,如果使用MySQL注意密码要换成自己数据库的密码)
在这里插入图片描述

配置静态文件目录

在配置文件settings.py里配置静态文件目录
在这里插入图片描述

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR,'static'),
)

进行数据迁移

创建数据库 - students
在这里插入图片描述

设置数据库连接模块

在项目的初始化文件里设置数据库连接模块
在这里插入图片描述

import pymysql
pymysql.install_as_MySQLdb()

执行数据迁移命令

在控制台依次执行两条数据迁移命令,生成数据表

python manage.py makemigrations
python manage.py migrate

因为我们没有创建model,所以第一个指令创建后就会显示信息说没什么改变
在这里插入图片描述

不用管直接执行第二条指令,之后就会在Navicat生成一系列附加表
在这里插入图片描述
红线涂抹的则是后来创建的学生模型类执行数据迁移后生成的数据表

添加超级管理员

在终端输入指令

python manage.py createsuperuser

后根据提示创建超级管理员,如果用于学习,邮箱可以随意填,类似123@qq.com都可以,只要符合格式就可以,输入的密码不会显示,输入的密码过于简单就会给一堆提示,我们直接在是否创建上面输入y就行了。如下:
在这里插入图片描述
可以输入网址测试一下:

127.0.0.1:8000/admin

在这里插入图片描述
初始界面,创建成功
在这里插入图片描述

修改视图函数

定义初始化函数

  • 在index的views.py里创建init()函数
    在这里插入图片描述

修改首页视图函数

在这里插入图片描述

修改添加学生视图

在这里插入图片描述

修改显示学生视图

在这里插入图片描述

创建模板页面

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

在templates里创建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>

解析:

  • 设置静态资源的Django内置标签 - {% load static %}、{% static … %}
  • 设置路由的Djang内置标签 - {% url … %}
  • 设置块内容的Django内置标签 - {% block content %}{% endblock content %}
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

Bug码畜

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值