- 今日内容
- 一、效果展示
- 二、代码展示
- 1.从主页进入后台
- 2.后台页面
- 2.1 后台界面路由
- 2.2 后台视图函数
- 2.3 前端模板
- 3.新建项目
- 3.1 表设计
- 3.2 新建按钮和模态框
- 3.3 添加项目后台校验
- 3.4 星标和取消星标
- 4. 补充
- 三、总结
今日内容
前一篇文章介绍了项目的认证，主要是注册和登录，今天介绍后台管理和项目创建
一、效果展示
- 登录首页展示
其实这是一个静态页面和一个图片（图片要是自己生成确实NB，然而本菜鸟不会），导航栏中只有右边用户名的位置可以点，点击后台管理就可以进入后台管理主页了。 - 后台管理主页
点击新建项目会弹出模态框，然后就可以创建项目了。点击星星图标可以进行星标。
以上就是今天主要内容，接下来是代码展示。
二、代码展示 1.从主页进入后台第一步是在登录成功之后，通过选择右上角下拉框进入后台管理页面
上一节已经说过，request.tracer是通过中间件进行判断后，保存起来的用户信息。
2.后台页面 2.1 后台界面路由path('project/list/', project.project_list, name='project_list'),
2.2 后台视图函数
def project_list(request):
if request.method == 'GET':
form = ProjectForm(request)
return render(request, 'app01/project_list.html', {'form': form})
不错，这里使用ModelForm将数据库中的数据传入后端直接渲染
# app01/forms/bootstrap.py
# 用于封装bootstrap的一些样式：
# 字段使用form-control
# 添加placeholder属性
# 'required'错误提示
class BootstrapForm:
# 不使用此样式的字段
bootstrap_exclude = []
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
for field_name, field in self.fields.items():
if field_name in self.bootstrap_exclude:
continue
field.widget.attrs["class"] = "form-control field"
field.widget.attrs["placeholder"] = '请输入'+field.label
field.error_messages['required'] = '此字段必须填写'
# app01/forms/project.py
class ProjectForm(BootstrapForm, forms.ModelForm):
class Meta:
model = models.Project
fields = ['name', 'color', 'desc']
2.3 前端模板
由于后台所有页面都要用到同样的导航条，因此先写一个基模板。这里使用了bootstrap中的navbar。
基本效果如下(不包括 <项目>那里的代码）：
后台主页面继承基模板，再用bootstrap的panel组建展示项目即可。但是目前还没有项目，咱还没有新建呢。
# models.py
class Project(models.Model):
"""创建的项目"""
color_choices = (
(1, "#fa5151"),
(2, "#c87d2f"),
(3, "#91d300"),
(4, "#10aeff"),
(5, "#6467f0"),
(6, "#07c160")
)
name = models.CharField(verbose_name='项目名', max_length=32)
color = models.SmallIntegerField(verbose_name='颜色', choices=color_choices, default=3)
desc = models.CharField(verbose_name='项目描述', max_length=255, null=True, blank=True)
use_space = models.IntegerField(verbose_name='项目已用空间', default=0)
star = models.BooleanField(verbose_name='星标', default=False)
join_count = models.SmallIntegerField(verbose_name='参与人数', default=1)
creator = models.ForeignKey(verbose_name='创建者', to='UserInfo', on_delete=models.CASCADE)
create_datetime = models.DateTimeField(verbose_name='创建时间', auto_now_add=True)
3.2 新建按钮和模态框
创建一个按钮，点击弹出模态框，展示一个表单即可。
这样就写完了之后，模态框的表单中使用{{ field }}就可以列举出所有的字段。
这里比较难的是颜色字段如何如图展示。正常情况下应该是普通的RadioSelect样式，要想改变样式，需要自己写一个类，继承RadioSelect。
先看一下RadioSelect的源码
class RadioSelect(ChoiceWidget):
input_type = 'radio'
template_name = 'django/forms/widgets/radio.html'
option_template_name = 'django/forms/widgets/radio_option.html'
自定义的时候只要重写template_name 和option_template_name 就可以了。
# app01/forms/project.py
class ColorSelect(RadioSelect):
input_type = 'radio'
template_name = 'app01/widgets/radio.html'
option_template_name = 'app01/widgets/color_option.html'
源码中radio.html
{% include "django/forms/widgets/multiple_input.html" %}
{% set id = widget.attrs.id %}
{% for group, options, index in widget.optgroups %}
{% if group %}
{{ group }}
{% endif %}
{% for widget in options %}
{% include widget.template_name %}
{% endfor %}
{% if group %}
{% endif %}
{% endfor %}
自定义的radio.html
{% include "app01/widgets/multiple_input.html" %}
{% with id=widget.attrs.id %}
{ id }}"{% endif %}{% if widget.attrs.class %} {% endif %}>
{% for group, options, index in widget.optgroups %}
{% for option in options %}
{% include option.template_name with widget=option %}
{% endfor %}
{% endfor %}
