3.博客系统| 设计系统首页(文章列表渲染)
设置系统首页(文章列表渲染)
系统首页的导航区域| 主体布局| admin |首页文章列表的渲染
1.系统首页的导航区域
re_path('^$',views.index), #在首页不用index也可以显示出。在url里边设置了这个,可以直接访问127.0.0.1:8000,可不加index
index.html
bootstrap里边的导航组件:https://v3.bootcss.com/components/
index.html
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/static/blog/bootstrap/css/bootstrap.css"> //引入css<script src="/static/js/jquery-3.2.1.min.js"></script> //引入jquery,bootstrap依赖于jquery。<script src="/static/blog/bootstrap/js/bootstrap.min.js"></script> //引入bootstrap<style> //修饰下图标#user_icon {font-size: 18px;margin-right: 10px;vertical-align: -3px;}</style> </head><body>{#<h3>{{ request.user.username}}</h3>#} <nav class="navbar navbar-default"><div class="container-fluid"><!-- Brand and toggle get grouped for better mobile display --><div class="navbar-header"><button type="button" class="navbar-toggle collapsed" data-toggle="collapse"data-target="#bs-example-navbar-collapse-1" aria-expanded="false"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">博客园</a></div><!-- Collect the nav links, forms, and other content for toggling --><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">随笔 <span class="sr-only">(current)</span></a></li><li><a href="#">新闻</a></li><li><a href="#">博文</a></li>{# <li class="dropdown">#}{# <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>#}{# <ul class="dropdown-menu">#}{# <li><a href="#">Action</a></li>#}{# <li><a href="#">Another action</a></li>#}{# <li><a href="#">Something else here</a></li>#}{# <li role="separator" class="divider"></li>#}{# <li><a href="#">Separated link</a></li>#}{# <li role="separator" class="divider"></li>#}{# <li><a href="#">One more separated link</a></li>#}{# </ul>#}{# </li>#}</ul>{# <form class="navbar-form navbar-left">#}{# <div class="form-group">#}{# <input type="text" class="form-control" placeholder="Search">#}{# </div>#}{# <button type="submit" class="btn btn-default">Submit</button>#}{# </form>#}<ul class="nav navbar-nav navbar-right">{% if request.user.is_authenticated %} //登录成功就把li标签放进去;<span></span>标签是bootstrap里边的user图标。 <li><a href="#"><span id="user_icon"class="glyphicon glyphicon-user"></span>{{ request.user.username }}</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"aria-expanded="false">Dropdown <span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">修改密码</a></li><li><a href="#">修改头像</a></li><li><a href="/logout/">注销</a></li><li role="separator" class="divider"></li><li><a href="#">Separated link</a></li></ul></li>{% else %} //登录不成功就显示登录、注册 <li><a href="/login/">登录</a></li><li><a href="/register/">注册</a></li> {% endif %} </ul></div><!-- /.navbar-collapse --></div><!-- /.container-fluid --> </nav></body> </html>
view.py
def logout(request): #注销函数auth.logout(request) #request.session.flush() 把对应提交的名字给删掉了return redirect("/login/")
2.系统首页的主题布局
主体其他部分,加栅格栏
index.html<div class="container-fluid"><div class="row"><div class="col-md-3"> //分块的,这一部分给它加个bootstrap的面板<div class="panel panel-warning"><div class="panel-heading">Panel heading without title</div><div class="panel-body">Panel content</div></div><div class="panel panel-info"><div class="panel-heading">Panel heading without title</div><div class="panel-body">Panel content</div></div><div class="panel panel-danger"><div class="panel-heading">Panel heading without title</div><div class="panel-body">Panel content</div></div></div><div class="col-md-6">222</div><div class="col-md-3"><div class="panel panel-primary"><div class="panel-heading">Panel heading without title</div><div class="panel-body">Panel content</div></div><div class="panel panel-default"><div class="panel-heading">Panel heading without title</div><div class="panel-body">Panel content</div></div></div></div> </div></body> </html>
3.admin的使用
在数据库article里边要有文章,拿到所有的文章列表渲染到index页面。从数据库插入数据:方式一navicat,方式二sql直接插入,
方式三利用django的admin组件通过web的方式。
admin:(不是必须的)
Django内部的一个组件:后台数据管理组件(web页面)
python manage.py createsuperuser 针对用户认证组件对应的用户表userinfo ;is_superuser--> 1来确认你是否是超级用户
必须用超级用户才能登录admin(django自动创建的)
admin.py
from django.contrib import admin# Register your models here.#登录之后写注册信息;8张表 from blog import models admin.site.register(models.UserInfo) admin.site.register(models.Blog) admin.site.register(models.Category) admin.site.register(models.Tag) admin.site.register(models.Article) admin.site.register(models.ArticleUpDown) admin.site.register(models.Article2Tag) admin.site.register(models.Comment)
4.基于admin录入文章数据
直接在admin里边操作,在Articles里边添加三篇文章
Blogs绑定两个对象
在user表里绑定一对一的关系。alex、egon、kris,他们所对应的Blog(草liu社区、egon的个人博客)。
在article表里添加文章信息,给它添加文章分类Category。
5.首页的文章列表的渲染
访问index时候在它所对应的视图中拿到所有的article列表,交给所对应的模板去渲染。
views.py
def index(request):article_list = models.Article.objects.all() #拿到数据return render(request, "index.html", {"article_list": article_list}) #传到模板里边
index,html
头像是在admin/blog/userinfo设置.
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="/static/blog/bootstrap/css/bootstrap.css"><script src="/static/js/jquery-3.2.1.min.js"></script><script src="/static/blog/bootstrap/js/bootstrap.min.js"></script><style>#user_icon {font-size: 18px;margin-right: 10px;vertical-align: -3px;} .pub_info{margin-top: 10px;}.pub_info .glyphicon-comment{vertical-align: -1px;}</style> </head> <body> ..................... <div class="container-fluid"><div class="row"><div class="col-md-3">...</div><div class="col-md-6"><div class="article_list">{% for article in article_list %}<div class="article-item"><h5><a href="">{{ article.title }}</a> </h5> //文章标题<div class="article-desc"><span class="media-left"><a href=""><img width="56" src="media/{{ article.user.avatar }}" alt=""> </a> //拿到avatar的相对路径的头像(userinfo表里)</span> //上边那个相对路径是在media文件夹里边,必须配上这个media才能访问到。<span class="media-right"> {{ article.desc }} //文章内容摘要</span></div><div class="small pub_info"> //发布信息<span><a href="">{{ article.user.username }}</a> </span> <span>发布于 {{ article.create_time|date:"Y-m-d H:i" }}</span> //要设置下时区settings-->>TIME_ZONE="Asia/shanghai"<span class="glyphicon glyphicon-comment">评论({{ article.comment_count }})</span> //加个图标,评论数<span class="glyphicon glyphicon-thumbs-up">点赞({{ article.up_count }})</span> //点赞图标,点赞数</div></div>{% endfor %}</div></div><div class="col-md-3">...</div></div> </div></body> </html>
转载于:https://www.cnblogs.com/shengyang17/p/9403867.html
3.博客系统| 设计系统首页(文章列表渲染)相关推荐
- php博客系统答辩问题,基于PHP个人博客的设计与实现毕业设计答辩 PPT课件
<基于PHP个人博客的设计与实现毕业设计答辩 PPT课件>由会员分享,可在线阅读,更多相关<基于PHP个人博客的设计与实现毕业设计答辩 PPT课件(31页珍藏版)>请在人人文库 ...
- 一文搭建Vuepress博客/文档系统:搭建,导出,SEO,自动编译和部署,域名,HTTPS,备案等
本文纯原创,搭建后的博客/文档网站可以参考: Java 全栈知识体系.如需转载请说明原处. 文章内容目录 文章内容目录 第一部分 - 博客/文档系统的搭建 博客/文档搭建前言 有哪些选择 我做了哪些尝 ...
- 一文搭建自己博客/文档系统:搭建,自动编译和部署,域名,HTTPS,备案等
本文纯原创,搭建后的博客/文档网站可以参考: Java 全栈知识体系.如需转载请说明原处. 文章内容目录 第一部分 - 博客/文档系统的搭建 博客/文档搭建前言 有哪些选择 我做了哪些尝试 自己写:我 ...
- java毕业设计博客管理系统Mybatis+系统+数据库+调试部署
java毕业设计博客管理系统Mybatis+系统+数据库+调试部署 java毕业设计博客管理系统Mybatis+系统+数据库+调试部署 本源码技术栈: 项目架构:B/S架构 开发语言:Java语言 开 ...
- JAVA计算机毕业设计大学生个人博客网站Mybatis+系统+数据库+调试部署
JAVA计算机毕业设计大学生个人博客网站Mybatis+系统+数据库+调试部署 JAVA计算机毕业设计大学生个人博客网站Mybatis+系统+数据库+调试部署 本源码技术栈: 项目架构:B/S架构 开 ...
- java毕业设计大学生个人博客网站Mybatis+系统+数据库+调试部署
java毕业设计大学生个人博客网站Mybatis+系统+数据库+调试部署 java毕业设计大学生个人博客网站Mybatis+系统+数据库+调试部署 本源码技术栈: 项目架构:B/S架构 开发语言:Ja ...
- java毕业设计个人博客网站Mybatis+系统+数据库+调试部署
java毕业设计个人博客网站Mybatis+系统+数据库+调试部署 java毕业设计个人博客网站Mybatis+系统+数据库+调试部署 本源码技术栈: 项目架构:B/S架构 开发语言:Java语言 开 ...
- 博客版面设计~文章填充
博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博客版面设计~文章填充博 ...
- Python实现抓取CSDN博客首页文章列表
1.使用工具: Python3.5 BeautifulSoup 2.抓取网站: csdn首页文章列表 http://blog.csdn.net/ 3.分析网站文章列表代码: 4.实现抓取代码: __a ...
最新文章
- 深度学习100例-卷积神经网络(CNN)3D医疗影像识别 | 第23天
- 基于有限元方法的薄板冲压成型过程的程序仿真
- Mina airQQ聊天 client篇(三)
- 1.1 Spring的整体架构--Spring源码深度解析
- 牛客 - 牛半仙的妹子图(并查集+bitset/克鲁斯卡尔重构树+主席树)
- python学习-综合练习(平方根、海伦公式、随机数、转换函数、数值交换)
- 网页开发部署-开发工具MyEclips+Tomcat+mysql
- 宜居指数c语言,城市功能日趋完善宜居指数持续提升
- 蓝桥杯2016年第七届C/C++省赛B组第四题-快速排序
- 输入输出运算符的重载
- gma 教程 | 气候气象 | 基于 彭曼-蒙提斯法(Penman-Monteith)计算日作物参考蒸散量(ET0)
- 最优秀的数据可视化案例欣赏
- 什么是串口并行,串口接行
- 华为云 云学院 白嫖
- 服务器u单核性能排行,CPU单核性能排行[2018年10月更新]
- Flink 1.10之改进的TaskManager内存模型与配置/taskmanager.memory.network.fraction
- Complex Multiplier IP 使用教程(源码)
- 【19周-星耀】FASTER!FASTER!FASTER!
- android转服务器吗,王者荣耀角色迁移iOS区可以转安卓区吗 王者荣耀角色迁移iOS区转安卓区详情...
- 【时光纪念】愿有岁月可回头
热门文章
- java的memset怎么写_memset函数使用详解
- github pages 无法加载css的问题
- java计算机毕业设计库存管理系统源码+系统+数据库+lw文档+mybatis+运行部署
- 读取Revit的所有标高,并判断构件所属标高
- tcpdf 打印PDF字体乱码,通过视图解决方法
- aarch64指令集_AArch64应用程序级编程模型
- 机器学习最易懂之贝叶斯模型详解与python实现
- 机械一体化有包含计算机专业吗,机电一体化专业有哪些优势?
- Eyou内核开发木质装饰材料建材公司网站模板源码
- 春招答疑总结 | 细节决定成败,决战2022春招