Django+前端+数据库Day6,初始Form,ModelForm

前端 0

目录

1.手动在数据库中添加三行数据

2.用户列表的创建

views

html

3.新建用户

原始方法新建用户

views

        html

原始方法思路不被采用的太麻烦了

4.初始form

views

2user_add.html

5.ModleForm(推荐)

views

user_model_form_add.html

6.添加错误提示

views

对user_model_form_add.html进行修改

在settins.py中

用户编辑页面

user_edit的views.py

user_edit的html页面和user_model_form_add.html的页面一样

删除页面


1.手动在数据库中添加三行数据

insert into app01_userinfo(name,password,age,account,create_time,gender,depart_id)
VALUES("小明","123",23,100.87,"2020-11-11",4,1),
("小王","123",23,100.87,"2020-11-11",4,1),
("小红","123",23,100.87,"2020-11-11",4,1);

2.用户列表的创建

views

def user_list(request):    """ 用户管理 """    # 获取所有用户列表 [obj,obj,obj]    queryset = models.UserInfo.objects.all()    """    # 用Python的语法获取数据    for obj in queryset:        print(obj.id, obj.name, obj.account, obj.create_time.strftime("%Y-%m-%d"), obj.gender, obj.get_gender_display(), obj.depart_id, obj.depart.title)        # print(obj.name, obj.depart_id)        # obj.depart_id  # 获取数据库中存储的那个字段值        # obj.depart.title  # 根据id自动去关联的表中获取哪一行数据depart对象。    """    return render(request, 'user_list.html', {"queryset": queryset})

html

{% extends 'layout.html' %}{% block content %}<div class="container">        <div style="margin-bottom: 10px">            <a class="btn btn-success" href="/depart/add/">                {#                target="_blank"在新页面跳转打开#}                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>                新建用户            </a>        </div>        <div class="bs-example" data-example-id="panel-without-body-with-table">            <div class="panel panel-default">                <div class="panel-heading">                    <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>                    用户列表                </div>                <table class="table table-bordered">                    <thead>                    <tr>                        <th>ID</th>                        <th>姓名</th>                        <th>密码</th>                        <th>年龄</th>                        <th>余额</th>                        <th>时间</th>                        <th>性别</th>                        <th>部门</th>                        <th>操作</th>                    </tr>                    </thead>                    <tbody>                    {% for obj in queryset %}                        <tr>                            <th>{{ obj.id }}</th>                            <td>{{ obj.name }} <td>                            <td>{{ obj.password }} <td>                            <td>{{ obj.age }} <td>                            <td>{{ obj.account }} <td>                            <td>{{ obj.create_time|date:"Y-m-d H:i:s" }} <td>
{#  模板语法不能用()会自动补充 #}
                            <td>{{ obj.get_gender_display }} <td>                            <td>{{ obj.depart.title }} <td>                            <td>                                <a class="btn btn-primary btn-xs" href="#">编辑</a>                                <a class="btn btn-danger btn-xs" href="#">删除</a>                            <td>                        </tr>                    {% endfor %}                    </tbody>                </table>            </div>        </div></div>{% endblock %}

3.新建用户

原始方法新建用户

views

def user_add(request):    '''添加用户'''    if request.method == "GET":        context = {            'gender_choices': models.UserInfo.gender_choices,            "depart_list": models.Department.objects.all()        }        return render(request, 'user_add.html', context)    # 获取用户提交的数据    name = request.POST.get('name')    pwd = request.POST.get('pwd')    age = request.POST.get('age')    account = request.POST.get('ac')    ctime = request.POST.get('ctime')    gender = request.POST.get('gd')    depart_id = request.POST.get('dp')    # 添加到数据库中    models.UserInfo.objects.create(name=name, password=pwd, age=age,                                   account=account, create_time=ctime,                                   gender=gender, depart_id=depart_id)    # 返回到用户列表页面    return redirect("/user/list/")

        html

{% extends 'layout.html' %}{% block content %}<div class="container">        <div class="panel panel-default">                <div class="panel-heading">                    新建用户                </div>        <div class="panel-body">            <form method="post">                {% csrf_token %}                <div class="form-group">                    <label>姓名</label>                    <input type="text" class="form-control" placeholder="姓名" name="name"/>                </div>                <div class="form-group">                    <label>密码</label>                    <input type="text" class="form-control" placeholder="密码" name="pwd"/>                </div>                <div class="form-group">                    <label>年龄</label>                    <input type="text" class="form-control" placeholder="年龄" name="age"/>                </div>                <div class="form-group">                    <label>余额</label>                    <input type="text" class="form-control" placeholder="余额" name="ac"/>                </div>                <div class="form-group">                    <label>入职时间</label>                    <input type="text" class="form-control" placeholder="入职时间" name="ctime"/>                </div>                <div class="form-group">                    <label>性别</label>                    <select class="form-control" name="gd">                        {% for item in gender_choices %}                            <option value="{{ item.0 }}">{{ item.1 }}</option>                        {% endfor %}                    </select>                </div>                <div class="form-group">                    <label>部门</label>                    <select class="form-control" name="dp">                        {% for item in depart_list %}                            <option value="{{ item.id }}">{{ item.title }}</option>                        {% endfor %}                    </select>                </div>                <button type="submit" class="btn btn-primary">提交</button>            </form>        </div>        </div>    </div>{% endblock %}

原始方法思路不被采用的太麻烦了

1.用户提交数据没有校验

2.错误页面上应有错误提示

3.页面上每一个字段都需要重新写一遍

4.关联的数据还要手动获取,循环展示在页面当中

4.初始form

views

class MyForm(Form):

        user = forms.CharField(widget=forms.Input)

        pwd = forms.CharField(widget=forms.Input)

        email = forms.CharField(widget=forms.Input)

def user_add(request):

        if(request.method == "GET"):

                form = MyForm()

                return render(request, 'user_add.html',{'form':form})

2user_add.html

<form method='post'>

        {% for field in form%}

                {{ field }}

        {% endfor %}

</form>

<form method='post'>

{{ form.user }}

{{ form.pwd }}

{{ form.email }}

<!--   <input type="text" class="form-control" placeholder="姓名" name="name"/>   -->

</form>

5.ModleForm(推荐)

views

class UserModelForm(forms.ModelForm):    class Meta:        model = models.UserInfo        fields = ['name', 'password', 'age', 'account', 'create_time', 'gender', 'depart']    def __init__(self,*args, **kwargs):        super().__init__(*args, **kwargs)        # 循环找到所有的插件,添加class="form-control"        for name,field in self.fields.items():            field.widget.attrs = {"class": "form-control","placeholder":field.label}def user_model_form_add(request):    '''添加用户基于ModelForm版本'''    form = UserModelForm()    return render(request,'user_model_form_add.html',{'form':form})

user_model_form_add.html

{% extends 'layout.html' %}{% block content %}<div class="container">        <div class="panel panel-default">                <div class="panel-heading">                    新建用户                </div>        <div class="panel-body">            <form method="post">                {% csrf_token %}                {% for field in form  %}                    <div class="form-group">                    <label>{{ field.label }}</label>                        {{ field }}               <!--     <input type="text" class="form-control" placeholder="姓名" name="name"/>-->                </div>                {% endfor %}                <button type="submit" class="btn btn-primary">提交</button>            </form>        </div>        </div>    </div>{% endblock %}

6.添加错误提示

views

def user_model_form_add(request):    '''添加用户基于ModelForm版本'''    if request.method =="GET":        form = UserModelForm()        return render(request,'user_model_form_add.html',{'form':form})    form = UserModelForm(data=request.POST)    # 调用form.is_valid()拿着data=request.POST的数据,对field的数据进行注意校验    if form.is_valid():        # 校验成功获取数据        # print(form.cleaned_data)        # 如果数据合法保存数据自动存到models.UserInfo类中        form.save()        return redirect('/user/list/')    # 校验失败获取错误信息form.errors    # print(form.errors)    # 校验错误(在页面上显示错误)    return render(request, 'user_model_form_add.html', {'form': form})

user_model_form_add.html进行修改

{#        novalidate不让浏览器进行自动校验#}            <form method="post" novalidate>                {% csrf_token %}                {% for field in form  %}                    <div class="form-group">                    <label>{{ field.label }}</label>                        {{ field }}{#                        获取第一个错误的信息#}                        <span style="color: red">{{ field.errors.0 }}</span>               <!--     <input type="text" class="form-control" placeholder="姓名" name="name"/>-->                </div>                {% endfor %}                <button type="submit" class="btn btn-primary">提交</button>            </form>

在settins.py中

将报错改成中文

# LANGUAGE_CODE = 'en-us'LANGUAGE_CODE = 'zh-hans'

用户编辑页面

user_edit的views.py

def user_edit(request,nid):    '''编辑用户'''    # 根据id去数据库获取要编辑的哪一行的数据对象放在外面get和post都能用到    row_object = models.UserInfo.objects.filter(id=nid).first()    if  request.method =="GET":        form = UserModelForm(instance=row_object)        return render(request, 'user_edit.html', {'form': form})    #在提交的时候不再新增数据,而是吧新提交的数据更新到原来的上面    form = UserModelForm(data=request.POST,instance=row_object)    if form.is_valid():        form.save()        return redirect('/user/list/')    return render(request, 'user_edit.html', {'form': form})

user_edit的html页面和user_model_form_add.html的页面一样

删除页面

def user_delete(request, nid):    models.UserInfo.objects.filter(id=nid).delete()    return redirect('/user/list/')

<a class="btn btn-danger btn-xs" href="/user/{{ obj.id }}/delete/">删除</a>

也许您对下面的内容还感兴趣: