后台管理菜单 + 母板[css/content/js]

向后台提交数据[2种]:   
   1.  模态对话框(数据少操作,且Js复杂):
        form表单 :优点:简单,前端提交后后台处理完成后直接redirect;
                    缺点:无法显示错误信息
        Ajax提交 : 
            - 有错误,显示错误;无错误,通过js的 location.relad() 刷新页面
            - 有错误,显示错误;无错误,自己局部添加
                  [Jquery的委托绑定 $('父集').on('click','子集',function(){})]
            - 注意后台返回给Ajax的数据以及是字符串[需要转换为JSON]
            - 注释掉settings.py里面的CSRF
    2. 单独页面提交数据(数据多,数据大操作):
        form表单: ..
分页
    Django分页: 有一个类,定义好了方法
    自定义分页:   
        - 数据从数据库来
        -
编辑数据:
    模态对话框: 有一个隐藏ID
        PS:通过for循环和自定义属性实现动态的赋值
    可以根添加用一个对话框,在编辑的时候,需要把内容放在value里,id放入隐藏的标签内,点击提交后提交到编辑的URL
    也可以通过单独的URL来进行编辑,需要动态传值[推荐]

简单讲有2中方式:

数据量小: 对话框  --》判断格式,是否为空

数据量大; 新URL

因为前端浏览器可以禁用,或者不用浏览器来进行后台的数据访问,所以所有的限制最好是在后台进行操作。

 sql:   update tbl set caption='' where id = 1

 orm:  models.Classes.objects.filter(id=1).update(caption='XXX')

删除:
      弹出框 + 获取到ID后删除

[在模态对话框框的删除编辑页面内写一个input来获取当前的ID然后在后台进行删除]

JS有一个绑定事件方法onclick():
Jquery的on,on表示事件委托,点击的时候绑定事件类型然后执行某个函数[3个参数]
    模板左侧菜单:
    注意样式 ,CSS + Content + JS

分页:
    封装成了一个组件然后去操作

文件上传:


XSS:
默认我们从后台反馈的所有字符串都按照字符串进行渲染,防止XSS攻击[比如有人评论我们的博客是,写的是一段JS代码,如果浏览器直接执行此代码的话,我们的页面会奔溃]

xss问题提出:

xss问题解决:

1. 后台控制

2.  前台控制

知识点回顾

1、数据库操作
    - 单表操作
        - all
        - filter  
            models.tb.objects.filter(id=123)           
            dic = {'id': 123, 'age__gt': 3}
            models.tb.objects.filter(**dic)
        - count
        - order_by
        ...
    - 一对多
        # id     name
          1      河北
          2      广东
          3      山东
        class Province(models.Model):
            name = models.CharField(max_length=32,)
            # nid = models.Intergar(unique=True) # 唯一
       
        # id     name      pro
           1     东莞       2
           2     深圳       2
           3     惠州       2
           4     河源       2
           5     泰安       3
           6     青岛       3
           7     济南       3
           8     张家口     1
           9     邢台       1
        class City(models.Model):
            name = models.CharField(max_length=32)
            pro = models.ForeignKey("Province", to_filed='id')
       
        ############故意写错参数字段然浏览器可以告诉我们字段       
        ############正向反向都是根据left join来进行关联的
        1、 正向查找【具有外键字段,3种方式】
            result = models.City.objects.all()     --> 对象.XXX  取值
            result[0].pro.name
            # 2个下划线表示关联下一个表
            models.City.objects.all().values('id','name','pro_id','pro__id','pro__name')    --> 拿到的是字典
            models.City.objects.all().values_list('id','name','pro_id','pro__id','pro__name')  --> 拿到的是元组
        2、反向查找【3种方式】
            result = models.Province.objects.values('id','name', 'city__name')       
            result = models.Province.objects.all()  # 多个数据
            result[0]                  #  获取某个省
          result[0].city_set       #  QuerySet类型. 返回None,因为我们可能获取全部也可以只获取部分
            result[0].city_set.all()   #  获取河北下的所有市 张家口 、邢台
          result[0].city_set.filter(id__lt=4)   #  获取河北下的所有市 张家口 、邢台

for pro in result:
                a1 = pro.id
                a2 = pro.name
                a3 = pro.city_set.all()
                print(a1,a2,a3)
            =====> 多对多即使基于一对多来构造           
    多对多【看1.5/1.6章节内容】
2、cookie,session必须要会
3、分页
4、    def index(request):
        request.POST.get('k')
        # checkbox  --注意name相同,
        # select[multiple]的多选 --name可以不同
        request.POST.getlist('k')    # 获取全部的前台内容   
5、模板语言进行渲染的时候,调用函数不需要带括号()

模版引擎渲染字典

6、包含和不包含的使用:

7、JQuery和DOM对象之间的转换

8、关于实现前台展示教师以及选择的班级:

$('#sel').val()     --> 再开一个select,将这些内容在放入一次

后台取出数据后  --> 再开一个select,将这些内容selected一次

利用DOM的selectedoptions和Jquery的appendTO方法结合

9、模版语言获取数组内容:

10、form表单的onclick

11、三元运算符复习

文件上传

文件上传一:基于Form表单:只要已上传,页面就会刷新

未添加:

添加后:

文件上传位置:

浏览器直接访问:因为Django里面进行了设置,static默认指引到statics目录下

所以我们只需要在数据库内保存文件的路径即可。

【引申】

创建IMG的model,里面有path参数,然后migtations创建数据库

将文件写入本地的同时将路径写入数据库,下次访问的时候取数据库内取数据

<img src="/{{ imgItem }}">

文件上传二:Ajax上传

要求:

悄悄上传文件   [1. xmlHttpRequest对象实现原生Ajax    2.jQuery实现Ajax]

特别推荐:利用FormDate对象来传递数据。

后显示文件内容

文件上传三:基于form表单和iframe自己实现Ajax上传

兼容性好,因为早期的浏览器不支持formdata

其他

代码学习

Python实例---基于页面的后台管理[简单版]的更多相关文章

  1. Vue Admin - 基于 Vue & Bulma 后台管理面板

    Vue Admin 是一个基于 Vue 2.0 & Bulma 0.3 的后台管理面板(管理系统),相当于是 Vue 版本的 Bootstrap 管理系统,提供了一组通用的后台界面 UI 和组 ...

  2. python:页面布局 后台管理页面之常用布局

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  3. 基于iview的后台管理

    年前由于时间紧迫,原本使用iview技术开发后台管理系统的大神另有任务,我中途接手该项目,此前对于iview一无所知的我是一脸的懵逼,好在后台管理的整体框架大神已经搭建好了,而我之前对vue也有一定的 ...

  4. python测试开发django-17.admin后台管理

    前言 通常一个网站开发,需要有个后台管理功能,比如用后台管理发布文章,添加用户之类的操作.django的admin后台管理主要可以实现以下功能 基于admin模块,可以实现类似数据库客户端的功能,对数 ...

  5. 基于vite2+electron12后台管理模板|Electron后台框架系统

    前一溜时间有给大家分享一个 electron+vite跨端短视频 项目.这次分享的是vite2.x和electron实现跨平台后台框架,支持国际化多语言配置.导航菜单+树形菜单两种路由菜单模式.展开/ ...

  6. 基于SpringBoot+SpringDataJpa后台管理

    昨天朋友找我喝酒,说30岁了,比较焦虑,钱没赚到,整天被媳妇数落. 其实现在我们看到的不一定就事真实的情况,就算从高斯分布看,平平淡淡的人生才是大部分人的轨迹.当然抖音.知乎上的不能比,人均收入百万, ...

  7. Linux下开发python django程序(设置admin后台管理上传文件和前台上传文件保存数据库)

    1.项目创建相关工作参考前面 2.在models.py文件中定义数据库结构 import django.db import modelsclass RegisterUser(models.Model) ...

  8. Linux下开发python django程序(设置admin后台管理模块)

    1.新建项目和项目下APP django-admin startproject csvt03 django-admin startapp app1 2.修改settings.py文件 设置默认安装AP ...

  9. ASP.NET MVC 基于页面的权限管理

    菜单表 namespace AspNetMvcAuthDemo1.Models { public class PermissionItem { public int ID { set; get; } ...

随机推荐

  1. Maven仓库汇总

    来源:http://tianya23.blog.51cto.com/1081650/386908 1.maven 仓库地址: 共有的仓库http://repo1.maven.org/maven2/ht ...

  2. 深度学习(一) BP神经网络

    怎样理解非线性变换和多层网络后的线性可分,神经网络的学习就是学习如何利用矩阵的线性变换加激活函数的非线性变换 线性可分: 一维情景:以分类为例,当要分类正数.负数.零,三类的时候,一维空间的直线可以找 ...

  3. java多线程--------深入分析 ThreadLocal 内存泄漏问题

    前言 ThreadLocal 的作用是提供线程内的局部变量,这种变量在线程的生命周期内起作用,减少同一个线程内多个函数或者组件之间一些公共变量的传递的复杂度.但是如果滥用ThreadLocal,就可能 ...

  4. 剑指offer(21-25)编程题

    栈的压入.弹出序列 从上往下打印二叉树 二叉搜索树的后序遍历序列 二叉树中和为某一值的路径 复杂链表的复制 21.输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假 ...

  5. xcopy命令的其他参数

    xcopy /s /e /h "c:\123" "D:\123\" 后面多一个斜杠,让程序知道是目录 以下还给您提供了 xcopy 命令的其他参数: /A 仅复 ...

  6. LINQ操作List<T>

    LINQ操作List<T>主要包括: 1.筛选 List<string> stcdList = stcdArray.ToList<string>() .FindAl ...

  7. android FrameLayout

    FrameLayout:帧布局,可以显示图片的动画效果 前景图像: 永远处于帧布局最顶的,直接面对用户的图像,,就是不会被覆盖的图片 常用属性: android:foreground:设置该帧布局容器 ...

  8. linux ubuntu 学习总结(day01)基本命令学习

    个人总结,请尊重版权,转载请在显眼地方注明出处:https://www.cnblogs.com/sunshine5683/p/9948259.html day(01)基本命令学习 今天开始自学linu ...

  9. HDU 2680(最短路)(多个起始点)

    这道题也是死命TLE.. http://acm.hdu.edu.cn/showproblem.php?pid=2680 /* 使用pair代替结构 */ #include <iostream&g ...

  10. Redis-SDS

    Redis 的简单动态字符串 (simple dynamic string,SDS) SDS的结构: struct sdshdr { int len;  //保存的字符串长度. int free;  ...