devbox
在线问答5
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Django异步请求和后台管理实战

作者：在线问答5 | 2024-08-06 16:34:03

赞

踩

Django异步请求和后台管理实战

项目概述

  1. 项目实现Ajax异步请求局部刷新
  2. 使用XAdmin后台模板
  3. 提供图片上传接口
  4. 在明细页应用了富文本编辑器
  5. 在加载图书信息的时候使用LazyLoad（图片懒加载）
  1. # 环境
  2. asgiref==3.7.2
  3. crispy-bootstrap3==2024.1
  4. defusedxml==0.7.1
  5. diff-match-patch==20230430
  6. Django==3.2.25
  7. django-ckeditor==5.9.0
  8. django-crispy-forms==2.0
  9. django-formtools==2.1
  10. django-import-export==3.2.0
  11. django-js-asset==2.0.0
  12. django-reversion==5.0.12
  13. django-stdimage==3.2.0
  14. et-xmlfile==1.1.0
  15. future==0.15.2
  16. httplib2==0.9.2
  17. MarkupPy==1.14
  18. odfpy==1.4.1
  19. openpyxl==3.1.3
  20. Pillow==6.2.0
  21. progressbar2==4.2.0
  22. PyMySQL==1.1.1
  23. python-utils==3.5.2
  24. pytz==2024.1
  25. PyYAML==6.0.1
  26. six==1.10.0
  27. sqlparse==0.4.4
  28. tablib==3.4.0
  29. typing_extensions==4.7.1
  30. xlrd==2.0.1
  31. xlwt==1.3.0

 

项目初始化并添加xadmin

  • 创建项目 python manage.py startapp bookshop，并在配置文件中完成注册
  • 根目录新建apps文件夹存放刚创建出来的项目
  • 根目录新建extra_apps文件夹存放xadmin源码
  1. # 添加修改settings.py 
  2.  
  3. import os,sys
  4.  
  5. sys.path.insert(0, os.path.join(BASE_DIR, 'apps'))
  6. sys.path.insert(0, os.path.join(BASE_DIR, 'extra_apps'))
  7.  
  8.  
  9. INSTALLED_APPS = [
  10.     'django.contrib.admin',
  11.     'django.contrib.auth',
  12.     'django.contrib.contenttypes',
  13.     'django.contrib.sessions',
  14.     'django.contrib.messages',
  15.     'django.contrib.staticfiles',
  16.     'bookshop',
  17.     'xadmin',
  18.     'crispy_forms',
  19.     'crispy_bootstrap3',
  20. ]
  • 配置文件中设置项目根目录并将文件夹设置为Sources Root格式

  • 新建数据库连接并完成连接配置

  1. # settings.py 添加mysql连接信息
  2.  
  3. DATABASES = {
  4.     'default': {
  5.         'ENGINE': 'django.db.backends.mysql',
  6.         'NAME': 'django_bookshops',
  7.         'USER': '用户名',
  8.         'PASSWORD': '密码',
  9.         'HOST': 'ip',
  10.         'PORT': '端口'
  11.     }
  12. }
  13.  
  14. # 根目录下与settings.py同文件夹下__init__.py 添加如下信息
  15. import pymysql
  16. pymysql.install_as_MySQLdb()
  • 前端文件添加

apps文件夹下新建Python Package文件命名static，在static文件夹下新建css、images、js文件夹

  1. # settings.py 下添加访问静态文件路径
  2.  
  3. STATIC_URL = '/static/'
  4.  
  5. STATICFILES_DIRS = [
  6.     os.path.join(BASE_DIR,'apps','static')
  7. ]

将准备好的前端文件放在指定文件夹中，目录结构如下

  1. # 修改 HTML 文件
  2. # 顶部添加
  3. {% load static %}
  4. # 引入静态文件
  5. <link href="{%  static 'css/book.css' %}" rel="stylesheet">
  • url路由配置

apps文件夹下的bookshop项目中新建urls.py 文件，并在根目录下与settings.py文件同目录下的urls.py文件中添加引入外部 url配置

  1. # settings.py 同目录下 urls.py配置
  2.  
  3. from django.contrib import admin
  4. from django.urls import path
  5. # 调用其他app下定义的 url
  6. from django.urls import include
  7.  
  8.  
  9. urlpatterns = [
  10.     path('admin/', admin.site.urls),
  11.     path('home/', include('bookshop.urls'))
  12. ]
  13.  
  14.  
  15. # ==============apps目录下urls.py================
  16.  
  17. from django.urls import path
  18. from bookshop import views as bookshop_views
  19.  
  20. urlpatterns = [
  21.     # =========前端 url请求：返回页面============
  22.     path('', bookshop_views.book, name='book'),
  23. ]
  • 准备数据库models类并插入数据
  1. # models.py 
  2. from django.db import models
  3. # 引入stdimage的模块
  4. from stdimage.models import StdImageField  # 字段类型
  5. from stdimage.utils import UploadToUUID   # 生成文件名
  6. from ckeditor_uploader.fields import RichTextUploadingField
  7.  
  8.  
  9. # Create your models here.
  10.  
  11. class BookType(models.Model):  # 图书类别 -- 计算机，法律，外语，。。。。
  12.     name = models.CharField(max_length=100, null=False, verbose_name='名称')  # 类别编码
  13.  
  14.     class Meta:
  15.         verbose_name = "图书类别"
  16.         verbose_name_plural = "图书类别"
  17.  
  18.     def __str__(self):
  19.         return "%s" % self.name
  20.  
  21.  
  22. class Press(models.Model):  # 出版社
  23.     id = models.CharField(primary_key=True, max_length=100, null=False, verbose_name='编号')  # 编号
  24.     name = models.CharField(max_length=100, null=False, verbose_name='名称')  # 名称
  25.     city = models.CharField(max_length=100,  null=False, verbose_name='城市')  # 城市
  26.     tel = models.CharField(max_length=100, null=False, verbose_name='电话')  # 电话
  27.     email = models.CharField(max_length=100,  null=False, verbose_name='邮箱')  # 邮箱
  28.     address = models.CharField(max_length=100,  null=False, verbose_name='地址')  # 地址
  29.  
  30.     class Meta:
  31.         verbose_name = "出版社"
  32.         verbose_name_plural = "出版社"
  33.  
  34.     def __str__(self):
  35.         return ("出版社编号：%s\t出版社名称：%s\n" % (self.id,self.name))
  36.         # return "%s" % self.name
  37.  
  38.  
  39. class Author(models.Model):  # 作者
  40.     gender_choices = (("男", '男'), ('女', '女'))
  41.     id = models.CharField(primary_key=True, max_length=100,  null=False, verbose_name='编号')  # 编号
  42.     name = models.CharField(max_length=100,  null=False, verbose_name='姓名')  # 姓名
  43.     gender = models.CharField(max_length=100, choices=gender_choices, verbose_name='性别')    # 性别
  44.     city = models.CharField(max_length=100, null=False, verbose_name='城市')  # 城市
  45.     tel = models.CharField(max_length=100,  null=False, verbose_name='电话')  # 电话
  46.     email = models.CharField(max_length=100,  null=False, verbose_name='邮箱')  # 邮箱
  47.     address = models.CharField(max_length=100,  null=False, verbose_name='地址')  # 地址
  48.  
  49.     class Meta:
  50.         verbose_name = "作者"
  51.         verbose_name_plural = "作者"
  52.  
  53.     def __str__(self):
  54.         return "%s\n" % self.name
  55.  
  56.  
  57. class Book(models.Model):   # 图书
  58.     id = models.CharField(primary_key=True, max_length=100, null=False, verbose_name='编号')  # 编号，主键
  59.     name = models.CharField(max_length=100,  null=False, verbose_name='名称')  # 名称
  60.     barcode = models.CharField(max_length=100,  null=False, verbose_name='条形码')  # 条形码
  61.     type = models.ForeignKey("BookType", on_delete=models.CASCADE, verbose_name='类别')  # 类别
  62.     press = models.ForeignKey("Press", on_delete=models.CASCADE, verbose_name='出版社')  # 出版社
  63.     author = models.ForeignKey("Author", on_delete=models.CASCADE, verbose_name='作者')  # 作者
  64.     price = models.FloatField(null=False, verbose_name='单价')  # 价格
  65.     difficulty = models.CharField(max_length=100,null=False, verbose_name='难易程度')  # 难易程度: 0--入门  1--中级  2--高级
  66.     publish_date = models.DateField(null=False, verbose_name='发行时间')  # 发行时间
  67.     storage_in_num = models.IntegerField(null=False, verbose_name='入库量')  # 入库量
  68.     storage_in_date = models.DateField(null=False, verbose_name='入库时间') # 入库时间
  69.     inventory_num = models.IntegerField(null=False, verbose_name='库存量')  # 库存量
  70.     class Meta:
  71.         verbose_name = "图书"
  72.         verbose_name_plural = "图书"
  73.  
  74.     def __str__(self):
  75.         return "%s" % self.name
  76.  
  1. # 同步数据库信息
  2. python manage.py makemigrations
  3. python manage.py migrate

Ajax 异步请求 

Ajax 即“Asynchronous JavaScript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

  • 准备图书类别的JSON数据 
  1. # ************定义views视图********
  2. from django.shortcuts import render
  3. from django.http import HttpResponse,JsonResponse
  4. from apps.bookshop.models import *
  5.  
  6. # Create your views here.
  7. # =============前端代码：返回页面===========
  8. def book(request):
  9.     return render(request,'book.html')
  10.  
  11. # =============后端代码：从数据库中提取数据封装成json返回给前端===========
  12.  
  13. # 获取所有的图书类别
  14. def get_booktype(request):
  15.     obj_booktypes = BookType.objects.all().values()
  16.     # Queryset无法直接转换成 Json，只有python基础的数据类型才可以，最外层的集合转换成列表
  17.     booktypes = list(obj_booktypes)
  18.     # 插入全部选项
  19.     booktypes.insert(0,{"id":0,"name":"全部"})
  20.     # 返回前端 json格式
  21.     return JsonResponse({'type':booktypes})
  22.  
  23. # **********定义url路由************
  24.  
  25. from django.urls import path
  26. from bookshop import views as bookshop_views
  27.  
  28.  
  29. urlpatterns = [
  30.     # =========前端 url请求：返回页面============
  31.     path('', bookshop_views.book, name='book'),
  32.  
  33.     # =========后端 url请求：返回json数据========
  34.     path('booktype/get/', bookshop_views.get_booktype, name='booktype'),
  35.  
  36. ]

  • 将后端返回的数据展示在页面上
  1. # book.html
  2. {% load static %}
  3. <!DOCTYPE html>
  4. <html>
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9.     <title>图书页面</title>
  10.     <!-- 新 Bootstrap 核心 CSS 文件 -->
  11.     <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  12.     <!--index.css-->
  13.     <link href="{%  static 'css/book.css' %}" rel="stylesheet">
  14.     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  15.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  16.     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  17.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  18.     <!-- jQuery中的Transtion  -->
  19.     <script src="https://cdn.bootcss.com/jquery.transit/0.9.12/jquery.transit.min.js"></script>
  20.     <!--引入LazyLoad-->
  21.     <script src="{% static 'js/jquery.lazyload.min.js' %}"></script>
  22. </head>
  23.  
  24. <body>
  25.     <div class="container-fiuled header">
  26.         <div class="container">
  27.             <img src="{% static 'images/book_logo.png' %}">
  28.         </div>
  29.     </div>
  30.  
  31.     <div class="container typefilter">
  32.         <div class="row">
  33.             <div class="col-lg-1">类别:</div>
  34.             <div class="col-lg-11 booktypes">
  35.                 <!-- Ajax动态加载 -->
  36.             </div>
  37.         </div>
  38.     </div>
  39.  
  40.     <div class="container otherfilter">
  41.         <form class="form-inline">
  42.             <div class="col-lg-2 col-lg-offset-1">
  43.                 <div class="form-group-sm">
  44.                     <label>价格: &nbsp;&nbsp;</label>
  45.                     <select class="form-control price">
  46.                         <option value="0" selected>所有</option>
  47.                         <option value="1">0-20元</option>
  48.                         <option value="2">20-30元</option>
  49.                         <option value="3">30-40元</option>
  50.                         <option value="4">40-50元</option>
  51.                         <option value="5">50-60元</option>
  52.                         <option value="6">60-70元</option>
  53.                         <option value="7">70元以上</option>
  54.                     </select>
  55.                 </div>
  56.             </div>
  57.             <div class="col-lg-2">
  58.                 <div class="form-group-sm">
  59.                     <label>难易程度: &nbsp;&nbsp;</label>
  60.                     <select class="form-control difficulty">
  61.                         <option value="0" selected>所有</option>
  62.                         <option value="1">入门</option>
  63.                         <option value="2">中级</option>
  64.                         <option value="3">高级</option>
  65.                     </select>
  66.                 </div>
  67.             </div>
  68.             <div class="col-lg-2">
  69.                 <div class="form-group-sm">
  70.                     <span style="font-weight: bold">价格排序: </span>
  71.                     <span class="glyphicon glyphicon-sort-by-attributes asc" style="margin-left: 10px;"></span>
  72.                     <span class="glyphicon glyphicon-sort-by-attributes-alt desc" style="margin-left: 10px;"></span>
  73.                 </div>
  74.             </div>
  75.             <div class="col-lg-5" style="text-align: right">
  76.                 <div class="form-group-sm">
  77.                     <input type="text" class="form-control querystr" placeholder="输入图书关键字" style="width:360px;">
  78.                     <button class="btn btn-primary btn-sm btnquery" type="button">查找</button>
  79.                 </div>
  80.             </div>
  81.         </form>
  82.  
  83.     </div>
  84.  
  85.     <div class="container books" style="width:1220px;height: 400px;margin:20px auto;">
  86.           <!-- Ajax动态加载 -->
  87.     </div>
  88. </body>
  89. </html>
  1. #  JavaScript代码
  2. <script>
  3.     // 入口函数
  4.     $(document).ready(function (){
  5.         // 代码自动执行（页面加载时自动执行）
  6.         $.ajax({
  7.             url: 'booktype/get/',
  8.             method: 'GET',
  9.             success: function (res){
  10.                 console.log(res)
  11.                 // 调用函数
  12.                 addTypes(res.type)
  13.             }
  14.         });
  15.  
  16. });
  17.  
  18.     // DOM 操作
  19.     // 将图书类别加载到指定区域
  20.     function addTypes(types){
  21.         // 清空指定区域内容
  22.         $('.typefilter .booktypes').html("");
  23.         // 循环加载图书类别
  24.         types.forEach(function (element,index,array){
  25.             // 新建一个 span
  26.             let oneType = $('<span>').html(element.name).attr('value',element.id).css('font-size',"14px").css('font-weight','normal').css('margin',"10px");;
  27.             //添加一个Hover操作
  28.             oneType.on('mouseenter',()=>{
  29.                 oneType.css('font-weight','bold');
  30.             }).on('mouseleave',()=>{
  31.                  oneType.css('font-weight','normal');
  32.             });
  33.             // 判断是不是全部
  34.             if (index===0){
  35.                 oneType.css({'color':'red'});
  36.             }
  37.             // 添加到页面类别中
  38.             oneType.appendTo($('.typefilter .booktypes'));
  39.         });
  40.     }       
  41.  
  42. </script>
  • 准备图书列表数据
  1. # ************定义views视图********
  2. from django.shortcuts import render
  3. from django.http import HttpResponse,JsonResponse
  4. from apps.bookshop.models import *
  5.  
  6. # Create your views here.
  7. # =============前端代码：返回页面===========
  8. def book(request):
  9.     return render(request,'book.html')
  10.  
  11. # =============后端代码：从数据库中提取数据封装成json返回给前端===========
  12.  
  13. # 获取所有的图书类别
  14. def get_booktype(request):
  15.     obj_booktypes = BookType.objects.all().values()
  16.     # Queryset无法直接转换成 Json，只有python基础的数据类型才可以，最外层的集合转换成列表
  17.     booktypes = list(obj_booktypes)
  18.     # 插入全部选项
  19.     booktypes.insert(0,{"id":0,"name":"全部"})
  20.     # 返回前端 json格式
  21.     return JsonResponse({'type':booktypes})
  22.  
  23. # 获取所有的图书列表
  24. def get_books(request):
  25.     obj_books = Book.objects.all().values()
  26.     # Queryset无法直接转换成 Json，只有python基础的数据类型才可以，最外层的集合转换成列表
  27.     books = list(obj_books)
  28.     # 遍历图书 获取类别名称
  29.     for index,item in enumerate(books):
  30.         # 根据类别编号获取图书类别的对象
  31.         obj_type = BookType.objects.get(id=item['type_id'])
  32.         # 附加typename到当前成员
  33.         books[index]['typename'] = obj_type.name
  34.  
  35.     # 返回前端 json格式
  36.     # return JsonResponse({'book': books})
  37.     # 'ensure_ascii': False 返回的数据显示中文
  38.     return JsonResponse({'book': books},json_dumps_params={'ensure_ascii': False})
  39.  
  40. # **********定义url路由************
  41.  
  42. from django.urls import path
  43. from bookshop import views as bookshop_views
  44.  
  45.  
  46. urlpatterns = [
  47.     # =========前端 url请求：返回页面============
  48.     path('', bookshop_views.book, name='book'),
  49.  
  50.     # =========后端 url请求：返回json数据========
  51.     path('booktype/get/', bookshop_views.get_booktype, name='booktype'),
  52.     path('books/get/', bookshop_views.get_books, name='books'),
  53.  
  54. ]

  • 将后端返回的图书展示在页面上
  1. #  JavaScript代码
  2. <script>
  3.     // 入口函数
  4.     $(document).ready(function (){
  5.         // 代码自动执行（页面加载时自动执行）
  6.         $.ajax({
  7.             url: 'booktype/get/',
  8.             method: 'GET',
  9.             success: function (res){
  10.                 console.log(res)
  11.                 // 调用函数
  12.                 addTypes(res.type)
  13.             }
  14.         });
  15.  
  16.    // *******自动加载图书列表（页面加载时自动执行）*******
  17.         $.ajax({
  18.             url: 'books/get/',
  19.             method: 'GET',
  20.             success: function (res){
  21.                 console.log(res)
  22.                 // 调用函数
  23.                 addBooks(res.book)
  24.             }
  25.         });
  26.  
  27. });
  28.  
  29.     // DOM 操作
  30.     // 将图书类别加载到指定区域
  31.     function addTypes(types){
  32.         // 清空指定区域内容
  33.         $('.typefilter .booktypes').html("");
  34.         // 循环加载图书类别
  35.         types.forEach(function (element,index,array){
  36.             // 新建一个 span
  37.             let oneType = $('<span>').html(element.name).attr('value',element.id).css('font-size',"14px").css('font-weight','normal').css('margin',"10px");;
  38.             //添加一个Hover操作
  39.             oneType.on('mouseenter',()=>{
  40.                 oneType.css('font-weight','bold');
  41.             }).on('mouseleave',()=>{
  42.                  oneType.css('font-weight','normal');
  43.             });
  44.             // 判断是不是全部
  45.             if (index===0){
  46.                 oneType.css({'color':'red'});
  47.             }
  48.             // 添加到页面类别中
  49.             oneType.appendTo($('.typefilter .booktypes'));
  50.         });
  51.     } 
  52.  
  53.     //**********把图书列表加载到制定区域*********
  54.     function addBooks(books) {
  55.         //清空区域内容
  56.         $('.books').html("");
  57.         //遍历
  58.         books.forEach(function (element, index, array) {
  59.             //新建一个div-最外层的容器
  60.             let outer = $('<div>').attr( "class", "col-lg-3");
  61.             //新建一个div，设置类为thumbnail
  62.             let thumbnail = $('<div>').attr( "class", "thumbnail").css('overflow','hidden').appendTo(outer);
  63.             //新建一个img标签，放置图片
  64.             let img = $('<img>')
  65.                 .attr('scr',baseURL+element.image) //******
  66.                 .appendTo(thumbnail)
  67.             //设置图的hover过渡特效 --- 放大1.4倍
  68.             img.on('mouseenter',function () {
  69.                img.transition({ scale: 1.4 }, 300);
  70.             }).on('mouseleave',function () {
  71.                img.transition({ scale: 1 }, 300);
  72.             });
  73.             //新建一个div--放置价格
  74.             let price = $('<div>').html("价格：" + element.price.toFixed(2) + "元").css('text-align', 'left').css('color','red').css('margin-top','20px').css('font-size','16px')
  75.                 .css('line-height', '30px').appendTo(thumbnail);
  76.              {#$("<span>").html("类别：" + element.typename).css('text-align', 'left').css('font-size','16px')#}
  77.              {#   .css('line-height', '30px').appendTo(thumbnail);#}
  78.  
  79.  
  80.             //新建一个div--放置图书名称
  81.             let bookname =$('<div>').html(element.name).css('text-align', 'left').css('color','navy').css('font-size','16px').appendTo(thumbnail);
  82.             //设置图书名称的 Hover
  83.             bookname.on('mouseenter',function () {
  84.                 bookname.css('font-weight','bold');
  85.             }).on('mouseleave',function () {
  86.                 bookname.css('font-weight','normal');
  87.             });
  88.             //把当前容器放置在页面上
  89.             outer.appendTo($('.books'))
  90.         });
  91.     
  92.     }      
  93.  
  94. </script>
  • 效果如下 

xadmin 部署及配置

  • 引入源码到项目中
  1. # 安装xadmin的依赖包进入源码的目录
  2. pip install -r requirements.txt
  • 安装核心的包
  1. INSTALLED_APPS = [
  2.     'django.contrib.admin',
  3.     'django.contrib.auth',
  4.     'django.contrib.contenttypes',
  5.     'django.contrib.sessions',
  6.     'django.contrib.messages',
  7.     'django.contrib.staticfiles',
  8.     'bookshop',
  9.     'xadmin',
  10.     'crispy_forms',
  11.     'crispy_bootstrap3',
  12. ]
  • 修改URL
  1. from django.contrib import admin
  2. from django.urls import path
  3. # 调用其他app下定义的 url
  4. from django.urls import include
  5. # 引入 xadmin
  6. import xadmin
  7.  
  8.  
  9. urlpatterns = [
  10.     # path('admin/', admin.site.urls),
  11.     path('xadmin/', xadmin.site.urls),
  12.     path('home/', include('bookshop.urls'))
  13. ]
  • 同步数据库
  1. python manage.py makemigrations
  2. python manage.py migrate
  • 设置管理员账号密码
python manage.py createsuperuser
  • 报错问题解决
  1. 解决报错 render() missing 1 required positional argument: 'form_style' 
  2. 1.utils.py 29行render_field(）中添加form_style=None,
  3. 2.删除 detail.py 34、35行form_style
  4.  
  5. 解决报错 render() missing 1 required positional argument: context
  6. 1.utils.py  66行context变为context=context
  7.  
  8. 解决报错 OperationalError: (1271, "Illegal mix of collations for operation 'like'")
  9. 1.找到django包下面的\site-packages\django\db\backends\mysql\base.py文件，编辑
  10. 将icontains的值 'icontains': 'LIKE %s',改为'icontains': 'LIKE BINARY %s',
  11.  
  12. 解决报错 django.template.exceptions.TemplateDoesNotExist: bootstrap3/errors.html
  13. 1.安装 pip install crispy-bootstrap3 -i https://mirrors.aliyun.com/pypi/simple/
  14. 2.注册 'crispy_bootstrap3'
  • Models类注册到xadmin
  1. # 1.后台界面中文显示，更改 settings.py
  2.  
  3. # 语言
  4. # LANGUAGE_CODE = 'en-us'
  5. LANGUAGE_CODE = 'zh-Hans'
  6.  
  7. # 时区
  8. # TIME_ZONE = 'UTC'
  9. TIME_ZONE = 'Asia/Shanghai'
  10.  
  11. # 2.bookshop目录下新建 adminx.py 文件
  12.  
  13. from apps.bookshop import models
  14. import xadmin
  15.  
  16.  
  17. # 定义相应对象的xadmin类
  18. class PressAdmin(object):
  19.     # 配置表格显示字段
  20.     list_display = ['id','name','city','tel','email','address']
  21.     # 分页
  22.     list_per_page = 10
  23.  
  24. # 将类注册到xadmin
  25. xadmin.site.register(models.Press,PressAdmin)
  26.  
  27. # 定义相应对象的xadmin类
  28. class BookTypeAdmin(object):
  29.     # 配置表格显示字段
  30.     list_display = ['name']
  31.     # 分页
  32.     list_per_page = 10
  33.  
  34. # 将类注册到xadmin
  35. xadmin.site.register(models.BookType,BookTypeAdmin)
  36.  
  37.  
  38. # 定义相应对象的xadmin类
  39. class AuthorAdmin(object):
  40.     # 配置表格显示字段
  41.     list_display = ['id','name','city','gender','tel','email','address']
  42.     # 分页
  43.     list_per_page = 10
  44.  
  45. # 将类注册到xadmin
  46. xadmin.site.register(models.Author,AuthorAdmin)
  47.  
  48. # 定义相应对象的xadmin类
  49. class BookAdmin(object):
  50.     # 配置表格显示字段
  51.     list_display = ['id','name','barcode','type','press','author','price','difficulty','publish_date','storage_in_num','storage_in_date','inventory_num']
  52.     # 分页
  53.     list_per_page = 10
  54.     # 排序
  55.     ordering = ['id']
  56.     # 查看详情
  57.     show_detail_fields = ['id']
  58.     # 图标  https://v3.bootcss.com/components/
  59.     # https://fontawesome.com/v4/icons/
  60.     model_icon = "fa fa-signal"
  61.     # 搜索字段
  62.     search_fields = ['id','name','barcode']
  63.     # 筛选字段
  64.     list_filter = ['id','name','barcode','type','press','author','price']
  65.     # 配置自动刷新的时间
  66.     refresh_times = (3,5)
  67.  
  68.  
  69. # 将类注册到xadmin
  70. xadmin.site.register(models.Book,BookAdmin)
  • xadmin中全局配置
  1. from apps.bookshop import models
  2. import xadmin
  3.  
  4. # 定义相应对象的xadmin类
  5. class PressAdmin(object):
  6.     # 配置表格显示字段
  7.     list_display = ['id','name','city','tel','email','address']
  8.     # 分页
  9.     list_per_page = 10
  10.  
  11. # 将类注册到xadmin
  12. xadmin.site.register(models.Press,PressAdmin)
  13.  
  14. # 定义相应对象的xadmin类
  15. class BookTypeAdmin(object):
  16.     # 配置表格显示字段
  17.     list_display = ['name']
  18.     # 分页
  19.     list_per_page = 10
  20.  
  21. # 将类注册到xadmin
  22. xadmin.site.register(models.BookType,BookTypeAdmin)
  23.  
  24.  
  25. # 定义相应对象的xadmin类
  26. class AuthorAdmin(object):
  27.     # 配置表格显示字段
  28.     list_display = ['id','name','city','gender','tel','email','address']
  29.     # 分页
  30.     list_per_page = 10
  31.  
  32. # 将类注册到xadmin
  33. xadmin.site.register(models.Author,AuthorAdmin)
  34.  
  35. # 定义相应对象的xadmin类
  36. class BookAdmin(object):
  37.     # 配置表格显示字段
  38.     list_display = ['id','name','barcode','type','press','author','price','difficulty','publish_date','storage_in_num','storage_in_date','inventory_num']
  39.     # 分页
  40.     list_per_page = 10
  41.     # 排序
  42.     ordering = ['id']
  43.     # 查看详情
  44.     show_detail_fields = ['id']
  45.     # 图标  https://v3.bootcss.com/components/
  46.     # https://fontawesome.com/v4/icons/
  47.     model_icon = "fa fa-signal"
  48.     # 搜索字段
  49.     search_fields = ['id','name','barcode']
  50.     # 筛选字段
  51.     list_filter = ['id','name','barcode','type','press','author','price']
  52.     # 配置自动刷新的时间
  53.     refresh_times = (3,5)
  54.  
  55.  
  56. # 将类注册到xadmin
  57. xadmin.site.register(models.Book,BookAdmin)
  58.  
  59.  
  60. """========修改全局基础配置=========="""
  61. from xadmin import views
  62. class BaseSetting(object):
  63.     # 是否启用主题
  64.     enable_themes = True
  65.     use_bootswatch = True
  66.  
  67.     def has_add_permission(self,request):
  68.         return False
  69.  
  70. class GlobalSetting(object):
  71.     site_title = '后台管理系统'
  72.     site_footer = '版权所有 @lv'
  73.     # 侧边栏收起
  74.     menu_style = 'accordion'
  75.  
  76. # *****将全局配置配置到xadmin中*****
  77. xadmin.site.register(views.BaseAdminView,BaseSetting)
  78. xadmin.site.register(views.CommAdminView,GlobalSetting)

图片上传功能实现

  • 准备存储图片的文件夹media
  • 设置MEDIA ROOT 和 MEDIA URL
  1. # MEDIA ROOT:本地处理的路径，MEDIA URL: 互联网访问的路径
  2. # settings.py 
  3. MEDIA_ROOT = os.path.join(BASE_DIR,'media')
  4. MEDIA_URL = ''
  • 配置URL
  1. from django.urls import path
  2. # 调用其他app下定义的 url
  3. from django.urls import include
  4. # 引入 xadmin
  5. import xadmin
  6. from django.conf import settings
  7. # 匹配静态文件
  8. from django.conf.urls.static import static
  9.  
  10. urlpatterns = [
  11.     # path('admin/', admin.site.urls),
  12.     path('xadmin/', xadmin.site.urls),
  13.     path('home/', include('bookshop.urls'))
  14. ]
  15.  
  16. # 允许所有的图片被访问
  17. urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  • 安装模块
pip install django-stdimage==3.2.0 -i https://mirrors.aliyun.com/pypi/simple/
  • 配置models.py模版文件
  1. # 引入stdimage的模块
  2. from stdimage.models import StdImageField
  3. # 生成唯一文件名
  4. from stdimage.utils import UploadToUUID
  5. # 添加图书字段
  6. # path="" 默认存储到media下 variations缩略图配置
  7. image = StdImageField(max_length=200, upload_to=UploadToUUID(path=""),
  8. verbose_name='图片', variations={'thumbnail': {'width': 70, 'height': 100}})
  •  更新连接表
python manage.py makemigrations
  • 实现上传的图片在前台显示
  1. #  JavaScript代码
  2. <script>
  3.     // 入口函数
  4.     $(document).ready(function (){
  5.         // 代码自动执行（页面加载时自动执行）
  6.         $.ajax({
  7.             url: 'booktype/get/',
  8.             method: 'GET',
  9.             success: function (res){
  10.                 console.log(res)
  11.                 // 调用函数
  12.                 addTypes(res.type)
  13.             }
  14.         });
  15.  
  16.    // *******自动加载图书列表（页面加载时自动执行）*******
  17.         $.ajax({
  18.             url: 'books/get/',
  19.             method: 'GET',
  20.             success: function (res){
  21.                 console.log(res)
  22.                 // 调用函数
  23.                 addBooks(res.book)
  24.             }
  25.         });
  26.  
  27. });
  28.  
  29.     // DOM 操作
  30.     // 将图书类别加载到指定区域
  31.     function addTypes(types){
  32.         // 清空指定区域内容
  33.         $('.typefilter .booktypes').html("");
  34.         // 循环加载图书类别
  35.         types.forEach(function (element,index,array){
  36.             // 新建一个 span
  37.             let oneType = $('<span>').html(element.name).attr('value',element.id).css('font-size',"14px").css('font-weight','normal').css('margin',"10px");;
  38.             //添加一个Hover操作
  39.             oneType.on('mouseenter',()=>{
  40.                 oneType.css('font-weight','bold');
  41.             }).on('mouseleave',()=>{
  42.                  oneType.css('font-weight','normal');
  43.             });
  44.             // 判断是不是全部
  45.             if (index===0){
  46.                 oneType.css({'color':'red'});
  47.             }
  48.             // 添加到页面类别中
  49.             oneType.appendTo($('.typefilter .booktypes'));
  50.         });
  51.     } 
  52.  
  53.     //**********把图书列表加载到制定区域*********
  54.     function addBooks(books) {
  55.         //清空区域内容
  56.         $('.books').html("");
  57.         //*********定义一个基础的URL********
  58.         let baseURL = "http://127.0.0.1:8000/";
  59.         //遍历
  60.         books.forEach(function (element, index, array) {
  61.             //新建一个div-最外层的容器
  62.             let outer = $('<div>').attr( "class", "col-lg-3");
  63.             //新建一个div，设置类为thumbnail
  64.             let thumbnail = $('<div>').attr( "class", "thumbnail").css('overflow','hidden').appendTo(outer);
  65.             //新建一个img标签，放置图片
  66.             let img = $('<img>')
  67.                 .attr('scr',baseURL+element.image) //******
  68.                 .appendTo(thumbnail)
  69.             //设置图的hover过渡特效 --- 放大1.4倍
  70.             img.on('mouseenter',function () {
  71.                img.transition({ scale: 1.4 }, 300);
  72.             }).on('mouseleave',function () {
  73.                img.transition({ scale: 1 }, 300);
  74.             });
  75.             //新建一个div--放置价格
  76.             let price = $('<div>').html("价格：" + element.price.toFixed(2) + "元").css('text-align', 'left').css('color','red').css('margin-top','20px').css('font-size','16px')
  77.                 .css('line-height', '30px').appendTo(thumbnail);
  78.              {#$("<span>").html("类别：" + element.typename).css('text-align', 'left').css('font-size','16px')#}
  79.              {#   .css('line-height', '30px').appendTo(thumbnail);#}
  80.  
  81.  
  82.             //新建一个div--放置图书名称
  83.             let bookname =$('<div>').html(element.name).css('text-align', 'left').css('color','navy').css('font-size','16px').appendTo(thumbnail);
  84.             //设置图书名称的 Hover
  85.             bookname.on('mouseenter',function () {
  86.                 bookname.css('font-weight','bold');
  87.             }).on('mouseleave',function () {
  88.                 bookname.css('font-weight','normal');
  89.             });
  90.             //把当前容器放置在页面上
  91.             outer.appendTo($('.books'))
  92.         });
  93.     
  94.     }      
  95.  
  96. </script>

 

图书筛选功能实现

  • 图书类别筛选
  1. #  前端JavaScript代码
  2. <script>
  3.     // *******
  4.     queryItems = {
  5.         type: 0,  //类别
  6.         pricemin: 0, //价格区间的最小值
  7.         pricemax: 10000,//价格区间的最大值
  8.         difficulty: "0", //难易程度
  9.         order: 0,  //排序： 0-不排序  1-升序  2-降序
  10.         inputstr: "", //输入的查询字符串
  11.     };
  12.  
  13.  
  14.     // 入口函数
  15.     $(document).ready(function (){
  16.         // 代码自动执行（页面加载时自动执行）
  17.         $.ajax({
  18.             url: 'booktype/get/',
  19.             method: 'GET',
  20.             success: function (res){
  21.                 console.log(res)
  22.                 // 调用函数展示筛选后的图书
  23.                 addTypes(res.type)
  24.             }
  25.         });
  26.  
  27.    // *******自动加载图书列表（页面加载时自动执行）*******
  28.         $.ajax({
  29.             url: 'books/get/',
  30.             method: 'GET',
  31.             success: function (res){
  32.                 console.log(res)
  33.                 // 调用函数
  34.                 addBooks(res.book)
  35.             }
  36.         });
  37.  
  38. });
  39.  
  40.     // DOM 操作
  41.  
  42.     // 提交图书查询的ajax请求
  43.     function queryBooks(){
  44.         // 进行ajax请求
  45.         $.ajax({
  46.             url: "books/query/",
  47.             method: "post",
  48.             data: queryItems,
  49.             success:function (res){
  50.                 console.log(res);
  51.                 // 展示筛选后的图书
  52.                 addBooks(res.book)
  53.             }
  54.         })
  55.     }
  56.  
  57.     // 将图书类别加载到指定区域
  58.     function addTypes(types){
  59.         // 清空指定区域内容
  60.         $('.typefilter .booktypes').html("");
  61.         // 循环加载图书类别
  62.         types.forEach(function (element,index,array){
  63.             // 新建一个 span
  64.             let oneType = $('<span>').html(element.name).attr('value',element.id).css('font-size',"14px").css('font-weight','normal').css('margin',"10px");;
  65.             //添加一个Hover操作
  66.             oneType.on('mouseenter',()=>{
  67.                 oneType.css('font-weight','bold');
  68.             }).on('mouseleave',()=>{
  69.                  oneType.css('font-weight','normal');
  70.             });
  71.             // 判断是不是全部
  72.             if (index===0){
  73.                 oneType.css({'color':'red'});
  74.             }
  75.  
  76.             // *****响应事件*****
  77.             // 类别点击事件
  78.             oneType.click(function (){
  79.                 //清楚所有的选择
  80.                 $(".booktypes span").css('color','#000');
  81.                 //把点击的选择
  82.                 $(this).css('color','red');
  83.                 // 把typeid传递给 queryitme.type
  84.                 queryItems.type = $(this).attr('value');
  85.                 {#console.log(queryItems);#}
  86.                 //提交到后台筛选
  87.                 queryBooks()
  88.  
  89.             // 添加到页面类别中
  90.             oneType.appendTo($('.typefilter .booktypes'));
  91.         });
  92.     } 
  93.  
  94.     //**********把图书列表加载到制定区域*********
  95.     function addBooks(books) {
  96.         //清空区域内容
  97.         $('.books').html("");
  98.         //*********定义一个基础的URL********
  99.         let baseURL = "http://127.0.0.1:8000/";
  100.         //遍历
  101.         books.forEach(function (element, index, array) {
  102.             //新建一个div-最外层的容器
  103.             let outer = $('<div>').attr( "class", "col-lg-3");
  104.             //新建一个div，设置类为thumbnail
  105.             let thumbnail = $('<div>').attr( "class", "thumbnail").css('overflow','hidden').appendTo(outer);
  106.             //新建一个img标签，放置图片
  107.             let img = $('<img>')
  108.                 .attr('scr',baseURL+element.image) //******
  109.                 .appendTo(thumbnail)
  110.             //设置图的hover过渡特效 --- 放大1.4倍
  111.             img.on('mouseenter',function () {
  112.                img.transition({ scale: 1.4 }, 300);
  113.             }).on('mouseleave',function () {
  114.                img.transition({ scale: 1 }, 300);
  115.             });
  116.             //新建一个div--放置价格
  117.             let price = $('<div>').html("价格：" + element.price.toFixed(2) + "元").css('text-align', 'left').css('color','red').css('margin-top','20px').css('font-size','16px')
  118.                 .css('line-height', '30px').appendTo(thumbnail);
  119.              {#$("<span>").html("类别：" + element.typename).css('text-align', 'left').css('font-size','16px')#}
  120.              {#   .css('line-height', '30px').appendTo(thumbnail);#}
  121.  
  122.  
  123.             //新建一个div--放置图书名称
  124.             let bookname =$('<div>').html(element.name).css('text-align', 'left').css('color','navy').css('font-size','16px').appendTo(thumbnail);
  125.             //设置图书名称的 Hover
  126.             bookname.on('mouseenter',function () {
  127.                 bookname.css('font-weight','bold');
  128.             }).on('mouseleave',function () {
  129.                 bookname.css('font-weight','normal');
  130.             });
  131.             //把当前容器放置在页面上
  132.             outer.appendTo($('.books'))
  133.         });
  134.     
  135.     }      
  136.  
  137. </script>
  1. # 后端代码 view.py
  2. from django.shortcuts import render
  3. from django.http import HttpResponse,JsonResponse
  4. from apps.bookshop.models import *
  5.  
  6. # 实现图书查询
  7. def query_books(request):
  8.     # 获取传递来的条件
  9.     type = request.POST.get('type')
  10.     if type == '0':
  11.         obj_books = Book.objects.all().values()
  12.     else:
  13.         # 通过编号筛选出图书
  14.         obj_books = Book.objects.filter(type_id=type).values()
  15.     books = list(obj_books.values())
  16.     # 遍历图书 获取类别名称
  17.     for index, item in enumerate(books):
  18.         # 根据类别编号获取图书类别的对象
  19.         obj_type = BookType.objects.get(id=item['type_id'])
  20.         # 附加typename到当前成员
  21.         books[index]['typename'] = obj_type.name
  22.  
  23.     return JsonResponse({'book': books}, json_dumps_params={'ensure_ascii': False})
  24.  
  25.  
  26. # 设置路由 urls.py
  27. from django.urls import path
  28. from bookshop import views as bookshop_views
  29.  
  30. urlpatterns = [
  31.     # =========前端 url请求：返回页面============
  32.     path('', bookshop_views.book, name='book'),
  33.  
  34.     # =========后端 url请求：返回json数据========
  35.     path('booktype/get/', bookshop_views.get_booktype, name='booktype'),
  36.     path('books/get/', bookshop_views.get_books, name='books'),
  37.     path('books/query/', bookshop_views.query_books, name='books_query'),
  38. ]
  • 图书价格区间筛选
  1. #  前端JavaScript代码
  2. <script>
  3.     // *******
  4.     PRICE_REGION_VALUE = [[0,10000],[0,20],[20,30],[30,40],[40,50],[50,60],[60,70],[70,10000]];
  5.     DIFF_VALUE =['0', '入门', '中级', '高级'];
  6.  
  7.     queryItems = {
  8.         type: 0,  //类别
  9.         pricemin: 0, //价格区间的最小值
  10.         pricemax: 10000,//价格区间的最大值
  11.         difficulty: "0", //难易程度
  12.         order: 0,  //排序： 0-不排序  1-升序  2-降序
  13.         inputstr: "", //输入的查询字符串
  14.     };
  15.  
  16.  
  17.     // 入口函数
  18.     $(document).ready(function (){
  19.         // 代码自动执行（页面加载时自动执行）
  20.         $.ajax({
  21.             url: 'booktype/get/',
  22.             method: 'GET',
  23.             success: function (res){
  24.                 console.log(res)
  25.                 // 调用函数展示筛选后的图书
  26.                 addTypes(res.type)
  27.             }
  28.         });
  29.  
  30.    // *******自动加载图书列表（页面加载时自动执行）*******
  31.         $.ajax({
  32.             url: 'books/get/',
  33.             method: 'GET',
  34.             success: function (res){
  35.                 console.log(res)
  36.                 // 调用函数
  37.                 addBooks(res.book)
  38.             }
  39.         });
  40.  
  41.     // *******价格的下拉框改变事件*******
  42.         $('.price').change(function (){
  43.             let priceArr = PRICE_REGION_VALUE[parseInt($('.price').val())];
  44.             // 范围值赋值给pricemin、pricemax
  45.             queryItems.pricemin = priceArr[0];
  46.             queryItems.pricemax = priceArr[1];
  47.             // 传递到后端
  48.             queryBooks()
  49.         });
  50.  
  51. });
  52.  
  53.     // DOM 操作
  54.  
  55.     // 提交图书查询的ajax请求
  56.     function queryBooks(){
  57.         // 进行ajax请求
  58.         $.ajax({
  59.             url: "books/query/",
  60.             method: "post",
  61.             data: queryItems,
  62.             success:function (res){
  63.                 console.log(res);
  64.                 // 展示筛选后的图书
  65.                 addBooks(res.book)
  66.             }
  67.         })
  68.     }
  69.  
  70.     // 将图书类别加载到指定区域
  71.     function addTypes(types){
  72.         // 清空指定区域内容
  73.         $('.typefilter .booktypes').html("");
  74.         // 循环加载图书类别
  75.         types.forEach(function (element,index,array){
  76.             // 新建一个 span
  77.             let oneType = $('<span>').html(element.name).attr('value',element.id).css('font-size',"14px").css('font-weight','normal').css('margin',"10px");;
  78.             //添加一个Hover操作
  79.             oneType.on('mouseenter',()=>{
  80.                 oneType.css('font-weight','bold');
  81.             }).on('mouseleave',()=>{
  82.                  oneType.css('font-weight','normal');
  83.             });
  84.             // 判断是不是全部
  85.             if (index===0){
  86.                 oneType.css({'color':'red'});
  87.             }
  88.  
  89.             // *****响应事件*****
  90.             // 类别点击事件
  91.             oneType.click(function (){
  92.                 //清楚所有的选择
  93.                 $(".booktypes span").css('color','#000');
  94.                 //把点击的选择
  95.                 $(this).css('color','red');
  96.                 // 把typeid传递给 queryitme.type
  97.                 queryItems.type = $(this).attr('value');
  98.                 {#console.log(queryItems);#}
  99.                 //提交到后台筛选
  100.                 queryBooks()
  101.  
  102.             // 添加到页面类别中
  103.             oneType.appendTo($('.typefilter .booktypes'));
  104.         });
  105.     } 
  106.  
  107.     //**********把图书列表加载到制定区域*********
  108.     function addBooks(books) {
  109.         //清空区域内容
  110.         $('.books').html("");
  111.         //*********定义一个基础的URL********
  112.         let baseURL = "http://127.0.0.1:8000/";
  113.         //遍历
  114.         books.forEach(function (element, index, array) {
  115.             //新建一个div-最外层的容器
  116.             let outer = $('<div>').attr( "class", "col-lg-3");
  117.             //新建一个div，设置类为thumbnail
  118.             let thumbnail = $('<div>').attr( "class", "thumbnail").css('overflow','hidden').appendTo(outer);
  119.             //新建一个img标签，放置图片
  120.             let img = $('<img>')
  121.                 .attr('scr',baseURL+element.image) //******
  122.                 .appendTo(thumbnail)
  123.             //设置图的hover过渡特效 --- 放大1.4倍
  124.             img.on('mouseenter',function () {
  125.                img.transition({ scale: 1.4 }, 300);
  126.             }).on('mouseleave',function () {
  127.                img.transition({ scale: 1 }, 300);
  128.             });
  129.             //新建一个div--放置价格
  130.             let price = $('<div>').html("价格：" + element.price.toFixed(2) + "元").css('text-align', 'left').css('color','red').css('margin-top','20px').css('font-size','16px')
  131.                 .css('line-height', '30px').appendTo(thumbnail);
  132.              {#$("<span>").html("类别：" + element.typename).css('text-align', 'left').css('font-size','16px')#}
  133.              {#   .css('line-height', '30px').appendTo(thumbnail);#}
  134.  
  135.  
  136.             //新建一个div--放置图书名称
  137.             let bookname =$('<div>').html(element.name).css('text-align', 'left').css('color','navy').css('font-size','16px').appendTo(thumbnail);
  138.             //设置图书名称的 Hover
  139.             bookname.on('mouseenter',function () {
  140.                 bookname.css('font-weight','bold');
  141.             }).on('mouseleave',function () {
  142.                 bookname.css('font-weight','normal');
  143.             });
  144.             //把当前容器放置在页面上
  145.             outer.appendTo($('.books'))
  146.         });
  147.     
  148.     }      
  149.  
  150. </script>
  1. # 后端代码 view.py
  2. from django.shortcuts import render
  3. from django.http import HttpResponse,JsonResponse
  4. from apps.bookshop.models import *
  5.  
  6. # 实现图书查询
  7. def query_books(request):
  8.     # 获取传递来的条件
  9.     type = request.POST.get('type')
  10.     # 价格
  11.     price_min = request.POST.get('pricemin')
  12.     price_max = request.POST.get('pricemax')
  13.     if type == '0':
  14.         obj_books = Book.objects.all().values()
  15.     else:
  16.         # 通过编号筛选出图书
  17.         obj_books = Book.objects.filter(type_id=type).values()
  18.  
  19.     # 筛选价格
  20.     obj_books = obj_books.filter(price__gte=price_min,price__lte=price_max)
  21.     books = list(obj_books.values())
  22.     # 遍历图书 获取类别名称
  23.     for index, item in enumerate(books):
  24.         # 根据类别编号获取图书类别的对象
  25.         obj_type = BookType.objects.get(id=item['type_id'])
  26.         # 附加typename到当前成员
  27.         books[index]['typename'] = obj_type.name
  28.  
  29.     return JsonResponse({'book': books}, json_dumps_params={'ensure_ascii': False})
  30.  
  31.  
  32. # 设置路由 urls.py
  33. from django.urls import path
  34. from bookshop import views as bookshop_views
  35.  
  36. urlpatterns = [
  37.     # =========前端 url请求：返回页面============
  38.     path('', bookshop_views.book, name='book'),
  39.  
  40.     # =========后端 url请求：返回json数据========
  41.     path('booktype/get/', bookshop_views.get_booktype, name='booktype'),
  42.     path('books/get/', bookshop_views.get_books, name='books'),
  43.     path('books/query/', bookshop_views.query_books, name='books_query'),
  44. ]

 

  • 图书难易程度筛选
  1. # 前端 JavaScript代码
  2. //  入口函数添加 难度筛选事件
  3.  $('.difficulty').change(function (){
  4.      queryItems.difficulty = DIFF_VALUE[parseInt($('.difficulty').val())]
  5.      // 实现查询
  6.      queryBooks();
  7. });
  8.  
  9.  
  10. # 后端图书查询函数添加
  11. # 实现图书查询
  12. def query_books(request):
  13.     # 获取传递来的条件
  14.     type = request.POST.get('type')
  15.     # 价格
  16.     price_min = request.POST.get('pricemin')
  17.     price_max = request.POST.get('pricemax')
  18.     # 难度
  19.     difficulty = request.POST.get('difficulty')
  20.     if type == '0':
  21.         obj_books = Book.objects.all().values()
  22.     else:
  23.         # 通过编号筛选出图书
  24.         obj_books = Book.objects.filter(type_id=type).values()
  25.  
  26.     # 筛选价格
  27.     obj_books = obj_books.filter(price__gte=price_min,price__lte=price_max)
  28.     # 筛选难度
  29.     if '0' not in difficulty:
  30.         obj_books = obj_books.filter(difficulty=difficulty)
  31.     books = list(obj_books.values())
  32.     # 遍历图书 获取类别名称
  33.     for index, item in enumerate(books):
  34.         # 根据类别编号获取图书类别的对象
  35.         obj_type = BookType.objects.get(id=item['type_id'])
  36.         # 附加typename到当前成员
  37.         books[index]['typename'] = obj_type.name
  38.  
  39.     return JsonResponse({'book': books}, json_dumps_params={'ensure_ascii': False})
  • 图书关键字筛选
  1. # 前端 JavaScript代码
  2. //  入口函数添加 难度筛选事件
  3. // 指定关键字查询
  4. $('.btnquery').click(function (){
  5.     // 获取输入字符串
  6.     queryItems.inputstr = $('.querystr').val();
  7.     // 实现查询
  8.     queryBooks();
  9. });
  10.  
  11.  
  12. # 后端图书查询函数添加
  13. # 实现图书查询
  14. def query_books(request):
  15.     # 获取传递来的条件
  16.     type = request.POST.get('type')
  17.     # 价格
  18.     price_min = request.POST.get('pricemin')
  19.     price_max = request.POST.get('pricemax')
  20.     # 难度
  21.     difficulty = request.POST.get('difficulty')
  22.     # 输入的值
  23.     input_str = request.POST.get('inputstr')
  24.     if type == '0':
  25.         obj_books = Book.objects.all().values()
  26.     else:
  27.         # 通过编号筛选出图书
  28.         obj_books = Book.objects.filter(type_id=type).values()
  29.  
  30.     # 筛选价格
  31.     obj_books = obj_books.filter(price__gte=price_min,price__lte=price_max)
  32.     # 筛选难度
  33.     if '0' not in difficulty:
  34.         obj_books = obj_books.filter(difficulty=difficulty)
  35.     # 输入筛选
  36.     obj_books = obj_books.filter(name__icontains=input_str)
  37.     books = list(obj_books.values())
  38.     # 遍历图书 获取类别名称
  39.     for index, item in enumerate(books):
  40.         # 根据类别编号获取图书类别的对象
  41.         obj_type = BookType.objects.get(id=item['type_id'])
  42.         # 附加typename到当前成员
  43.         books[index]['typename'] = obj_type.name
  44.  
  45.     return JsonResponse({'book': books}, json_dumps_params={'ensure_ascii': False})
  • 图书价格升降序排序
  1. # 前端 JavaScript代码
  2. //  入口函数添加 难度筛选事件
  3. // 指定关键字查询
  4. // 升序
  5.         $('.asc').click(function (){
  6.             // 把所有排序的图标不选择
  7.             $('.asc').css('color','#fff');
  8.             $('.desc').css('color','#fff');
  9.             // 选中升序
  10.             $('.asc').css('color','red');
  11.             // 修改order
  12.             queryItems.order = 1;
  13.             // 提交给后端
  14.             queryBooks();
  15.         });
  16.         // 降序
  17.         $('.desc').click(function (){
  18.             // 把所有排序的图标不选择
  19.             $('.asc').css('color','#fff');
  20.             $('.desc').css('color','#fff');
  21.             // 选中升序
  22.             $('.desc').css('color','red');
  23.             // 修改order
  24.             queryItems.order = 2;
  25.             // 提交给后端
  26.             queryBooks();
  27.         });
  28.  
  29.  
  30. # 后端图书查询函数添加
  31. # 实现图书查询
  32. def query_books(request):
  33.     # 获取传递来的条件
  34.     type = request.POST.get('type')
  35.     # 价格
  36.     price_min = request.POST.get('pricemin')
  37.     price_max = request.POST.get('pricemax')
  38.     # 难度
  39.     difficulty = request.POST.get('difficulty')
  40.     # 输入的值
  41.     input_str = request.POST.get('inputstr')
  42.     # 升降序
  43.     order = request.POST.get('order')
  44.     if type == '0':
  45.         obj_books = Book.objects.all().values()
  46.     else:
  47.         # 通过编号筛选出图书
  48.         obj_books = Book.objects.filter(type_id=type).values()
  49.  
  50.     # 筛选价格
  51.     obj_books = obj_books.filter(price__gte=price_min,price__lte=price_max)
  52.     # 筛选难度
  53.     if '0' not in difficulty:
  54.         obj_books = obj_books.filter(difficulty=difficulty)
  55.     # 输入筛选
  56.     obj_books = obj_books.filter(name__icontains=input_str)
  57.     # 排序
  58.     if order == '1':
  59.         obj_books = obj_books.order_by('price').all()
  60.     elif order == '2':
  61.         obj_books = obj_books.order_by('-price').all()
  62.     books = list(obj_books.values())
  63.     # 遍历图书 获取类别名称
  64.     for index, item in enumerate(books):
  65.         # 根据类别编号获取图书类别的对象
  66.         obj_type = BookType.objects.get(id=item['type_id'])
  67.         # 附加typename到当前成员
  68.         books[index]['typename'] = obj_type.name
  69.  
  70.     return JsonResponse({'book': books}, json_dumps_params={'ensure_ascii': False})

图片懒加载

为了提高用户体验度，在长页面的时候，优先加载用户屏幕区域的内容，下拉的内容暂时不加载，等滚动条拖动的时候逐步加载。

  1. <!--引入图片懒加载js包LazyLoad-->
  2. <script src="{% static 'js/jquery.lazyload.min.js' %}"></script>
  3. // 修改addBooks
  4. function addBooks(books) {
  5.         //清空区域内容
  6.         $('.books').html("");
  7.         //定义一个基础的URL
  8.         let baseURL = "http://127.0.0.1:8000/";
  9.         //遍历
  10.         books.forEach(function (element, index, array) {
  11.             //新建一个div-最外层的容器
  12.             let outer = $('<div>').attr( "class", "col-lg-3");
  13.             //新建一个div，设置类为thumbnail
  14.             let thumbnail = $('<div>').attr( "class", "thumbnail").css('overflow','hidden').appendTo(outer);
  15.             //******新建一个img标签，放置图片****
  16.             let img = $('<img>')
  17.                 .attr('class','lazy')
  18.                 .attr('width','200px')
  19.                 .attr('height','200px')
  20.                 .attr('src', "{% static 'images/lazy.png' %}")
  21.                 .attr('data-original',baseURL+element.image)
  22.                 .appendTo(thumbnail)
  23.  
  24.             //img.lazyload();
  25.             //设置图的hover过渡特效 --- 放大1.4倍
  26.             img.on('mouseenter',function () {
  27.                img.transition({ scale: 1.4 }, 300);
  28.             }).on('mouseleave',function () {
  29.                img.transition({ scale: 1 }, 300);
  30.             });
  31.             //新建一个div--放置价格
  32.             let price = $('<div>').html("价格：" + element.price.toFixed(2) + "元").css('text-align', 'left').css('color','red').css('margin-top','20px').css('font-size','16px')
  33.                 .css('line-height', '30px').appendTo(thumbnail);
  34.              {#$("<span>").html("类别：" + element.typename).css('text-align', 'left').css('font-size','16px')#}
  35.              {#   .css('line-height', '30px').appendTo(thumbnail);#}
  36.  
  37.  
  38.             //新建一个div--放置图书名称
  39.             let bookname =$('<div>').html(element.name).css('text-align', 'left').css('color','navy').css('font-size','16px').appendTo(thumbnail);
  40.             //设置图书名称的 Hover
  41.             bookname.on('mouseenter',function () {
  42.                 bookname.css('font-weight','bold');
  43.             }).on('mouseleave',function () {
  44.                 bookname.css('font-weight','normal');
  45.             });
  46.             //展示类别
  47.             let typeAndDiff = $("<div>");
  48.             $("<span>").html("类别：" + element.typename).css('text-align', 'left').css('font-size','16px')
  49.                 .css('line-height', '30px').appendTo(typeAndDiff);
  50.             $("<span>").html("&nbsp&nbsp&nbsp&nbsp难易程度：" + element.difficulty).css('text-align', 'left').css('font-size','16px')
  51.                 .css('line-height', '30px').appendTo(typeAndDiff);
  52.             typeAndDiff.appendTo(thumbnail);
  53.             //点击某一本触发的事件
  54.             outer.click(function (){
  55.                 {#location.href = "/book/detail/" + element.id + "/";#}
  56.                 {#location.href = "/home/book/detail/?bookid=" + element.id;#}
  57.                 let temp = window.open('_blank');
  58.                 temp.location.href = "/home/book/detail/?bookid=" + element.id;
  59.               });
  60.             //把当前容器放置在页面上
  61.             outer.appendTo($('.books'))
  62.         });
  63.         //设置图片懒加载
  64.         $('img.lazy').lazyload({
  65.             threshold: 200,
  66.             effect: 'fadeIn'
  67.         });
  68.     }

添加图片详情功能

在图书列表页面点击某一本图书获取这本图书的图书编号，在跳转的时候，携带图书编号跳转到详情页，在详情页中通过携带过来的图书编号在数据库査询更多的信息在页面展示。

  1. # 详情页 html
  2. {% load static %}
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>图书详情</title>
  8.     <!-- 新 Bootstrap 核心 CSS 文件 -->
  9.     <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  10.     <link type="text/css" rel="stylesheet" href="{% static 'css/bookdetail.base.css' %}">
  11.     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  12.     <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  13.     <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
  14.     <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  15. </head>
  16. <body>
  17.     <div class="container-fiuled header">
  18.         <div class="container">
  19.             <img src="{% static 'images/book_logo.png' %}">
  20.         </div>
  21.     </div>
  22.  
  23.     <div class="container title">图书详情</div>
  24.  
  25.     <div class="container basic">
  26.          <div class="left" >
  27.  
  28.          </div>
  29.          <div class="right" >
  30.  
  31.          </div>
  32.      </div>
  33.  
  34.     <div class="container detail" style="padding: 25px; box-sizing: border-box">
  35.  
  36.     </div>
  37.  
  38. </body>
  39. </html>
  1. # 设置 views.py视图
  2. def book_detail(request,bookid):
  3.     print(bookid)
  4.     """图书详情页"""
  5.     return render(request, 'bookdetail.html',context={'bookid':bookid})
  6.  
  7. # 获取图书详情
  8. def get_book_by_id(request):
  9.     # 接收传递过来的 id
  10.     bookid = request.POST.get('bookid')
  11.     # bookid = '39001'
  12.     # 获取book表信息
  13.     obj_book = Book.objects.filter(id=bookid).values()[0]
  14.     # 通过type_id 获取列表的对象
  15.     obj_booktype = BookType.objects.get(id=obj_book['type_id'])
  16.     # 通过Press_id 获取出版社的对象
  17.     obj_press = Press.objects.get(id=obj_book['press_id'])
  18.     # 通过author_id 获取作者的对象
  19.     obj_author = Author.objects.get(id=obj_book['author_id'])
  20.     # 组合拼接到obj_book
  21.     obj_book['typename'] = obj_booktype.name
  22.     obj_book['pressname'] = obj_press.name
  23.     obj_book['authorname'] = obj_author.name
  24.     # 返回
  25.     return JsonResponse(obj_book)
  26.  
  27.  
  28. # 定义前端访问路由
  29. from django.urls import path
  30. from bookshop import views as bookshop_views
  31.  
  32. urlpatterns = [
  33.     # =========前端 url请求：返回页面============
  34.     path('', bookshop_views.book, name='book'),
  35.     path('book/detail/<bookid>/', bookshop_views.book_detail, name='bookdetail'),#图书详情页
  36.  
  37.     # =========后端 url请求：返回json数据========
  38.     path('booktype/get/', bookshop_views.get_booktype, name='booktype'),
  39.     path('books/get/', bookshop_views.get_books, name='books'),
  40.     path('books/query/', bookshop_views.query_books, name='books_query'),
  41.     path('books/get_detail/', bookshop_views.get_book_by_id, name='books_getdetail'),#获取某一图书详情
  42. ]
  43.  
  44.  
  1. // 前端 JavaScript
  2. <script>
  3.     // 入口函数
  4.     $(document).ready(function (){
  5.         // 入口函数代码自动执行
  6.         $.ajax({
  7.             url: '/home/books/get_detail/',
  8.             method: 'post',
  9.             data: {
  10.                 'bookid': {{ bookid }}
  11.             },
  12.             success: function (res){
  13.                 {#console.log(res)#}
  14.                 addBookDetail(res)
  15.             }
  16.         });
  17.         // 展示图书信息
  18.     function addBookDetail(book) {
  19.         //清除图片区域
  20.         let leftArea = $('.basic .left');
  21.         leftArea.html("");
  22.         //定义基础的URL
  23.         BASE_URL = "http://127.0.0.1:8000/";
  24.         //加载图书
  25.         $('<img>').attr("width",'300px').attr('height',"300px").css('margin','50px')
  26.             .attr('src', BASE_URL + book.image).appendTo(leftArea);
  27.  
  28.         //右边区域
  29.         let rightArea = $('.basic .right');
  30.         rightArea.html("");
  31.         //编号
  32.         let arr = ["id", "name",'authorname','price','typename','difficulty','pressname','publish_date','inventory_num'];
  33.         let arr_name = ['编号','名称','作者','价格','类别','等级','出版社','出版时间','库存量'];
  34.         let obj_ul = $('<ul>').css('font-size','16px');
  35.         //循环
  36.         for(let index in arr){
  37.             let temp_li = $("<li>");
  38.             $("<span>").css('color','red').html(arr_name[index]+":").appendTo(temp_li);
  39.             $("<span>").css('color','#000').html("&nbsp;&nbsp;&nbsp;"+ book[arr[index]]).appendTo(temp_li);
  40.             temp_li.appendTo(obj_ul);
  41.         }
  42.         obj_ul.appendTo(rightArea);
  43.  
  44.         //把图书的详情展示在页面
  45.         $('.detail').html(book.detail);
  46.     }
  47.  
  48.     })
  49. </script>

后台部署富文本编辑器

  • 安装模块
  1. pip install django-ckeditor==5.9.0
  2. pip install Pillow==6.2.0
  • 注册并添加配置
  1. INSTALLED_APPS = [
  2.     'django.contrib.admin',
  3.     'django.contrib.auth',
  4.     'django.contrib.contenttypes',
  5.     'django.contrib.sessions',
  6.     'django.contrib.messages',
  7.     'django.contrib.staticfiles',
  8.     'bookshop',
  9.     'xadmin',
  10.     'crispy_forms',
  11.     'crispy_bootstrap3',
  12.     'ckeditor',
  13.     'ckeditor_uploader'
  14. ]
  15.  
  16.  
  17. # ====添加CKEditor配置====
  18. # 使用默认的主题名称
  19. CKEDITOR_CONFIGS = {
  20. 'default':
  21.     {
  22.         'toolbar': 'full',
  23.         'height': 500,
  24.         'width': 900,
  25.     },
  26.  
  27. }
  28. # 上传文件存储在哪个目录 /media/uploads/
  29. CKEDITOR_UPLOAD_PATH = "uploads/"
  • 配置url路由
  1. from django.urls import path
  2. # 调用其他app下定义的 url
  3. from django.urls import include
  4. # 引入 xadmin
  5. import xadmin
  6. from django.conf import settings
  7. # 匹配静态文件
  8. from django.conf.urls.static import static
  9.  
  10. urlpatterns = [
  11.     # path('admin/', admin.site.urls),
  12.     path('xadmin/', xadmin.site.urls),
  13.     # 富文本编辑器
  14.     path('ckeditor/',include('ckeditor_uploader.urls')),
  15.     path('home/', include('bookshop.urls'))
  16. ]
  17.  
  18. # 允许所有的图片被访问
  19. urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  • 模版models.py添加Book新字段
  1. from ckeditor_uploader.fields import RichTextUploadingField
  2. class Book(models.Model):   # 图书
  3.     id = models.CharField(primary_key=True, max_length=100, null=False, verbose_name='编号')  # 编号，主键
  4.     name = models.CharField(max_length=100,  null=False, verbose_name='名称')  # 名称
  5.     barcode = models.CharField(max_length=100,  null=False, verbose_name='条形码')  # 条形码
  6.     type = models.ForeignKey("BookType", on_delete=models.CASCADE, verbose_name='类别')  # 类别
  7.     press = models.ForeignKey("Press", on_delete=models.CASCADE, verbose_name='出版社')  # 出版社
  8.     author = models.ForeignKey("Author", on_delete=models.CASCADE, verbose_name='作者')  # 作者
  9.     price = models.FloatField(null=False, verbose_name='单价')  # 价格
  10.     difficulty = models.CharField(max_length=100,null=False, verbose_name='难易程度')  # 难易程度: 0--入门  1--中级  2--高级
  11.     # path="" 默认存储到media下 variations缩略图配置
  12.     image = StdImageField(max_length=200, upload_to=UploadToUUID(path=""),
  13.                           verbose_name='图片', variations={'thumbnail': {'width': 70, 'height': 100}}
  14.                           )
  15.     publish_date = models.DateField(null=False, verbose_name='发行时间')  # 发行时间
  16.     storage_in_num = models.IntegerField(null=False, verbose_name='入库量')  # 入库量
  17.     storage_in_date = models.DateField(null=False, verbose_name='入库时间') # 入库时间
  18.     inventory_num = models.IntegerField(null=False, verbose_name='库存量')  # 库存量
  19.     # 添加富文本编辑器字段
  20.     detail = RichTextUploadingField(verbose_name="图书详情",default="")
  21.     class Meta:
  22.         verbose_name = "图书"
  23.         verbose_name_plural = "图书"
  24.  
  25.     def __str__(self):
  26.         return "%s" % self.name
  • 同步数据
  1. python manage.py makemigrations
  2. python manage.py migrate
  • 将富文本内容展示在前端页面
  1. //把图书的详情展示在页面
  2. $('.detail').html(book.detail);

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/在线问答5/article/detail/938276
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号