启动项目命令
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.Cityfields = "__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 JsonResponsedef 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)
