学神python全栈学习笔记CMDB系统---第二章 python_cmdb_前端样式

最新推荐文章于 2023-10-25 14:56:04 发布

weixin_35264169

最新推荐文章于 2023-10-25 14:56:04 发布

阅读量1k

点赞数

分类专栏： django 文章标签： cmdb

本文链接：https://blog.csdn.net/weixin_35264169/article/details/82078408

版权

本篇笔记详细讲解了使用Django开发CMDB系统时，前端样式的实现，包括基于Bootstrap的模态框绘制、forms的表单定义、JQuery前端校验、ajax表单提交，以及基于SB-Admin的图表绘制。通过实例展示了用户注册表单的全过程，包括前端验证、后端校验和Ajax交互。

摘要由CSDN通过智能技术生成

第二章 python_cmdb_前端样式

本节所讲内容：

2.1 基于bootstrip的模态框绘制

2.2 基于 forms的表单定义

2.3 基于JQ的前端校验

2.4 表单提交完成注册

2.5 基于cmdb的ajax表单提交

2.6 基于SB-Admin的图表绘制

我们以用户注册表单为例，用bootstrap+jq实现前端样式

2.1 基于bootstrap的模态框绘制

我们把用户注册做到一个模态框里面，模态框看着很复杂，实际上很有规律。

模态框分为两部分：

模态框触发按钮

前端界面

\XueGodCMDB36\templates\user_index.html:

通过用户注册触发模态框
{% block page-header %}
    <!--模态框触发部分-->
    <!--
        data-toggle 以何种形式展示模态框 modal、popover
        data-target 模态框id
    -->
    <div class="container-fluid">
        <div class="col-md-8">
            用户管理
        </div>
        <div class="col-md-4" style="text-align:right">
            <button class="btn btn-default" data-toggle="modal" data-target="#register_user_modal">用户注册</button>
            <button class="btn btn-default" data-toggle="modal" data-target="#logout_user_modal">用户退出</button>
        </div>
    </div>
    <!--模态框触发部分结束-->
{% endblock %}

被触发的模态框：

{% block content %}
    <!--模态框展示部分-->
    <!--
    tabindex  table 导航的顺序
    role = dialog 指定展示的样式（角色）为模态框
    aria-labelledby = "MyLabel" 获取值
    footer 页脚
    -->
    <div class="modal fade" data-toggle="modal" id="register_user_modal" tabindex="-1" role="dialog"
         aria-labelledby="Mylabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="MyLabel">用户注册</h4>
                </div>
                <form method="post" id="register_form" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="modal-body">
                        {% for formitem in user_from %}
                            <div class="form-group input-group">
                                <span class="input-group-addon">{
 { formitem.label }}</span>
                                {
 { formitem }}
                            </div>
                        {% endfor %}
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary" id="add_user_submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--模态框展示部分结束-->

模态框效果：

基于 forms的表单定义

Django给我们提供了一个很棒的类叫做forms

定义forms文件

代码如下：

\XueGodCMDB36\User\forms.py:

# !/usr/bin/env python
# -*- coding: utf-8 -*-

from django import forms
from django.forms import widgets


class CMDBUserForm(forms.Form):
    name = forms.CharField(
        max_length=6,  # 长度限制的验证优先级高于前端验证，前后端都要验证，且限制规则相同
        min_length=2,
        label='用户账号',
        widget=widgets.TextInput(
            attrs={
                'class': 'form-control',
                'required': '',
                'minlength': 2,
                'maxlength': 6,
            }
        ),
        error_messages={
            'max_length':'用户名最大6位',
            'min_length':'用户名最小2位',
            'required':'用户名不能为空'
        }
    )
    password = forms.CharField(
        max_length=6,
        min_length=2,
        label='用户密码',
        widget=widgets.PasswordInput(
            attrs={
                'class': 'form-control',
                'required': '',
                'minlength': 2,
                'maxlength': 6,
            }
        )
    )
    nickname = forms.CharField(
        max_length=6,
        min_length=2,
        label='用户姓名',
        widget=widgets.TextInput(
            attrs={
                'class': 'form-control',
                'required': '',
                'minlength': 2,
                'maxlength': 6,
            }
        )
    )
    phone = forms.CharField(
        max_length=11,
        min_length=11,
        label='用户电话',
        widget=widgets.TextInput(
            attrs={
                'class': 'form-control',
                'required': '',
                'minlength': 11,
                'maxlength': 11,
            }
        )
    )
    email = forms.EmailField(
        label='用户邮箱',
        widget=widgets.EmailInput(
            attrs={
                'class': 'form-control',
                'required': '',
            }
        )
    )
    photo = forms.ImageField(
        label='用户照片',
        allow_empty_file=True,
        widget=widgets.FileInput(
            attrs={
                'id': 'logo_file',
                'class': 'file-input-new btn btn-primary btn-file',
                'style': " margin: auto;",
                'required': '',
            }
        )
    )

视图加载，前端渲染

修改forms的样式

我们修改forms的样式，不能随着自己的想法，要安装模板的格式

给forms添加bootstrap样式

循环生成表单

代码如下：

{% block content %}
    <!--模态框展示部分-->
    <!--
    tabindex  table 导航的顺序
    role = dialog 指定展示的样式（角色）为模态框
    aria-labelledby = "MyLabel" 获取值
    footer 页脚
    -->
    <div class="modal fade" data-toggle="modal" id="register_user_modal" tabindex="-1" role="dialog"
         aria-labelledby="Mylabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="MyLabel">用户注册</h4>
                </div>
                <form method="post" id="register_form" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="modal-body">
                        {% for formitem in user_from %}
                            <div class="form-group input-group">
                                <span class="input-group-addon">{
 { formitem.label }}</span>
                                {
 { formitem }}
                            </div>
                        {% endfor %}
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary" id="add_user_submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--模态框展示部分结束-->
    <div class="modal fade" data-toggle="modal" id="logout_user_modal" tabindex="-1" role="dialog"
         aria-labelledby="Mylabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="MyLabel">用户注销</h4>
                </div>
                <form action="{% url 'logout' %}" method="get" id="logout_dialog" >
                    {% csrf_token %}
                    <div class="modal-body">
                            <div class="form-group input-group">
                                退出当前用户？
{#                                <span class="input-group-addon">{
 { formitem.label }}</span>#}
{#                                {
 { formitem }}#}
                            </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary" id="logout_user_submit">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--模态框展示部分结束-->
    <div class="container-fluid">
        <div class="col-md-6">

        </div>
    </div>
{% endblock %}

基于JQ的前端校验

From前端校验对于所有同学来说，都是一个难点，今天推荐jq扩展框架jq_validate是jq扩展的校验库，拥有丰富的校验功能，有jq开发小组成员开发。

导入框架

下载jq-validation包

取出自己需要的jq脚本

Jquery.validate.min.js 校验功能的压缩包

Jquery.validate支持40多种语言，我们还需要下载汉化包

我们将两个js脚本复制到我们的目录下

然后执行导入

最低0.47元/天解锁文章

weixin_35264169

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
学神python全栈学习笔记CMDB系统---第二章 python_cmdb_前端样式

第二章 python_cmdb_前端样式本节所讲内容：2.1 基于bootstrip的模态框绘制2.2 基于 forms的表单定义2.3 基于JQ的前端校验2.4 表单提交完成注册2.5 基于cmdb的ajax表单提交2.6 基于SB-Admin的图表绘制我们以用户注册表单为例，用bootstrap+jq实现前端样式2.1 基于bootstrap的...
复制链接

扫一扫