Python Web开发—Django实战—项目概览及准备、用户管理、页面设计

时间：2023-08-31 11:12:01 | 来源：网站运营

时间：2023-08-31 11:12:01 来源：网站运营

Python Web开发—Django实战—项目概览及准备、用户管理、页面设计：介绍了Tornado概述与安装（Python Web开发—Tornado高并发处理—Tornado概述与安装、协程的使用、Websocket的运用、Tornado的运行和部署、Tornado操作数据库），从本章开始进入Web高级部分，即项目实战，本章讲解Django项目实战——图书管理系统，通过从用户管理、页面设计、图书管理、作者信息管理、出版社信息管理以及分类管理六部分内容来进行讲解。




项目概览及准备

Ø 项目概览及准备

图书管理系统是通过互联网对图书及相关信息进行管理的一个信息管理系统，项目编写的目的如下：

减少人力成本和管理费用

提高信息的准确性和信息的安全

改进管理

良好的人机交互界面，操作简便

图书管理系统分为用户管理、图书管理、作者信息管理、出版社信息管理、分类管理五大模块，其功能模块图如图所示。

上述内容介绍了图书管理系统的目的及功能，接下来进行数据库设计，本章主要设计了作者（author）、书籍（book）、分类（classify）、出版社（publish）以及书籍与作者的联系表（book_author），具体如下所示：

models.py

上述代码创建了数据表及模型类，其中第16~18行是建立各表之间的联系，第16行在书籍表中创建外键“Publish”，第17行是在数据表中创建外键“Classify”，第18行创建书籍与作者的联系表（书籍与作者多对多关系）。

注意：

用户表在Django中自动生成，无须手动添加。

设计数据库时确保安装了MySQL数据库，并安装了PyMySQL库。

将数据库相关配置信息修改为MySQL，并设置配置信息，具体如第7章中Django Admin站单管理。

创建外键时参数‘on_delete = models.CASCADE’不可少，此处为Django2.0的更新内容，缺少则报错。

接下来生成迁移文件（python manage.py makemigrations）并执行迁移（python manage.py migrate），执行成功之后，数据库中表格如图所示。

在图中，前5张表格是编写的模型类生成，其他表格则是Django框架自动生成。

本项目使用了Bootstrap框架来对前端页面设计布局，并使用了jQuery对页面效果进行控制，因此在开始项目之前还需保证项目中安装了Bootstrap框架和jQuery。

用户管理

用户管理是管理所有注册并登录本系统的用户信息，对用户的登录和退出做到验证管理，确保安全，最终实现用户信息的管理（注册、登录、删除、修改）。

Ø 用户注册

用户登录/注册是每个网站必备的功能，本小节先讲解用户注册模块的实现。

1.用户注册界面设计

注册界面应当尽可能简洁明了，并且要将网站所需的信息都尽可能获取，本项目主要是设计了用户名、密码及邮箱这三个信息来进行注册，具体代码参考教材11.2.1节。

上述代码中第6行是引入Bootstrap中CSS样式；第7~15行是自定义CSS样式；第18行是显示错误信息；第19~39行是整个注册页面的主要内容，包括第22~36行的表单内容，其中含有用户名（username）、密码（password）和邮箱（email）三部分的内容，最后有两个控制按钮，分别为注册（跳转到‘/regist/’）和返回（跳转到‘/login/’）。

2.视图设计

将注册模板设计好之后，通过视图函数来实现整个页面的功能。

1）register()函数

上述代码是注册功能的实现。第2~4行判断请求方法是否为GET，若是，则实例化Regist对象，并赋值给obj，最终将信息传送并渲染到register.html页面；第6~10行是若请求方法不是GET，则以POST方式实例化Regist()对象，并最终创建一个新用户（将数据存入数据库中），最后跳转到登录视图函数中。

2）Regist类

上述代码是注册页面中三个信息的验证以及错误提示。

3.配置URL

上述内容已经将注册的功能都实现了，接下来配置URL。在项目的url.py文件的urlpatterns列表中加入以下代码：

4.运行效果

接下来运行项目并在浏览器中输入127.0.0.1:8000/regist查看运行结果，运行结果如图所示。

注意：Django中默认开启CSRF，本项目将此内容注释（线上项目不建议），在项目中settings.py文件的MIDDLEWARE列表中注释CSRF功能，具体示例如下：

Ø 用户登录

用户在网站注册成功之后，可以通过登录界面进行登录，验证成功之后跳转到网站的主页面，接下来介绍用户的登录功能。

1.用户登录界面设计

上述代码是用户登录界面的主体代码，包括用户名、密码、登录按钮以及注册按钮。第13行是登录按钮，直接提交表单；第14~16行是跳转到注册页面，并执行注册。

登录界面除了Bootstrap框架自带的CSS样式，还编写了一些自定义样式，样式代码如下：

2.视图设计

1）log_in()函数

上述代码与注册中register()函数类似，其中第7~17行是对用户登录信息的判断；第9行是将用户输入并通过Log_in实例验证过的用户名和密码与数据库中数据进行比对，比对结果赋值给‘user’；第11行若用户存在，则直接登录成功并跳转到网站首页；第15行是用户不存在，重新渲染登录界面，第17行是Log_in实例未通过验证，重新渲染登录界面。

2）Log_in类

上述代码主要是对登录的信息进行设置并验证，与注册中Regist类类似，此处不再赘述。

3.配置URL

在项目的url.py文件的urlpatterns列表中加入以下代码：

4.运行效果

完成功能及页面的设计以后，运行项目并在浏览器中输入127.0.0.1:8000/login/查看效果，运行结果如图所示。

Ø 修改密码

用户注册网站后，可以根据需要修改登录账号的密码，接下来讲解修改密码功能。

1.修改密码页面设计

上述代码是修改密码的主体代码，主要包括原始密码和新密码两个输入框以及确定和返回两个按钮。

2.视图设计

修改密码页面设计完成之后就是实现修改密码功能并修改数据库，主要的视图函数是set_password()函数，代码如下

上述代码中第5行将用户输入的原始密码赋值给oldpwd；第6行将用户输入的新密码赋值给newpwd；第7行将发起请求的用户对象赋值给user；第8行进行检测用户输入的旧密码是否正确，正确则执行设置新密码（第9行），并保存到数据库中（第10行）；第11行跳转到登录界面，第12~13行是原始密码错误时，跳转到修改密码界面。

3.配置URL

在项目的url.py文件的urlpatterns列表中加入以下代码：

4.运行效果

完成功能及页面的设计以后，运行项目并在浏览器中输入127.0.0.1:8000/set_password/查看效果，运行结果如图所示。

当用户将原始密码输入错误时，重新跳转修改密码页面，原始密码输入正确则跳转到登录界面。

页面设计

Web网站开发中很大一部分是进行页面设计，网站最终是要展示给用户观看及使用的，因此页面设计也是非常重要的，接下来介绍图书管理系统的页面设计。

Ø 基页面

base.html是网站中其他页面的基页面，网站中其他页面都继承自base.html，接下来详细讲解base.html中内容。

上述代码是图书管理系统网站的基页面，网站的主要界面均继承自它，因此内容比较重要。 第6~8行是引入jQuery以及Bootstrap框架。第9~40行是编写自定义网站样式，主要包括body、header类、left类的样式。第41~43行是为其他页面编写或引入CSS样式内容所留下的模板块。第48~64行是整个网站的头，即网站的横向导航栏，其中第49~50行是图片标签，即千锋LOGO图片，并添加链接到首页，第51~53行是“图书管理系统”字样并添加链接到首页，第54~55行是首页链接，第56~57行是欢迎用户，第58~60行是注销登录，第61~63行是修改密码。第65~75行是网站左边栏的内容，包括操作、作者、出版社和书籍分类四部分内容，分别添加链接到首页、作者页、出版社页和书籍分类页。第76~87行是网站中其他页面的主体内容，其中78~81行是用来显示名为book_list块内容的，即其他页面中将要显示的内容块命名为book_list就可以在此处div标签中显示，第84~86行同理。第89~91行是为其他页面编写或引入JS内容所留下的模板块。

注意：本节接下来的页面均需要继承基页面，因此页面均需要在编写代码开始时添加以下代码：

Ø 首页

首页主要是将书籍信息显示出来。

上述代码是网站的首页代码，将所有书籍信息显示出来。第6~8行搜索书籍输入框以及搜索触发按钮。第10~11行是添加书籍按钮，直接跳转到添加书籍界面。第12~44行是首页主体显示内容，以表格形式显示书籍信息，主要包括编号{{ forloop.counter }}、书名{{ book.title }}、价格{{ book.price }}、出版社{{ Website may be available for web development ideas }}、出版时间{{ book.date}}、分类{{ book.classify.category }}、作者{{author.name }}、操作（编辑、删除）字段，前6个字段以for循环形式将书籍遍历显示在表格中（第24~42行），作者可能有多个，因此使用for循环遍历在表格中（第33~35行）。

由于书籍数量较大，如果将所有书籍都在一个页面上显示会导致整个网站的用户体验非常差，因此在首页的设计上添加了分页显示的效果，使网站的整体体验更优化。具体如下：

上述代码是对书籍信息数据实现分页显示。第4~9行是判断整个分类数据有没有上一页，若有，则“上页”按钮跳转到上一页，若没有，则不能跳转。第10~13行将书籍的页数用for循环显示在网站的下方（本页面设计的是每页显示5条，在本章的图书管理中有详细讲解）。第14~19行是判断整个分类数据有没有下一页，若有，则“下页”按钮跳转到下一页，若没有，则不能跳转。

Ø 分类管理页面设计

分类管理是管理书籍的类别添加和显示的，其中页面设计主要包括menu_classify.html和menu_classify_edit.html两个文件，前者是显示书籍类别信息的页面，后者是编辑书籍类别信息的页面。

menu_classify.html

分类显示页面主要包括数据展示、分页和添加数据三部分内容。

上述代码是书籍类别显示的代码，以表格形式展示书籍分类信息，主要包括序号、类别和操作，其中{{ forloop.counter }}是书籍分类的序号，{{ categ.category }}是分类名称，操作中包含编辑和删除两个按钮。

书籍分类数据较多时，也可以考虑进行分页显示，因此在书籍分类的信息显示页面也采用了分页显示，具体代码与首页中的分页实现相同。

注意：以上两部分代码（数据展示和分页）是编写在{{block book_list}}与{{endblock}}块中的。

图书管理系统中若有新的书籍分类出现，则需要向数据库中添加新的书籍分类，本系统通过jQuery来实现书籍分类添加功能，具体如下：

上述代码通过jQuery中的Ajax技术进行数据传送最终实现书籍分类的添加。第3~12行是当id为add_classify的按钮单击时触发。其中第4行将name=category的值赋给变量$classify。第5~12行通过Ajax技术将变量$classify的值以POST的方式传送到url为/ul/menu/classify/add/的视图函数中，最终通过视图函数完成书籍分类信息的添加。

menu_classify_edit.html

当遇到书籍分类消息需要修改时，需要修改页面来将数据进行修改。书籍分类修改代码如下：

上述代码实现了书籍分类信息的修改。第2~11行均属于{{block book_list}}块中。第2~3行是表单的头标签内容，通过{{ classify.id }}来控制提交数据的修改。第5~7行是书籍分类修改框，其中原始数据为{{classify.category }}，修改之后可以单击‘修改’按钮（第9行）提交修改之后的表单，交由相关视图函数进行数据库修改，当不想修改时可单击‘取消’按钮（第10行）进行取消操作。

Ø 图书管理页面设计

图书管理页面是显示书籍的管理信息的，其中页面设计主要包括addbook.html、editbook.html、query.html三个文件，第一个文件是添加书籍信息的显示页面，第二个文件是编辑书籍信息的显示页面，第三个是查询书籍信息的显示页面。

addbook.html

添加书籍信息页面数据量比较大，因此使用了表单来实现。

上述代码实现了添加书籍信息页面，整个表单包括书名、价格、出版社、出版日期、分类、作者信息。书名（第4~5行）、价格（第8~9行）、出版日期（第21~22行）是在输入框中手动输入，页面设计相对简单，此处不详细介绍。第12~18行是出版社信息，采用select标签（即下拉单选框）设计，使用for循环将数据库中出版社信息显示在下拉单选框中。第25~30行是分类信息的设计，设计模式与出版社信息相同。第34~40行是作者信息设计，采用select标签以及multiple="multiple"属性进行多行显示下拉多选框，其他设计模式与出版社信息相同。第42行的‘添加’按钮将表单信息提交到添加书籍的视图函数中进行书籍数据处理，并保存到数据库中。若不想添加可以单击‘取消’按钮（第43~44行），取消添加。

editbook.html

本系统还提供了书籍信息修改功能，因此需要书籍信息编辑的页面，接下来介绍编辑书籍信息页面设计。

上述代码实现了书籍信息修改页面，包含的内容与添加书籍信息页面内容类似，所不同的是，书籍信息修改页面通过触发编辑的书籍id即{{ book_obj.id }}将该书籍的信息显示在相应的字段信息上，如第4~6行的书名value={{ book_obj.title }}以及第14~24行的出版社，通过for语句与if语句来判断需修改的书籍中出版社id与表单中出版社中的id是否匹配，匹配则下拉单选框中值等于出版社名称，即{{ publish.name }}；其他信息与之相同，此处不再赘述。修改完成之后通过单击第58行中‘修改’按钮提交表单到相应的视图函数，完成修改，并将修改之后的信息保存到数据库中，若不想修改可以单击‘取消’按钮（第59行），取消添加。

query.html

当需要在图书馆查找书籍时，因为书籍太多，如果没有相关索引，很难找到需要的书籍，因此本系统提供了书籍的查询功能，查询到的书籍在query.html页面中显示。Website may be available for web development ideas当需要在图书馆查找书籍时，因为书籍太多，如果没有相关索引，很难找到需要的书籍，因此本系统提供了书籍的查询功能，查询到的书籍在query.html页面中显示。

上述代码实现了查找到的书籍显示页面。第4~36行是使用for循环将查询到的书籍数据依次显示在表格中，最终显示在页面中。第5~35行是表格中显示的信息，包括表头以及数据信息。第6~15行是表格中表头信息，包括编号、书名、价格、出版社、出版时间、分类、作者和操作八个字段。第16~32行是显示书籍信息的，包括编号{{ forloop.counter }}、书名{{ book.title }}、价格{{ book.price }}、出版社{{ Website may be available for web development ideas }}、出版时间{{ book.date}}、分类{{ book.classify.category }}、作者{{author.name }}和操作（编辑和删除），第24~26行是将作者一一显示（书籍作者可能有多个）。第33~34行是显示查询失败信息（书籍信息不存在）。

Ø 作者管理页面设计

在阅读书籍时，大部分的读者都会以作者为标准来判断书籍是否符合自己，或者书籍是否值得阅读，因此本系统将作者信息进行单独管理，添加了作者管理页面；其中页面设计主要包括两个文件：menu_author.html和menu_author_edit.html；前者是作者信息的显示页面，后者是作者信息修改页面。

menu_author.html

作者信息显示页面主要包括数据显示、分页和添加作者三部分内容组成。

注意：以上两部分代码（数据显示和分页）是编写在{{block book_list}}与{{endblock}}块中的。

作者信息添加完成以后是由Ajax技术传送到后台视图进行处理的，具体如下：

上述代码通过jQuery中的Ajax技术进行数据传送最终实现作者信息的添加。第3~16行是当id为add_author的按钮单击时触发。第4~7行将name=name的值赋给变量$name，name=sex的值赋值给变量$sex，name=age的值赋值给变量$age，name=university 的值赋值给变量$university。第8~16行通过Ajax技术将变量$name、$sex、$age、$university的值以POST的方式传送到url为/ul/menu/ author /add/的视图函数中，最终通过视图函数完成作者信息的添加。

menu_author_edit.html

本系统还对作者信息提供了修改功能，接下来讲解作者信息修改页面设计。

上述代码实现了作者信息修改页面。第2行是通过作者id{{ author_obj.id }}来将表单数据以POST的方式提交给作者信息修改的相关视图函数。第4~23行是显示作者信息的表单代码，其中包括姓名、性别、年龄、毕业院校等信息，其中输入框中的原始值value均是id为{{ author_obj.id }}的作者对应信息，分别是姓名{{author_obj.name }}、性别{{author_obj.sex}}、年龄{{author-_obj.age }}、毕业院校{{author_obj.university }}。第24行是提交修改表单信息。第25行是取消修改按钮。

Ø 出版社管理页面设计

出版社管理页面主要包括出版社信息展示和出版社信息修改两部分内容，其中页面设计包括menu_publish.html和menu_publish_edit.html两个文件，前者是出版社信息显示页面设计，后者是出版社信息修改页面设计。

menu_publish.html

出版社信息显示页面主要包含出版社信息展示、分页显示和添加出版社三部分内容。接下来讲解出版社信息展示部分内容。

上述代码实现了出版社信息展示页面。第1~2行是返回按钮，当查看出版社信息之后不做任何操作或者完成操作之后可以单击返回按钮。第3~6行是添加出版社按钮，单击添加出版社按钮之后触发添加界面。第7~38行是添加出版社信息界面，包括出版社名、出版社地址以及按钮（确定或取消）三部分内容，填写相关信息单击确定按钮，则由Ajax技术传送数据到后台视图函数。第39~57行是显示出版社信息的表格代码，包括表头和表身信息。第40~45行是表头信息，主要包括序号、出版社名、出版社地址和操作四个字段信息。第46~56行是出版社具体信息，主要使用for循环将出版社信息依次显示在表格中，包括序号{{ forloop.counter }}、出版社名{{ publish.name }}、出版社地址{{ publish.addr }}和操作（编辑、删除）。

分页部分的内容与首页中分页相同，此处不再赘述。

注意：以上两部分代码（数据显示和分页）是编写在{{block book_list}}与{{endblock}}块中的。

添加出版社信息之后通过Ajax技术传送给后台，接下来讲解添加出版社信息的处理，代码如下：

上述代码通过jQuery中的Ajax技术进行数据传送，最终实现出版社信息的添加。第3~13行是当id为add_ publish的按钮单击时触发。第4~5行将name=name的值赋给变量$name，name=addr的值赋值给变量$addr。第6~13行通过Ajax技术将变量$name、$addr的值以POST的方式传送到url为/ul/menu/ publish /add/的视图函数中，最终通过视图函数完成出版社信息的添加。

menu_publish_edit.html

本系统还对出版社信息提供了修改功能，因此设计了出版社信息修改页面，接下来讲解出版社信息修改页面设计，代码如下：

上述代码实现了出版社信息修改页面。第2行是通过出版社id{{ publish.id }}来将表单数据以POST的方式提交给出版社信息修改的相关视图函数。第4~15行是显示出版社信息的表单代码，其中包括出版社名称、出版社地址等信息，其中各输入框中的原始值value均是id为{{ publish.id }}的出版社的对应信息，分别是出版社名称{{publish.name }}、出版社地址{{publish.addr}}。第13行是提交修改表单信息。第14行是取消修改按钮。