Django学习收尾

 启动项目命令

python manage.py runserver

文件上传功能实现

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

    form = UpForm(data=request.POST, files=request.FILES)
    if form.is_valid():
        print(form.cleaned_data)

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

        # file_path = "app01/static/img{}".format(image_object.name)
        media_path = os.path.join("media", image_object.name)

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

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

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

混合数据（ModalForm)

models.py

class City(models.Model):
    """ 城市 """
    name = models.CharField(verbose_name="名称", max_length=32)
    count = models.IntegerField(verbose_name="人口")

    # 本质上数据库也是CharField,自动保存数据。
    img = models.FileField(verbose_name="Logo", max_length=128)

upload.py

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

    class Meta:
        model = models.City
        fields = "__all__"


def upload_modal_form(request):
    """ 上传文件和数据 """
    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})

实现方式

1.自己手动去写

file_object = request.FILES.get("exc")
...

2.Form组件(表单验证) 具体文件操作还是手动自己做

request.POST
file_object = request.FILES.get("exc")

3.ModelForm(表单验证 + 自动保存数据库 + 自动保存文件)

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

echarts学习

怎么调用后台数据，使用ajax请求

chart_list.html

{% extends 'layout.html' %}

{% block content %}
<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">折线图</div>
        <div class="panel-body">
            <div id="m1" style="width: 600px;height:400px;"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-7">
            <div class="panel panel-default">
                <div class="panel-heading">柱状图</div>
                <div class="panel-body">
                    <div id="m2" style="width: 100%;height:400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-sm-5">
            <div class="panel panel-default">
                <div class="panel-heading">饼图</div>
                <div class="panel-body">
                    <div id="m3" style="width: 600px;height:400px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block js %}
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
<script type="text/javascript">
    $(function() {
        initBar();
    });

    function initBar() {
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('m2'));

        // 初始的图表配置项
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data: []
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: []
        };

        // 发起ajax请求获取数据
        $.ajax({
            url: "/chart/bar/",
            type: "GET",
            dataType: "json",
            success: function(res) {
                // 如果请求成功，更新图表数据
                if (res.status) {
                    option.legend.data = res.data.legend; // 更新图例数据
                    option.xAxis.data = res.data.x_axis; // 更新X轴数据
                    option.series = res.data.series_list; // 更新系列数据

                    // 使用更新后的配置项显示图表
                    myChart.setOption(option);
                }
            },
            error: function(xhr, status, error) {
                console.error('AJAX请求出错:', status, error);
                // 在实际项目中可能需要处理错误情况
            }
        });
    }
</script>
{% endblock %}

chart.py

from django.shortcuts import render
from django.http import JsonResponse


def chart_list(request):
    """ 数据统计页面 """
    return render(request, 'chart_list.html')


def chart_bar(request):
    """ 构造柱状图的数据 """
    legend = ["张三", "李四"]
    series_list = [
        {
            "name": '张三',
            "type": 'bar',
            "data": [5, 20, 36, 10, 10, 20]
        },
        {
            "name": '李四',
            "type": 'bar',
            "data": [5, 20, 36, 10, 10, 20]
        },
    ]
    x_axis = ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']

    result = {
        "status": True,
        "data": {
            'legend': legend,
            'series_list': series_list,
            'x_axis': x_axis,
        }
    }
    return JsonResponse(result)