如何在您的Django项目中实现django-material？

工程师们非常喜欢 Material Design 这个设计模板。它在前端以 CDN 形式使用。在本文中，我们将学习如何将 Material Design 使用在我们的表格微件上，并从我们的视图中呈现该表格。

Django-material 是一个库，可将 Material Design 应用于已呈现的 HTML 文件或表单微件，无需 CDN。

首先，安装 django-material 包。

pip install django-material

设置项目和应用和 urls。

在 settings.py 内：

INSTALLED_APPS+=['material']

我的应用名是 “myapp” 。

阅读更多：Python 教程

示例

在 models.py 内：

from django.db import models

# 创建模型
class Data(models.Model):
    Name = models.CharField(max_length=100)
    salary = models.CharField(max_length=20)

在这里，我们创建了一个简单的 Django 模型，将在表单中使用。

在 urls.py 内：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name="home"),
]

在这里，我们在主页 URL 中呈现了我们的视图。

在 view.py 内：

from django.shortcuts import render
from django import forms
from .models import Data

class SalaryForm(forms.ModelForm):
    class Meta:
        model = Data
        fields = "__all__"

def home(request):
    if request.method == 'POST':
        form = SalaryForm(request.POST)
        if form.is_valid():
            form.save()

    else:
        form = SalaryForm()

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

在这里，我们创建了一个表格，并在前端呈现了它。

不要忘记创建模板文件夹和其中的 home.html 文件。

在 home.html 内：

{% include 'material/includes/material_css.html' %} #这两个 include
{% include 'material/includes/material_js.html' %} #将会引入Material Design
<!DOCTYPE html>
<html>
    <head>
        <title> TUT </title>
        <style>

        </style>
    </head>
    <body>

        <h2>表格</h2>
        <form action="/" method="post">
            {% csrf_token %}
            {{ form }}
            <input type="submit" value="提交">
        </form>
    </body>

在这里，我们创建了前端，并加载了Django Material的CSS和JS，它将自动地为我们的表格添加设计。