标签：展示 views list 添加 app02 文章 后台 article BBS
BBS项目补充知识
1. 开放 media 文件路径
# 以用户注册页面为例
用户头像文件我们默认时保存在 根路径下的static下的img文件夹
但也可以单独放置在指定路径下
# 根路径下创建 media文件夹
# 在配置文件中配置指定要单独存放的路径：
# 配置图片要上传的路径
'''你配置这个路径之后，以后上传文件的时候，就可以分别指定上传的路径'''
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # media不是固定的，想叫什么叫什么
# 找到注册功能 将获取用户头像数据改为：
# 1.注册功能
img = request.FILES.get('img') # 获取图片文件用FILES 不能用POST
2. 后台展示文章功能实现
# 新创建 app02：
manage.py@BBS > startapp app02
# 在app02下 views.py写后台功能：
from django.shortcuts import render
# Create your views here.
from app01 import models
# 展示文章
def article_list(request):
article_list = models.Article.objects.all()
return render(request, 'backend/article_list.html', locals())
# 复制总路由文件到app02中：
# 总路由添加(注意不要放在最下面)：
# 路由分发
url(r'^app02/', include('app02.urls')),
# app02路由添加：
from django.conf.urls import url
from app02 import views
urlpatterns = [
# 展示文章
url(r'^article_list/', views.article_list),
]
# 新建后台页面文件 article_list.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1 class="text-center">文章展示</h1>
<div class="col-md-8 col-md-offset-2">
<a href="" class="btn btn-success" style="margin-bottom: 16px;">添加文章</a>
<table class="table-striped table table-hover">
<tbody>
<tr>
<td>标题</td>
<td>分类</td>
<td>点赞数</td>
<td>点踩数</td>
<td>评论数</td>
<td>添加时间</td>
<td>操作</td>
</tr>
</tbody>
<tbody>
{% for article in article_list %}
<tr>
<td><a target="_blank" href="/{{ article.blog.userinfo.username }}/{{ article.pk }}">{{ article.title }}</a></td>
<td>{{ article.category }}</td>
<td>{{ article.up_num }}</td>
<td>{{ article.down_num }}</td>
<td>{{ article.comment_num }}</td>
<td>{{ article.create_time|date:'Y-m-d H:i' }}</td>
<td>
<a href="" class="btn btn-success">修改</a>
<a href="" class="btn btn-danger">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
3. 文章展示页的添加文章功能实现
# 百度下载 kindeditor文章编辑器
http://kindeditor.net/down.php
参考文档使用
# 在app02下 views.py 添加后台功能：
def add_article(request):
return render(request, 'backend/add_article.html')
# app02路由添加：
# 添加文章
url(r'^add/article/', views.add_article),
# 在 article_list.html文件中 找到添加文章功能 a标签 并修改：
<a href="/app02/add/article/" target="_blank" class="btn btn-success" style="margin-bottom: 16px;">添加文章</a>
# 新建后台页面文件 add_article.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1 class="text-center">添加文章</h1>
<div class="col-md-8 col-md-offset-2">
<form action="">
<div class="form-group">
<label for="title">文章标题</label>
<input type="text" id="title" name="title" class="form-control">
</div>
<div class="form-group">
<label for="title">文章内容</label>
<textarea id="editor_id" name="content" style="width:500px;height:600px;"></textarea>
</div>
<div class="form-group">
<label for="title">文章分类</label>
<select name="" id="">
<option value="">分类1</option>
<option value="">分类2</option>
<option value="">分类3</option>
</select>
</div>
<div class="form-group">
<label for="title">文章标签</label>
<input type="checkbox" name="tags">标签1
<input type="checkbox" name="tags">标签2
<input type="checkbox" name="tags">标签3
</div>
<input type="submit" class="btn btn-success" value="提交">
<script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script>
<link rel="stylesheet" href="/static/kindeditor/themes/simple/simple.css" />
<script>
KindEditor.ready(function (K) {
window.editor = K.create('#editor_id', {
width: '100%',
height: '300px',
items: [
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
],
resizeType:0,
themeType : 'simple'
});
});
</script>
</body>
</html>
标签：展示,views,list,添加,app02,文章,后台,article,BBS 来源： https://www.cnblogs.com/jgx0/p/16035447.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。