Xadmin和Ueditor

xadmin的安裝

xadmin依賴

six
future
httplib2
django-reversion
django-formtools
django-crispy-forms
django-import-export

方法一：

命令行模式下：

pip install xadmin

方法二：

django2.0的安裝（源碼安裝方式）：

https://github.com/sshwsfc/xadmin/tree/django2

README.rst這個文件的編碼有問題，能夠內容沒什麼重要的，能夠直接到github上下載安裝包，而後新建一個txt空文件，把文件名改爲README.rst，替換原來的文件。替換成功後，把壓縮包放到文件夾（C:Users18845EnvsxinyuonlineScripts）中，在命令窗口中進入存放壓縮包的文件下，執行pip命令 

(Env) C:\Users\18845\Envs\xinyuonline\Scripts>pip install xadmin-master.zip

若是上面安裝提示Runtime錯誤：

更換安裝源（使用豆瓣源）

pip install -i https://pypi.douban.com/simple xadmin-django2

安裝成功後，同時也安裝了不少依賴的包。

xadmin的配置

 （1）新建Python Package "extra_apps",把源碼xadmin文件夾放到extra_apps文件夾下面。

（2）把extra_apps右鍵mark爲Source Root並在settings中加入

sys.path.insert(0,os.path.join(BASE_DIR, 'extra_apps'))

（3）由於咱們用源碼的xadmin,因此要卸載以前安裝的。也能夠一開始不安裝xadmin,直接安裝依賴包，把源文件拉到項目中。

pip uninstall xadmin

(4)配置路由

把admin改爲xadmin

# urls.py

from django.urls import path

import xadmin

urlpatterns = [
    path('xadmin/', xadmin.site.urls),
]

(5)註冊app

把下面兩個app註冊到settings.py的INSTALLED_APPS中

'xadmin',
'crispy_forms'

(6)從新生成數據庫

python manage.py makemigrations

python manage.py migrate

(7)設置成中文

LANGUAGE_CODE = 'zh-hans'

TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_L10N = True

USE_TZ = False #設置爲本地時區

(8)建立一個管理員用戶

python manage.py createsuperuser

如今就能夠運行了 

python manage.py runserver

訪問後臺：http://127.0.0.1:8000/xadmin

 能夠看到成功進入管理界面

app的註冊

四個app下面都新建文件adminx.py，而後分別註冊到後臺.

UserProfile繼承User所以自動註冊到xadmin.

（1）users/adminx.py

# users/adminx.py

import xadmin

from .models import EmailVerifyRecord

#xadmin中這裏是繼承object，再也不是繼承admin
class EmailVerifyRecordAdmin(object):
    pass

xadmin.site.register(EmailVerifyRecord,EmailVerifyRecordAdmin)

完善功能，增長顯示字段，搜索和過濾

# users/adminx.py

import xadmin

from .models import EmailVerifyRecord

#xadmin中這裏是繼承object，再也不是繼承admin
class EmailVerifyRecordAdmin(object):
    # 顯示的列
    list_display = ['code', 'email', 'send_type', 'send_time']
    # 搜索的字段，不要添加時間搜索
    search_fields = ['code', 'email', 'send_type']
    # 過濾
    list_filter = ['code', 'email', 'send_type', 'send_time']
    #每頁顯示多少數據
    list_per_page = 3
    #屬性的前後順序
    fields = ['','']
    #屬性分組
    fieldsets = [
      ('base',{'fields':['','']}),
      ('more',{'fields':['','']}),
    ]
    #fields和fieldsets只能有一個
xadmin.site.register(EmailVerifyRecord,EmailVerifyRecordAdmin)

xadmin的全局配置

將全局配置修改:

• 如左上角：django Xadmin。下面的個人公司
• 主題修改，app名稱漢化，菜單收疊。

 使用Xadmin的主題功能。

把全站的配置放在usersadminx.py中:

 （1）添加主題功能

添加主題後，能夠選擇本身喜歡的主題

from xadmin import views

# 建立xadmin的最基本管理器配置，並與view綁定
class BaseSetting(object):
    # 開啓主題功能
    enable_themes = True
    use_bootswatch = True

# 將基本配置管理與view綁定
xadmin.site.register(views.BaseAdminView,BaseSetting)

（2）全局配置

 修改django admin 和下面的個人公司收起菜單

# 全局修改，固定寫法
class GlobalSettings(object):
    # 修改title
    site_title = 'NBA後臺管理界面'
    # 修改footer
    site_footer = '科比的公司'
    # 收起菜單，只顯示app名，具體表名隱藏
    menu_style = 'accordion'
    # 圖標
     

# 將title和footer信息進行註冊
# CommAdminView源碼中有配置，下面
#   global_search_models    全局搜索model
#    global_models_icon = {} 全局設置model圖標
#   default_model_icon = None  默認圖標
#   apps_label_title = {}   app名字
#   apps_icons = {}          app圖標
xadmin.site.register(views.CommAdminView,GlobalSettings)

（3）app名字改成中文

# users/apps.py

from django.apps import AppConfig


class UsersConfig(AppConfig):
    name = 'users'
    #app名字後臺顯示中文
    verbose_name = "用戶管理"

還須要__init__.py中修改默認配置才生效

# users/__init__.py

default_app_config = 'users.apps.UsersConfig'

或者修改setting中app名稱爲補全名稱

'users.apps.UsersConfig',
    'goods.apps.GoodsConfig',
    'trade.apps.TradeConfig',
    'user_operation.apps.UserOperationConfig',

而後在apps中添加

from django.apps import AppConfig

class UsersConfig(AppConfig):
    name = 'users'
    verbose_name = "用戶管理"

或者 apps_label_title = {}這裏設置名字

xadmin進階開發

權限管理

（1）用戶權限

超級用戶擁有全部權限，其它添加的用戶默認沒有任何權限，爲其添加權限

2）組的權限

 添加一個組「編輯部門」，賦予權限 ，把用戶加入這個組，則這個用戶擁有和組相同的權限

自定義icon、默認排序、只讀字段和不顯示的字段

xadmin的圖標採用的是第三方css樣式「font awesome」,咱們能夠進官網下載最新的樣式替代本來的，下載地址：http://www.fontawesome.com.cn/

下載完後把裏面的「css」和「fonts」兩個文件夾拷貝到xadmin的源碼（路徑：xadmin/static/vendor/font-awesome）裏面

# Course的admin管理器
class CourseAdmin(object):
    '''課程'''

    list_display = [ 'name','desc','detail','degree','learn_times','students']   #顯示的字段
    search_fields = ['name', 'desc', 'detail', 'degree', 'students']             #搜索
    list_filter = [ 'name','desc','detail','degree','learn_times','students']    #過濾 
    model_icon = 'fa fa-book'            #圖標
    ordering = ['-click_nums']           #排序
    readonly_fields = ['click_nums']     #只讀字段，不能編輯
    exclude = ['fav_nums']               #不顯示的字段 ，和readonly_fields是衝突的
    # 執行動做的位置
    actions_on_bottom = True
    actions_on_top = True

下拉框搜索：

relfield_style = 'fk-ajax'

當有外鍵指向他，會以ajax方式加載

數據量過大時頗有用

inlines添加數據

 目前在添加課程的時候無法添加章節和課程資源，咱們能夠用inlines去實現這一功能

無法完成在章節中再嵌套視頻
可是能夠有多個inline。在添加課程時添加課程資源

course/adminx.py

class LessonInline(object):
    model = Lesson
    #extra表示建立課程時建立的章節數量
    extra = 1
    #style='tab'表示橫向顯示?
    style = 'tab'

class CourseResourceInline(object):
    model = CourseResource
    extra = 1


#在CourseAdmin中使用inlines添加上面兩個的方法
class CourseAdmin(object):
    inlines = [LessonInline,CourseResourceInline]    #增長章節和課程資源

一張表分兩個Model來管理

課程裏面分爲輪播課程和不是輪播課程兩種類型，咱們能夠分開來管理

在course/models.py裏面新建一個Model

class BannerCourse(Course):
    '''顯示輪播課程'''
    class Meta:
        verbose_name = '輪播課程'
        verbose_name_plural = verbose_name
        #這裏必須設置proxy=True，這樣就不會再生成一張表，同時還具備Model的功能
        proxy = True

course/adminx.py中重載queryset方法。

from .models import BannerCourse

class CourseAdmin(object):
    '''課程'''

    list_display = [ 'name','desc','detail','degree','learn_times','students']   #顯示的字段
    ......

    def queryset(self):
        # 重載queryset方法，來過濾出咱們想要的數據的
        qs = super(CourseAdmin, self).queryset()
        # 只顯示is_banner=True的課程
        qs = qs.filter(is_banner=False)
        return qs


class BannerCourseAdmin(object):
    '''輪播課程'''

    list_display = [ 'name','desc','detail','degree','learn_times','students']
    ......
    
    def queryset(self):
        #重載queryset方法，來過濾出咱們想要的數據的
        qs = super(BannerCourseAdmin, self).queryset()
        #只顯示is_banner=True的課程
        qs = qs.filter(is_banner=True)
        return qs

# 將管理器與model進行註冊關聯
xadmin.site.register(Course, CourseAdmin)
xadmin.site.register(BannerCourse, BannerCourseAdmin)

xadmin的其它常見功能

（1）list_editable

在列表頁能夠直接編輯的,而不用點進去編輯。

class CourseAdmin(object):
    list_editable = ['degree','desc']

（2）自定義函數做爲列顯示

course/models.py中

class Course(models.Model):
    '
    '
    '
    def get_zj_nums(self):
        #獲取課程的章節數
        return self.lesson_set.all().count()
    get_zj_nums.short_description = '章節數'   #在後臺顯示的名稱

course/adminx.py中

class CourseAdmin(object):
    list_display = ['get_zj_nums']  #直接使用函數名做爲字段顯示
   #布爾值、下拉框的字段也能夠定義一個函數，把函數名做爲字段顯示，好比 性別，這裏的機構類別啊等等。

    def sex(self):
        if self.sex:
            return '男'
        else:
            return '女'

    sex.short_description = '性別' #函數命名爲漢字
    list_display = [sex,]

效果：列表字段多了個「章節數」

（3）顯示自定義的html代碼

course/models.py中

class Course(models.Model):
    .
    .
    .
    def go_to(self):
        from django.utils.safestring import mark_safe
        #mark_safe後就不會轉義
        return mark_safe("<a href='https://home.cnblogs.com/u/derek1184405959/'>跳轉</a>")
    go_to.short_description = "跳轉"

class CourseAdmin(object):
    list_display = ['go_to']

效果：多了一個列表「跳轉」，點擊後跳轉到上面定義的地址

（4）refresh定時刷新工具

 course/adminx.py中

class CourseAdmin(object):
    refresh_times = [3,5]           #自動刷新（裏面是秒數）

後臺效果：

能夠選擇3s或者5s自動刷新頁面

（5）字段聯動

 應用場景：當添加一門課程的時候，但願課程機構裏面的課程數 +1

 重寫xadmin的save_models方法

class CourseAdmin(object):
    .
    .
    .
    def save_models(self):
        # 在保存課程的時候統計課程機構的課程數
        # obj實際是一個course對象
        obj = self.new_obj
        # 若是這裏不保存，新增課程，統計的課程數會少一個
        obj.save()
        # 肯定課程的課程機構存在。
        if obj.course_org is not None:
            #找到添加的課程的課程機構
            course_org = obj.course_org
            #課程機構的課程數量等於添加課程後的數量
            course_org.course_nums = Course.objects.filter(course_org=course_org).count()
            course_org.save()

富文本編輯器Ueditor

（1）下載

地址：https://github.com/twz915/Dja...

解壓後，把DjangoUeditor文件夾拷貝到項目目錄下面

注意：直接pip install DjangoUeditor的方法會出問題

（2）settings中添加app

INSTALLED_APPS = [
    'DjangoUeditor',
]

（3）MxOnline/urls.py

　　# 富文本編輯器url
    path('ueditor/',include('DjangoUeditor.urls' )),

 （4）course/models.py中Course修改detail字段

from DjangoUeditor .models import UEditorField

class Course(models.Model):
    # detail = models.TextField("課程詳情")
    detail = UEditorField(verbose_name=u'課程詳情', width=600, height=300, imagePath="courses/ueditor/",
                          filePath="courses/ueditor/", default='')

（5）xadmin/plugins目錄下新建ueditor.py文件，代碼以下

import xadmin
from xadmin.views import BaseAdminPlugin, CreateAdminView, ModelFormAdminView, UpdateAdminView
from DjangoUeditor.models import UEditorField
from DjangoUeditor.widgets import UEditorWidget
from django.conf import settings


class XadminUEditorWidget(UEditorWidget):
    def __init__(self, **kwargs):
        self.ueditor_options = kwargs
        self.Media.js = None
        super(XadminUEditorWidget,self).__init__(kwargs)


class UeditorPlugin(BaseAdminPlugin):

    def get_field_style(self, attrs, db_field, style, **kwargs):
        if style == 'ueditor':
            if isinstance(db_field, UEditorField):
                widget = db_field.formfield().widget
                param = {}
                param.update(widget.ueditor_settings)
                param.update(widget.attrs)
                return {'widget':XadminUEditorWidget(**param)}
        return attrs

    def block_extrahead(self, context, nodes):
        js  = '<script type="text/javascript" src="%s"></script>' %(settings.STATIC_URL + "ueditor/ueditor.config.js")
        js += '<script type="text/javascript" src="%s"></script>' %(settings.STATIC_URL + "ueditor/ueditor.all.min.js")
        nodes.append(js)

xadmin.site.register_plugin(UeditorPlugin, UpdateAdminView)
xadmin.site.register_plugin(UeditorPlugin, CreateAdminView)

（6）xadmin/plugs/__init__.py裏面添加ueditor插件

PLUGINS = (
   'ueditor',
)

（7）course/adminx.py中使用

class CourseAdmin(object):
    #detail就是要顯示爲富文本的字段名
    style_fields = {"detail": "ueditor"}

（8）course-detail.html

在模板中必須關閉Django的自動轉義才能正常顯示

<div class="tab_cont tab_cont1">
     {% autoescape off %}
     {{ course.detail }}
     {% endautoescape %}
     </div>

導入excel

class CourseAdmin(object):
    '''課程'''

    list_display = ['name', 'desc', 'detail', 'degree', 'learn_times', 'students']
    search_fields = ['name', 'desc', 'detail', 'degree', 'students']
    list_filter = ['name', 'desc', 'detail', 'degree', 'learn_times', 'students']

    inlines = [LessonInline]
    style_fields = {"detail":"ueditor"}
    import_excel = True

    def queryset(self):
        return super().queryset().filter(is_banner=False)

    def post(self, request, *args, **kwargs):
        #  導入邏輯
        if 'excel' in request.FILES:
            pass
        return super(CourseAdmin, self).post(request, args, kwargs)