目录

本案例完成图书管理系统的增删改查功能等等等等……

（一）创建Django项目-- books

  • 设置Django项目的位置与名称
    在这里插入图片描述
    在这里插入图片描述

（二)静态资源的创建

1、静态资源目录创建
  • 在books里面创建static目录
    在这里插入图片描述

在这里插入图片描述

2、创建样式文件

  • 在static文件里面创建css目录，继续在css里面创建main.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 框架
4、添加脚本 JS 文件
  • 在static文件目录里面创建一个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 + ""
        }
    }
});

（三）完成基本配置

1、配置数据库链接信息
  • 在配置文件settings.py里配置数据库信息（密码要换成自己数据库的密码）

在这里插入图片描述

2、静态文件目录的配置
  • 在settings.py里配置静态文件目录
    在这里插入图片描述
3、进行数据的迁移
(1)创建数据库-- books

在这里插入图片描述

（2）设置连接数据库模块
  • 项目books下，init.py 文件里面配置
    在这里插入图片描述
import pymysql

pymysql.install_as_MySQLdb()
(3) 执行数据的迁移
  • 在控制台依次执行两条数据迁移命令，然后生成数据表
  • python manage.py makemigrations
  • python manage.py migrate

在这里插入图片描述

  • 查看生成的数据表
    在这里插入图片描述
(4)添加创建超级管理员
  • 在控制台输入 python manage.py createsuperuser
  • 此次创建账户名和密码： admin和admin123
    在这里插入图片描述
4、路由配置
（1）路由需求
  • 主页面：路由地址为空，对应视图indexView，名称为index
  • 添加图书：路由地址addbook/，对应视图addBookView，名称为addbook
  • 显示图书：路由地址showbook/，对应视图showBookView，名称为showsbooks
  • 删除图书：路由地址deletebook/，对应视图deleteBookView，名称为deledebooks
（2）主路由的配置

在这里插入图片描述

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

from index.views import indexView, addBookView, showBookView,deleteBookView,

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',indexView,name='index'),
    path('addbook/',addBookView,name='addbook'),
    path('showbook/',showBookView,name='showbook'),
    path('deletebook/',deleteBookView,name='deletebook'),
]

(四)index应用的创建

1、创建index
  • 控制台执行 python manage.py startapp index
    在这里插入图片描述
2、注册index应用
  • 在配置文件settings.py 里面注册index应用
    在这里插入图片描述
3、创建图书模型-- Book
  • 在index的models.py里面创建Book模型类
    在这里插入图片描述
from django.db import models

class Book(models.Model):
    id = models.AutoField(primary_key=True)
    mingzi = models.CharField(max_length=20)
    zuozhe = models.CharField(max_length=20)
    shijian = models.CharField(max_length=20)
    leixing  = models.CharField(max_length=20)

    def __str__(self):
        return str(self.mingzi)
4、创建视图函数

  • 在index里面的view.py里面创建四个视图函数，暂时不写值
    在这里插入图片描述

  • 这就是主路由文件里导入的三个视图函数

def indexView(request):
    pass

def addBookView(request):
    pass

def showBookView(request):
    pass

def deleteBookView(request):
    pass
5、做数据迁移，生成图书表
  • 在控制台执行以下两条命令
  • python manage.py makemigrations
  • python manage.py migrate index 0001_initial

在这里插入图片描述

  • 查看生成的图书表
    在这里插入图片描述

(五)修改视图函数

1、定义初始化函数 - init()
2、修改首页视图函数 - indexView
3、修改添加学生视图 - addBookView
4、修改显示学生视图 - showBookView
5、删除线上图书视图 - deledtBookView
from django.shortcuts import render

from index.models import Book

def init():
   return {
       '名字':'梦回1998',
       '作者':'张二娃',
       '时间':'1999年1月7日',
       '类型':'文言文'
   }

def indexView(request):
   baseInfos = init()
   title = '图书管理首页'
   return render(request,'index.html',locals())

def addBookView(request):
   baseInfos = init()
   title = '添加学生页面'
   result = ''
   # 处理POST请求
   if request.method == 'POST':
       mingzi = request.POST.get('mingzi')
       zuozhe = request.POST.get('zuozhe')
       shijian = request.POST.get('shijian')
       leixing = request.POST.get('leixing')

       stu_dict = dict(mingzi=mingzi, zuozhe=zuozhe, shijian=shijian, leixing=leixing)

       student = Book.objects.create(**stu_dict)

       student.save()

       result = '添加图书信息成功'
   return render(request, 'addbook.html', locals())

def showBookView(request):
   baseInfos = init()
   title = '显示所有图书页面'
   students = Book.objects.all()
   return render(request,'showbook.html',locals())

def deleteBookView(request):
   baseInfos = init()
   title = '删除书本页面'
   if request.method == 'POST':
       id = request.POST.get('id')

       student = Book.objects.get(id=id).delete()
  #在删除后，显示剩下数据
   students = Book.objects.all()
   return render(request, 'deletebook.html', locals())

(六)创建模板

1、模板框架
  • 在templates里创建frame.html
    在这里插入图片描述
2、创建首页模板
  • 在templates里面创建index.html文件
{% extends 'frame.html' %}
{% block content %}
<div class="test-info">
<h4> [测试要求] </h4>
<p>1.完成左侧2个菜单的路由配置,对应的模板页面分别是adds tudent . htm1和showstudent . html</p>
<p>2.完成模板页面adds tudent.htm1和showstudent . htm1的编写</p>
<p>3.完成student模型的编写并使用命令在数据库中生成表</p>
<p>4.完成indexView视图函数的编写</p>
<p>5.完成addStudentView视图函数的编写</p>
<p>6.完成showStudentView视图函数的编写</p>
<p>7.完成数据库的建库和相关数据库连接的配置</p>
<p>8.具体要求参见《Web应用程序设计》期末检测试卷A</p>
</div>
{% endblock content %}|
  • 启动项目 测试首页是否显示
    在这里插入图片描述
3、创建添加图书信息模板
  • 在templates里创建addbook.html
    在这里插入图片描述
{% extends 'frame.html' %}

{% block content %}
    <div>
        <h3>
            <center>
                <p style="color: red;">{{ result }}</p>
            </center>
        </h3>
        <hr/>
        <div class="myform">
            <form action="{% url 'addstudent' %}" method="post">
                {% csrf_token %}
                <table>
                    <caption>
                        <h3>添加学生信息</h3>
                    </caption>
                    <tr>
                        <th>学生姓名:</th>
                        <td>
                            <input type="text" name="name" id="studentName" placeholder="请输入学生姓名"
                                   class="layui-input" verify="required"/>
                        </td>
                    </tr>
                    <tr>
                        <th>学生学号:</th>
                        <td>
                            <input type="text" name="number" id="studentNo" placeholder="请输入学生学号" class="layui-input"
                                   pay-verify="required"/>
                        </td>
                    </tr>
                    <tr>
                        <th>学生班级:</th>
                        <td>
                            <input type="text" name="clazz" id="studentClazz" placeholder="请输入学生班级"
                                   class="layui-input" verify="required"/>
                        </td>
                    </tr>
                    <tr>
                        <th>学生性别:</th>
                        <td>
                            <input type="radio" name="gender" checked="checked" value="男"/>男生
                            <input type="radio" name="gender" value="女"/>女生
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" class="submit-row">
                            <input type="submit" class="layui-btn">
                            <input type="reset" class="layui-btn">
                        </td>
                    </tr>
                </table>

            </form>
        </div>
    </div>
{% endblock content %}
  • 访问添加图书
    在这里插入图片描述
4、创建显示图书信息模板
  • 在templates里创建showstudent.html
    在这里插入图片描述
{% extends 'frame.html' %}

{% block content %}

    <div class="stuinfo">
        <table>
            <caption>图书信息</caption>
            <thead>
            <tr>
                <th>书11</th>
                <th>书22</th>
                <th>书33</th>
                <th>书44</th>
            </tr>
            </thead>

            <tbody>
            {% for stu in book %}
                <tr>
                <td>{{ stu.mingzi }}</td>
                <td>{{ stu.zuozhe }}</td>
                <td>{{ stu.shijian }}</td>
                <td>{{ stu.leixing }}</td>
                </tr>

            {% endfor %}
            </tbody>


        </table>
    </div>


{% endblock content %}
  • 访问显示图书信息
    在这里插入图片描述
5、创建删除图书信息模板
  • 在templates里创建deletestudent.html
    在这里插入图片描述
{% extends 'frame.html' %}

{% block content %}

    <div class="stuinfo">
        <table>

            <caption>学生信息</caption>
            <thead>
            <tr>
                <th>书11</th>
                <th>书22</th>
                <th>书33</th>
                <th>书44</th>
                <th>操作</th>
            </tr>
            </thead>

            <tbody>
            {% for stu in students %}
                <tr>
                <td>{{ stu.mingzi }}</td>
                <td>{{ stu.zuozhe }}</td>
                <td>{{ stu.shijian }}</td>
                <td>{{ stu.leixing }}</td>
                <td>
                    <form action="../deletestudent/" method="post">
                        {% csrf_token %}
                        <input type="hidden" name="id" value="{{ stu.id }}">
                        <input type="submit" value="✘">
                    </form>
                </td>
                </tr>

            {% endfor %}
            </tbody>

        </form>
        </table>
    </div>


{% endblock content %}
    • 访问删除图书信息页面
      在这里插入图片描述
    • 实现删除后 依然显示当前页面
      在这里插入图片描述

总结

本学期过的很快， 转眼都到期末了。这次实训也要结束了。通过这次实训课程，把我所学到的知识应该说是所有都考验了一遍，我这次做的项目是 本次期末考试内容的改版，最开始我也想过做其他的项目，看了商城管理系统，里面的跳转，结算金钱，后台货物数量等等，让我头疼。就选择了学生管理系统，自己更改为图书管理系统 马马虎虎的跟着做了一遍，从开始的创建Djnago目录，一步一步的跟着配置资源，让我有了一次难忘的开发经历。通过我这次做项目的情况，就大家都会有的一种感觉，现在所学到的知识与自己想要做到的效果有很大的差距，自己的专业知识存储容量还有大大的空间。总体来说，对这次实训还挺满意的，尽管做得慢，也很累，但是让我认识到熟能生巧这个词语，一次慢，两次慢可以，但是在以后我不会次次慢，也会有成长的时候。也很感谢老师 的认真教导，有困难询问老师，都会尽心尽职的教我怎么做，让我去查询什么资料，说在我的博客的哪一篇，什么内容，真的很贴心。
这次实训中，没有学习到的东西，实在是太多了，自己还需要学习更多的知识，毕竟以后去向岗位的话，啥啥都不会就太low了。哈哈
以后的日子我相信我会继续努力，激励自己，一点一点的学。加油！

# django
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

运用昇思MindSpore框架成为垃圾分类小能手

avatar 华为开发者空间
cover

【华为云MySQL技术专栏】MySQL的WriteSet并行复制介绍

avatar 华为开发者空间
cover

《重塑AI应用架构》系列： Serverless与MCP融合创新，构建AI应用全新智能中枢

avatar 华为开发者空间