1为验证码增加点击刷新功能

1.1 在第三十一行增加ID，便于浏览器调试

  1. <!DOCTYPE html>
  2. {% extends 'base.html' %}
  3. {% load static %}
  4. <html lang="en">
  5. {% block content %}
  6.     <head>
  7.         <meta charset="UTF-8">
  8.         <title>登录</title>
  9.     </head>
  10.     <body>
  11.     <h1>Welcome to Blog of Caesar Tylor</h1>
  12.     <div class="container">
  13.         <div class="row">
  14.             <div class="col-md-6 col-lg-offset-3"> {# 占用六个，右倾 #}
  15.                 <form>  {# action不再定义，基于Ajax提交 #}
  16.                     <div class="form-group">
  17.                         <label for="user">用户名</label>
  18.                         <input type="text" id="user" class="form-control"> {# ID用于Ajax获取信息 #}
  19.                     </div>
  20.                     <div class="form-group">
  21.                         <label for="pwd">密码</label>
  22.                         <input type="password" id="pwd" class="form-control">
  23.                     </div>
  24.                     <div>
  25.                         <label for="pwd">验证码</label>
  26.                         <div class="row">
  27.                             <div class="col-md-6">
  28.                                 <input type="text" class="valid_code form-group">
  29.                             </div>
  30.                             <div class="col-md-6">
  31.                                 <img width="240" height="30" id="valid_code_img" src="/get_validCode_img/">
  32.                             </div>
  33.                         </div>
  34.                     </div>
  35.                     <input type="button" class="pull-right btn btn-default login_btn " value="submit" >
  36.                     {# login_btn用于绑定事件 #}
  37.                 </form>
  38.             </div>
  39.         </div>
  40.     </div>
  41.     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  42.     </body>
  43. {% endblock %}
  44. </html>

1.2 浏览器调试

image.png

1.3 解决静态文件无法加载的问题—-使用官网动态加载

官网地址：https://code.jquery.com/jquery-3.6.0.min.js

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2 如何制作本地连接用于返回资源

1. 首先创建视图，在视图中使用HttpResponse返回数据
2. 制作url链接
3. 然后在HTML中调用资源路径

3 Jquery报错记录

问题分析：无法加载给定资源模板，使用在线链接，由于未进行任何配置，导致出错

(索引):54 Uncaught ReferenceError: $ is not defined

所作努力

1. 关键词检索[jQuery 绑定事件]
2. [绑定事件方法介绍] https://www.w3school.com.cn/jquery/event_click.asp
3. [] https://www.jb51.net/article/121130.htm
4. [平行文本] https://www.cnblogs.com/wj-1314/p/10971846.html

解决办法—-更正错误代码

# 错误代码
<script>
    $("#valid_code_img").click(function(){
      $("this")[0].src+="?"
    })
</script>
# 正确代码
<script>
    $("#valid_code_img").click(function(){
      $(this)[0].src+="?"
    })
</script>

3处理类型错误相关的报错

  File "C:\Users\41999\Documents\projectmanagement\Test\Scripts\whereabouts\blog\views.py", line 28, in get_validCode_img
    valid_code_str+=random_char
TypeError: can only concatenate str (not "int") to str
# 解决方案---类型转换
valid_code_str+=str(random_char)

  File "C:\Users\41999\Documents\projectmanagement\Test\Scripts\whereabouts\blog\views.py", line 13, in login
    if valid_code.upper() == valid_code_str.upper():
AttributeError: 'NoneType' object has no attribute 'upper'
# 处理方法---类型转换
valid_code = str(request.POST.get("valid_code"))

4 WARNING”GET /favicon.ico HTTP/1.1” 404 2682


1. 下载合适的icon文件，放入指定文件夹
2. 在H5的head中引入该图片
    <link rel="shortcut icon" href="{% static 'static/blog/img/favicon.ico' %}" type="image/x-icon">
3. 参考文档
    https://blog.csdn.net/weixin_44727274/article/details/116088904
    https://blog.csdn.net/ainivip/article/details/85597213?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
4. 原理介绍
    https://blog.csdn.net/william_n/article/details/108566567

实现效果

image.png

5 找不着静态文件

image.png

解决方法

找到能够正常访问的静态文件的资源路径，然后发现需要多添加一个/static前缀
image.png

成功解决

image.png

6 反向查询失败

问题描述

1. 用户表中article和articleupdown都与UserInfo关联，分别通过user字段和nid字段
2. 但是由于article设置了related_name属性，所以使用外键关联查询时，就需要使用该属性重写的参数
如果没有重写，那么直接写为article_set即可，前者为表名的小写，后者为查询的数据集，两者用一根下划线连接

表结构

image.png
image.png
image.png

查询语句—-没有该字段

article_list = user.Article_user.all()
# 参考文档
[反向查询] https://docs.djangoproject.com/zh-hans/3.2/topics/db/examples/many_to_one/
[related_name参数] https://docs.djangoproject.com/zh-hans/3.2/topics/db/examples/many_to_one/

补充学习

[过滤器和注解] https://docs.djangoproject.com/zh-hans/3.2/topics/db/aggregation/#filter-and-exclude

7 查询时提醒没有该字段

问题展现

image.png

可能出现问题的model类

image.png

关键知识点

1. 该字段下有两个外键引用，需要借助db_column指定该数据表中的列，当两个外键均指定了类之后
2. 数据就能够通过过滤器正常查找到

8 Ajax绑定事件失效

相关代码

Ajax事件代码

image.png

views.py

image.png

出错原因及解决方案

出错原因：上一个正则匹配的URL规则，对下一个URL截胡，导致Ajax绑定事件的URL一直未能成功触发
解决方案：将URL匹配规则转移到子app中

image.png