CMDB开发之前端样式

其他 2018-12-16 18:03:29 阅读次数: 0

如果要想开发一个好的web界面，那你必须得学会一些前端样式。

基于bootstrip的模态框绘制

我们首先要把用户注册做到一个模态框里面,模态框看起来很复杂，实际上很有规律的。
模态框分为两部分:
1、模态框的触发按钮
index.html部分代码如下：

<!--
data-toggle 以何种形式来展示模态框 modal popover
data-target 模态框的id
-->
    {% block label %}
        <div class="container-fluid">
            <div class="col-md-11">
                艾伦CMDB系统-首页
            </div>
            <div class="col-md-1">
                <button class="btn btn-default" data-toggle="modal" data-target="#register_user_modal">
                    用户注册
                </button>
            </div>
        </div>
    {% endblock %}

效果如下：
在这里插入图片描述
2、模态框的面板
注意这一部分代码我们是放在content模块中的

	<!--
    tabindex 导航键的顺序
    role = dialog 指定展示的式样（角色）为模态框
    aria-labelledby="MyLabel" 获取值
    aria-hidden="true" 在通常情况下模态框式隐藏，不触发不会显示的
    footer 页脚
    -->
    <div class="modal fade" 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>
                <div class="modal-body">
                    这是模态框的主体
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">
                        注册用户
                    </button>
                </div>
            </div>
        </div>
    </div>

效果如下：
在这里插入图片描述

基于 forms的表单定义

django给我们提供了一个很棒的类叫做forms
在django的老版本现有form类，超难用，看运气。
后来编写一个Forms,forms类之初不能完全代替form,二者并行更尴尬。
再后来才有了现在的forms类。
1、定义forms文件
在这里插入图片描述
2、定义forms类
\ALLENCMDB\User\forms.py

from django import forms

class CMDBUserForm(forms.Form):
    username = forms.CharField(max_length=32,label='用户账号')
    password = forms.CharField(max_length=32,label='用户密码')
    nickname = forms.CharField(max_length=32,label='用户姓名')
    phone = forms.CharField(max_length=32,label='用户手机号')
    email = forms.EmailField(label='用户邮箱')
    photo = forms.ImageField(label='用户头像')

3、视图加载，前端渲染
\ALLENCMDB\ALLENCMDB\views.py

from django.shortcuts import render_to_response

from User.forms import CMDBUserForm

def index(request):
    register_forms = CMDBUserForm()
    return render_to_response('index.html',locals())

前端index.html
在这里插入图片描述
效果如下：
在这里插入图片描述
4、修改forms的样式
上面的样式总感觉有点丑陋，所以说我们得修改它的样式，但是不能跟着自己的想法改，要按照模板改
\ALLENCMDB\User\forms.py

from django import forms

class CMDBUserForm(forms.Form):
    username = forms.CharField(max_length=32,label='用户账号',widget=forms.TextInput(attrs={'class': 'form-control'}))
    password = forms.CharField(max_length=32,label='用户密码',widget=forms.PasswordInput(attrs={'class': 'form-control'}))
    nickname = forms.CharField(max_length=32,label='用户姓名',widget=forms.TextInput(attrs={'class': 'form-control'}))
    phone = forms.CharField(max_length=32,label='用户手机',widget=forms.TextInput(attrs={'class': 'form-control'}))
    email = forms.EmailField(label='用户邮箱',widget=forms.EmailInput(attrs={'class': 'form-control'}))
    photo = forms.ImageField(label='用户头像')

前端修改如下
在这里插入图片描述
效果如下：
在这里插入图片描述
经过一番修改，这样看起来就比刚刚那个界面好看多了吧！

基于JQ的前端校验

Form前端校验对于同学来说都是一个难点，今天推荐jq扩展框架jq_validate，它式jq扩展校验库，拥有丰富的校验功能，由jq开发小组成员开发的。
1、导入框架
下载jq-validation包
在这里插入图片描述
在这里插入图片描述
将上述两个文件放入此目录下
在这里插入图片描述
然后我们开始编写我们的脚本语言，在script块中导入这两个jq文件，注意顺序，先导入Jq再导入汉化文件
在这里插入图片描述
代码如下：

<script>
        $().ready(
            function () {
                $("#Register_Form").validate(
                    {
                        rules:{
                            username:{
                                required: true,
                                maxlength: 6,
                                minlength: 2
                            },
                            password:{
                                required: true,
                                maxlength: 12,
                                minlength: 6
                            },
                            nickname:{
                                required: true,
                                maxlength: 6,
                                minlength: 2
                            },
                            phone:{
                                required: true,
                                minlength: 11
                            },
                            email:{
                                required: true,
                                email: true
                            }
                        },
                        messages:{
                            username:{
                                required: '用户名不能为空',
                                maxlength: '用户名不能大于6位',
                                minlength: '用户名不能少于2位'
                            },
                            password:{
                                required: '密码不能为空',
                                maxlength: '密码不能大于12位',
                                minlength: '密码不能少于6位'
                            },
                            nickname:{
                                required: '用户姓名不能为空',
                                maxlength: '用户姓名不能大于6位',
                                minlength: '用户姓名不能少于2位'
                            },
                            phone:{
                                required: '手机号码不能为空',
                                minlength: '请输入正确的手机号码'
                            },
                            email:{
                                required: '邮件地址不能为空',
                                email: '请输入正确的邮件地址'
                            },
                        }
                    }
                )
            }
        )
    </script>

这里要注意我们还需要在添加表单提交和绑定id
在这里插入图片描述
效果如下：
在这里插入图片描述
将jq校验和form标签提交绑定
在message字段下一层添加绑定form代码
在这里插入图片描述
我们的输入框报错不是红色，怎样去修改它为红色呢？
修改报错内容样式
1、在static下创建css目录，和css的配置文件，并编写css文件
在这里插入图片描述
2、前端导入css文件
在这里插入图片描述
效果如下：
在这里插入图片描述

表单提交完成注册

Form表单的自定义校验
格式规则：
必须写在forms的类里面
校验的函数名称必须是clean_字段名称
所有要校验的数据都可以同cleaned_data.get(字段)得到
如果判断没有符合条件，必须诱发validationError
如果判断符合条件,必须将值返回出来
在这里插入图片描述
我们当前用户注册的表单涉及到了图片的表单提交,首先研究一下基本提交
因为有图片，我们就要小心了
form标签必须加上enctype=“multipart/form-data”
在这里插入图片描述
form表单需要加上{%csrf_token%}
在这里插入图片描述
添加csrf_token标签气候，默认在我们的表单当中多一项类型的hidden的input，他的值是csrf的token的值
在这里插入图片描述
后台编写前用render返回页面
在这里插入图片描述
Django的基本注册
\ALLENCMDB\ALLENCMDB\views.py

from django.shortcuts import render_to_response,render

from User.forms import CMDBUserForm
from Server.models import CMDBUser
from ALLENCMDB.settings import BASE_DIR

import os

def base(request):
    return render_to_response('base.html')

def index(request):
    register_forms = CMDBUserForm()
    if request.method == 'POST' and request.POST and request.FILES:

        register_data = CMDBUserForm(data=request.POST, files=request.FILES)
        # 开始校验
        if register_data.is_valid():
            # 校验成功
            register_post_data = register_data.cleaned_data

            username = register_post_data.get('username')
            password = register_post_data.get('password')
            nickname = register_post_data.get('nickname')
            phone = register_post_data.get('phone')
            email = register_post_data.get('email')
            # 当去get图片的时候，get到的是个对象,用.name的方法获取photo的值
            photo = register_post_data.get('photo').name

            # 数据入库
            CMDBUser.objects.create(
                username=username,
                password=password,
                nickname=nickname,
                phone=phone,
                email=email,
                photo=photo,
            )
            # 保存文件
            photofile = request.FILES.get('photo')
            photosavepath = os.path.join(BASE_DIR, 'static\\images\\%s' % photofile.name)
            with open(photosavepath, 'wb') as pf:
                for chunk in photofile.chunks():
                    pf.write(chunk)
        else:
        # 打印错误信息，会将clean_函数的ValidationError错误信息返回
            print(register_data.errors)

    return render(request,'index.html',locals())

index页面如下：

{% extends "base.html" %} <!-- 这个标签的参数需要加引号 -->

{% block title %}
   艾伦CMDB管理系统
{% endblock %}

{% block style %}
    <link rel="stylesheet" href="/static/css/register.css">
{% endblock %}

{% block label %}
    <div class="container-fluid">
        <div class="col-md-11">
            艾伦CMDB系统-首页
        </div>
        <div class="col-md-1">
            <button class="btn btn-default" data-toggle="modal" data-target="#register_user_modal">
                用户注册
            </button>

        </div>
    </div>

{% endblock %}

{% block content %}
    <!--
    tabindex 导航键的顺序
    role = dialog 指定展示的式样（角色）为模态框
    aria-labelledby="MyLabel" 获取值
    aria-hidden="true" 在通常情况下模态框式隐藏，不触发不会显示的
    footer 页脚
    -->
    <div class="modal fade" 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 register_form in register_forms %}
                        <div class="form-group input-group">
                        <span class="input-group-addon">{{ register_form.label }}</span>
                        {{ register_form }}
                    </div>
                    {% endfor %}
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">
                        注册用户
                    </button>
                </div>
            </form>
            </div>
        </div>
    </div>


{% endblock %}

{% block script %}
    <script type="text/javascript" src="/static/vendor/jquery/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/static/vendor/jquery/messages_zh.min.js"></script>

    <script>
        $().ready(
            function () {
                $("#Register_Form").validate(
                    {
                        rules:{
                            username:{
                                required: true,
                                maxlength: 6,
                                minlength: 2
                            },
                            password:{
                                required: true,
                                maxlength: 12,
                                minlength: 6
                            },
                            nickname:{
                                required: true,
                                maxlength: 6,
                                minlength: 2
                            },
{#                            phone:{#}
{#                                required: true,#}
{#                                minlength: 11#}
{#                            },#}
                            email:{
                                required: true,
                                email: true
                            }
                        },
                        messages:{
                            username:{
                                required: '用户名不能为空',
                                maxlength: '用户名不能大于6位',
                                minlength: '用户名不能少于2位'
                            },
                            password:{
                                required: '密码不能为空',
                                maxlength: '密码不能大于12位',
                                minlength: '密码不能少于6位'
                            },
                            nickname:{
                                required: '用户姓名不能为空',
                                maxlength: '用户姓名不能大于6位',
                                minlength: '用户姓名不能少于2位'
                            },
{#                            phone:{#}
{#                                required: '手机号码不能为空',#}
{#                                minlength: '请输入正确的手机号码'#}
{#                            },#}
                            email:{
                                required: '邮件地址不能为空',
                                email: '请输入正确的邮件地址'
                            }
                        },
                        submitHandler:function () {
                            form.submit
                        }
                    }
                )
            }
        )
    </script>

{% endblock %}

基于cmdb的ajax表单提交

我们要做到django+ajax+form+img上传
Ajax提交图片
Ajax提交表单+图片
从前端做起，写ajax步骤
1、 收集数据
#注意层级关系
在这里插入图片描述
效果如下：
在这里插入图片描述
如果你的form数据包含文件，我们提交时候需要用到js的一个类型,FormData
FormData.append(key,value)#添加数据
FormData.set(key,value)#修改数据
FormData.getAll(key)#通过key来获取值
声明FormData需要先
Var formData = new FormData
在这里插入图片描述
效果如下：
在这里插入图片描述
接下来我们要写一个收集接口
简单编写一个接口,进行子urls编程
\ALLENCMDB\User\urls.py
在这里插入图片描述
\ALLENCMDB\ALLENCMDB\urls.py
在这里插入图片描述
\ALLENCMDB\User\views.py
在这里插入图片描述
效果如下:
在这里插入图片描述
发起请求
FormData将csrf值出入当中之后要进行类似json的封装会使csrf失效，因此在提交之前我们要重新将csrf添加在请求头部。
在这里插入图片描述
提交之后的效果如下:
在这里插入图片描述
优化ajax的接口代码，ajax提交入库
\ALLENCMDB\User\views.py

from django.http import JsonResponse
import os

from User.forms import CMDBUserForm
from Server.models import CMDBUser
from ALLENCMDB.settings import BASE_DIR

def register(request):
    result = {'submit': 'success'}

    if request.method == 'POST' and request.POST and request.FILES:

        register_data = CMDBUserForm(data=request.POST, files=request.FILES)
        # 开始校验
        if register_data.is_valid():
            # 校验成功
            register_post_data = register_data.cleaned_data

            username = register_post_data.get('username')
            password = register_post_data.get('password')
            nickname = register_post_data.get('nickname')
            phone = register_post_data.get('phone')
            email = register_post_data.get('email')
            # 当去get图片的时候，get到的是个对象,用.name的方法获取photo的值
            photo = register_post_data.get('photo').name

            # 数据入库
            CMDBUser.objects.create(
                username=username,
                password=password,
                nickname=nickname,
                phone=phone,
                email=email,
                photo=photo,
            )
            # 保存文件
            photofile = request.FILES.get('photo')
            photosavepath = os.path.join(BASE_DIR, 'static\\images\\%s' % photofile.name)
            with open(photosavepath, 'wb') as pf:
                for chunk in photofile.chunks():
                    pf.write(chunk)
            return JsonResponse(result)
        else:
            # 打印错误信息，会将clean_函数的ValidationError错误信息返回
            print(register_data.errors)
            result['submit'] = 'error'
            return JsonResponse(result)
    else:
        return JsonResponse({'method': 'GET'})

值得注意的是我们的images目录是否存在？如果没有我们需要在static目录下进行添加
效果如下：
在这里插入图片描述
数据库中已经存入我们的注册信息
在这里插入图片描述
下一章节，我会分享如何利用已有的注册信息进行用户的登录

猜你喜欢

转载自blog.csdn.net/ALLENsakaru/article/details/84867251
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022