七、Ajax(Django开发)

Ajax(Django开发)

    • 知识点的回顾:
    • 1.Ajax请求
    • 2.订单
    • 小结
    • 3.图表
    • 4.关于文件上传
      • 4.1基本操作
      • 案例:批量上传数据
      • 案例:混合数据(Form)
      • 4.2启用media
      • 案例:混合数据(form)
      • 案例:混合数据(ModelForm)
        • models.py
        • 定义ModelForm
        • 视图
      • 小结

知识点的回顾:

  • 安装Django

    pip install django
    
  • 创建Django项目

    >>> django-admin startproject mysite
    

    注意:Pycharm可以创建。如果Pycharm创建,记得settings.py中的DIR templates删除。

  • 创建app&注册

    >>>python manage.py startapp app01
    >>>python manage.py startapp app02
    >>>python manage.py startapp app03
    
    INSTALLED_APPS = [
        "django.contrib.admin",
        "django.contrib.auth",
        "django.contrib.contenttypes",
        "django.contrib.sessions",
        "django.contrib.messages",
        "django.contrib.staticfiles",
        "app01.apps.App01Config"
    ]
    

    注意:否则app下的models.py写类时,无法在数据库中创建表。

  • 配置静态文件路径&模板的路径(放在app目录下)。

  • 配置数据库相关操作(MySQL)

    • 第三方模块(django3版本)

      pip install mysqlclient
      
    • 自己先去MySQL创建一个数据库。

    • 配置数据库连接settings.py

      DATABASES = {
          'default':
              {
                  'ENGINE': 'django.db.backends.mysql',  # 数据库引擎
                  'NAME': 'gx_day16',  # 数据库名称
                  'HOST': '127.0.0.1',  # 数据库地址,本机 ip 地址 127.0.0.1
                  'PORT': 3306,  # 端口
                  'USER': 'root',  # 数据库用户名
                  'PASSWORD': 'xxxx',  # 数据库密码
              }
      }
      
    • 在app下的models.py中编写

      nfrom django.db import models
      
      
      class Admin(models.Model):
          """ 管理员 """
          username = models.CharField(max_length=32, verbose_name='用户名')
          password = models.CharField(max_length=64, verbose_name='密码')
      
          def __str__(self):
              return self.username
      
      
      class Department(models.Model):
          """ 部门表 """
          title = models.CharField(max_length=32, verbose_name='标题')
      
          def __str__(self):
              return self.title
      
    • 执行两个命令:

      >>>python manage.py makemigrations
      >>>python manage.py migrate
      
  • 在url.py,路由(url和函数的关系)

  • 在views.py,视图函数,编写业务逻辑

  • templates目录,编写HTML模板(含有模板语法、继承、{% static 'xx'%}

  • ModelForm & Form组件,在我们开发增删改查功能

    • 生成HTML标签(生成默认值)
    • 请求数据进行校验
    • 保存到数据库(ModelForm)
    • 获取错误信息
  • Cookie和Session,用户登录信息保存起来

  • 中间件,基于中间件实现用户认证,基于:process_request

  • ORM操作

    models.User.objects.filter(id="xxx")
    models.User.objects.filter(id="xxx").order_by("-id")
    
  • 分页组件

1.Ajax请求

2.订单

在这里插入图片描述

表结构

class Order(models.Model):
    """ 订单 """
    oid = models.CharField(max_length=64, verbose_name='订单号')
    title = models.CharField(max_length=32, verbose_name='名称')
    price = models.IntegerField(verbose_name='价格')

    status_choice = (
        (1, '待支付'),
        (2, '已支付'),
    )
    status = models.SmallIntegerField(choices=status_choice, verbose_name='状态', default=1)
    admin = models.ForeignKey(verbose_name="管理员", to="Admin", on_delete=models.CASCADE)

想要去数据库中获取数据时:对象/字典

# 对象,当前行的所有数据。
row_object = models.Order.objects.filter(id=uid).first()
row_object.id
row_object.title
# 字典,{"id":1,"title":"xx"}
row_dict = models.Order.objects.filter(id=uid).values("id","title").first()
# queryset = [obj,obj,obj]
queryset = models.Order.objects.all()
# queryset = [{"id":1,"title":"xx"},{"id":2,"title":"xx"},]
queryset = models.Order.objects.all().values("id","title")
# queryset = [(1,"xx"),(2,"xx"),]
queryset = models.Order.objects.all().values_list("id","title")

小结

3.图表

  • highchart,国外
  • echarts,国内

在这里插入图片描述

在这里插入图片描述

更多参考文档:https://echarts.apache.org/examples/zh/index.html#chart-type-line

4.关于文件上传

4.1基本操作

{% extends 'layout.html' %}

{% block content %}
    <div class="container">
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="text" name="username">
            <input type="file" name="avatar">
            <input type="submit" name="提交">
        </form>
    </div>
{% endblock %}
# 'username': ['lingze']
print(request.POST)  # 请求体中数据
# {'avatar': [<InMemoryUploadedFile: 1.png (image/png)>]}
print(request.FILES)   # 请求发过来的文件
from django.shortcuts import HttpResponse, render


def upload_list(request):
    if request.method == 'GET':
        return render(request, 'upload_list.html')

    # 'username': ['lingze']
    # print(request.POST)  # 请求体中数据
    # {'avatar': [<InMemoryUploadedFile: 1.png (image/png)>]}
    # print(request.FILES)   # 请求发过来的文件

    file_object = request.FILES.get("avatar")
    print(file_object.name)

    f = open(file_object.name, mode='wb')
    for chunk in file_object.chunks():
        f.write(chunk)
    f.close()

    return HttpResponse("....")


案例:批量上传数据

<form method="post" enctype="multipart/form-data" action="/depart/multi/">
	{% csrf_token %}
	<div class="form-group">
		<input type="file" name="exc">
	</div>
	<input type="submit" value="上传" class="btn btn-info btn-sm">
</form>
def depart_multi(request):
    """ 批量上传(Excel文件)"""
    # 1、获取用户上传的文件对象
    file_object = request.FILES.get('exc')
    print(type(file_object))

    # 2、直接打开Excel并读取内容
    wb = load_workbook(file_object)
    sheet = wb.worksheets[0]

    # 3、循环获取每一行数据
    for row in sheet.iter_rows(min_row=2):
        text = row[0].value
        exists = models.Department.objects.filter(title=text).exists()
        if not exists:
            models.Department.objects.create(title=text)

    return redirect('/depart/list/')

案例:混合数据(Form)

提交页面时:用户输入数据+文件(输入不能为空、报错)。

  • Form生成HTML标签:type=file
  • 表单的验证
  • form.cleaned_data 获取 数据 + 文件对象
{% extends 'layout.html' %}

{% block content %}

    <div class="container">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{{ title }}</h3>
            </div>
            <div class="panel-body">
                <form method="post" enctype="multipart/form-data" novalidate>
                    {% csrf_token %}

                    {% for field in form %}
                        <div class="form-group">
                            <label>{{ field.label }}</label>
                            {{ field }}
                            <span style="color: red">{{ field.errors.0 }}</span>
                        </div>
                    {% endfor %}

                    <button type="submit" class="btn btn-primary">提 交</button>
                </form>
            </div>
        </div>
    </div>

{% endblock %}
from django.shortcuts import HttpResponse, render
from django import forms
from app01.utils.bootstrap import BootStrapForm
import os
from app01 import models


def upload_list(request):
    if request.method == 'GET':
        return render(request, 'upload_list.html')

    # 'username': ['lingze']
    # print(request.POST)  # 请求体中数据
    # {'avatar': [<InMemoryUploadedFile: 1.png (image/png)>]}
    # print(request.FILES)   # 请求发过来的文件

    file_object = request.FILES.get("avatar")
    print(file_object.name)

    f = open(file_object.name, mode='wb')
    for chunk in file_object.chunks():
        f.write(chunk)
    f.close()

    return HttpResponse("....")


class UpForm(BootStrapForm):
    bootstrap_exclude_fields = ['img']
    name = forms.CharField(label="姓名")
    age = forms.IntegerField(label="年龄")
    img = forms.FileField(label="头像")


def upload_form(request):
    title = "Form上传"
    if request.method == 'GET':
        form = UpForm()
        return render(request, 'upload_form.html', {'title': title, 'form': form})

    form = UpForm(data=request.POST, files=request.FILES)
    if form.is_valid():
        # {'name': '吴佩琦2', 'age': 19, 'img': <InMemoryUploadedFile: apple.png (image/png)>}
        # print(form.cleaned_data)

        # 1、读取图片内容,写入到文件夹中并获取文件的路径。
        image_object = form.cleaned_data.get("img")

        db_file_path = os.path.join("static", "img", image_object.name)
        file_path = os.path.join("app01", "static", "img", image_object.name)
        f = open(file_path, 'wb')
        for chunk in image_object.chunks():
            f.write(chunk)
        f.close()

        # 2、将图片文件路径写入到数据库
        models.Boss.objects.create(
            name=form.cleaned_data.get("name"),
            age=form.cleaned_data.get("age"),
            img=db_file_path,
        )

        return HttpResponse("...")
    return render(request, 'upload_form.html', {'title': title, 'form': form})

注意:就目前而言,所有的静态文件都只能放在static目录。

在django的开发过程中两个特殊的文件夹:

  • static,存放静态文件的路径,包括:CSS、JS、项目图片。
  • media,用户上传的数据的目录。

4.2启用media

在urls.py中进行配置:

from django.conf import settings
from django.urls import path, re_path
from django.views.static import serve


re_path(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}, name='media'),

在settings.py中进行配置:

import os

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = "/media/"

在浏览器上访问这个地址:

在这里插入图片描述

案例:混合数据(form)

from django.shortcuts import HttpResponse, render
from django import forms
from app01.utils.bootstrap import BootStrapForm
import os
from app01 import models
from django.conf import settings


def upload_list(request):
    if request.method == 'GET':
        return render(request, 'upload_list.html')

    # 'username': ['lingze']
    # print(request.POST)  # 请求体中数据
    # {'avatar': [<InMemoryUploadedFile: 1.png (image/png)>]}
    # print(request.FILES)   # 请求发过来的文件

    file_object = request.FILES.get("avatar")
    print(file_object.name)

    f = open(file_object.name, mode='wb')
    for chunk in file_object.chunks():
        f.write(chunk)
    f.close()

    return HttpResponse("....")


class UpForm(BootStrapForm):
    bootstrap_exclude_fields = ['img']
    name = forms.CharField(label="姓名")
    age = forms.IntegerField(label="年龄")
    img = forms.FileField(label="头像")


def upload_form(request):
    title = "Form上传"
    if request.method == 'GET':
        form = UpForm()
        return render(request, 'upload_form.html', {'title': title, 'form': form})

    form = UpForm(data=request.POST, files=request.FILES)
    if form.is_valid():
        # {'name': '吴佩琦2', 'age': 19, 'img': <InMemoryUploadedFile: apple.png (image/png)>}
        # print(form.cleaned_data)

        # 1、读取图片内容,写入到文件夹中并获取文件的路径。
        image_object = form.cleaned_data.get("img")

        # media_path = os.path.join(settings.MEDIA_ROOT, image_object.name)
        media_path = os.path.join("media", image_object.name)
        # db_file_path = os.path.join("static", "img", image_object.name)
        # file_path = os.path.join("app01", "static", "img", image_object.name)
        f = open(media_path, 'wb')
        for chunk in image_object.chunks():
            f.write(chunk)
        f.close()

        # 2、将图片文件路径写入到数据库
        models.Boss.objects.create(
            name=form.cleaned_data.get("name"),
            age=form.cleaned_data.get("age"),
            img=media_path,
        )

        return HttpResponse("...")
    return render(request, 'upload_form.html', {'title': title, 'form': form})

案例:混合数据(ModelForm)

models.py
class City(models.Model):
    """ 老板 """
    name = models.CharField(max_length=32, verbose_name='名称')
    count = models.IntegerField(verbose_name='人口')

    # 本质上数据库也是ChartField,自动保存数据。
    img = models.FileField(max_length=128, verbose_name='Logo', upload_to='city/')
定义ModelForm
from app01.utils.bootstrap import BootStrapForm, BootStrapModelForm

class UpModelForm(BootStrapModelForm):
    bootstrap_exclude_fields = ['img']

    class Meta:
        model = models.City
        fields = '__all__'
视图
def upload_modal_form(request):
    """ 上传文件和数据(ModalForm)"""
    title = "ModelForm上传文件"
    if request.method == 'GET':
        form = UpModelForm()
        return render(request, 'upload_form.html', {'form': form, 'title': title})

    form = UpModelForm(data=request.POST, files=request.FILES)
    if form.is_valid():
        # 对于文件:自动保存
        # 字段 + 上传路径写入到数据库
        form.save()
        return HttpResponse("成功")
    return render(request, 'upload_form.html', {'form': form, 'title': title})

小结

  • 自己手动去写

    file_object = request.FILES.get("exc")
    ...
    
  • Form组件(表单验证)

    request.POST
    file_object = request.FILES.get("exc")
    
    具体文件操作还是手动自己做。
    
  • ModelForm(表单验证+自动保存数据库+自动保存文件)

    - Media文件夹
    - Models.py定义类文件要
    	img = models.FileField(verbose_name="Logo", max_length=128, upload_to='city/')
    

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/525791.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

探索 Java 网络爬虫:Jsoup、HtmlUnit 与 WebMagic 的比较分析

1、引言 在当今信息爆炸的时代&#xff0c;网络数据的获取和处理变得至关重要。对于 Java 开发者而言&#xff0c;掌握高效的网页抓取技术是提升数据处理能力的关键。本文将深入探讨三款广受欢迎的 Java 网页抓取工具&#xff1a;Jsoup、HtmlUnit 和 WebMagic&#xff0c;分析…

Jackson 各种注解使用示例

参考资料 Jackson使い方メモ 目录 一. JsonIgnore二. JsonIgnoreProperties三. JsonProperty3.1 作用于entity属性上&#xff0c;指定json对象属性名3.2 作用于entity方法上&#xff0c;指定json对象属性名 四. JsonFormat4.1 日期格式化4.2 数字格式化4.3 枚举类返回code 五.…

Cortex-M4架构

第一章 嵌入式系统概论 1.1 嵌入式系统概念 用于控制、监视或者辅助操作机器和设备的装置&#xff0c;是一种专用计算机系统。 更宽泛的定义&#xff1a;是在产品内部&#xff0c;具有特定功能的计算机系统。 1.2 嵌入式系统组成 硬件 ①处理器&#xff1a;CPU ②存储器…

JSBridge原理 - 前端H5与客户端Native交互

1. 概述&#xff1a; 在混合应用开发中&#xff0c;一种常见且成熟的技术方案是将原生应用与 WebView 结合&#xff0c;使得复杂的业务逻辑可以通过网页技术实现。实现这种类型的混合应用时&#xff0c;就需要解决H5与Native之间的双向通信。JSBridge 是一种在混合应用中实现 …

【r-tree算法】一篇文章讲透~

目录 一、引言 二、R-tree算法的基本原理 1 数据结构 2 插入操作 3 删除操作 4 查询操作 5 代码事例 三、R-tree算法的性能分析 1 时间复杂度 2 空间复杂度 3 影响因素 四、R-tree算法的变体和改进 1 R*-tree算法 2 X-tree算法 3 QR-tree算法 五、R-tree算法的…

前端| 富文本显示不全的解决方法

背景 前置条件&#xff1a;编辑器wangEditor vue项目 在pc端进行了富文本操作&#xff0c; 将word内容复制到编辑器中&#xff0c; 进行发布&#xff0c; pc端正常&#xff0c; 在手机端展示的时候 显示不全 分析 根据h5端编辑器内容的数据展示&#xff0c; 看到有一些样式造…

【任推邦新悟空网盘拉新】八款地推网推新项目,周期稳定,受众广!

现在地推网推新项目打得火热&#xff0c;尤其是夸克网盘&#xff0c;地推网推新流程其实很简单&#xff0c;简单来说就是就是给项目增加新用户&#xff0c;每邀请一个新用户注册&#xff0c;你就能得到收益&#xff0c;下面小推给大家整理了一份好推的项目&#xff0c;希望能够…

C++:类与对象(一)

hello&#xff0c;各位小伙伴&#xff0c;本篇文章跟大家一起学习《C&#xff1a;类与对象&#xff08;一&#xff09;》&#xff0c;感谢大家对我上一篇的支持&#xff0c;如有什么问题&#xff0c;还请多多指教 &#xff01; 文章目录 面向对象和面向过程的区别1.类的引入2.…

【java面试题-Redis篇-2024】

##java面试题大全 详细面试题-持续更新中-点击跳转 点赞、收藏、加关注 java基础面试题 ##java面试题大全1、什么是 Redis2、Redis 的数据结构类型3、Redis 为什么快4、什么是跳跃表5、什么是 I/O 多路复用6、什么是缓存击穿、缓存穿透、缓存雪崩7、什么是布隆过滤器8、热…

webpack5如何关闭全屏错误

1、找到vue.config.js 2、在上面的devServer里面添加如下&#xff1a; client: {overlay: false, // 禁用全局错误提示},

写出好代码的底层逻辑

写出好代码的底层逻辑 程序员安身立命的手艺就是写代码&#xff0c;可多少人知道如何才能写出好的代码呢&#xff1f;这几年也做过很多次的代码 CR&#xff0c;可好代码的标准在哪里呢&#xff1f;我们在做 CR 的时候&#xff0c;其实只是停留在代码的表面&#xff0c;主要是跟…

Godot插值、贝塞尔曲线和Astar寻路

一、插值 线性插值是采用一次多项式上进行的插值计算&#xff0c;任意给定两个值A和B&#xff0c;那么在A和B之间的任意值可以定义为&#xff1a;P(t) A * (1 - t) B * t&#xff0c;0 < t < 1。 数学中用于线性拟合&#xff0c;游戏应用可以做出跟随效果&#xff08;…

keycloak - 鉴权VUE

目录 一、前言 1、背景 2、实验版本 二、开始干活 1、keycloak配置 a、创建领域(realms) b、创建客户端 c、创建用户、角色 2、vue代码 a、依赖 b、main.js 三、未解决的问题 目录 一、前言 1、背景 2、实验版本 二、开始干活 1、keycloak配置 a、创建领域(r…

VMware Esxi安装群辉系统

群晖的网络存储产品具有强大的操作系统&#xff0c;提供了各种应用程序和服务&#xff0c;包括文件共享、数据备份、多媒体管理、远程访问等。用户可以通过简单直观的界面来管理他们的存储设备&#xff0c;并且可以根据自己的需求扩展设备的功能。总的来说&#xff0c;群晖的产…

概念科普|大模型它到底是什么?

一、引言 ChatGPT、Open AI、大模型、提示词工程、Token、幻觉等人工智能的黑话&#xff0c;在2023年这个普通却又神奇的年份里&#xff0c;反复的冲刷着大家的认知。让一部分人彻底躺平的同时&#xff0c;让另外一部分人开始焦虑起来&#xff0c;生怕在这个人工智能的奇迹之年…

鸡乐盒网页版

前端时间鸡乐盒比较火&#xff0c;当时跟着做了一款鸡乐盒&#xff0c;同时拥有聊天以及音乐播放器功能 链接&#xff1a; 鸡乐盒https://www.jaron.top/app/xiana/pages/musicBox/musicBox

C语言---浮点数在内存中的存储

前面跟大家介绍了整数在内存中的存储&#xff0c;这次再向大家介绍下浮点数在内存中的存储。 我们常见的浮点数有3.14&#xff0c;1E10 等等&#xff0c;浮点数家族包括float&#xff0c;double&#xff0c;long double类型。 浮点数的表示范围在头文件 float.h 定义。 1.浮…

代码随想录算法训练营第二十九天(回溯5)|491. 非递减子序列、46. 全排列、47. 全排列 II(JAVA)

文章目录 491. 非递减子序列解题思路源码 46. 全排列解题思路源码 47. 全排列 II解题思路源码 总结 491. 非递减子序列 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 …

探索未来游戏:生成式人工智能AI如何重塑你的游戏世界?

生成式人工智能&#xff08;Generative AI&#xff09;正以前所未有的速度改变着各行各业的运作模式。其中&#xff0c;游戏产业作为科技应用的前沿阵地&#xff0c;正经历着前所未有的变革。本文将探讨生成式人工智能如何重塑游戏产业&#xff0c;以及这一变革背后的深远影响。…

博士推荐 | 拥有超过10年的数据解决方案经验,数据驱动的决策者

编辑 / 木子 审核 / 朝阳 伟骅英才 伟骅英才致力于以大数据、区块链、AI人工智能等前沿技术打造开放的人力资本生态&#xff0c;用科技解决职业领域问题&#xff0c;提升行业数字化服务水平&#xff0c;提供创新型的产业与人才一体化服务的人力资源解决方案和示范平台&#x…