【问题标题】:How to save data attributes in database?如何在数据库中保存数据属性?
【发布时间】:2018-12-04 12:16:46
【问题描述】:

我正在实现一个网站,我需要在数据库中保存一些来自 HTML 的变量。这个想法是保存用户标记的文本段落并保存在数据库中以在用户访问页面时显示它(例如在 medium.com 中)。

当用户点击段落时我无法刷新页面,我只需要将点击的段落 id (data-artigo) 保存在数据库中。

这是我的观点details.html,我需要将值artigo.pklei.pk 保存在数据库中

   <!-- Begin Post Content -->
     <div class="article-post">
       {% for artigo in artigos %}   
         <p class='artigo'  data-artigo = "{{artigo.pk}}" data-lei = "{{lei.pk}}">
            {{artigo}}
         </p>
       {% endfor %}
      </div>
   <!-- End Post Content -->

我有一个 js 函数接收这些值并设置黄色背景 (.highlight) 来标记被点击的段落。所以我必须将这些数据保存在数据库中:

$("p.artigo").on("dblclick",(function(e){
    let artigo = $(this).data('artigo');
    let lei = $(this).data('lei');
    let is_marked;

    if ($(this).hasClass( "highlight" )){
        $(this).removeClass("highlight");
        is_marked = false;
    }else{
        $(this).addClass("highlight");
        is_marked = true;
    }        
}));

这是我需要存储这些数据时的表(我的模型):

class Marcacao(models.Model):
    lei = models.ForeignKey(Lei, on_delete=models.CASCADE, verbose_name='Lei', related_name='marcacaoArtigos')
    artigo = models.ForeignKey(Lei, on_delete=models.CASCADE, verbose_name='Artigo', related_name='marcacaoLei')
    usuario = models.ForeignKey(settings.AUTH_USER_MODEL, on_delete=models.CASCADE, verbose_name='marcacaoUsuário', related_name='marcacaoUsuario')

    is_marked = models.BooleanField('Está Marcado?', blank=True, default=False)
    description = models.TextField('Descrição', blank = True, null=True)

如果我没记错的话,我认为我需要在视图中创建一个函数并将这些数据作为参数传递给这个函数,但我不知道该怎么做。

【问题讨论】:

    标签: python jquery json


    【解决方案1】:

    您最好的选择取决于您希望它如何工作。 如果用户单击一个段落被认为是“提交”,则可能从 JS 向视图运行 Ajax 查询并将数据 POST 回以放入模型中。 但是,如果您想继续页面上的活动,请考虑使用 Django Rest Framework 并创建 API 调用,您可以再次发送 Ajax 查询中的数据。 我的建议是 DRF,序列化数据并保存到模型中非常简单。 https://www.django-rest-framework.org/

    你在 urls.py 中注册你的 api:

    router = routers.DefaultRouter()
    api_patterns = [
        router.register(r'selected-paragraph', api.selectedParagraphViewSet)
    ]
    urlpatterns = [
    url(r'api/', include(api_patterns)),
    

    然后在你的 api.py 中:

    class selectedParagraphViewSet(viewsets.ModelViewset):
        queryset = Marcacao.objects.all()
        serializer_class = MarcacaoSerializer
    
        def create(self, request, *args, **kwargs):
            try:
                data = {
                    'lei': request.data.pop('lei'),
                    'artigo': request.data.pop('artigo'),
                    'is_marked': request.data.pop('is_marked'),
                    'usuario': request.user
                }
                serializer = self.get_serializer(data=data, method='post')
                serializer.is_valid(raise_exception=True)
                return Response(serializer.data)
            except serializers.ValidationError:
                print(traceback.print_exc())
                raise
    

    然后在您的 serializers.py 中:

    class MarcacaoSerializer(serializers.ModelSerializer):
        def Meta:
            model = Marcacao
            fields = '__ALL__'
    

    最后是一个很好的 ajax 调用来发送它:

    var submitData = {
        'let': lei,
        'artigo': artigo,
        'is_marked': is_marked
    }
    $.ajax({
        url: '/api/selected-paragraph',
        method: 'PUT',
        data: submitData,
        dataType: 'json',
        crossDomain: true,
        xhrFields: {
            withCredentials: true
         },
         success: function(data, stat, xhr) {
             console.log("Was a success");
         },
         failure: function(xhr, stat, err){
             console.log('POST error');
             console.log((xhr.responseJSON && xhr.responseJSON.msg) ? xhr.responseJSON.msg : '"'+err+'" response when communicating with server.');
          }
    });
    

    另外值得注意的是,如果您可以在 Ajax 调用中传递 request.user,您甚至可以消除对 api.py 中创建函数的需要,但我认为这种方式可以更好地显示数据是如何输入到数据库。

    【讨论】:

    • tku 这么多。我根据您的代码得到了一些想法,我解决了我的问题。但我会尽快按照你说的执行。这是一种更优雅的方式。
    猜你喜欢
    • 2020-07-30
    • 1970-01-01
    • 2017-06-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-09
    • 2019-02-09
    • 1970-01-01
    相关资源
    最近更新 更多