网站内容发布系统( 集成百度的Ueditor到我们的系统:2.8.1集成DjangoUeditor编辑器安装DjangoUeditor包 )

优采云 发布时间: 2022-03-09 14:19

  网站内容发布系统(

集成百度的Ueditor到我们的系统:2.8.1集成DjangoUeditor编辑器安装DjangoUeditor包

)

  

  后台栏目列表:

  

  后台文章名单:

  

  文章编辑页面:

  

  我们已经可以在后台修改并保存文章了,但是编辑新闻你会不会觉得不舒服,没有编辑器,我们把百度的Ueditor集成到我们的系统中吧:

  2.8.1 集成的 DjangoUeditor 编辑器

  安装 DjangoUeditor 包

  由于这个包1.8有bug,已经被我修复了,但是原作者没有上传到pypi,我们直接下载zip,或者git clone一下,

  原作者的github地址:直接下载zip(Python 2)

  Python 3 开发者:直接下载 zip (Python 2/3)

  将DjangoUeditor-master里面的DjangoUeditor文件夹放到news同级目录下,如图:

  

  将 DjangoUeditor 应用程序添加到 minicms/settings.py

  INSTALLED_APPS = (

    ...

    

    'news',

    'DjangoUeditor',

)

  在 minicms/urls.py 中添加一行:

      url(r'^ueditor/', include('DjangoUeditor.urls' )),

  Django 1.8.3 urls.py 写的,建议先引入,再使用,即:

  from django.conf.urls import include, url

from django.contrib import admin

from DjangoUeditor import urls as DjangoUeditor_urls

urlpatterns = [

    url(r'^admin/', include(admin.site.urls)),

    url(r'^ueditor/', include(DjangoUeditor_urls)),

]

  但是原来的拼写仍然可以使用。

  这一段是后来加的,不在github上

  为了使上传的图片和文件在本地调试时能够正常显示和下载,

  在 minicms/settings.py 中设置静态和媒体

  # Static files (CSS, JavaScript, Images)

# https://docs.djangoproject.com/en/1.8/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

# 公共的 static 文件,比如 jquery.js 可以放这里,这里面的文件夹不能包含 STATIC_ROOT

STATICFILES_DIRS = (

    os.path.join(BASE_DIR, "common_static"),

)

# upload folder

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

  在 minicms/urls.py 的末尾添加以下代码:

  # use Django server /media/ files

from django.conf import settings

if settings.DEBUG:

    from django.conf.urls.static import static

    urlpatterns += static(

        settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

  安装配置后,修改models.py

  # 引入这个 Field,其它的不要变

from DjangoUeditor.models import UEditorField

class Article(models.Model):

    ...省略

    

    #仅修改 content 字段

    content = UEditorField('内容', height=300, width=1000,

        default=u'', blank=True, imagePath="uploads/images/",

        toolbars='besttome', filePath='uploads/files/')

    

    ...

  再次打开,发现可以使用了:

  

  后台的功能就说到这里了,以后可以自己完善。

  2.9 前端内容展示

  我们可以在后台看到栏目和新闻,但是我们不能给用户一个后台账号来阅读这些内容。

  我们假设这样的设计,首页显示了一些栏目,每栏显示五个相关的文章,栏目可以点击进入,文章也可以点击进入。

  2.9.1 URL 与内容的关系

  让我们回顾一下之前的models.py

  class Column(models.Model):

    ...

    slug = models.CharField('栏目网址', max_length=256, db_index=True)

    ...

class Article(models.Model):

    ...

    slug = models.CharField('网址', max_length=256, db_index=True)

    ...

  我们之前已经自定义了 文章 的 URL。假设我们要访问/column/column_slug/访问栏目内容,访问/news/article_slug/查看文章的详情

  提示:其实这里有个bug,不同的列,不同的文章 URLs可以是一样的,这个不用管,我们以后会修复的!

  我们修改 minicms/urls.py 以添加上述规则:

      url(r'^$', 'news.views.index', name='index'),

    url(r'^column/(?P[^/]+)/$', 'news.views.column_detail', name='column'),

    url(r'^news/(?P[^/]+)/$', 'news.views.article_detail', name='article'),

    url(r'^admin/', include(admin.site.urls)),

  我们来完善一下这三个视图功能(这里为了告诉你怎么做,我们不需要通用视图,因为通用视图已经给你做了,你什么也学不到)

  Homeindex专栏专栏文章详情文章

  # -*- coding: utf-8 -*-

from django.shortcuts import render

from django.http import HttpResponse

def index(request):

    return HttpResponse(u'欢迎来自强学堂学习Django')

def column_detail(request, column_slug):

    return HttpResponse('column slug: ' + column_slug)

def article_detail(request, article_slug):

    return HttpResponse('article slug: ' + article_slug)

  以上是一个通用的框架,我们马上改进,看看参数是怎么传的,可以打开开发服务器python manage.py runserver

  访问例如: :8002/column/tech/ (注意端口,将其更改为您自己的)将获得:

  

  我们发现 slug 已经正确地传递给了 views.py 中的视图函数,我们可以使用 slug 来检索对应的列或 view.py 中的 文章。

  至此,我们已经知道了列URL和文章 URL的规则,我们现在使用代码生成相关的URL,我们运行python manage.py shell进入带有项目环境的终端

  python manage.py shell

相当于下面两句:

python

from minicms.wsgi import *

  一旦我们知道了 slug,我们就可以得到相应的 URL:

  >>> from django.core.urlresolvers import reverse

>>> 

>>> # column

>>> reverse('column', args=('tech',))

u'/column/tech/'

>>> reverse('column', args=('sports',))

u'/column/sports/'

>>> 

>>> # article

>>> reverse('article', args=('article_slug',))

u'/news/article_slug/'

>>> reverse('article', args=('windows_10',))

u'/news/windows_10/'

>>>

  我们修改models.py,将获取URL的函数写成函数get_absolute_url,然后在模板或者其他脚本中调用。

  后台也会默认调用这个函数,可以理解为约定俗成的名字。

  from django.core.urlresolvers import reverse

...

class Column(models.Model):

    ...

    slug = models.CharField('栏目网址', max_length=256, db_index=True)

    ...

    def get_absolute_url(self):

        return reverse('column', args=(self.slug,))

...

class Article(models.Model):

    ...

    slug = models.CharField('网址', max_length=256, db_index=True)

    ...

    def get_absolute_url(self):

        return reverse('article', args=(self.slug,))

...

  注意args参数是一个元组,写args=(self.slug)是错误的,注意args=(self.slug,)后面有个逗号

  我们再次进入终端 python manage.py shell

  >>> from news.models import Column, Article

>>> c = Column.objects.all()[0]

>>> c.get_absolute_url()

u'/column/sports/'

>>> a = Article.objects.all()[0]

>>> a.get_absolute_url()

u'/news/article_1/'

  我们可以看到可以通过这种方式获取文章或者columns的url,我们会在下面的模板中展示出来。

  2.9.2个相关模板文件

  我们先写一个base.html。所有其他模板都继承它。由于 base.html 不属于某个应用程序,它是由整个项目共享的。我们创建一个特殊的模块文件夹来放置其他文件。

  比如还有其他的baidutongji.html,把百度统计的代码放进去统计访问量。

  我们修改settings.py,在模板目录项目下增加一个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',

            ],

        },

    },

]

  在项目目录下创建一个templates文件夹,在里面写一个base.html

  模板/base.html 模板文件

  

  

    

    {% block title %}欢迎光临{% endblock title %} - 自强学堂

    {% block css %}

        

    {% endblock css %}

    {% block js %}

        

    {% endblock js %}

  

  

    {% block content %}

        自强 新闻网

    {% endblock content %}

    {% include "baidutongji.html" %}

  

  上面写的够简单,喜欢BootStrap的同学可以用这个base.html

  

  

    

    

    

    {% block title %}欢迎光临{% endblock title %} - 自强学堂

  

    

    

  

    

    

    

    {% block css %}

        

    {% endblock css %}

    {% block js %}

        

    {% endblock js %}

  

  

    

        

            {% block content %}

            自强 新闻网

            {% endblock content %}

        

    

  

    

    

    {% include "baidutongji.html" %}

  

  模板/baidutongji.html

  

var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");

document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fab8b04b0bf640ac196520db1cd029664' type='text/javascript'%3E%3C/script%3E"));

  2.9.3 查看检索结果并在模板中渲染显示

  我们重写视图函数,查询数据库,得到相关内容:

  def column_detail(request, column_slug):

    column = Column.objects.get(slug=column_slug)

    return render(request, 'news/column.html', {'column': column})

def article_detail(request, article_slug):

    article = Article.objects.get(slug=article_slug)

    return render(request, 'news/article.html', {'article': article})

  在news下新建一个templates文件夹,然后在templates下新建一个news文件夹。让我们编写两个模板文件:

  列模板,视图传递一个列对象

  news/templates/news/column.html(或者项目下的templates/news/column.html路径)Django可以找到

  {% extends "base.html" %}

{% block title %}

{{ column.title }}

{% endblock title %}

{% block content %}

栏目简介:{{ column.intro }}

栏目文章列表:

还需要完善

{% endblock content %}

  文章模板,视图传递一个文章对象

  news/templates/news/article.html(或项目下的templates/news/article.html)

  {% extends "base.html" %}

{% block title %}

{{ article.title }}

{% endblock title %}

{% block content %}

文章标题: {{ article.title }}

    {{ article.content }}

{% endblock content %}

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线