Django实践-04静态资源和Ajax请求

简介: Django实践-04静态资源和Ajax请求

image.png


Django实践-04静态资源和Ajax请求


官网:https://www.djangoproject.com/

博客:https://www.liujiangblog.com/

git:https://gitcode.net/mirrors/jackfrued/Python-100-Days


Django静态文件问题备注:

参考:

Django测试开发-20-settings.py中templates配置,使得APP下的模板以及根目录下的模板均可生效

解决django 多个APP时 static文件的问题


django配置app中的静态文件步骤


Django多APP加载静态文件


django.short包参考:https://docs.djangoproject.com/en/4.1/topics/http/shortcuts/


Django实践-04静态资源配置


创建静态资源目录

在djangoproject项目中,我们将静态资源置于名为static的文件夹中,在该文件夹包含了三个子文件夹:css、js和images,分别用来保存外部CSS文件、外部JavaScript文件和图片资源,如下图所示。

c95c4b693772218e6c90cdcfbfabc09f_2fa2e39d63e440d9875958cf8da5d316.png


准备一个叫甲1.jpg的图片,放在images目录下。


修改settings.py文件

为了能够找到保存静态资源的文件夹,我们还需要修改Django项目的配置文件settings.py,如下所示:


STATIC_URL = 'static/'
# 指定静态文件的存放路径,新增部分
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'static'),
    os.path.join(BASE_DIR),
]

Django实践-04用Ajax实现投票功能

修改项目的urls.py文件

下面,我们使用Ajax技术来实现投票的功能,首先修改项目的urls.py文件,为“好评”和“差评”功能映射对应的URL。


from django.contrib import admin
from django.urls import path
from django.contrib import admin
from django.urls import path
from polls import views as polls_views
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', polls_views.show_subjects),# 学科首页
    path('teachers/', polls_views.show_teachers), # 教师
    path('praise/', polls_views.praise_or_criticize), # 本部分新增 好评
    path('criticize/', polls_views.praise_or_criticize),# 本部分新增 差评
]

修改polls/views.py文件

设计视图函数praise_or_criticize来支持“好评”和“差评”功能,该视图函数通过Django封装的JsonResponse类将字典序列化成JSON字符串作为返回给浏览器的响应内容。


from django.http import JsonResponse
def praise_or_criticize(request):
    """好评"""
    try:
        tno = int(request.GET.get('tno'))
        teacher = Teacher.objects.get(no=tno)
        if request.path.startswith('/praise'):
            teacher.good_count += 1
            count = teacher.good_count
        else:
            teacher.bad_count += 1
            count = teacher.bad_count
        teacher.save()
        data = {'code': 20000, 'mesg': '操作成功', 'count': count}
    except (ValueError, Teacher.DoseNotExist):
        data = {'code': 20001, 'mesg': '操作失败'}
    return JsonResponse(data)

修改显示老师信息的模板页polls/teachers.html

为便于按照博客练习,页面已经一次性写好,内容如下:

参考:Django实践-03模型-01表生成模型+学科页面与教师页面编写


总结


本文主要是Django系列博客。本文是Django静态资源与Ajax请求示例。

1.创建静态资源目录

2.配置settings.py文件

3.修改urls.py文件

4.修改views.py文件

5.修改teachers.html文件

相关文章
|
3月前
|
存储 缓存 NoSQL
深入理解Django与Redis的集成实践
深入理解Django与Redis的集成实践
98 0
|
2月前
|
XML 前端开发 JavaScript
|
21天前
|
JSON 前端开发 JavaScript
Python中如何判断是否为AJAX请求
AJAX请求是Web开发中常见的异步数据交互方式,允许不重新加载页面即与服务器通信。在Python的Django和Flask框架中,判断AJAX请求可通过检查请求头中的`X-Requested-With`字段实现。Django提供`request.is_ajax()`方法,Flask则需手动检查该头部。本文详解这两种框架的实现方法,并附带代码示例,涵盖安全性、兼容性、调试及前端配合等内容,帮助开发者提升Web应用性能与用户体验。
36 0
|
2月前
|
SQL 监控 数据库
深入探索Django ORM:高效数据操作的秘诀与实践####
在当今的Web开发领域,提升数据访问层的效率是优化应用性能的关键。本文旨在通过剖析Django框架中的ORM(对象关系映射)机制,揭示其如何简化数据库交互,并探讨一系列高级技巧与策略,帮助开发者构建更高效、可维护的数据访问代码。我们不涉及安装步骤或基础概念,而是聚焦于实战经验分享,旨在为中高级开发者提供深度洞见。 ####
|
3月前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
77 22
|
3月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
47 18
|
3月前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
104 4
|
3月前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
159 1
|
4月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
40 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
4月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。