Django-CRM項目學習（三）-stark的頁面展現

時間 2019-11-17

標籤 django crm 項目學習 stark 頁面展現欄目 Python 简体版

原文原文鏈接

開始今日份整理，主要爲stark組件的增刪改以及model_form組件的使用以及form組件的回顧css

1.list_display_link功能

功能：客製化字段進行跳轉到指定的頁面（編輯頁面）html

1.1 stark組件設置接口

1.2 app01中stark註冊表中填寫註冊的內容

注意：該列表內對應的的字段須要和model中的屬性名保持一致前端

1.3 stark中給普通屬性增長a標籤

if info_obj.choices:
    vim = getattr(obj, 'get_%s_display' % field_or_info)()
else:
    vim = getattr(obj, field_or_info)
    if field_or_info in self.config_obj.list_display_link:
        vim = mark_safe("<a href='%s'>%s</a>" % (self.config_obj.get_change_url(obj), vim))

效果圖以下數據庫

既實現了反向解析也實現了編輯功能npm

2.form組件以及modelform組件

2.1 form組件回顧

2.1.1 form表單的功能

2.1.2 form表單的參數

2.1.3 form表單的一對多以及多對多樣式

（1）一對多樣式django

（2）多對多樣式bootstrap

其餘form組件調用，詳情查看以下vim

2.2 modelform組件的學習

modelform組件的功能：能夠減小form字段的使用，將model轉換成form，不在用親自寫form組件。是form組件的進階版本，能夠更加高效的實現form組件的功能，在此基礎上，還增長了數據渲染的功能，至此大大減小了代碼的使用量。app

展現以下：函數

form組件

modelform組件

2.2.1 modelform組件的增長界面

（1）views視圖層

（2）路由層

（3）前端代碼

（4）展現效果

2.2.2 modelform組件的修改

2.2.2.1 get請求

（1）視圖層

（2）路由層

（3）前端代碼

（4）展現

2.2.2.2 post請求部分

注意：修改信息虎，更新取決於後面是否有instance=對象這個屬性，有才是更新，不然就是新增了

2.3 modelform在stark組件中的應用

2.3.1 建立modelform對象

供後面的內容使用，建立接口，供子類進行修改

2.3.2 子類重寫

2.3.3 重寫model_for_class

重寫相似以下

步驟以下：

（1）導包

from django.forms import ModelForm  # 導入包

導入modelform，建立方法get_model_form

建立modelform 繼承modelform 類,建立Meta 類(固定寫法),供調用,model =self.model 傳入當前操做的表對象, 默認的獲取所有返回默認的類,若是有自定製的類則使用自定製類

（2）add_view視圖函數

get請求：獲取當前操做的表對象modelform類，實例化modelform獲取渲染內容

post請求：modelform實例接收請求內容，判斷內容是否符合要求。而後save()實例對象，會自動把內容添加到數據庫中，不然，返回add界面

視圖層:

前端代碼：

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <form action="" method="post" novalidate>
                {% csrf_token %}

                {% for field in form_obj %}
                   <div class="form-group">
                       <label for="">{{ field.label }}</label>
                       {{ field }}  <span class="error pull-right">{{ field.errors.0 }}</span>
                   </div>
                {% endfor %}

                <button class="btn btn-default">submit</button>
            </form>
        </div>
    </div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
      <style>
        input,select{
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .error{

            color: red;
        }
    </style>
</head>
<body>
{% include "stark/form.html" %}
</body>
</html>

展現以下

（3）change_view更改視圖

modelform 實例對象經過傳入當前操做的實例對象進行渲染該對象的內容注意修改時要用instance=modelform的對象,能夠進行渲染

前端代碼，與add繼承相同

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

      <style>
        input,select{
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .error{
            color: red;
        }
    </style>
</head>
<body>
{% include "stark/form.html" %}
</body>
</html>

展現以下：

（4）delete_view刪除數據視圖

也是經過反向解析獲取id,直接經過pk主鍵刪除對象,而後跳轉展現界面

前端代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>
<form action="" method="post">
{% csrf_token %}
<a href="{{list_url}}" class="btn btn-warning">取消</a>
<input type="submit" class="btn btn-danger" value="確認刪除">
</form>
</body>
</html>