环境:
Python 3.6.4
Django 1.8.2
用上面的环境遭遇了以下两项错误:
1.AttributeError: module 'html.parser' has no attribute 'HTMLParseError'
这是因为HTMLParseError在pythons3.5已经没有了,需要将python版本回退到3.3或3.4。
2.str' object has no attribute 'resolve
这是因为django1.8以上的版本,在配置urls.py文件时,使用的是正则表达式替换原来的patterns。
原来的是这样的
urlpatterns = patterns('', (r'^$', direct_to_template, {'template' : 'a.html'}), # ...
1.8以后的变成这样的了。
urlpatterns = [ (r'^$', direct_to_template, {'template' : 'a.html'}), ... ]
3.django 1.7使用的是def __str__(self),如果是使用def __unicode__(self)的,还要退回以前更低的版本。
所以将环境退回:
Python 3.4
django 1.7.2
一、虚拟环境
在Anaconda的base环境下,执行conda create -n xx命令建立的虚拟环境。然后使用命令激活它。使用pip命令安装Django。
conda create -n select python=3.4
conda activate select
pip install -i https://pypi.douban.com/simple/ Django==1.7.2
二、创建项目及应用
django-admin startproject ajaxselect
cd ajaxselect
python manage.py startapp djmenu
并将djmenu添加到setting.py的INSTALLED_APPS里面。
三、数据库
修改djmenu/models.py,加入models。
class Province(models.Model): name = models.CharField(max_length=30) def __str__(self): return self.name #城市表 class City(models.Model): name = models.CharField(max_length=40) province = models.ForeignKey(Province) def __str__(self): return self.name #这个主要是用来显示,选择的结果 class SelectP(models.Model): province = models.ForeignKey(Province) city = models.ForeignKey(City)
并通过以下两条命令生成数据库。
python manage.py makemigrations polls
python manage.py migrate
四、forms.py
在models.py的同级目录,建立forms.py文件,内容如下:
from django import forms from .models import SelectP class SelectForm(forms.ModelForm): class Meta: model = SelectP fields = '__all__'
五、后台
admin.py文件
from .models import Province,City # Register your models here. admin.site.register(Province) admin.site.register(City)
再使用python manage.py createsuperuser设定后台的账号,密码,再运行python manage.py runserver
六、视图
views.py文件
from django.shortcuts import render_to_response, get_object_or_404, redirect, urlresolvers, RequestContext from django.core import serializers from django.http import HttpResponse from .models import Province, SelectP from .forms import SelectForm # Create your views here. #获取首页 def index(request): if request.method == 'POST': form = SelectForm(request.POST) if form.is_valid(): form.save() return redirect(urlresolvers.reverse('select_index')) else: return HttpResponse('error') else: pro = Province.objects.all() se = SelectP.objects.all() return render_to_response('djmenu/index.html', {'province':pro,'select':se}, context_instance=RequestContext(request)) #ajax获取数据 def getdata(request): pk = request.GET['pk'] province = get_object_or_404(Province, pk=pk) citys = province.city_set.all() data = serializers.serialize('json', citys) return HttpResponse(data, content_type='application/json')
七、配置url
urlpatterns = patterns('djmenu.views', url(r'^index/$', 'index', name='select_index'), url(r'^getdata/$', 'getdata', name='getdata'), url(r'^admin/', include(admin.site.urls)) )
八、模板
创建djmenu/templates/djmenu/目录,在该目录下创建index.html。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{% block title %}{% endblock %}</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css"> <script src ="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src = "https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="http://malsup.github.io/jquery.form.js"></script> </head> <body> <form class="form-horizontal" action="{% url 'select_index' %}" method="post"> {% csrf_token %} <div class="form-group"> <label for="id_province" class="control-label">选择省市</label> <select class="form-control" id="id_province" name="province"> <option selected="selected">请选择</option> {% for foo in province %} <option value="{{ foo.id }}">{{ foo.name }}</option> {% endfor %} </select> </div> <div class="form-group"> <label for="id_city" class="control-label">选择城市</label> <select class="form-control" id="id_city" name="city"> <option selected="selected">请选择</option> </select> </div> <div class="form-group"> <input type="submit" value="提交"> </div> </form> <table class="table table-bordered"> <thead> <tr> <th>省</th> <th>市</th> </tr> </thead> <tbody> {% for foo in select %} <tr> <td>{{ foo.province.name }}</td> <td>{{ foo.city.name }}</td> </tr> {% endfor %} </tbody> </table> <script> $('#id_province').change(function(){ var id = $('#id_province').val(); $.getJSON("{% url 'getdata' %}?pk="+id, function(data,textStatus){ var content=''; $.each(data, function(i, item){ content+='<option value='+item.pk+'>'+item.fields.name+'</option>' }); $('#id_city').html(content) }); }); </script> </body> </html>
在这里,使用{% url 'select_index' %}这样的形式,其实select_index就是对应urls.py中的index/这个url的名称。
九、添加数据
进入后台,添加相关省份、城市的数据。
十、成果展示
上方选择省份、城市之后,点击“提交”按钮,就可以看到刚刚选择的城市出现在最下方。
进入数据库,可以看到保存的选择信息。
十一、修改样式
将其中的
<form class="form-horizontal" action="{% url 'select_index' %}" method="post">
改成:
<form class="form-inline" action="{% url 'select_index' %}" method="post">
则样式会变成这样:
后记:本来打算1小时弄完的东西,到最后完工花了差不多4小时,时间管理啊!
作者:蜗牛博客