改用markdown編輯器
設置欄目
創(chuàng)建一個新的app：django-admin startapp article，將新建的app添加到mysite/settings.py中
在article/models.py中創(chuàng)建數(shù)據(jù)模型
并生成新的遷移文件
python manage.py migrate article
python manage.py migrate article
from django.db import models
from django.contrib.auth.models import User
# Create your models here.
class ArticleColumn(models.Model):
user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='article_column') #ForeignKey 一對多
column = models.CharField(max_length=200)
created = models.DateField(auto_now_add=True)
def ___str__(self):
return self.column
在創(chuàng)建欄目時需要用到表單類,在article/forms.py創(chuàng)建一個表單類
from django import forms
from .models import ArticleColumn
class ArticleColumnForm(forms.ModelForm):
class Meta:
model = ArticleColumn
fields = ("column",)
在article/views.py中寫視圖函數(shù)
from django.shortcuts import render
from django.contrib.auth.decorators import login_required
from .models import ArticleColumn
# Create your views here.
@login_required(login_url="/account/login/") #自帶的判斷是否登陸的裝飾器
def article_column(request):
columns = ArticleColumn.objects.filter(user=request.user) #將數(shù)據(jù)庫中符和user=request.user的數(shù)據(jù)提取出來
return render(request, "article/header.html", {" columns": columns})
在article/urls.py配置
from django.urls import path
from . import views
app_name = 'article'
urlpatterns = [
path("article-column/", views.article_column, name="article_column"),
]
在templates/blog/title.html文件中添加一個跳轉到后臺的連接
<li><a href="{% url 'article:article_column' %}">后臺</a></li>
然后在templates/article/header.html中寫前端頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<span>用戶：{{user.username}}</span><br>
<a href="{% url 'blog:blog_title' %}">首頁</a>
<a href="{% url 'account:user_logout' %}">Logout</a>
<p><a href="{% url 'article:article_column' %}">欄目管理</a></p>
<p class="text-right"><button class="btn btn-primary">add column</button></p>
<div>
<table class="table table-hover">
<tr>
<td>序號</td>
<td>欄目名稱</td>
<td>操作</td>
</tr>
{% for column in columns %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{column.column}}</td>
<td>--</td>
</tr>
{% empty %}
<p>沒有設置欄目</p>
{% endfor %}
</table>
</div>
</div>
</body>
</html>
捕獲.PNG
添加欄目
在static/js文件夾下放入jquery.js和layer兩個前端開發(fā)包
然后修改templates/article/header.html中的add column部分的代碼為<p class="text-right"><button id='add_column' onclick="add_column()" class="btn btn-primary">add column</button></p>
添加js代碼
{% load staticfiles %}
<script type="text/javascript" src="{% static '/js/jquery.js' %}"></script>
<script type="text/javascript" src="{% static '/js/layer/layer.js' %}"></script>
<script type="text/javascript">
function add_column(){
var index = layer.open({
type:1,
skin:"layui-alyer-rim",
area:["400px","200px"],
title:"新增欄目",
content: '<div class="text-center" style="margin-top:20px"><p>請輸入新的欄目名稱</p><p><input type="text"></p></div>',
btn:["確定","取消"],
yes: function (index, layero) {
column_name = $("#id_column").val();
alert(column_name);
},
btn2: function (index, layero) {
layer.close(index);
}
});
}
</script>
捕獲.PNG
實現(xiàn)功能，修改article/views.py文件
from django.shortcuts import render
from django.contrib.auth.decorators import login_required
from .models import ArticleColumn
from django.http import HttpResponse
from django.views.decorators.csrf import csrf_exempt
from .forms import ArticleColumnForm
# Create your views here.
@login_required(login_url="/account/login/") #自帶的判斷是否登陸的裝飾器
@csrf_exempt #csrf問題的一種解決方式
def article_column(request):
if request.method == "GET":
columns = ArticleColumn.objects.filter(user=request.user) #將數(shù)據(jù)庫中符和user=request.user的數(shù)據(jù)提取出來
column_form = ArticleColumnForm()
return render(request, "article/header.html", {"columns": columns, "column_form": column_form})
if request.method == "POST":
column_name = request.POST['column']
columns = ArticleColumn.objects.filter(user_id=request.user.id, column=column_name) #當前用戶，欄目名稱,如果欄目不存在則允許創(chuàng)建
if columns:
return HttpResponse("2")
else:
ArticleColumn.objects.create(user=request.user, column=column_name)
return HttpResponse("1")
對templates/article/header.html文件中的js進行修改，直接放上完整的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="container">
<span>用戶：{{user.username}}</span><br>
<a href="{% url 'blog:blog_title' %}">首頁</a>
<a href="{% url 'account:user_logout' %}">Logout</a>
<p><a href="{% url 'article:article_column' %}">欄目管理</a></p>
<p class="text-right"><button id='add_column' onclick="add_column()" class="btn btn-primary">add column</button></p>
<div>
<table class="table table-hover">
<tr>
<td>序號</td>
<td>欄目名稱</td>
<td>操作</td>
</tr>
{% for column in columns %}
<tr>
<td>{{forloop.counter}}</td>
<td>{{column.column}}</td>
<td>--</td>
</tr>
{% empty %}
<p>沒有設置欄目</p>
{% endfor %}
</table>
</div>
</div>
{% load staticfiles %}
<script type="text/javascript" src="{% static '/js/jquery.js' %}"></script>
<script type="text/javascript" src="{% static '/js/layer/layer.js' %}"></script>
<script type="text/javascript">
function add_column(){
var index = layer.open({
type:1,
skin:"layui-alyer-rim",
area:["400px","200px"],
title:"新增欄目",
content: '<div class="text-center" style="margin-top:20px"><p>請輸入新的欄目名稱</p><p>{{column_form.column}}</p></div>',
btn:["確定","取消"],
yes: function (index, layero) {
column_name = $("#id_column").val();
<!-- 修改部分-->
$.ajax({
url:"{% url 'article:article_column' %}",
type:"POST",
data:{"column":column_name},
success:function(e) {
if(e=='1'){
parent.location.reload();
layer.msg("good");
}else{
layer.msg("此欄目已存在")
}
}
});
},
btn2: function (index, layero) {
layer.close(index);
}
});
}
</script>
</body>
</html>
捕獲.PNG
