django中模板与数据绑定

1、在settings中的INSTALLED_APPS配置当前app,不然django无法找到自定义的simple_tag.

2、在app中创建templatetags模块(模块名只能是templatetags)

3、创建任意 .py 文件,如:web.py

# web.py

from django.template import Library

register =Library()  # 注意大写

@register.inclusion_tag("rbac/menu.html")
def get_menu_style(request):
   
    permission_menu_list = ["a",12,"123","ddd"]  # 模拟数据

    return {"permission_menu_list":permission_menu_list}
# menu.html

 {% for item in permission_menu_list %}
     <p href="">{{ item }}</p>
 {% endfor %}
<div class="menu-body">
     # 加载 web.py文件
     {% load web %}   
     {% get_menu_style request %}
</div>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django ,可以通过 Django REST framework (DRF) 来创建 API,并将 ImageFieldFile 对象序列化为 JSON 格式,然后在 Vue.js 通过 AJAX 请求获取这些数据。具体步骤如下: 1. 在 Django 使用 DRF 创建 API 视图,例如: ``` from rest_framework import serializers, viewsets from myapp.models import MyModel class MyModelSerializer(serializers.ModelSerializer): image_file_url = serializers.SerializerMethodField() class Meta: model = MyModel fields = ('id', 'image_field', 'image_file_url') def get_image_file_url(self, obj): return obj.image_field.url class MyModelViewSet(viewsets.ModelViewSet): queryset = MyModel.objects.all() serializer_class = MyModelSerializer ``` 这里的 `MyModelSerializer` 将 `image_field` 字段序列化为 `image_file_url` 字段,它的值是图像文件的 URL。`MyModelViewSet` 则将 `MyModel` 的所有实例序列化为 JSON 格式并提供 API。 2. 在 Vue.js 使用 AJAX 请求获取 API 数据,例如: ``` <template> <div> <img v-for="item in items" :key="item.id" :src="item.image_file_url" alt="My Image"> </div> </template> <script> import axios from 'axios'; export default { data() { return { items: [] } }, mounted() { axios.get('/api/my-model/') .then(response => { this.items = response.data; }) .catch(error => { console.log(error); }); } } </script> ``` 这里的 `axios.get('/api/my-model/')` 将会向服务器发送 AJAX 请求,获取 `MyModel` 的所有实例,并将其保存到 Vue.js 的 `items` 数据。然后在模板使用 `v-for` 循环遍历 `items`,并通过 `:src` 属性将每个图像的 URL 到 `img` 标签的 `src` 属性上。 需要注意的是,在 Vue.js 访问 Django API 时需要遵循跨域资源共享 (CORS) 的规则,即在 Django 项目的 `settings.py` 文件设置允许访问的域名,例如: ``` CORS_ORIGIN_WHITELIST = [ 'http://localhost:8080', 'http://127.0.0.1:8080' ] ``` 其包含了 Vue.js 应用程序的域名和端口号。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值