Django--form生成select标签

本文介绍了如何在Django表单中动态生成Select选择框的选项,通过实例演示了如何从数据库获取数据并将其用于表单生成。包括基本的静态选项生成、动态选项获取及展示,以及数据列表展示与数据库操作的整合。

需求

Django--form表单中的select生成方法,如果select中的选项不固定,需要怎么操作。


速查

1、固定select选项

forms

1
2
3
class 表单类名称(forms.Form):
     host_type = forms.IntegerField(
         widget = forms.Select(choices = 列表或元组)

2、动态select选项

​forms

1
2
3
4
5
6
7
admin = forms.IntegerField(
         widget = forms.Select()
     )
def __init__( self , * args, * * kwargs):    #执行父类的构造方法
         super (ImportForm, self ).__init__( * args, * * kwargs)
         self .fields[ 'admin' ].widget.choices = models.SimpleModel.objects. all ().values_list( 'id' , 'username'
         #每次都会去数据库中获取这个列表


知识点

  • select的form格式是元组括元组,提交的是value(数字),字段类型是forms.IntegerField,插件widget=forms.Select(),属性choices=元组列表

  • 面向对象中静态字段只要加载到内存就不会改变了,私有字段每次提交都刷新,原理是实例化对象的时候把静态字段进行了deepcopy到对象里,修改的时候就私有字段修改,静态字段不变。


详细

1、生成最基本的select标签

templates/home/index.html
1
2
3
4
5
6
7
8
9
< body >
     < h1 >录入数据</ h1 >
     < form action = "/index/" >
         < p >{{ obj.host_type }}</ p >
         < p >{{ obj.hostname }}</ p >
     </ form >
     < h1 >数据列表</ h1 >
     ...
</ body >
app01/urls.py
1
2
3
4
from app01.views import account,home
urlpatterns = [
     url(r '^index/$' ,home.index ),
]
app01/views/home.py
1
2
3
4
from app01.forms import home as HomeForm
def index(request):
     obj = HomeForm.ImportForm(request.POST)
     return render(request, 'home/index.html' ,{ 'obj' :obj})
app01/forms/home.py
1
2
3
4
5
6
7
8
9
10
from django import forms
class ImportForm(forms.Form):
     HOST_TYPE_LIST = (
         ( 1 , '物理机' ),
         ( 2 , '虚拟机' )
     )
     host_type = forms.IntegerField(
         widget = forms.Select(choices = HOST_TYPE_LIST)
     )
     hostname = forms.CharField()
browser

827870-20160322175052683-959089716.png

2、可变的select标签

app01/models.py
1
2
3
class SimpleModel(models.Model):
     username = models.CharField(max_length = 64 )
     password = models.CharField(max_length = 64 )
初始化数据库

Django-Path > python manage.py makemigrations

Django-Path > python manage.py migrate

数据库app01_simplemodel表,随便造两条数据

827870-20160322175053104-25724976.png

app01/forms/home.py中添加:
1
2
3
4
5
6
7
8
9
from app01 import models
 
admin = forms.IntegerField(
         widget=forms.Select()
     )
def __init__(self,*args,**kwargs):    #执行父类的构造方法
         super (ImportForm,self).__init__(*args,**kwargs)
         self.fields[ 'admin' ].widget.choices = models.SimpleModel.objects.all().values_list( 'id' , 'username' )  
         #每次都会去数据库中获取这个列表
index.html加入admin选项
1
< p >{{ obj.admin }}</ p >
browser

827870-20160322175053479-2124594535.png

当往数据库表中添加一个管理员时,看select标签选项

827870-20160322175053823-218544424.jpg

827870-20160322175054151-173464837.png
















转载于:https://www.cnblogs.com/daliangtou/p/5307825.html

<think>我们正在使用django-vue-admin这个快速开发平台来实现一个请假流程功能。请假流程通常涉及以下几个步骤: 1. 创建请假模型(定义请假单的数据结构) 2. 实现请假流程的API(包括创建、提交、审批等) 3. 前端界面开发(让用户可以操作请假流程) 根据django-vue-admin的特点,它基于RBAC权限控制,前后端分离,后端使用Django+DRF,前端使用Vue3。我们可以按照以下步骤进行: 步骤1:在后端创建请假模型(LeaveRequest) 在Django的某个app(或者新建一个app)中定义请假模型。字段可能包括:用户(关联用户)、开始时间、结束时间、请假类型、请假原因、状态(待审批、通过、拒绝)等。 步骤2:创建请假模型的序列化器和视图集 使用DRF创建序列化器(Serializer)和视图集(ViewSet),以便提供API接口。 步骤3:注册API路由 将请假相关的API路由添加到项目中。 步骤4:前端开发 在前端项目中,创建请假管理相关的页面,包括请假申请表单、请假列表、审批页面等。使用Vue3编写组件,并通过axios调用后端API。 步骤5:权限配置 在系统的权限管理模块中,配置请假流程的权限,比如普通用户可以申请请假,部门经理可以审批等。 下面我们逐步详细说明: ### 后端实现(Django部分) 1. 创建模型(models.py) 假设我们在一个名为`leave`的app中创建模型。如果还没有这个app,请先创建。 ```bash python manage.py startapp leave ``` 然后在`leave/models.py`中定义模型: ```python from django.db import models from django.contrib.auth import get_user_model User = get_user_model() class LeaveRequest(models.Model): LEAVE_TYPES = ( ('annual', '年假'), ('sick', '病假'), ('personal', '事假'), ('other', '其他'), ) STATUS_CHOICES = ( ('pending', '待审批'), ('approved', '已批准'), ('rejected', '已拒绝'), ) user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='leave_requests', verbose_name='申请人') start_time = models.DateTimeField(verbose_name='开始时间') end_time = models.DateTimeField(verbose_name='结束时间') leave_type = models.CharField(max_length=20, choices=LEAVE_TYPES, verbose_name='请假类型') reason = models.TextField(verbose_name='请假原因') status = models.CharField(max_length=20, choices=STATUS_CHOICES, default='pending', verbose_name='状态') created_at = models.DateTimeField(auto_now_add=True, verbose_name='创建时间') updated_at = models.DateTimeField(auto_now=True, verbose_name='更新时间') class Meta: verbose_name = '请假申请' verbose_name_plural = verbose_name def __str__(self): return f"{self.user.username}的请假申请({self.leave_type})" ``` 2. 创建序列化器(serializers.py) 在`leave` app下创建`serializers.py`文件: ```python from rest_framework import serializers from .models import LeaveRequest class LeaveRequestSerializer(serializers.ModelSerializer): class Meta: model = LeaveRequest fields = '__all__' read_only_fields = ('status', 'created_at', 'updated_at', 'user') ``` 3. 创建视图集(views.py) 在`leave/views.py`中: ```python from rest_framework import viewsets from .models import LeaveRequest from .serializers import LeaveRequestSerializer class LeaveRequestViewSet(viewsets.ModelViewSet): queryset = LeaveRequest.objects.all() serializer_class = LeaveRequestSerializer # 在创建时自动设置当前用户为申请人 def perform_create(self, serializer): serializer.save(user=self.request.user) ``` 4. 注册路由 在项目的urls.py中(或者app的路由中)添加: ```python from django.urls import path, include from rest_framework.routers import DefaultRouter from leave import views router = DefaultRouter() router.register(r'leave', views.LeaveRequestViewSet) urlpatterns = [ ..., path('api/leave/', include(router.urls)), ] ``` 5. 注册app 在`settings.py`的`INSTALLED_APPS`中添加`'leave'`。 6. 迁移数据库 执行: ```bash python manage.py makemigrations python manage.py migrate ``` ### 前端实现(Vue3部分) 1. 创建请假申请页面 在`src/views`目录下创建`leave`目录,然后在其中创建`ApplyLeave.vue`组件。 2. 在`ApplyLeave.vue`中,编写表单,调用后端的创建请假API。 示例代码(简化): ```vue <template> <div> <el-form :model="form" label-width="80px"> <el-form-item label="请假类型"> <el-select v-model="form.leave_type"> <el-option label="年假" value="annual"></el-option> <el-option label="病假" value="sick"></el-option> <el-option label="事假" value="personal"></el-option> <el-option label="其他" value="other"></el-option> </el-select> </el-form-item> <el-form-item label="开始时间"> <el-date-picker v-model="form.start_time" type="datetime"></el-date-picker> </el-form-item> <el-form-item label="结束时间"> <el-date-picker v-model="form.end_time" type="datetime"></el-date-picker> </el-form-item> <el-form-item label="请假原因"> <el-input type="textarea" v-model="form.reason"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submit">提交</el-button> </el-form-item> </el-form> </div> </template> <script setup> import { ref } from 'vue' import { createLeaveRequest } from '@/api/leave' import { ElMessage } from 'element-plus' const form = ref({ leave_type: '', start_time: '', end_time: '', reason: '' }) const submit = async () => { try { await createLeaveRequest(form.value) ElMessage.success('提交成功') } catch (error) { ElMessage.error('提交失败') } } </script> ``` 3. 在`src/api/leave.js`中定义API函数: ```javascript import request from '@/utils/request' export function createLeaveRequest(data) { return request({ url: '/api/leave/leave/', method: 'post', data }) } ``` 4. 创建请假列表页面 同样在`src/views/leave`目录下创建`LeaveList.vue`,展示当前用户的请假记录。 5. 如果是审批人,还需要有审批页面,可以查看待审批的请假列表,并进行审批操作。 6. 添加路由:在`src/router/index.js`中配置请假相关的路由。 ### 权限配置 在django-vue-admin的后台管理系统中,进入权限管理,为请假相关的API配置权限(比如哪些角色可以访问哪些API),并配置前端菜单和按钮权限。 注意:以上步骤是一个基本实现,实际生产环境可能需要更复杂的流程(如多级审批、通知等),可以考虑使用工作流引擎(如django-viewflow)来实现,但这里我们先用简单方式实现。 由于django-vue-admin已经提供了基础的CRUD和权限管理,我们可以利用其已有的功能快速搭建。 以上就是在django-vue-admin中实现请假流程功能的基本步骤。 如果遇到问题,可以参考项目文档和社区讨论[^4][^5]。 §§相关问题§§ 1. 如何为请假流程添加多级审批功能? 2. 如何在django-vue-admin中实现消息通知(比如审批通过后通知申请人)? 3. 如何在前端展示请假审批进度?</think>在 Django-Vue-Admin 中实现请假流程功能,需要按照前后端分离的架构进行开发。以下是详细实现步骤: ### 一、后端实现(Django) 1. **创建请假模型** 在 `backend/web/apps/` 目录下创建 `leave/models.py`: ```python from django.db import models from django.contrib.auth import get_user_model User = get_user_model() class LeaveRequest(models.Model): STATUS_CHOICES = ( ('pending', '待审批'), ('approved', '已批准'), ('rejected', '已拒绝') ) user = models.ForeignKey(User, on_delete=models.CASCADE, verbose_name="申请人") start_date = models.DateField(verbose_name="开始日期") end_date = models.DateField(verbose_name="结束日期") reason = models.TextField(verbose_name="请假原因") status = models.CharField(max_length=20, choices=STATUS_CHOICES, default='pending') created_at = models.DateTimeField(auto_now_add=True) approved_by = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, related_name="approved_leaves") ``` 2. **序列化器与视图集** 创建 `leave/serializers.py`: ```python from rest_framework import serializers from .models import LeaveRequest class LeaveRequestSerializer(serializers.ModelSerializer): class Meta: model = LeaveRequest fields = "__all__" ``` 创建 `leave/views.py`: ```python from rest_framework.viewsets import ModelViewSet from .models import LeaveRequest from .serializers import LeaveRequestSerializer from dvadmin.utils.viewset import CustomModelViewSet class LeaveRequestViewSet(CustomModelViewSet): queryset = LeaveRequest.objects.all() serializer_class = LeaveRequestSerializer filter_fields = ['user', 'status'] ``` 3. **注册路由** 在 `backend/web/urls.py` 添加: ```python from apps.leave.views import LeaveRequestViewSet from rest_framework.routers import DefaultRouter router = DefaultRouter() router.register('leave/request', LeaveRequestViewSet) urlpatterns += router.urls ``` 4. **配置权限** 在系统管理后台的「权限管理」中,为请假模块添加权限: - `leave:add` (申请请假) - `leave:approve` (审批请假) - `leave:view` (查看记录) ### 二、前端实现(Vue3) 1. **创建请假页面组件** 在 `web/src/views/leave/` 目录下创建: - `ApplyForm.vue` (申请表单) - `ApprovalList.vue` (审批列表) - `HistoryList.vue` (历史记录) 2. **实现申请表单** (`ApplyForm.vue`) ```vue <template> <dv-form :model="form" label-width="120px"> <dv-date-picker v-model="form.start_date" label="开始日期"/> <dv-date-picker v-model="form.end_date" label="结束日期"/> <dv-input type="textarea" v-model="form.reason" label="请假原因"/> <dv-button @click="submit">提交申请</dv-button> </dv-form> </template> <script setup> import { ref } from 'vue' import { createLeave } from '@/api/leave' const form = ref({ start_date: '', end_date: '', reason: '' }) const submit = async () => { await createLeave(form.value) ElMessage.success('申请已提交') } </script> ``` 3. **API 接口调用** (`src/api/leave.js`) ```javascript import request from '@/utils/request' export function createLeave(data) { return request.post('/api/leave/request/', data) } export function getApprovalList(params) { return request.get('/api/leave/request/', { params }) } ``` 4. **配置路由菜单** 在 `src/router/modules/` 添加 `leave.js`: ```javascript export default { path: '/leave', component: Layout, children: [ { path: 'apply', name: 'LeaveApply', component: () => import('@/views/leave/ApplyForm'), meta: { title: '请假申请', permission: ['leave:add'] } }, { path: 'approve', name: 'LeaveApprove', component: () => import('@/views/leave/ApprovalList'), meta: { title: '请假审批', permission: ['leave:approve'] } } ] } ``` ### 三、流程优化建议 1. **审批流程**: - 添加多级审批(部门经理→HR) - 实现审批通知(站内信/邮件) 2. **数据验证**: ```python # 在 serializer 中添加验证 def validate(self, attrs): if attrs['start_date'] > attrs['end_date']: raise serializers.ValidationError("结束日期不能早于开始日期") return attrs ``` 3. **集成工作流引擎**: - 使用 `django-viewflow` 实现复杂审批流 - 配置可视化流程图 ### 四、部署与测试 1. 生成数据库迁移: ```bash python manage.py makemigrations python manage.py migrate ``` 2. 启动前后端服务: ```bash # 后端 python manage.py runserver # 前端 npm run dev ``` 3. 测试流程: - 普通用户提交请假申请 - 管理员审批申请 - 查看历史记录 > 提示:完整实现可参考项目文档中的「工作流开发指南」[^4],遇到问题可在社区提问[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值