?啟動項目命令
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)
