Django网页开发遇到的问题
1.Django后台样式缺失
a.修改
E:\1softwareinstall\python3.7.2\Lib\site-packages\django\contrib\admin\templates\admin
路径下的base.html文件(可能python的版本不一样site-packages后会有点不同，但只要找到contrib就可以)
b.去掉base.html中的<!DOCTYPE html>头部声明。
2.models.py
- str returned non-string (type int)
cause------------str返回的是空string.
造成的原因是：
def __str__(self):
return self.Id
self.Id可能是在创建一条表的信息记录的时候设置的是自动生成的，所以是空的
- List item
3.Templates(网页问题)
1.js乱码问题
<ul id="kwdTypeSelUl">
<li>全文</li>
<li><a href="javascript:void(0);" onclick="kwdtypeChangeResult(1);">公司</a></li>
</ul>
乱码效果图
网页不在Django中运行是正常的，但是在Django中运行时和kwdTypeSelUl相关的js代码中的汉字乱码。这可能是因为原网页是GBK,但是在Django中我们的Pycharm编辑器是Utf-8所以导致了网页代码有些成为乱码。最简单的做法就是：
黏贴原网页代码，然后复制到Django这个网页中。
4.Javascript
1.可以作为弹窗
document.getElementById("demo").innerHTML=‘ My “ First ” JavaScript’;
如果嵌入代码中有双引号而且很多，那最外层就用单引号
2.使用$ajax时 出现 $ is not defined问题
在你的HTML网页中引入jQuery.js就可以了。
<script language="javascript" src="{% static 'js/jquery.js'%}"></script>
3 在views.py中将从数据库中读取的数据以json形式传递数据到js
# 求职意向
def index(request):
JobIList = [] #定义存放数据de的列表
JobI = JobIntention.objects.all()#获取数据库中的数据（一种对象的数据存储形式）
for JJ in JobI.values_list(): # 返回的是一个列表每一个记录是一个单个，，可以通过
JobIList.append(list(JJ))#将数据记录逐个添加到列表当中
ContextJobI = {"JobIJS": json.dumps(JobIList)}
return render(request, 'text.html',Context )
在数据表中如果存在时间格式（datatime）的数据，会报错如下。更改为CharField型的
其他类型（图片）还未验证。但是向int,char都是可以的。
TypeError: Object of type datetime is not JSON serializable
4.Ajax从JS中传递数据到views.py以及从Views.py后台传递数据到JS文件中
JS代码为：
$.ajax({
url:"login",
data : {"name":"1.1.1.1"},
type: "POST",
success: function (data) {
alert(data["name"]);
}})
Views.py代码为：
from django.http import HttpResponse #这个很重要
def login(request):
if request.method == 'POST':
# 直接获取所有的post请求数据
data = request.POST
# 获取其中的某个键的值
name = request.POST.get('name')
print(data)
print(name)
# 将前端传来的数据再次传回前端，只是为了测试
return HttpResponse(json.dumps({"name":name}), content_type="application/json")
#这个是将数据传到js文件当中了，之后会讲述一种将json形式数据传到网页中，方便对js事件进行字符串传参
# return HttpResponse(image_data,content_type="image/png") #返回照片
urls.py代码为：
url(r'^login$', login),
中间可能接收不到数据的原因为：
>报错"CSRF token missing or incorrect."的解决方法.
>在setting.py注释掉如下：
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware', #去掉crsf警告
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
5 urls.py
- 关于网页地址参数和urls.py的书写
网页：
<form action="search/?id=1" name="searchForm" method="post" autocomplete="off">
</form>
urls.py:
url(r'^search/$',search),
后面一定要加个斜杆
view.py
print(request.GET["id"])
获取了网页的id参数。request.GET["id"]是以字典的形式
print(request.GET)
<QueryDict: {'id': ['1']}>
6.views.py如何根据外键进行多表查询
1省表 Prov ：pid,pro,(冒号后面是表的属性)
2城市表 City ：cid,ci,
对应关系是：省和市：一对多的关系，
cid= models.ForeignKey(Prov , on_delete=models.CASCADE) # 外键
建立查询
result= models.city .objects.select_related('cid').all()
这个要注意，括号里面要有外键，否则查不出来
直接将这个result返回HTML网页就可以正常的按照{% for re in result %}...使用了
在views.py的访问方式如下：
for re in City:
print(re.cid.pro, re.ci )#第一个是访问的Prov表（注意：通过cid访问的），第二个是访问的City表
7.Django模板的使用（if）
{% for SpeS in SpeS %}
{% if SpeS.Degree == "精通" %}
<p> {{ SpeS.Degree }} </p>
{% elif SpeS.Degree == "熟练" %}
<p> {{ SpeS.Degree}} </p>
{% endif %}
{% endfor %}
==注意：1. if里面是不带大括号的
==注意：2. if里面的
==两边要有空格，否则注意，html里面的字段，要和数据库保持一致，有时候，models 和数据库不一样，比如说外键。
8.Django上传文件
settings.py 代码 （注意这里要手动添加文件media（和templates同级目录），如果不手动添加，只有你上传文件的时候，才会自动创建media)
#配置全局的上传路径
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
modle.py 代码
ar= models.FileField(upload_to="File", max_length=128,blank=True) # 附件上传//指定下载路径
#这个upload_to路径是上面media的下一级子目录（/media/File/）另外如果加上upload_to="File",之后存储路径就是File/**.png,如果不加，那么存储的路径只有文件名。
urls.py(大括号最后加下面这句话)
[ ]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
views.py 非常重要：注意这个不是POST:
ObJobE.Picture = request.FILES.get("Picture")
并且容易犯一个错误：TypeError: 'method' object is not subscriptable，大部分是因为括号错了，比如get[ ]就会报错，应该get（）
另外一个重要的request.FILES一直是空的，这就要在在form标签里要加上
enctype="multipart/form-data
最后的存储结果是文件的路径
9.JS实现点击查看按钮在弹窗里面显示已经存储的图片
（1）第一种方法
html中的查看按钮，点击查看触发下面的事件
<a href="javascript:void(0)" onclick="viewPicture()">查看></a>
<div id="preview" style="position: absolute;z-index: 1000;left:40%;top:50px"></div>
function viewPicture(){//显示图片功能
document.getElementById("preview").innerHTML=' '+
'<img style="margin-left:80px;margin-top:50px;width=400px"height="400" src=”/media/File/22.png“>'
'<span class="p_but" onclick=cep()>关闭</span>';
}
function cep(){//关闭功能
document.getElementById("preview").innerHTML=" ";
}
注意，这两个 document.getElementById(“preview”)，preview是html里面的id，整句的意思就是在下面这个以preview为id的div标签中，插入等号后面的html语言。
<div id="preview" style="position: absolute;z-index: 1000;left:40%;top:50px"></div>
如果想整漂亮，还需要去学其他的，这只是我自己想的最简单的实现思路。至于如何将数据库中图片的路径传到JS当中，我在上面有介绍。
（2）第二种方法
在JS事件中写
window.open("/media/File/2.png");括号里面代表着图片的路径，实现效果是将另打开一个网页显示图片。
10.JS实现上传图片的时候预览图片以及如何点击图片实现上传的最简单的实现方式
1.点击图片框上传图片
<input name="Picture" id="imgsrc" type="file"
style="opacity: 0;
width:80px;height:100px;margin-left:20px;
position: absolute;z-index: 1000;left:-20px;top:0px" value=" ">
解释style:中间的一行是input输入框的大小，自己调成大概和你图片输入框一样大；最后一行Position是相对你标签中的绝对地址，调成你图片输入框的位置。这样是不是覆盖住原来的图片了，是吧；最后一步，是第一句opacity：0就是对整个输入框和按钮进行透明。OK，结束。
整体的思路还是使用input进行上传文件，只不过是隐身了，让人们误以为点的是图片，哈哈哈哈。
2.图片能够上传了，可是如何实现实时预览那，(这个是抄的一个大神的，找了好久哦)
https://www.cnblogs.com/jiangxiaobo/p/6889250.html
JS代码：
function readAsDataURL(){
//检验是否为图像文件
var file = document.getElementById("file").files[0];
if(!/image\/\w+/.test(file.type)){
alert("看清楚，这个需要图片！");
return false;
}
var reader = new FileReader();
//将文件以Data URL形式读入页面
reader.readAsDataURL(file);
reader.onload=function(e){
var preview=document.getElementById("preview");
//显示文件
preview.innerHTML='<img src=" ' +this.result+ ' " />;
}
}
HTML代码：：
<input name="Picture" id="file" type="file" value=” “> //上传图片
<span id="pat" onclick="readAsDataURL();">修改</span> //点击后运行js
<div id="preview" name="preview"></div> //显示图片
11.背景如何调成透明色，适合所有控制颜色的控件
在style中添加如此样式
background-color:rgba(255,255,55,.34)注意最后一个数是个小数，自己可以调一下最后一个数的大小，以此改变透明度。
12.JS一些很有用的代码
var a=document.getElementById("imgsrc");
var b=document.getElementById("imgsrc").value; //获取控件value的值
document.getElementById("imgsrc").classList.add("sl"); //添加class的样式
document.getElementById("imgsrc").classList.remove("sl"); //删除class的样式
var c=document.getElementById("imgsrc").innerHTML; //获取双标签元素之间的值
document.getElementById("imgsrc").innerHTML=” “; //清楚id=imgsrc之间的代码，可以相当于异步刷新
document.getElementById("imgsrc").innerHTML=”<h1>在此插入代码</h1>“;//插入html代码
接下来的一些引用：https://www.cnblogs.com/shuilangyizu/p/6019498.html
下方代码功能是：执行该控件之后在<img id="pat">，添加src=" "，
$(document).ready(function(){
$("#pat").click(
function(){
$("img").attr("src","/media/File/2.npg");
});
});
$是jquery库的申明，它很不稳定,换一种稳定的写法:jQuery(document).ready(function(){});
$("div p"); // (1)得到所有<div>标签下的<p>元素
$("div.container"); // (2)得到class 为container的<div>元素
$("div #msg"); // (3)得到<div>标签下面id为msg的元素
$("table a",context); // (4)得到context为 上下文的table里面所有的连接元素
$("#myId"); //(5)得到id为myid的所有元素
window.onload = function(){ alert("welcome"); } //在页面加载完，自动执行定义js代码（function）。
$(document).ready(function(){.... }) //这个函数是用来取代页面中的window.onload;
Javascript 只有在DOM元素已经定义以后才可以对其执行某种操作，jQuery使用document.ready来保证所要执行的代码是在DOM元素被加载完成的情况下执行。
确保在 元素的onload事件中没有注册函数，否则可能不会触发$(document).ready()事件。
13.Mysql
django.core.exceptions.ImproperlyConfigured: mysqlclient 1.3.3 or newer is required; you have 0.7.11.None
No module named ‘MySQLdb’
9334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
