django-admin完全自定义某个模块的页面

django-admin可以根据app的admin.py中注册的model生成后台管理页面，如果要修改该页面，变成完全自定义的页面，可以用下面的方式，包括实现ajax请求。

在此之前你需要了解django-admin的基本用法，以及django url的创建方法。

# 创建一个名为product的app并在其内部创建model

创建一个名为product的app，在其model.py中创建两个model, Product和HistValue

model.py

from django.db import models


class Product(models.Model):
    def __str__(self):
        return self.prod_name

    prod_name = models.CharField(max_length=200)  # 思晔浪淘沙3期私募证券投资基金
    founded_date = models.DateField()  #2018/1/24
    manager = models.CharField(max_length=200)  # 上海思晔


class HistValue(models.Model):
    def __str__(self):
        return self.parent_prod

    parent_prod = models.ForeignKey(Product, on_delete=models.CASCADE)

    hist_date = models.DateField('历史日期', null=False, primary_key=True)
    unit_value = models.FloatField('单位净值', null=False)   # 4位小数
    re_value = models.FloatField('复权净值', null=False)   # 4位小数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# 配置app的admin

在app的admin.py中将两个model加入admin中。HistValue中配置了change_list_template，将显示的自定义页面，Product没有配置，将显示django-admin默认生成的页面。

admin.py

from django.contrib import admin
from .models import Product, HistValue


@admin.register(Product)
class ProductAdmin(admin.ModelAdmin):
    # date_hierarchy = 'pub_date'
    list_display  = ('prod_name', 'founded_date', 'manager')


@admin.register(HistValue)
class HistValueAdmin(admin.ModelAdmin):
    change_list_template = 'spec_tpl/product/hist_value.html'

1
2
3
4
5
6
7
8
9
10
11
12
13

# 配置自定义template模板目录,

参考： https://www.jianshu.com/p/a61da9ff9fd6 在自己项目的根目录下创建templates文件夹，并修改django的setting.py配置文件

#  只用改这一行 'DIRS': [os.path.join(BASE_DIR, 'templates')],`
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 创建上面admin模块中HistValue指定的hist_value.html

在admin.py中给HistValue指定了change_list_template

change_list_template = 'spec_tpl/product/hist_value.html'

下面创建该文件：/templates/spec_tpl/product/hist_value.html

其中的ajax请求的url是hist_prod_data，在下一步配置。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
{% verbatim %}
<html>
    <head>
        <title>定义页面title</title>
    </head>
    <body>
        这里是自定义的 hist_value 页面
        <div id="id_main">
            {{ message }}
        </div>
    </body>
</html>
{% endverbatim %}
<script type="text/javascript">

var app = new Vue({
    el: '#id_main',
    data: {
        message: 'Hello Vue!'
    },
    created: function() {
        Vue.prototype.$http = axios;
        console.log('hist_value created')
        
        request_params = {
            p1 : 125,
            p2 : 'bbb'
        }

        // post 方式会出现403权限问题，暂时用get
        axios({
                method: 'get',
                url: "{% url 'hist_prod_data' %}",
                params: {
                    p1 : 1,
                    p2 : 'bbb'
                }
            })
        .then((res) => {
                console.log(res)
            })
        .catch((error) => {
                console.log('get err: ', error)
            });
    }
    
})

</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

# 创建其中用到的url

在某个app如porduct的views.py中创建一个处理ajax请求的函数，返回请求参数中的p2

from django.shortcuts import render

# Create your views here.
from django.shortcuts import HttpResponse
from django.http.response import JsonResponse
from myapp.comapp.tools import DB
import json


def hist_prod_data(request):
    # 获取请求数据数据
    json_data = request.GET
    print('-----------------------------')
    print(json_data)  # 可以在python的console中看到。

    p2 = json_data.get('p2')
    return HttpResponse(p2)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

根目录下创建api_urls.py(app目录下也可以)，加入url路径views.py中定义函数的路径

from django.urls import path
from porduct import views as porduct_view

# 其中的name可以在html中引用， "{% url 'hist_prod_data' %}"
urlpatterns = [
    path('hist_prod_data', porduct.hist_prod_data, name='hist_prod_data'),
]

1
2
3
4
5
6
7

在项目server文件夹下的urls.py中加入api_urls.py中的url路径

from django.urls import include, path, re_path
import api_urls

urlpatterns = [
    path('api/', include(api_urls)),
    path('admin/', admin.site.urls),
]

1
2
3
4
5
6
7

编辑

上次更新: 2021/10/11, 12:43:58

← centos部署Nginx+uwsgi+django - blog easy_select2 编辑页面添加外键选择搜索→