安装ckeditor
pip install django-ckeditor
如图:
安装pillow
pillow是python的一个图像处理库
pip install pillow
如图:
在项目seetings.py中配置ckeditor
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'ckeditor',
'ckeditor_uploader',
]
媒体文件配置并在项目根目录创建media文件夹
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
CKEDITOR_UPLOAD_PATH = 'upload/'
同样在项目urls.py中配置
from django.conf import settings
from django.conf.urls.static import static
from django.urls import path, include
urlpatterns = [
path('ckeditor/', include('ckeditor_uploader.urls')),
]+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
创建app
django-admin.py startapp user
django-admin.py startapp index
接下来在 settings.py 中找到INSTALLED_APPS这一项,如下:
INSTALLED_APPS = [
'user',
'index',
]
在APP里分别新建urls.py并修改项目的urls.py
urlpatterns = [
path('', include('index.urls')),
path('user/',include('user.urls')),
]
在user.models.py创建模型
from django.db import models
from django.contrib.auth.models import AbstractUser
class Admin(AbstractUser):
nickname = models.CharField('昵称', max_length=10)
phone = models.CharField('手机', max_length=20)
mail = models.CharField('邮箱', max_length=20)
createDate = models.DateField('创建时间', auto_now_add=True)
在index.models.py创建模型
class Blog(models.Model):
title = models.CharField(max_length=50)
author = models.ForeignKey(Admin, on_delete=models.CASCADE, verbose_name='作者')
createdTime = models.DateTimeField('发布时间', auto_now_add=True)
content=RichTextUploadingField(verbose_name='正文')
class Meta:
verbose_name = '文章'
verbose_name_plural = '文章'
def __str__(self):
return self.title
在项目MyBlog.setting.py中添加自定义用户模型
AUTH_USER_MODEL = 'user.Admin'
数据库迁移
python manage.py makemigrations # 让 Django 知道我们在我们的模型有一些变更
python manage.py migrate # 创建表结构
创建admin超级用户
# python manage.py createsuperuser
Username (leave blank to use 'root'): admin
Email address: admin@runoob.com
Password:
Password (again):
Superuser created successfully.
在项目根目录创建templates
login.html
<!DOCTYPE html>
<html>
<head>
{% load static %}
<meta charset="utf-8">
<title>登录</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="{% static 'layui/css/layui.css' %}" media="all">
<link rel="stylesheet" href="{% static 'style/admin.css' %}" media="all">
<link rel="stylesheet" href="{% static 'style/login.css' %}" media="all">
</head>
<body>
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
<div class="layadmin-user-login-main">
<div class="layadmin-user-login-box layadmin-user-login-header">
<h2>系统登录</h2>
</div>
<div class="layadmin-user-login-box layadmin-user-login-body layui-form">
<form class="layui-form" action="/user/loginCheck/" method="post">
{% csrf_token %}
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
<input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
<input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
</div>
<div class="layui-form-item" style="margin-bottom: 20px;">
<input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
<a href="#" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码?</a>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="LAY-user-login-submit">登 陆</button>
</div>
<div class="layui-trans layui-form-item layadmin-user-login-other">
<label>社交账号登入</label>
<a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
<a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>
</div>
</form>
</div>
</div>
<div class="layui-trans layadmin-user-login-footer">
<p>© 2018</p>
</div>
<!--<div class="ladmin-user-login-theme">
<script type="text/html" template>
<ul>
<li data-theme=""><img src="{{ layui.setter.base }}style/res/bg-none.jpg"></li>
<li data-theme="#03152A" style="background-color: #03152A;"></li>
<li data-theme="#2E241B" style="background-color: #2E241B;"></li>
<li data-theme="#50314F" style="background-color: #50314F;"></li>
<li data-theme="#344058" style="background-color: #344058;"></li>
<li data-theme="#20222A" style="background-color: #20222A;"></li>
</ul>
</script>
</div>-->
</div>
<script src="{% static 'layui/layui.js' %}"></script>
<script type="text/javascript">
layui.use('form', function() {
var form = layui.form;
form.render('select');
});
var res='{{ res }}';
if(res=='fail'){
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('用户名或密码错误');
});
}
if(res=='error'){
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('请先登录再访问');
});
}
if(res=='ok'){
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('登录成功');
});
}
</script>
</body>
</html>
addBlog.html
<!DOCTYPE html>
<html lang="en">
<head>
{% load static %}
<meta charset="UTF-8">
<title>Ckeditor编辑器</title>
<link rel="stylesheet" href="{% static 'layui/css/layui.css' %}" media="all">
</head>
<body>
<div class="layui-fluid" style="margin-top: 10px;">
<form class="layui-form" method="post" action="/save/" enctype="multipart/form-data">
{% csrf_token %}
<div class="layui-form-item layui-col-xs6">
<label class="layui-form-label">标题</label>
<div class="layui-input-block">
<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input" width="300px">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">分类</label>
<div class="layui-input-inline">
<select name="category" >
<option value="">请选择</option>
{% for c in categorys %}
<option value="{{ c.categoryName }}">{{ c.categoryName }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="layui-form-item layui-form-text layui-col-xs6">
<label class="layui-form-label">内容</label>
<div class="layui-input-block">
{{ blogForm.content }}
{{ blogForm.media }}
{{ blogForm.body }}
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">发布</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
<script src="{% static 'layui/layui.js' %}"></script>
<script type="text/javascript">
layui.use('form', function(){
var form = layui.form; //只有执行了这一步,部分表单元素才会自动修饰成功
var res = '{{ res }}';
if (res == 'ok') {
layui.use('layer', function() {
var layer = layui.layer;
layer.msg('操作成功');
});
}
if (res == 'fail') {
layui.use('layer', function() {
var layer = layui.layer;
layer.msg("操作成功");
});
}
form.render();
});
</script>
</body>
</html>
在index.admin.py注册模型
from django.contrib import admin
from index.models import Blog
@admin.register(Blog)
class BlogAdmin(admin.ModelAdmin):
list_display = ('title','content')
fields = ('title','content')
前端使用ckeditor需要用到django的forms,在index应用里新建一个forms.py
from ckeditor_uploader.widgets import CKEditorUploadingWidget
from django import forms
from index.models import Blog
class BlogForm(forms.ModelForm):
content=forms.CharField(widget=CKEditorUploadingWidget,label='详情',required=True)
class Meta:
model=Blog
fields = "__all__"
index.views.py编写登录、发表博客视图函数
from index.models import Blog
from user.models import Admin
def loginView(request):
return render(request, 'login.html')
def addBlogView(request):
blogForm=BlogForm()
return render(request, 'addBlog.html',{'blogForm':blogForm})
编辑index.urls
urlpatterns = [
path('login/', views.loginView),
path('addBlog/', views.addBlogView),
]
登录验证视图函数user.views
from django.contrib import auth
from django.shortcuts import render, redirect
def loginCheckView(request):
username = request.POST['username']
password = request.POST['password']
user = auth.authenticate(username=username, password=password)
if not user:
res = 'fail'
return render(request, 'login.html', locals())
else:
auth.login(request, user)
res = 'ok'
request.session['user'] = username
return redirect("/user")
编辑user.urls
urlpatterns = [
path('loginCheck/', views.loginCheckView),
]
使用超级用户登录后台
添加博客
上传图片
成功插入图片
打开项目media文件夹下的upload