I made a Django Project , In order to make the management background more beautiful , I am right. Django（ It should be SimpleUI Of ） default Admin The home page of the backstage is transformed , See this article for details ： Project completion - be based on Django3.x edition - Summary of development and deployment
The previous two articles about Django3.x The development and deployment summary articles are all about databases 、 Interface 、 In terms of performance , I am interested in the transformation of the backstage home page when I see a friend's message , So write an article to introduce ~
The transformation is based on my customized DjangoStarter Development templates , The code in this article will be submitted to Github, Project address ：https://github.com/Deali-Axy/DjangoStarter
DjangoStarter Of Admin Used SimpleUI, This is a base Vue、ElementUI Of Admin The theme , Use ElementUI Of tab Component implements the function of multi label , The component itself supports custom home pages , So my idea is to use Django Of Template Write a new page , Configure the route and replace it SimpleUI The default home page for .
The default home page looks like this , It's a bit monotonous
That's what happened after the transformation
well , It's better than before , Rich in content ~
Next, we will implement the transformation of the home page step by step .
There are many background templates on the Internet , Domestic products include ElementUI、AntDesign these , It's all very good , But it should look good CSS（ I'm sorry I don't know much ）
So I set my sights on foreign open source components , among AdminLTE It's very good , In my most familiar Bootstrap On this basis , Good looking and easy to use ~
So let's get started
The dependencies used in this page are as follows
Direct copy package.json Dependent part of ：
"dependencies": {
"@fortawesome/fontawesome-free": "^6.0.0",
"admin-lte": "3.2",
"bootstrap": "^4.6.1",
"chart.js": "^3.8.0",
"jquery": "^3.6.0",
}
Copy and save directly , then yarn Command installation depends on ~
PS： Recommended yarn management npm package , It can also be used directly npm
About the Django Use and manage front-end resources in , Please refer to this article for details ：Django Project introduction NPM and gulp Manage front-end resources
// Use npm Download the front-end package
const libs = [
{name: "admin-lte", dist: "./node_modules/admin-lte/dist/**/*.*"},
{name: "chart.js", dist: "./node_modules/chart.js/dist/**/*.*"},
{name: "jquery", dist: "./node_modules/jquery/dist/**/*.*"},
{name: "bootstrap", dist: "./node_modules/bootstrap/dist/**/*.*"},
];
// Use npm Downloaded front-end components , Custom storage location
const customLibs = [
{name: 'font-awesome', dist: './node_modules/@fortawesome/fontawesome-free/**/*.*'},
]
After saving, execute in the project root directory gulp move that will do ~
We are templates/admin New under the directory extend_home.html
I will not paste the specific code , It has been uploaded to github Yes , You can see here ：https://github.com/Deali-Axy/DjangoStarter/blob/master/templates/admin/extend_home.html
Chart the pie chart I made with fake data , The data looks like this
let exampleData = [
{label: 'a', value: 10},
{label: 'b', value: 10},
{label: 'c', value: 10},
{label: 'd', value: 10},
{label: 'e', value: 10},
{label: 'f', value: 10},
]
The text of news and shortcut is Django Self contained random text generation label
{% lorem 6 w random %}
See the official documents for specific usage ：https://docs.djangoproject.com/zh-hans/4.0/ref/templates/builtins/#lorem
PS： All the contents of this page are false data , In actual use, you can use context Pass in data or request interfaces to fill in real data ~
Save after writing the web page template
Next, configure the routing
I put this page on DjangoStarter Default App in
edit apps/core/views.py file
Add a function
# Expand admin Home page , Beautify the backstage
def extend_admin_home(request):
return render(request, 'admin/extend_home.html')
Configure the routing
urlpatterns = [
# ...
path('admin_home', views.extend_admin_home),
]
edit config/settings.py
stay SimpleUI Add this line of code to the configuration area
SIMPLEUI_HOME_PAGE = f'/{URL_PREFIX}core/admin_home'
PS： because DjangoStarter Add a URL Prefix function , So we need to
URL_PREFIXclose
That's it , The specific code is quite long , You can see GitHub project ：https://github.com/Deali-Axy/DjangoStarter
Students who don't want to follow the steps step by step can try mine DjangoStarter Template ha , It's all integrated , Open the box ~
PS： The next article introduces some development experience of displaying large screens
Use the front-end background management template library admin-lte Use the front-end background management template library admin-lte install Set up the environment install install admin-lte, You can install it in the following ways , The picture below is GitHub in admin-lte The home page of ...
Summary of today's content Front desk home page Background home page rotation diagram interface Detailed explanation of cross domain problems Connect the front and rear ends Back end custom configuration git Introduction and installation Detailed content 1. Front desk home page Homeviwe.vue <template> <di ...
Content catalog : Django Background form validation CSRF The encrypted session.cookie model Database operation Django backstage Form Form validation Django in Form Generally speaking, there are 2 Kind of function : 1. Used for user submission ...
1. How does the background manage models New Django The project will automatically reference admin application , You can create a new background by createsuperuser Command to create the background admin Super administrator , The first problem I encountered , It's like this ...
A problem we have today ,mark once : django The background can support Chinese interface , At the beginning, I was obsessed with settings.py in LANGUAGE_CODE = 'en-us' Medium 'en-us' What to change .zh-c ...
Django backstage django We just need to add less code in the background , You can achieve powerful functions . And background related files : Every app Medium admin.py Files are related to the background The following example is an example of adding blog posts in the background : Create a new one name ...
1.django How to upload from the background excel Medium batch parsing data From you to django Background imported excel Medium batch parsing data , For example , Let's carry back the batch import svn Historical data format hypothesis excel Table has 4 Column , Each column is ...
django Background access is the same name Named post data html: <form method="post"> <input type="text" n ...
Django backstage And background related files : Every app Medium admin.py Files are related to the background . One , Create a new one The name is HelloDjango Project django-admin.py startproject ...
HTML <form id="project_file_upload" enctype="multipart/form-data" > <di ...
The question of mode The time limit :3000 ms | Memory limit :65535 KB difficulty :3 describe The so-called mode , That is, for a given object containing N Multiple sets of elements , Each element in S The most frequent occurrence of the element is the multiplicity of the element , Multiple sets S heavy ...
import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.Lock; import java.uti ...
n=NPM It's a Node Package management and distribution tools , It has become unofficial Node modular ( package ) Standards for . With NPM, You can quickly find the package to be used by a specific service , Download . Install and manage installed packages .npms install : download npm Source ...
original text :sql cascading deletion function : When deleting the main table , Automatically delete the secondary table ( Foreign key constraints ) Corresponding content Delete the row containing the primary key value , This value is referenced by foreign key columns in existing rows of other tables . In cascade deletion , Also delete all rows whose foreign key values refer to the deleted primary key values . Such as : ...
Topic link :http://acm.hdu.edu.cn/showproblem.php?pid=6181 The question : Give a picture , Find the secondary short circuit . solution : My previous template cannot solve this problem , It is the case that the shortest and secondary short circuits are equal , Prove ...
It has been created several times before maven project , It is also the first line reporting an error , Right click the item to force the update maven It seems to have been solved , This time, it seems that this method doesn't work , I gave a bunch of English mistakes and couldn't understand them , Fortunately, I saw a passer-by on the Internet , root ...
FileStream fs = new FileStream(@"C:\log.txt", FileMode.Truncate, FileAccess.ReadWrite); fs ...
This article is from :https://wiki.scn.sap.com/wiki/display/BOBJ/Crystal+Reports%2C+Developer+for+Visual+Studio+Downl ...
01. Move and Rotate Standard global coordinate system Keyboard using UnityEngine; using System.Collections; public class NewBe ...
Soft work · Homework 11 - Alpha Be wise after the event ( The team ) Team leader, this assignment link Modern software engineering project Postmortem Ideas and goals 1. What's the problem with our software ? Is it clearly defined ? For typical users and fields ...
