Day07 后台管理与发布文章

源代码: https://github.com/LToddy/blog

技术交流群:630398887(欢迎一起吹牛)

写在前面的话:如果你实在不会写页面,复制粘贴你会吧.

https://getbootstrap.com/docs/3.3/examples/theme/

这个页面是,bootstrap样式表的例样,

http://getbootstrap.com/docs/4.0/examples/

这个页面是,你进去看那个页面合适,你点进去,然后右键查看网页源代码,复制就好了,顺便说一下,别忘了把CSS也复制了.

我们来定义下我们的文章模型,文章内容放到数据库里面,然后通过查询文章标题来,在主页建立文章链接。

app/models.py

class Article(db.Model):__tablename__ = 'articles'id = db.Column(db.Integer, primary_key=True)title = db.Column(db.String(64))content = db.Column(db.Text)

文章模型很简单,一个id,一个文章标题,一个文章的内容这三个字段。
content = db.Column(db.Text),这里,回顾一下或者百度一下SQLAlchemy的列模型。

因为我们文章内容可不是几个字,而是很多上千上万字说不定,所以就不能再用简单的db.String来处理了。
我们使用db.Text这个,他对长文本做了优化.

当我们有了这个数据库的文章模型之后,为了给数据库添加数据,那么我们还需要相对应的表单:

app/admin/forms.py

class PostForm(FlaskForm):title = StringField('文章标题:', validators=[Required()])content = TextAreaField('文章内容', validators=[Required()])submit = SubmitField('发布')

你看注意看变量的名字,我们最可能的让表单和文章模型中的变量去相同的名字,这样方便。

OK,继续。我们有了表单,要在页面中呈现出来。

app/admin/views.py

from ..models import Article@admin.route('/', methods=['GET', 'POST'])
def index():form = PostForm()if not current_user.is_authenticated:return redirect(url_for('admin.login'))if form.validate_on_submit():try:article = Article(title=form.title.data, content=form.content.data)db.session.add(article)form.title.data = ''form.content.data = ''flash('发布成功')except:flash('文章标题有重复')return render_template('admin/index.html', form=form)

这段代码也没什么难度,先去创建一个表单form,然后判断一下你是否登录了,没登录的话就会重定向到登录界面。
继续往下,让你提交表单的时候,这里用到了一个try - catch语句,其实这里原因是,我最初想把那个数据库文章模型中title字段设置成unique的,title = db.Column(db.String(64),unique=True),后来想想算了,所不定有相同标题的文章呢。然后就是从表单中获取数据,来构件新的文章,然后存到数据库里面。
flash就是用来做一个提示,方便你自己知道你都干了啥事。

OK,把我们的HTML页面也说一下。

{% extends 'admin/base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}{% block navbar %}<nav class="navbar navbar-inverse"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><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="/">Just for fun</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="/">Home</a></li></ul><ul class="nav navbar-nav navbar-right"><li><a href="#" data-toggle="dropdown" class="dropdown-toggle">当前用户名为:{{ current_user.username }} <b
                            class="caret"></b></a><ul class="dropdown-menu"><li><a href="{{ url_for('admin.logout') }}">退出当前账户</a></li></ul></li></ul></div></div></nav>
{% endblock %}{% block page_content %}<div class="page-header">{{ wtf.quick_form(form) }}</div>
{% endblock %}

唯一做出了更改的地方就是 {% block page_content %}这里,里面加入了一个表单.
OK,启动一下我们的项目看看效果。

当然你可能会出现一个SQLAlchemy的异常,如何解决:

$ python3 manage.py shell
>>> from manage import *
>>> db.drop_all()
>>> db.create_all()
>>> exit()

更新一下我们的数据库结构,毕竟我们更改了数据库模型,添加了文章这个模型。
注意哦,每当我们更改了app/models.py这个文件,我们最好都要重新设置一下数据库.

我们现在已经可以把文章放到数据库了,现在我们要把数据库的文章显示出来。
在这里,我修改了一下templates/base.html页面:

{% extends 'bootstrap/base.html' %}{% block title %}Just for fun{% endblock %}{% block navbar %}<nav class="navbar navbar-inverse" id="top"><div class="container-fluid"><div class="navbar-header"><button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"><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="/">Just for fun</a></div><div class="navbar-collapse collapse"><ul class="nav navbar-nav"><li><a href="/">Home</a></li></ul></div></div></nav>
{% endblock %}{% block content %}{% for message in get_flashed_messages() %}<div class="alert alert-info"><button type="button" class="close" data-dismiss="alert">&times;</button>{{ message }}</div>{% endfor %}<div class="container"><div class="col-sm-8">{% block page_content %}{% endblock %}</div><div class="col-sm-3 col-sm-offset-1">{% block slider %}{% endblock %}</div></div>
{% endblock %}

只更改了最后,我把

,切成了两个块,第一个块来放文章的内容,第二个块来放文章目录。

改完templates/base.html,我们在改一下templates/index.html,这是我们的主页,总显示一句话不好看,所以我们改一改。

{% extends 'base.html' %}
{% import 'bootstrap/wtf.html' as wtf %}
{% block page_content %}<h1>欢迎来到我的blog</h1><p>技术交流群:630398887</p><hr><div class="row"><h2>如下内容凑的字数</h2><hr><h3>登鹳雀楼</h3><p>白日依山尽,黄河入海流。</p><p>欲穷千里目,更上一层楼。</p><hr><h2>论语</h2><p>子谓公冶长:“可妻也,虽在缧绁之中,非其罪也!”以其子妻之。</p><p>子谓南容:“邦有道不废;邦无道免于刑戮。”以其兄之子妻之。</p><p>子谓子贱:“君子哉若人!鲁无君子者,斯焉取斯?”</p><p>子贡问曰:“赐也何如?”子曰:“女器也。”曰:“何器也?”曰:“瑚琏也。”</p><p>或曰:“雍也仁而不佞。”子曰:“焉用佞?御人以口给,屡憎于人。不知其仁,焉用佞?”</p><p>子使漆雕开仕,对曰:“吾斯之未能信。”子说。</p><p>子曰:“道不行,乘桴浮于海,从我者其由与?”子路闻之喜,子曰:“由也好勇过我,无所取材。”</p><p>孟武伯问:“子路仁乎?”子曰:“不知也。”又问,子曰:“由也,千乘之国,可使治其赋也,不知其仁也。”“求也何如?”子曰:“求也,千室之邑、百乘之家,可使为之宰也,不知其仁也。”“赤也何如?”子曰:“赤也,束带立于朝,可使与宾客言也,不知其仁也。”</p><p>子谓子贡曰:“女与回也孰愈?”对曰:“赐也何敢望回?回也闻一以知十,赐也闻一以知二。”子曰:“弗如也,吾与女弗如也!”</p><p> 宰予昼寝,子曰:“朽木不可雕也,粪土之墙不可杇也,于予与何诛?”子曰:“始吾于人也,听其言而信其行;今吾于人也,听其言而观其行。于予与改是。”</p><p> 子曰:“吾未见刚者。”或对曰:“申枨。”子曰:“枨也欲,焉得刚。”</p><p> 子贡曰:“我不欲人之加诸我也,吾亦欲无加诸人。”子曰:“赐也,非尔所及也。”</p><p> 子贡曰:“夫子之文章,可得而闻也;夫子之言性与天道,不可得而闻也。”</p><p> 子路有闻,未之能行,唯恐有闻。</p><p> 子贡问曰:“孔文子何以谓之文也?”子曰:“敏而好学,不耻下问,是以谓之文也。”</p><p> 子谓子产:“有君子之道四焉:其行己也恭,其事上也敬,其养民也惠,其使民也义。”</p><p> 子曰:“晏平仲善与人交,久而敬之。”</p><p>子张问曰:“令尹子文三仕为令尹,无喜色,三已之无愠色,旧令尹之政必以告新令尹,何如?”子曰:“忠矣。”曰:“仁矣乎?”曰:“未知,焉得仁?”“崔子弑齐君,陈文子有马十乘,弃而违之。至于他邦,则曰:‘犹吾大夫崔子也。’违之。之一邦,则又曰:‘犹吾大夫崔子也。’违之,何如?”子曰:“清矣。”曰:“仁矣乎?”曰:“未知,焉得仁?”</p></div>
{% endblock %}
{% block slider %}<ol class="list-unstyled"><li><h2>文章列表</h2></li>{% for article in articles %}<li><a href="admin/article/{{ article.title }}">{{ article.title }}</a></li>{% endfor %}</ol>
{% endblock %}

当然,大部分内容去百度复制粘贴的,不过这里你要看一下这一段代码。

{% block slider %}<ol class="list-unstyled"><li><h2>文章列表</h2></li>{% for article in articles %}<li><a href="admin/article/{{ article.title }}">{{ article.title }}</a></li>{% endfor %}</ol>
{% endblock %}

我们利用一个for循环,通过视图函数传过来的参数,做了一个文章列表,效果如下:

为了把效果实现出来,我们需要在视图函数中把参数传进来,然后让Jinja2引擎渲染一下。
还记得之前提到Jinja2引擎的时候,它可以想在python里面一样可以解析复杂的数据类型,比如咱这个article。

from ..models import Article@main.route('/', methods=['GET', 'POST'])
def index():articles = Article.query.all()return render_template('index.html', articles=articles)

也很简单拉,把所有文章从数据库获取一下,传进去就好了。

能显示文章列表了,我们需要单独把文章显示出来。

<li><a href="admin/article/{{ article.title }}">{{ article.title }}</a></li>

其实阿,这段代码,是我已经把代码都写好了的,因为这个时候你可能还没有把相关的html页面写好。所以说那个
a标签中的href属性可以先不写,然后等会在写就好。

app/templates/article.html

{% extends 'base.html' %}{% block page_content %}<div class="page-header"><h1>{{ title }}</h1></div><div class="well">{{ content }}</div>
{% endblock %}

文章的页面也很简单,一个标题,一个内容。两个变量。

再看一下视图函数:

@main.route('/article/<title>')
def article(title):article = Article.query.filter_by(title=title).first()return render_template('article.html', title=title, content=article.content)

你看这里,还记得动态路由么,这里用到了动态路由,通过文章的标题来从数据库把这篇文章数据获取出来。
然后把标题和文章内容传参到HTML页面就可以了。

这个时候,你就可以把app/templates/index.html页面中那个文章列表的a标签的href属性补全了。

这里说一下,你看啊,我们的功能在不断的增加,可是基本上都没有大幅度改动我们的原先的代码,而是为新功能写好代码,添加进去。这是一个非常好的表现,增加新功能而又不与原先代码有冲突。

Day07 后台管理与发布文章相关推荐

  1. Django框架项目——BBS项目介绍、表设计、表创建同步、注册、登录功能、登录功能、首页搭建、admin、头像、图片防盗、个人站点、侧边栏筛选、文章的详情页、点赞点踩、评论、后台管理、添加文章、头像

    文章目录 1 BBS项目介绍.表设计 项目开发流程 表设计 2 表创建同步.注册.登录功能 数据库表创建及同步 注册功能 登陆功能 3 登录功能.首页搭建.admin.头像.图片防盗.个人站点.侧边栏 ...

  2. zblog php视频教程,ZBlog使用教程:ZBlogPHP基本设置和后台管理

    上一次我们跟大家介绍了<ZBlog使用教程:ZBlogPHP安装方法>,初建成一个 ZBlog 网站后最紧要的就是开始管理网站,那么接下来益吾库将继续跟大家介绍 ZBlogPHP 后台管理 ...

  3. 织梦html仅动态,dede织梦系统后台发布文章时设置为默认动态浏览的方法

    织梦访问量不大,为了方便,所以全动态 除了系统设置,"核心设置"-是否使用伪静态, dede默认添加项目.发布文章时,会有选项"生成HTML""仅动态 ...

  4. 织梦DEDE后台定时分时段自动更新发布文章插件

    定时审核插件使用说明 一.立信CPA培训注册会计师考试网站 以超级管理员身份登录后台,依次选择[核心]à [定时审核管理],输入定时审核的时间段,如下图所示: 功能说明: 1. 可以设置若干时间段,在 ...

  5. dedecms后台怎么添加发布软件?织梦后台软件内容管理

    使用织梦cms有很多的功能,其中有一个是在dedecms后台添加发布软件,然后在前台大家可以直接下载软件,在织梦cms后台怎么添加发布软件呢?下面是织梦软件内容管理的主要操作步骤. 使用织梦cms有很 ...

  6. phpcmsV9发布文章后无法删除?后台找不到了?从phpmyadmin数据库删除吧!

    phpcmsV9发布文章后无法删除?后台找不到了?从phpmyadmin数据库删除吧! 例如: 删除之前(截图示下) 删除之后(截图示下) 基本的思路就是: 查看phpmyadmin后台的数据库,查找 ...

  7. 基于SpringBoot + Vue的个人博客系统12——使用vue-admin-template展示文章列表(后台管理)

    简介 前面我们实现了博客系统的前台展示页面,还有留言功能没有实现,实现留言功能无非就是在后端增加留言表,对留言进行增删改查.和文章表类似,这里就不在赘述. 既然作为一款动态博客,那么后台管理是必不可少 ...

  8. Voyager 1.2.3 发布,Laravel 后台管理扩展包

    开发四年只会写业务代码,分布式高并发都不会还做程序员?   Voyager 1.2.3 发布了,Voyager 是一个强大.快捷的 Laravel 后台管理扩展包,提供了 CRUD 操作.媒体管理.菜 ...

  9. 活动报名发布小程序源码 聚会活动报名小程序完整版前端+后台管理Think

    活动报名发布小程序源码 聚会活动报名小程序完整版前端+后台管理Think下载链接:https://pan.baidu.com/s/16e3egizS_bjuJTv2YcA6Xg 提取码:6n11

最新文章

  1. python代码大全p-如何写出优雅又地道的Python代码?【转载】
  2. Windows系统下如何在cmd命令窗口中切换Python2.7和Python3.6
  3. USACO Broken Necklace 题解(环展开成链,枚举)
  4. 【UDP协议头解析】
  5. f12获取网页文本_8招教你快速搞定网页内容禁止复制粘贴,想怎么复制就怎么复制...
  6. js构造函数内存在的闭包
  7. HTML系列(四):编辑图像
  8. JavaScript——闭包函数及拓展题目
  9. 中国凉亭行业市场供需与战略研究报告
  10. yum安装:zabbix-web-4.2.8-1.el7.noarch: [Errno 256] No more mirrors to try
  11. Atitit.js javascript的rpc框架选型
  12. X 1 BT5kali
  13. python画折线图
  14. java网吧会员计费管理系统springboot+vue
  15. 硬件工程师面试常见问题
  16. matlab postion gcf
  17. 利用AUI实现多种多样的timeline时间轴样式
  18. 电视hdr测试软件,短路三分钟 | 你家电视、显示器真的支持HDR么?
  19. 哈利波特分院考试(HP)
  20. ISTQB基础级备考攻略

热门文章

  1. 目标检测:Corner Net论文阅读
  2. 总投资460亿!陈十一院士任校长,东方理工大学年薪40-60万招人
  3. invalid non-printable character U+200D
  4. 春游4.1 | 湖南多校赛20190331 / 16东京区域赛
  5. 安卓手机内置NFC模块的使用和开发
  6. CSS使用彩色字体图标(Vue/Uni)
  7. 产消合一。有感于华人新首富赵长鹏投资福布斯的话
  8. WordPress 函数大全
  9. Caltech-UCSD Birds-200-2011
  10. 科创人·智慧芽技术副总裁屠昶旸:技术之路是挑战之路,不愿在大厂空耗岁月