SimpleUI是一個基於Django框架開發的開源後台管理系統，其設計理念是提供一個簡單易用但具備強大功能的後台系統解決方案，以助力後端開發者快速高效的開發產品。
一、SimpleUI重寫模板
SimpleUI具備如此之高的易使用程度和強大的功能，這得益於其精美的前端 UI 設計以及實現高質量的界面渲染。SimpleUI強調簡單，但並不代表妥協於視覺上的普通。比如，為了讓用戶更好地識別頁面，SimpleUI對比度進行嚴格控制，使用不同顏色進行分割；在其他方面，如頁面中的操作按鈕、控制項，SimpleUI都注重使用賞心悅目的設計元素。
下面是SimpleUI重寫 Bootstrap 模板元素的示例代碼：
/* 在 app/static/common/css/simpleui-basic.css 中重寫 Bootstrap 全局 CSS 樣式 */
/* 導航欄 */
.navbar {
background-color: #453d47;
border-color: #231F20;
}
二、SimpleUI自定義按鈕
不同於其他後台管理系統，SimpleUI提供了很多自定義的按鈕，這些按鈕可以簡化前端開發的流程。
下面是SimpleUI自定義按鈕的示例代碼：
# 搜索按鈕 # 投票按鈕 # 編輯按鈕
三、SimpleUI四大功能模塊
SimpleUI包含四大功能模塊：數據管理、系統管理、用戶管理、頁面管理。下面詳細介紹每個模塊的特點：
1.數據管理
數據管理模塊提供了多種數據類型的管理操作，包括數據增加、刪除、修改以及搜索等操作。SimpleUI的數據管理模塊內置了多種表格控制項，支持多表聯合查詢、多條件搜索等操作。此外，SimpleUI還支持導入和導出數據的操作，比如導入Excel、CSV、JSON等格式數據，導出也同樣可以支持這些格式。
下面是SimpleUI數據管理模塊示例代碼：
# 表格控制項
from django.db.models import Q
from simpleui.views import ModelTableView
from app.models import User
class UserTableView(ModelTableView):
model = User
table_pagination = True
table_pagination_limit = 10
table_row_actions = [
{
"url": "app:user_detail",
"text": "編輯"
},
{
"url": "app:user_detail",
"text": "刪除",
"confirm": "您確定要刪除這個用戶嗎？"
}
]
table_search_fields = ["name", "email"]
table_search_placeholder = "在這裡輸入關鍵詞"
table_filter_fields = ["gender"]
table_filter_placeholder = "篩選"
table_list_display = ["name", "email", "gender", "created", "updated"]
2.系統管理
系統管理模塊提供了多種通用功能。例如搜索引擎管理、文件管理、站點內容管理等功能。同時，此模塊還支持 Web 端訪問日誌查看和操作日誌查看等實用功能。
下面是SimpleUI系統管理模塊示例代碼：
# 站點內容管理
from django.urls import reverse
from django.views.generic.list import ListView
from simpleui.views import FilterView
from app.models import Blog
class BlogListView(FilterView):
model = Blog
queryset = Blog.objects.published()
template_name = "app/blog_list.html"
paginate_by = 8
context_object_name = "blog_list"
filterset_fields = ["category"]
ordering = ["-create_time"]
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context["category_chosen"] = self.request.GET.get("category")
context["category_list"] = Category.objects.all()
return context
def get_absolute_url(self):
return reverse("app:blog_list")
3.用戶管理
用戶管理模塊提供了對網站用戶的管理和操作。此模塊支持了用戶登錄、用戶註冊、用戶許可權管理等操作。同時，也提供了角色管理模塊，便於管理員對角色進行增刪改查。
下面是SimpleUI用戶管理模塊示例代碼：
# 用戶登錄
from django.shortcuts import render, redirect
from django.contrib.auth import authenticate, login
from app.forms import LoginForm
def user_login(request):
if request.method == "POST":
form = LoginForm(request.POST)
if form.is_valid():
username = form.cleaned_data.get("username")
password = form.cleaned_data.get("password")
user = authenticate(request, username=username, password=password)
if user is not None:
login(request, user)
return redirect("app:index")
else:
form.add_error(None, "用戶名或密碼不正確")
else:
form = LoginForm()
return render(request, "app/user_login.html", {"form": form})
4.頁面管理
頁面管理模塊提供了生成靜態網頁的功能。使用模板和數據生成靜態 HTML 文件，然後將文件保存在指定目錄下。此模塊功能十分強大，使用它可以極大地減輕伺服器壓力。
下面是SimpleUI頁面管理模塊示例代碼：
# 靜態網頁生成
from django.conf import settings
from django.views.generic import TemplateView
from django.template import loader
from app.models import Post
class PostPageView(TemplateView):
template_name = "app/post.html"
def get(self, request, pk, *args, **kwargs):
post = Post.objects.get(pk=pk)
context = {"post": post}
content = loader.render_to_string(self.template_name, context=context)
filename = f"{post.slug}.html"
filepath = os.path.join(settings.BASE_DIR, "pages", filename)
with open(filepath, "w", encoding="utf-8") as f:
f.write(content)
return super().get(request, *args, **kwargs)
總結
SimpleUI提供了全面的後台管理功能，對於中小型團隊和個人開發者來說，它的確是一個更好的後台系統解決方案。藉助 SimpleUI 強大的特性，開發者可以快速構建出自己的後台管理系統，在快速迭代中快速的推出產品。另外，SimpleUI 同時也是一款開源軟體，其源碼也公開給了開發者。強大的系統不僅在自身功能上具備優勢，在開源社區中，其也收穫了一大批忠實粉絲。如果你想更好更快地開發自己的後台系統，不妨嘗試一下 SimpleUI。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/193478.html
微信掃一掃 
支付寶掃一掃 