用的是vscode
- 新建project:创建一个文件夹,在vscode中cd到文件夹
在当前文件夹下创建通过以下命令,创建了test_ajax2的项目,项目名=文件夹名=test_ajax2
django-admin startproject test_ajax2
- 创建app:cd到项目文件夹下(manage.py所在文件夹)
以下命令创建了名叫app1的app
python manage.py startapp app1
-
设置settings.py
3.1 注册app
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app1.apps.App1Config',
]
加入最后一行:[app名字].[apps.py的名字].[apps.py里的一个class名]
3.2 更改默认数据库为mysql
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql', # 默认
'NAME': 'xxxxxxxx', # 连接的数据库
'HOST': 'localhost', # mysql的ip地址
'PORT': 3306, # mysql的端口
'USER': 'xxxxxx', # mysql的用户名
'PASSWORD': 'xxxxxx' # mysql的密码
}
}
3.3 添加静态文件路径【随便找地方插入下面的代码,注意要import os】
import os
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
同时在app1同级路径下创建static文件夹
文件夹里的内容
- 通过已有数据库创建models
可参考这篇
https://blog.csdn.net/nishino123/article/details/124861766
- 创建form
注意几点:
1.导入model和form,继承forms.modelform
2. Meta类引入model表格
3. 定义fields
4. 定义样式
from attr import field
from app1 import models
from django import forms
class fm1(forms.ModelForm):
class Meta:
model = models.Ytdor
fields = ['region_id','branch_id','lislio_id','kam_id']
def __init__ (self,*args,**kwargs):
super().__init__(*args,**kwargs) #初始化⽗类⽅法
print(self.fields)
for field in self.fields.values():
field.widget.attrs = {'class':'form-control'} #定义样式
field.required = False
- 创建路由
注意要从app1导入views
from django.contrib import admin
from django.urls import path
from app1 import views
urlpatterns = [
path('admin/', admin.site.urls),
path('index/', views.index),
]
- 路由函数
常用的导入:导入form,model,json,render,json_dump
from django.http import HttpResponse
from django.shortcuts import render
from matplotlib.font_manager import json_dump
# Create your views here.
import json
from sympy import Sum
from app1 import forms,models
- html文件
创建templates文件夹,再里面创建html文件
注意几点:- 头文件引入静态文件: {% load static %}
- 样式等参考下面路径写法
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
{% load static %}
<link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
</head>
尾部js引入参考以下
<script src="{% static 'plugins/echarts.min.js'%}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"</script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
- 传数据&ajax
注意几点:- 表单要有{% csrf_token %}
- 表单可以定义post或get方法
- views函数用装饰器@csrf_exempt取消csrf【用ajax会报错】
- model查询条件可传递字models.Ytdor.objects.filter(**dc)
- 聚合函数table.values(‘branch’).annotate(s_ormv=Sum(“ormv”)).values(“branch”,“s_ormv”)【报错了,找到问题再更新】
- 后端可以render往前端传递字典
- 往前端传json数据,可以httpresponse,json_dumps(自典),不要同时传字典和json_dumps.
- 前端接受数据,再js里要{{ |safe}}
- ajax的data是往后端传的数据,可以根据get或post,使用request.POST/GET.get(key)来取得
10.success function(接受的是后端往前传的数据),这里是一个参数,可以随便写,把参数用 JSON.parse(参数)转换一下,变成类似字典对象的形式,可以用点来取值
@csrf_exempt
def index(request):
test_ajax = {"a":1,"b":"2"}
form = forms.fm1()
table_all = models.Ytdor.objects.all()
dc={"region_id":1}
table = models.Ytdor.objects.filter(**dc)
table_sum = table.values('branch').annotate(s_ormv=Sum("ormv")).values("branch","s_ormv")
#oobj = list(table_sum)
#print(oobj)
#test_ajax["data"] = oobj
#print(test_ajax["data"])
if request.method == "GET":
return render(request,"index.html",{"test_ajax":json.dumps(test_ajax),"form":form,'table':table})
else:
print(request.POST.get("front_to_end"))
return HttpResponse(json.dumps(test_ajax))
<div class="container" id="main">
<form method="post">
{% csrf_token %}
{% for field in form%}
<label for="exampleInputName2">
{{field.label}}
</label>
{{field}}
{% endfor%}
<input type="text" name="123" id="ip1">
<input type="button" value="submit" id="btn">
</form>
</div>
<script src="{% static 'plugins/echarts.min.js'%}"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>
<script>
$('#btn').click(
function() {
$.ajax({
url: '',
type: 'POST',
data: {
'front_to_end': "#####front to end"
},
success: function(an_input) {
console.log(an_input);
let obj = JSON.parse(an_input)
$('#ip1').val(obj.a)
}
})
}
)
</script>
- html模板
模板html中可以做标记留位置:
<body>
{% block xxxxxxxxx%}
{% endblock%}
</body>
xxxxxxxxx可以是任意名称
其他html引用这一模板,并填充:
{% extends "tmplt.html"%}
{% block xxxxxxxxxxxx%}
{% endblock %}
可以留多个空
要在开头extend该html文件