Django_实现新增功能

蔚落 2021-09-24 13:16 509阅读 0赞

##### 一、效果图 #####

未进行前端美化。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70]  
点击后，出现如下弹窗。此处弹窗样式用的是管理系统admin自带的样式。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 1]

##### 二、前端增加“新增”入口 #####

ApiTest/apitest\_manage.html  
在搜索栏代码之后加入此段代码：

<div style="float: right; width: 70%">
    
        <select name="ApiTest" id="id_ApiTest">
            <option value="" selected>-----接口流程测试用例-----</option>
        </select>
        {# 修改按钮 #}
        <a class="related-widget-wrapper-link change-related" id="change_id_ApiTest" data-href-template="/admin/ApiTest/apitest/__fk__/change/?_to_field=id&_popup=1" title="更改选中的测试用例">
            <img src="/static/admin/img/icon-changelink.svg" alt="修改"/>
        </a>
        {# 新增按钮 #}
        <a class="related-widget-wrapper-link add-related" id="add_id_ApiTest" href="/admin/ApiTest/apitest/add/?_to_field=id&_popup=1" title="新增测试用例">
            <img src="/static/admin/img/icon-addlink.svg" alt="增加"/>新增
        </a>
    </div>

##### 前端实现弹窗新增 #####

head中加入以下代码，实现**弹窗进行新增**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70]: /images/20210923/1e299e8ec3904aa7b792aa1d3f11c9a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg1MTk3MA_size_16_color_FFFFFF_t_70 1]: /images/20210923/a799ecb1f21f4c80b86c5da36cdd68cc.png