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>

展现以下：