Django Simple UI

qq_40999093?

已于 2024-01-13 16:06:09 修改

阅读量455

点赞数 1

分类专栏：运维文章标签： django ui python

于 2021-02-24 10:50:46 首次发布

本文链接：https://blog.csdn.net/qq_35911309/article/details/113880112

版权

运维专栏收录该内容

8 篇文章 1 订阅

订阅专栏

文章目录

一、Simple UI 简介
二、Simple UI 安装

一、Simple UI 简介

以 Django Admin 为基础，配合Element-UI和Vue，让页面更具现代化。享受 Vue +Element-UI 的开发体验，在项目中使用 Vue 组件，带来高效开发。
官网 https://simpleui.88cto.com/simpleui

二、Simple UI 安装

文档 https://simpleui.72wo.com/docs/simpleui/quick.html#目录

2.1 安装

# pip安装
pip install django-simpleui -i https://pypi.tuna.tsinghua.edu.cn/simple
# 克隆源码本地安装
git clone https://github.com/newpanjing/simpleui
cd simpleui
python setup.py sdist install

2.2 配置

settings.py文件中加入一行simpleui

  # Application definition

  INSTALLED_APPS = [
      'simpleui',
      'django.contrib.admin',
      'django.contrib.auth',
      'django.contrib.contenttypes',
      'django.contrib.sessions',
      'django.contrib.messages',
      'django.contrib.staticfiles',
      ...
  ]

2.3 切换主题

SIMPLEUI_DEFAULT_THEME = 'layui.css'

2.4 图标

simpleui仅为系统默认模块提供了图标，如果要为其他模块指定图标，可以自定义配置 .优先级：自定义->系统配图->默认图标
图标：https://element.eleme.cn/#/zh-CN/component/icon

SIMPLEUI_ICON = {
    '交换机': 'el-icon-mobile',
    '交换机端口': 'el-icon-mobile',
    '组网设备': 'el-icon-mobile',
    '组网设备端口': 'el-icon-mobile',
}

2.5 自定义菜单

SIMPLEUI_CONFIG = {
    'system_keep': True,
    # 'menu_display': ['Simpleui', '测试', '权限认证', '动态菜单测试'],      # 开启排序和过滤功能, 不填此字段为默认排序和全部显示, 空列表[] 为全部不显示.
    'dynamic': True,  # 设置是否开启动态菜单, 默认为False. 如果开启, 则会在每次用户登陆时动态展示菜单内容
    'menus': [{
        'app': 'auth',
        'name': '权限认证',
        'icon': 'fas fa-user-shield',
        'models': [{
            'name': '用户',
            'icon': 'fa fa-user',
            'url': 'auth/user/'
        }]
    }, {
        'name': '测试',
        'icon': 'fa fa-file',
        'models': [{
            'name': 'Baidu',
            'url': 'http://baidu.com',
            'icon': 'far fa-surprise'
        }, {
            'name': '界面测试1',
            'url': '/test/index',
            'icon': 'fab fa-github'
        },
            {
                'name': '界面测试2',
                'url': '/test/index2',
                'icon': 'fab fa-github'
            }
        ]
    }, {
        'name': '动态菜单测试',
        'icon': 'fa fa-desktop',
        'models': [{
            'name': time.time(),
            'url': 'http://*.*.*.*:8080/zwzx/api/v1/get/pons/custid/?custid=30021880369',
            'icon': 'far fa-surprise'
        }]
    }]
}



STATIC_URL = '/static/'
STATICFILES_DIRS = [(os.path.join(BASE_DIR, 'static'))]

	<head>
		<meta charset="utf-8">
		<title>组网专线.襄阳电信</title>
         <!-- 先引入 jquery -->
{#        <script type="text/javascript" src="{% static 'js/jquery-1.4.4.min.js' %}"></script>#}
        <script src="/static/js/jquery-3.3.1.min.js"></script>
        <script src="/static/js/tableExport.min.js"></script>
{#        <script type="text/javascript" href="{% static 'js/jquery-3.3.1.min.js' %}"></script>#}
{#        <script type="text/javascript" href="{% static 'js/tableExport.min.js' %}"></script>#}

	</head>

在这里插入图片描述

2.5 重新页面

templates目录中新建admin文件夹选择继承方式

   {% extends 'admin/login.html' %}

    {% block logo %}
        <div class="logo">
            <img src="data:image//2Q==">
        </div>
    {% endblock %}

    {% block header %}
        <div class="header">专线</div>
    {% endblock %}

2.6 自定义后台的名字、标题

urls.py

admin.site.site_title="名字"
admin.site.site_header="名字"
admin.site.index_title="名字"

# 快速操作
SIMPLEUI_HOME_QUICK = False
# 最近动作
 SIMPLEUI_HOME_ACTION = False
# 或修改home.html

2.7 修改时区,修改系统为中文

LANGUAGE_CODE = ‘zh-hans’

TIME_ZONE = ‘Asia/Shanghai’

USE_I18N = True

USE_L10N = True

USE_TZ = False

2.8 登录页增加验证码功能

pip install django-simple-captcha
pip install django-multi_captcha_admin

setting.py

INSTALLED_APPS = [
    'simpleui',
    'multi_captcha_admin',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',    
]

验证码配置

# 验证码配置
MULTI_CAPTCHA_ADMIN = {
    'engine': 'simple-captcha',
}
# 验证码图片大小
CAPTCHA_IMAGE_SIZE = (78, 35)
# 字符个数
CAPTCHA_LENGTH = 4   
# 超时
CAPTCHA_TIMEOUT = 1

url.py

from django.contrib import admin
from django.urls import path,include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('captcha/', include('captcha.urls')),
]

<!-- 在密码显示框下面配置显示验证码 -->
<div class="simpleui-input-inline">
                <el-input prefix-icon="fas fa-lock" type="password" v-model="password" name="password"
                    @keyup.enter.native="login()" placeholder="{% trans 'password' %}" show-password></el-input>
</div>
<div>
                {{ form.captcha }}
</div>

修改样式配置

<style type="text/css">
        #id_captcha_1{
            position: absolute;
            margin:0 0 0 9px; /*上右下左*/
            width: 265px;
            font-size: inherit;
            -webkit-appearance: none;
            border-radius: 4px;
            border: 1px solid #DCDFE6;
            box-sizing: border-box;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645,.045,.355,1);
            text-align: center;
        }
    </style>

2.9 使用layui框架

描述](https://img-blog.csdnimg.cn/20210422093258437.png)

STATIC_URL = '/static/'
STATICFILES_DIRS = [(os.path.join(BASE_DIR, 'static'))]

<script src="/static/layui-v2.6.1/layui/layui.js" charset="utf-8"></script> 
# 在template下的hmtl 引用不需要.. 直接/static

2.10 静态文件收集到 STATIC_ROOT

python manage.py collectstatic

把静态文件收集到 STATIC_ROOT中

STATICFILES_DIRS = [ 
            os.path.join(BASE_DIR, "static/"),
			]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static_new/")
#其中STATIC_ROOT和STATICFILES_DIRS默认为None，

qq_40999093?

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Django Simple UI

文章目录一、Simple UI 简介二、Simple UI 安装2.1 安装2.2 配置2.3 切换主题2.4 图标2.5 自定义菜单2.5 重新页面一、Simple UI 简介以 Django Admin 为基础，配合Element-UI和Vue，让页面更具现代化。享受 Vue +Element-UI 的开发体验，在项目中使用 Vue 组件，带来高效开发。官网 https://simpleui.88cto.com/simpleui二、Simple UI 安装文档 https://simple
复制链接

扫一扫