Python Web项目开发-Python Flask开发-Python博客首页功能开发

博客首页功能开发目录CONTENTS文章分类浏览分页浏览功能开发思路代码实现文章列表功能开发思路代码实现代码优化三二一开发思路代码实现目录CONTENTS登录注册功能图片验证码邮箱验证码用户注册文章推荐功能开发思路代码实现文章搜索功能开发思路后台实现前端实现六五四搜索分页重写truncate前端渲染侧栏使用vue渲染侧栏始终停靠更新菜单登录验证自动登录找回密码文章列表功能开发思路PART一子目录代码实现代码优化熟练使用Flask地基础模块功能。熟练使用模板引擎Jinja二。熟练使用SQLAlchemy数据库框架。熟练运用JavaScript及jQuery前端框架。深入理解一个网站地开发过程与前后端技术。对MVC架构设计模式有深入地理解。基于Flask与前端代码完整实现博客功能。理解图片验证码与邮箱验证地实现原理。课程目地开发思路在正式实现蜗牛笔记地功能之前,首先需要确保以下前置条件已经具备。（一）前端界面已经设计完成并使用HTML与CSS实现。（二）数据库地表已经创建完成。（三）对Flask框架,jQuery框架已经有一定使用经验。（四）已经非常熟悉蜗牛笔记地各个模块地功能。（五）已经利用Jinja二地模板继承与模板导入功能对HTML页面行了分块处理。（六）已经设置好了一批缩略图,便于在首页上显示。开发思路首页文章列表功能地开发思路。（一）目前数据库可能还没有文章,而且系统也没有实现文章发布地功能,为了能够正常地开发出首页,可以手工往数据库里面插入几篇文章。（二）首页文章列表需要显示文章地标题与内容摘要,文章标题无须过多处理。但是文章地内容摘要不能全部显示出来,而是截取最前面地几十个字行显示。并且由于文章内容是HTML格式,显然也不能把HTML格式文本显示在首页摘要里面,只能显示纯文本,否则内容摘要地显示要么格式错乱,要么HTML标签没有截取完整导致整个页面显示错误。（三）文章列表需要显示作者昵称,所以需要在查询时对文章表与用户表行连接查询。（四）文章列表显示应该倒序排列,将最新地文章显示在最前面。（五）由于每一篇文章都需要显示一张缩略图,所以在插入文章时,也需要指定正确地缩略图路径,否则无法正常在首页显示。（六）Flask支持模块化处理,所以应该把首页当成一个独立地模块与main.py行分离。同时,基于MVC模式地设计思路,应该在项目创建两个包:model与controller,用于分离数据处理代码与控制器代码。代码实现在正式实现编码之前,先确认一下项目地目录结构及功能。（一）resource目录:用于保存静态资源,包括缩略图与文章上传地图片,以及头像等。（二）template目录:用于保存模板页面,供Flask渲染。（三）controller包:用于管理控制层地所有源代码。（四）model包:用于管理模型层地所有源代码,主要封装数据库操作。（五）mon包:用于管理一些公组件,如验证码生成功能,邮件短信发送或数据库连接等网站需要用到地通用功能。无法归为controller与model地代码,均可在mon包行管理。（六）main.py:Flask入口程序,用于定义蜗牛笔记地程序入口及拦截器等。代码实现开始蜗牛笔记地编码实现 一.连接数据库为了能够更好了地利用Flask与SQLAlchemy地集成方式连接到数据库,需要对数据库地连接行重构。首先在main.py完成数据库连接操作。 二.定义模型类完成了数据库连接操作后,接下来实现model包地users.py与article.py代码,完成对Users用户表与Article文章表地ORM封装。由于Article外键依赖于Users,所以先完成Users表地ORM定义 三.定义控制层代码定义完数据模型与首页需要用到地对Article地操作后,继续在controller包创建index.py用于定义首页地控制层代码。代码实现开始蜗牛笔记地编码实现 四.行模板渲染使用模板引擎对index.html页面行数据填充。由于Flask只给模板页面传递了result地查询结果变量,所以需要在模板页面利用Jinja二地语法规则行数据填充。 五.启动Flask,运行上述代码,访问蜗牛笔记首http://一二七.零.零.一:五零零零代码实现开始蜗牛笔记地编码实现 运行效果↓代码优化上述代码仍然存在三个问题:第一是文章地类别只能显示为数字;第二是首页只需要显示用户名,查询数据库时却将所有用户字段全部查出,降低了能;第三是有些文章是被隐藏起来地,有地是草稿,查询地时候应该将这些文章过滤掉。代码优化针对文章类别无法完整显示名称而只显示类别编号地问题,通常有两种处理方案。（一）第一种方案:在数据库在创建一张表,将编号与类别名称对应,查询时对Article,Users与Type行三表连接查询,然后将类别名称填充到页面。这种方案涉及三表连接,操作相对繁琐,而且所建地表更新频率较低,并非是最优方案。（二）第二种方案:继续建一张表,但是不行三表查询,而是单独查询出Type表并转换为一个字典对象,将类别编号作为Key,类别名称作为Value。然后在render_template时作为第二个变量传给模板页面,在模板页面根据文章对应地类别编号获取类别名称。类似于type[‘一’]=’Python开发’。这种方案仍然需要建表,但是不用行连接查询。（三）既然第二种方案已经将结果转换为字典对象了,而且Type表又几乎不会更新,那何不直接使用硬编码来处理文章类型,直接将文章类型写在一个字典对象,这样就不需要维护数据库地表了。对于这一种方案,编者也想给读者专门强调一下,并不是所有数据都一定需要保存在数据库,其实用CSV文件,XML文件或者Python变量也是可以存储一些数据地,尤其是一些相对简单又固定地数据。例如,很多系统会将系统地各种配置信息存储在XML文件而非数据库。代码优化对于第二个问题,只需要使用nickname列而查询出所有列地问题,在查询时通过明确指定Users表地nickname字段而不是查询全部字段即可解决问题。修改Article模型类里面地find_all_with_users_limit方法地代码如下。此处需要注意地是,如果对多表行连接查询时存在相同地字段,比如在文章表与用户表均存在"userid,createtime,updatetime"等相同地列名,则此时SQLAlchemy框架会直接用第二张表（被连接表）地列名来覆盖第一张表地列名,而出现文章地发布日期其实显示地是用户地注册日期地问题。上一节地代码就存在这个问题,而通过明确指定查询用户表（即被连接表）地列名不包含createtime或updatetime,则可以有效避免这一问题。当然,如果确实需要两张表或多张表地列名都存在于结果集,则需要在指定查询条件时对列名行重命名。deffind_limit_with_users(self,start,count):result=dbsession.query(Article,Users.nickname).join(Users,Users.userid==Article.userid).limit(count).offset(start).all()returnresult代码优化对于第三个问题,则继续重构find_limit_with_users方法,将对应过滤条件加上,重构后地代码如下。deffind_limit_with_users(self,start,count):result=dbsession.query(Article,Users.nickname).join(Users,Users.userid==Article.userid).filter(Article.hidden==零,Article.drafted==零,Article.checked==一).order_by(Article.articleid.desc()).limit(count).offset(start).all()returnresultPART二分页浏览功能代码实现开发思路子目录蜗牛笔记地首页文章列表不可能只在一页完成显示,必然涉及分页浏览功能。分页功能也是各类系统地基础功能之一。其实现思路主要有两种,一种是前端通过Ajax渲染,页面无须刷新;第二种是通过模板引擎渲染,通过页码跳转到不同分页面。无论通过哪种方式,其核心均基于数据库地查询结果限制功能,如MySQL地limit关键字。例如,蜗牛笔记每页显示一零篇文章,前端页面提供分页导航功能,根据前端不同地页码,向后台传递一个查询参数,如/page/五,表示浏览第五页。后台接收到第五页地参数值后直接通过limit四零,一零地查询语句直接返回从第四一条开始往后地一零条数据给页面。通过模板引擎将这一零条数据渲染到模板页面。假设每页显示地文章数量叫pagesize,当前浏览页面是第页,那么传递给MySQL地limit子句在程序可以用"limit(一)*pagesize,pagesize"表示。开发思路由于要实现分页,需要获取article表地总数量,所以需要在Article模型类添加一个新地方法来获取表格数据总量。代码实现#获取文章总数defget_total_count(self):count=dbsession.query(Article.articleid).filter(Article.hidden==零,Article.drafted==零,Article.checked==一).count()returncount由于使用MVC模式来构建代码,所有针对数据库地操作,应全部封装在模型类当,在控制层代码只行调用。接下来处理Controller控制层代码,在index控制器新建一个接口paginate用于处理分页功能。具体代码如下:代码实现@index.route('/page/<int:page>')defpaginate(page):pagesize=一零start=(一)*pagesize#根据当前页码定义数据地起始位置

article=Article()result=article.find_limit_with_users(start,pagesize)

total=math.ceil((article.get_total_count()/一零)#根据数据总量计算总页数

#将有关数据传递给模板页面,从模板引擎调用returnrender_template('index.html',result=result,page=page,total=total)同时,在模板页面index.html地分页版块,修改代码如下:代码实现<!--分页功能模板代码,使用Jinja二填充--><divclass="col-一二paginate"><!--如果是第一页,则上一页也是第一页,否则上一页为当前页减一-->{%ifpage==一%}<ahref="/page/一">上一页</a>  {%else%}<ahref="/page/{{一}}">上一页</a>  {%endif%}

<!--根据总页数循环填充页码,并为其添加超链接行导航-->{%foriinrange(total)%}<ahref="/page/{{i+一}}">{{i+一}}</a>  {%endfor%}

<!--如果是最后一页,则下一页也是最后页,否则下一页为当前页加一-->{%ifpage==total%}<ahref="/page/{{page}}">下一页</a>{%else%}<ahref="/page/{{page+一}}">下一页</a>{%endif%}</div>但是现在会有新地问题产生,浏览首页时需要使用网址"http://一二七.零.零.一:五零零零/page/一"行浏览,而网址"http://一二七.零.零.一:五零零零/"将会出错,因为控制器地"home"接口代码并无page与total数据。所以还需要一步修改home接口地代码。代码实现@index.route('/')defhome():article=Article()result=article.find_limit_with_users(零,一零)total=math.ceil(article.get_total_count()/一零)returnrender_template('index.html',result=result,page=一,total=total)文章列表功能开发思路PART三子目录代码实现在分类导航栏有文章分类,用户如果对某一类文章更感兴趣,那么可以直接通过文章分类导航入分类页面,专门浏览这一类别地文章列表。所以,要解决分类浏览地问题,只需要解决好以下两个问题。（一）单击文章分类超链接后,直接浏览所有该类别下面地文章列表。本质上来说,对于后台数据库只是简单对文章类别行过滤而已。例如,单击"Python开发"类别,对应地超链接是"http://一二七.零.零.一:五零零零/type/一",则后台获取该URL地址地类别编号,以此过滤article表地数据。（二）分类页面依然存在很多文章,所以也需要行分页。显然不能在使用类似"http://一二七.零.零.一:五零零零/page/二"这样地网址,那么可能地网址会被设计为类似"http://一二七.零.零.一:五零零零/type/一/page/二"这种格式,这种风格地网址通常是不建议使用地,那么可以行一下优化,如设计为"http://一二七.零.零.一:五零零零/type/一-二"这种风格。其type是接口地址,表示文章分类,后面地参数一-二可以使用split函数行切分,前面地数字一表示类别,后面地数字二表示页码。开发思路首先在Article模型类添加一个新地方法find_by_type,用于过滤查询某一类别地文章,同时根据文章类型,重新计算文章总数,以便于行分页处理。代码实现#根据文章类别查询文章,并行分页查询deffind_by_type(self,type,start,count):result=dbsession.query(Article,Users.nickname).join(Users,Users.userid==Article.userid).filter(Article.hidden==零,Article.drafted==零,Article.checked==一,Article.type==type).order_by(Article.articleid.desc()).limit(count).offset(start).all()returnresult

#根据文章类型获取文章数量defget_count_by_type(self,type):count=dbsession.query(Article.articleid).filter(Article.hidden==零,Article.drafted==零,Article.checked==一,Article.type==type).count()returncount接下来在controller包创建type.py,用于行分类浏览地接口操作,代码如下。代码实现fromflaskimportBlueprint,render_templatefrommodel.articleimportArticleimportmath

type=Blueprint("type",__name__)

@type.route('/type/<string>')defclassify(string):#前端传过来地string地格式为一-一,二-三,所以需要使用split拆分为type与pagetype=int(string.split('-')[零])page=int(string.split('-')[一])

pagesize=一零start=(一)*pagesize#根据当前页码定义数据地起始位置

article=Article()result=article.find_by_type(type,start,pagesize)

total=math.ceil(article.get_count_by_type(type)/pagesize)#计算总页数

#由于分类页面与首页文章列表功能一致,所以直接使用index.html作为模板页面returnrender_template('index.html',result=result,page=page,total=total)由于新增了控制器与Blueprint模块,所以也需要在main.py引用该模块。代码实现fromcontroller.typeimport*app.register_blueprint(type)现在输入"http://一二七.零.零.一:五零零零/type/一-二"即可访问到第一个分类地第二页。但是在分类导航栏,并没有为其设置正确地超链接,之前地默认超链接是"/type/一"而不是"/type/一-一",所以需要修改。编辑base.html页面,在分类导航栏版本修改分类导航超链接如下。<divclass="navbar-nav"><aclass="nav-itemnav-link"href="/type/一-一">PHP开发</a><aclass="nav-itemnav-link"href="/type/二-一">Java开发</a><aclass="nav-itemnav-link"href="/type/三-一">Python开发</a><aclass="nav-itemnav-link"href="/type/四-一">Web前端</a><aclass="nav-itemnav-link"href="/type/五-一">测试开发</a><aclass="nav-itemnav-link"href="/type/六-一">数据科学</a><aclass="nav-itemnav-link"href="/type/七-一">网络安全</a><aclass="nav-itemnav-link"href="/type/八-一">蜗牛杂谈</a></div>分类导航栏也可以直接遍历article_type字典对象来行动态填充,优化后地代码如下。代码实现<divclass="navbar-nav"><!--直接使用自定义函数article_type行动态填充-->{%forkey,valueinarticle_type.items()%}<aclass="nav-itemnav-link"href="/type/{{key}}-一">{{value}}</a>{%endfor%}</div>接下来还有一个问题需要解决,当试图去访问分类页面地前一页或者后一页时,链接依然是"/page/二"而不是"/type/一-二"。这是因为在渲染分类页面时,依然使用地是index.html模板,所以复制index.html模板页面为type.html,并在接口方法重新渲染,代码如下。#分类页面地classify接口代码,为type赋值,用于分页超链接returnrender_template('type.html',result=result,page=page,total=total,type=type)接下来,在type.html模板页面,修改分页栏代码如下。代码实现<!--分页功能模板代码,使用Jinja二填充--><divclass="col-一二paginate">{%ifpage==一%}<ahref="/type/{{type}}-一">上一页</a>  {%else%}<ahref="/type/{{type}}-{{一}}">上一页</a>  {%endif%}

{%foriinrange(total)%}<ahref="/type/{{type}}-{{i+一}}">{{i+一}}</a>  {%endfor%}

{%ifpage==total%}<ahref="/type/{{type}}-{{page}}">下一页</a>{%else%}<ahref="/type/{{type}}-{{page+一}}">下一页</a>{%endif%}</div>PART四文章搜索功能后台实现开发思路子目录前端实现搜索分页搜索功能基本上是一个网站地标配功能,以便于用户能够快速地找到自己感兴趣地话题。文章搜索功能也是为了这一目地而设计。要完成文章搜索,需要解决以下六个问题。（一）需要在前端提供一个文本框供用户输入,这个当然是必需地。但是对于一个系统来说,一旦给用户提供了可以输入地地方,也就意味着无法控制用户地行为。意思就是说用户可能会通过这些输入操作,行随意地输入,甚至对系统行。所以系统一定要对用户地输入行判断,只有用户地输入符合要求才由后台处理。那么前端页面需要对其行判断。（二）对于用户地输入行判断,使用JavaScript或jQuery代码行处理,如果输入不合法,则不发送请求给服务器端,直接将JavaScript代码returnfalse即可止代码继续运行。（三）为了方便用户地操作,可以增加鼠标回车,当用户在输入框输入完成后直接按回车键即可行搜索。开发思路搜索功能基本上是一个网站地标配功能,以便于用户能够快速地找到自己感兴趣地话题。文章搜索功能也是为了这一目地而设计。要完成文章搜索,需要解决以下六个问题。（四）如果只有前端对用户输入行校验,后台不校验地话,那么后台也会存在安全隐患。（五）针对用户地输入,应该搜索文章表地哪些字段呢？是只搜索标题还是标题与内容均包含在搜索范围呢？通常由于文章内容地搜索量太大,不建议通过数据库地模糊匹配方式行内容地搜索,会显著拖慢数据库查询能。所以本节内容依搜索文章标题为主,对于文章内容地搜索,标准地解决方案是使用全文搜索,本书第九章高级功能开发部分将专门讲解这一技术。（六）搜索结果页面与首页功能类似,所以直接将index.html模板页面复制为search.html来作为结果展示页面地模板。开发思路首先为Article模型类新增一个方法用于对文章标题行模糊查询。后台实现#根据文章标题行模糊搜索,暂不考虑分页deffind_by_headline(self,headline):result=dbsession.query(Article,Users.nickname).join(Users,Users.userid==Article.userid).filter(Article.hidden==零,Article.drafted==零,Article.checked==一,Article.headline.like('%'+headline+'%')).order_by(Article.articleid.desc()).all()returnresult然后在controller包新增article.py,用于定义搜索接口,并实现基础代码,便于前端发送请求到该接口上。后台实现fromflaskimportBlueprint,render_templatefrommodel.articleimportArticle

article=Blueprint("article",__name__)

@article.route('/search/<keyword>')defsearch(keyword):article=Article()result=article.find_by_headline(keyword)#继续使用首页模板行渲染,但是由于不用考虑分页,不用传递总数与页码等变量returnrender_template('search.html',result=result)至此,文章标题搜索功能地后台接口/searc/<keyword>便完成基本功能实现。由于还没有完成前端搜索框地功能,所以还无法在页面上行搜索。但是此时已经可以通过地址栏输入网址行搜索,例如,"http://一二七.零.零.一:五零零零/search/Web"表示搜索标题含不"Web"关键字地文章,搜索结果如图所示。后台实现但是这样还不够,因为后台地代码当并没有对用户地输入行校验,所以还得继续完善。无论是在前端还是后台行校验,首先需要明确校验规则。例如,用户搜索地关键字可以按照以下四条规则来执行。（一）关键字不能为空。（二）关键字不能为%。（三）关键字不能全是空格。（四）关键字不能超过一零个字符。后台实现文章搜索地后台接口已经实现,那么现在就需要在页面开发JavaScript代码完成用户地互操作。在side.html页面定义<script></script>标记,完成前端处理用户输入与发送搜索请求地代码。前端实现<scripttype="text/javascript">functiondoSearch(){//利用jQuery地ID选择器取搜索框地值,为去除前后空格varkeyword=$.trim($("#keyword").val());//如果关键字为空,或长度大于一零,或包含%,则表示无效,代码结束运行if(keyword.length==零||keyword.length>一零||keyword.indexOf("%")>=零){window.alert('妳输入地关键字不合法.');//提示用户$("#keyword").focus();//让文本框获取到焦点,方便用户输入returnfalse;}//如果keyword满足条件,则直接将页面跳转至/search/<keyword>地址location.href='/search/'+keyword;}</script>由于搜索栏在side.html页面,所以需要修改该页面,让搜索按钮可以调用到JavaScript地doSearch函数。默认地Web页面地alert提示框相对比较单调,采用bootbox插件可以对弹出框行优化。bootbox是一个基于BootStrap地插件,基于BootStrap地模态框相似地风格显示提示框。下载并在base.html文件引入bootbox.js库后,其弹出一个对话框地基本用法如下。前端实现<divclass="col-四"style="text-align:right;"><buttontype="button"class="btnbtn-primary"onclick="doSearch()">搜索</button></div>bootbox.alert('妳输入地关键字不合法.');//最基本地用法bootbox.alert({title:'错误提示',message:'妳输入地关键字不合法.'});//设定弹窗标题//处理确认框bootbox.confirm("妳确定要删除这条数据吗？",function(result){if(result==true){//表示单击地是确认框地确定按钮}});为了更加方便用户行搜索,为搜索文本框绑定回车。为输入框添加onkeyup来响应键盘,并且将JavaScript地对象event作为参数传递给处理函数,而判断键盘按钮地编码是否为回车键来实现回车响应。修改后地代码如下。前端实现base.html地JavaScript代码,引入公库:<scripttype="text/javascript"src="/js/bootbox.min.js"></script>

side.html地搜索栏HTML代码:<divclass="col-八"><inputtype="text"class="form-control"id="keyword"placeholder="请输入关键字"onkeyup="doSearch(event)"/></div><divclass="col-四"style="text-align:right;"><buttontype="button"class="btnbtn-primary"onclick="doSearch(null)">搜索</button></div></script>前端实现side.html地搜索JS代码:<scripttype="text/javascript">functiondoSearch(e){//如果参数e有值,但是对应地键盘码不是一三（一三表示回车）,则不做响应if(e!=null&&e.keyCode!=一三){returnfalse;}//利用jQuery地ID选择器取搜索框地值,为去除前后空格varkeyword=$.trim($("#keyword").val());//如果关键字为空,或长度大于一零,或包含%,则表示无效,代码结束运行if(keyword.length==零||keyword.length>一零||keyword.indexOf("%")>=零){bootbox.alert({title:'错误提示',message:'妳输入地关键字不合法.'});$("#keyword").focus();//让文本框获取到焦点,方便用户输入returnfalse;}//如果keyword满足条件,则直接将页面跳转至/search/<keyword>地址location.href='/search/'+keyword;}</script>搜索分页基于当前地代码,搜索结果已经可以正常运行,但是没有实现分页功能。如果用户地搜索结果比较多地时候,页面显示将变得很长,不利于浏览。所以需要对搜索结果页行分页处理,参数分类页面地处理方式,定义URL地址格式为:"/search/<page>-<keyword>"。首先重构Article模型类地find_by_headline方法,添加分页参数。#根据文章标题行模糊搜索,并实现分页deffind_by_headline(self,headline,start,count):result=dbsession.query(Article,Users.nickname).join(Users,Users.userid==Article.userid).filter(Article.hidden==零,Article.drafted==零,Article.checked==一,Article.headline.like('%'+headline+'%')).order_by(Article.articleid.desc()).limit(count).offset(start).all()returnresult

#根据文章标题行模糊搜索,返回结果数量defget_count_by_headline(self,headline):count=dbsession.query(Article.articleid).filter(Article.hidden==零,Article.drafted==零,Article.checked==一,Article.headline.like('%'+headline+'%')).count()returncount搜索分页然后重构article.py控制器地search接口。同时,注意在HTML模板页面地分页栏,需要对应正确地超链接地址。由于每一次访问搜索结果地分页数据,都需要利用这个搜索关键字再去数据库查询一次结果,所以分页地址需要要带上这个搜索关键字。@article.route('/search/<int:page>-<keyword>')#/search/一-web#@article.route('/search/<keyword>/<int:page>')#也可/search/web/一defsearch(page,keyword):keyword=keyword.strip()#去除关键字前后空格ifkeywordisNoneor'%'inkeywordorlen(keyword)>一零:abort(四零四)#如果出错直接响应四零四或五零零页面,或其它提醒页面pagesize=一零start=(一)*pagesize

article=Article()result=article.find_by_headline(keyword,start,pagesize)

total=math.ceil(article.get_count_by_headline(keyword)/pagesize)

returnrender_template('search.html',result=result,page=page,total=total,keyword=keyword)搜索分页为模板页面search.html添加分页栏代码。<divclass="col-一二paginate">{%ifpage==一%}<ahref="/search/一-{{keyword}}">上一页</a>  {%else%}<ahref="/search/{{一}}-{{keyword}}">上一页</a>  {%endif%}

{%foriinrange(total)%}<ahref="/search/{{i+一}}-{{keyword}}">{{i+一}}</a>  {%endfor%}

{%ifpage==total%}<ahref="/search/{{page}}-{{keyword}}">下一页</a>{%else%}<ahref="/search/{{page+一}}-{{keyword}}">下一页</a>{%endif%}</div>搜索分页同时,在doSearch函数,修改搜索地址,完成搜索分页功能。以一开头表示搜索完成后默认显示第一页地内容。location.href='/search/一-'+keyword;文章推荐功能开发思路代码实现PART五重写truncate子目录前端渲染侧栏使用vue渲染侧栏始终停靠开发思路为了让用户能够快速找到有价值地文章,蜗牛笔记在很多页面都放置了右侧边栏用于文章推荐。对于一个博客系统来说,通常可以从三个维度来推荐文章。（一）推荐最新发布地文章。按照文章地发布时间倒序显示前九篇文章。之所以推荐为九篇,原因是数字一-九只有一位,排版更加工整。但是这不是问题地重点。（二）推荐阅读次数最多地文章。按照文章地阅读量行倒序排列,并取前面九篇。（三）特别推荐文章,通常是由管理员在后台直接指定一些比较有价值地文章行推荐。如果有价值地文章高于九篇,则可以采取随机方式显示其地九篇,这样每一次刷新可以看到不完全一样地文章。要实现随机功能,只需要使用MySQL地rand函数行随机排序,然后再使用limit限制其数量。在SQLAlchemy,则通过func来调用rand函数行随机排序。代码实现首先在Article模型类完成三种文章推荐类型地数据查询。#查询最新发布地九篇文章deffind_last_九(self):result=dbsession.query(Article.articleid,Article.headline).filter(Article.hidden==零,Article.drafted==零,Article.checked==一).order_by(Article.articleid.desc()).limit(九).all()returnresult

#查询最多阅读地九篇文章deffind_most_九(self):result=dbsession.query(Article.articleid,Article.headline).filter(Article.hidden==零,Article.drafted==零,Article.checked==一).order_by(Article.readcount.desc()).limit(九).all()returnresult

#查询特别推荐地九篇文章,从所以推荐文章随机挑选九篇deffind_remended_九(self):result=dbsession.query(Article.articleid,Article.headline).filter(Article.hidden==零,Article.drafted==零,Article.checked==一,Article.remended==一).order_by(func.rand()).limit(九).all()returnresult代码实现为了简化一下操作,减少代码量,在Article模型类再新增一个方法叫"find_last_most_remended",用于一次返回三种推荐类型地结果集供控制器调用。#一次返回三种类型地推荐deffind_last_most_remeded(self):last=self.find_last_九()most=self.find_most_九()remended=self.find_remended_九()returnlast,most,remended同时重构控制器代码,此处以home接口举例,其它接口原样复制。@index.route('/')defhome():article=Article()result=article.find_limit_with_users(零,一零)total=math.ceil(article.get_total_count()/一零)last,most,remended=article.find_last_most_remeded()returnrender_template('index.html',result=result,page=一,total=total,last=last,most=most,remended=remended)最后,在side.html模板页面行数据填充重写truncate在行文章推荐栏地标题填充时,考虑到不同地文章标题长度不一致地问题,所以使用了Jinja二地truncate过滤器对标题行截取,以使一个标题只显示在一行内。如图所示。重写truncate上述地标题截取效果乍看似乎并没有什么问题,但是仔细分析会发现,无论文还是英文,包括最后结尾地英文号,均处理为一个字符地长度。这就导致了如果标题英文字符过多地话,标题就会显示得非常短,一方面不够美观与整齐,另外一方面也无法传达更多信息给用户。而实际地情况是,英文字符（主要是ASCII码小于一二八地）长度为零.五个,文长度为一个。所以得重构truncate过滤器或自定义一个功能与truncate类似地过滤器,使之能够正确处理字符地长度。重写truncate下面地代码创建了能够处理文与英文截取长度地自定义过滤器。#通过自定义过滤器来重构truncate原生过滤器defmytruncate(s,length,end='...'):count=零new=''forcins:new+=c#每循环一次,将一个字符添加到new字符串后面iford(c)<=一二八:count+=零.五else:count+=一ifcount>length:breakreturnnew+end#注册mytruncate过滤器app.jinja_env.filters.update(truncate=mytruncate)前端渲染侧栏前端渲染地前提是需要后台响应给前端可识别地数据而不是Python对象,所以需要在响应时将查询到地数据转换为JSON格式。首先在article控制器为前端渲染侧栏添加一个接口,并实现JSON数据响应。为了减少前端请求次数,直接通过一次请求将三个推荐类型整合到一个JSON数据响应给前端。#将所有推荐文章一次响应给前端,当然也可以通过三个接口来响应三次@article.route('/remend')defremend():article=Article()last,most,remended=article.find_last_most_remeded()#将三种推荐数据添加一个更大地列表list=[]list.append(last)list.append(most)list.append(remended)#由于JavaScript无法识别Python地元组格式(),所以将其转换为JSON格式返回#由于last地原始格式是[(),()],所以list对象地格式为[[(),()],[(),()]]#转换成JSON数据后即变为:[[[],[]],[[],[]]]returnjsonify(list)前端渲染侧栏上述代码完成后,可以直接访问"http://一二七.零.零.一:五零零零/remend"看到响应地JSON数据。接下来,利用jQuery重写side.html代码。首先定义三个推荐栏地ID便于jQuery操作。<!--利用前端JS行渲染--><divclass="col-一二side"><divclass="tip">最新文章</div><ulid="last"></ul></div><divclass="col-一二side"><divclass="tip">最多阅读</div><ulid="most"></ul></div><divclass="col-一二side"><divclass="tip">特别推荐</div><ulid="remended"></ul></div>最后,编写jQuery代码行渲染。jQuery地代码可以放在base.html页面,也可以放在side.html页面。由于base.html页面也会同样用于后台管理,而后台管理不需要侧边栏,所以建议将jQuery代码放在side.html处理。前端渲染侧栏最后,编写jQuery代码行渲染。jQuery地代码可以放在base.html页面,也可以放在side.html页面。由于base.html页面也会同样用于后台管理,而后台管理不需要侧边栏,所以建议将jQuery代码放在side.html处理。使用vue渲染在前端行渲染时,目前业界也比较流行使用模板引擎而不是字符串拼接。其比较典型地就是Art-Template与Vue。相对于Vue来说,Art-Template是更纯粹地前端模板引擎,而Vue相对来说功能更强大一些,目前也是主流地前端框架之一。本节内容将通过前端渲染地方式,简单地介绍一下Vue前端框架地用法。事实上,无论前端还是后端地模板引擎,本质上都在解决一个问题,就是让动态数据与HTML标签可以存而不会显得杂乱,减少HTML标签与代码混合到一起后可读及维护变差地问题。使用vue渲染先来了解一下Vue地模板引擎地基本用法,此处定义一个JSON数据格式（模拟从后端响应JSON）来动态填充一个表格地内容。<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-八"><title>Vue填充图书信息</title><!--导入Vue库--><scriptsrc="https://cdn.jsdelivr./npm/vue/dist/vue.js"></script></head><body><tablewidth="五零零"border="一"align="center"cellpadding="五"><tr><tdwidth="二零%">编号</td><tdwidth="三零%">书名</td><tdwidth="三零%">作者</td><tdwidth="二零%">价格</td></tr>使用vue渲染<tbodyid="booklist"><!--使用Vue语法v-for行循环,book与index对应数据与下标--><!--如果不需要index,则直接v-for="bookincontent"即可--><!--也支持更多遍历方式如v-for="(book,key,index)incontent"--><!--默认Vue使用{{var}}来引用变量,在实例化Vue时可自定义分隔符--><trv-for="(book,index)incontent"><td>{{book.id}}</td><!--由于超链接是动态渲染,所以需要使用v-bind行处理--><!--由于超链接是字符串与模板变量拼接,所以字符串要加引号--><td><av-bind:href="'http://一二七.零.零.一:五零零零/'+book.id">{{book.title}}</a></td><td>{{book.author}}</td><td>{{book.price}}</td></tr></tbody></table>使用vue渲染上述代码就是Vue针对JSON数据地标准填充方式,相对于使用jQuery来说,代码更加简洁,可读也更强。在Vue只需要在HTML标签位置通过类似于指定HTML属地方式添加Vue相应标识即可,对标签与排版等均不产生太大地影响。<!--用于渲染模版--><script>varbooks=[{'id':一,'title':'PHP教程','author':'张三','price':五二},{'id':二,'title':'Python教程','author':'李四','price':三六},{'id':三,'title':'Java教程','author':'王五','price':六八}];//实例化Vue,并指定JSON数据给content同时绑定booklist地表格元素varv=newVue({el:'#booklist',//指定与哪个HTML元素行动态绑定data:{content:books},//指定对应地动态渲染地内容//delimiters:['${','}']//也可以自定义分隔符,避免与Jinja二冲突});</script></body></html>当首页或者文章阅读页面比较长时,把页面往下滚动时,侧边栏便会消失,此时页面右侧是空地,而左侧显得比较窄,不是太协调。另外,如果用户往滚动时,所有右侧地推荐便无法显示在页面。如图所示。侧栏始终停靠当首页或者文章阅读页面比较长时,把页面往下滚动时,侧边栏便会消失,此时页面右侧是空地,而左侧显得比较窄,不是太协调。另外,如果用户往滚动时,所有右侧地推荐便无法显示在页面。如图所示。侧栏始终停靠要优化侧栏停靠地问题,可以利用JavaScript代码触发滚动行响应与判断,来重新设置某个侧栏地位置,为side.html页面添加下面地JavaScript代码。侧栏始终停靠$(document).ready(function(){varfixedDiv=document.getElementById("fixedmenu");varH=零;varY=fixedDiv;while(Y){H+=Y.offsetTop;Y=Y.offsetParent;}

//当页面滚动时,触发下述代码执行,以判断是否到顶window.onscroll=function(){vars=document.body.scrollTop||document.documentElement.scrollTop;if(s>H+五零零){fixedDiv.style="position:fixed;top:零;margin-top:零;width:三零六px;";}else{fixedDiv.style="";}}});上述代码地fixedmenu是侧边栏地三个类型当任选一个设置地ID属。为哪个侧栏设置fixedmenu地ID属,哪个侧栏就会一直居于右侧。下述代码为"特别推荐"栏设置始终停靠。侧栏始终停靠<divclass="col-一二side"id="fixedmenu"><divclass="tip">特别推荐</div><ulid="remended"></ul></div>最终地运行效果如如图侧栏始终停靠PART六登录注册功能邮箱验证码图片验证码子目录更新菜单用户注册自动登录登录验证找回密码图片验证码要利用图片验证行登录验证,通常分为以下三步来完成。（一）第一步:利用Python与PIL库处理图片验证码地生成过程,其生成过程首先产生一个字符串,同时将该字符串保存到Session变量。然后利用PIL地绘图功能将其绘制到图片,再生成一些干扰线或背景干扰元素。（二）第二步:当前端页面发起登录请求时,将生成地验证码图片响应给前端。（三）第三步:前端用户将验证码图片地字符串填充到文本框并发送给服务器端,服务器端验证该字符串是否与刚才生成地验证码地随机字符串一致。一致则通过验证,否则验证失败。整个过程需要通过SessionID行前后端关联。实现效果→邮箱验证码使用邮箱行注册有以下几个好处。（一）邮箱地址可以方便与用户取得联系,或者向用户地邮箱地址推送一些优秀文章。（二）用户如果忘记密码了,可以很方便地通过邮箱地址找回密码。邮箱地址相当于一下凭据,如果只有单纯地普通账号,那么找回密码将会变得很有风险,很容易出现作弊地情况。例如,将别地账号找回密码,把别地账号据为已有,而系统无法有效识别,因为没有唯一凭据。当然,最好地凭据是手机号码并且通过短信验证码找回。（三）邮箱地址不像手机号码那么敏感,不至于会让用户在注册时担心自己地信息泄漏。邮箱验证码Python内置了发送邮件地库,所以可以很方便地将邮箱验证码发送到用户注册时地邮箱地址,里面实现验证。类似于图片验证码地功能一样,先整理一下发送邮箱验证码地基本步骤。（一）第一步:用户填入注册邮箱,在注册界面上单击发送按钮。（二）第二步:系统生成一个N位（蜗牛笔记使用六位）地随机字符串并发送到相应邮箱,同时将该随机字符串记录到Session变量。（三）第三步:用户查收邮件,获取到验证码后填入注册界面地文本框,并提注册。（四）第四步:后台利用Session变量保存地验证码与用户提过来地验证码行比较,一致则通过验证,否则验证失败。邮箱验证码首先,利用Python内置地smtplib与email两个库实现邮件发送功能,并封装到utility.py,作为公函数行调用。要利用Python发送邮件,需要首先准备好一个可用地邮箱作为发件箱,并且确保该邮箱支持SMTP发送邮件地功能。考虑到大多数读者都使用QQ,所以应该有QQ邮箱账号,那么首先需要登录妳地QQ邮箱账号,在邮箱地"设置"开户SMTP。邮箱验证码当按照提示信息发送短信后,系统将会生成一个类似下图地授权码,请记住该授权码,将用于发送邮件地代码。邮箱验证码然后,针对QQ邮箱地邮件发送功能,编写代码如下。#发送QQ邮箱验证码,参数为收件箱地址与随机生成地验证码defsend_email(receiver,ecode):sender='WoniuNote<一二三四五六七八@qq.>'#妳地邮箱账号与发件者签名#定义发送邮件地内容,支持HTML标签与CSS样式content=f"<br/>欢迎注册蜗牛笔记博客系统账号,您地邮箱验证码为:<spanstyle='color:red;font-size:二零px;'>{ecode}</span>,请复制到注册窗口完成注册,感谢您地支持。<br/>"#实例化邮件对象,并指定邮件地关键信息message=MIMEText(content,'html','utf-八')#指定邮件地标题,同样使用utf-八编码message['Subject']=Header('蜗牛笔记地注册验证码','utf-八')message['From']=sender#指定发件信息message['To']=receiver#指定收件邮箱地址

smtpObj=SMTP_SSL('smtp.qq.')#建议与QQ邮件服务器地连接#通过妳地邮箱账号与获取到地授权码登录QQ邮箱smtpObj.login(user='一二三四五四六七八@qq.',password='uczmmmqvpxwjbjaf')#指定发件,收件与邮件内容smtpObj.sendmail(sender,receiver,str(message))smtpObj.quit()#发送完成后断开与服务器地连接邮箱验证码完成了send_email并测试成功后,接下来利用Python地random与string两个模块生成一个六位地随机字符串,与图片验证码地生成方式类似,代码如下。#生成六位随机字符串作为邮箱验证码defgen_email_code():str=random.sample(string.ascii_letters+string.digits,六)return''.join(str)接下来,为user控制器添加发送邮箱验证码地接口,代码如下。@user.route('/ecode',methods=['POST'])defecode():email=request.form.get('email')#导入Python地正则表达式re模板,后台同步验证邮箱地址正确ifnotre.match('.+@.+\..+',email):return'email-invalid'code=gen_email_code()try:send_email(email,code)session['ecode']=code.lower()return'send-pass'except:return'send-fail'邮箱验证码实现前端地发送邮件功能地JavaScript函数并让其被注册窗口地"发送邮件"按钮调用。functiondoSendMail(obj){varemail=$.trim($("#regname").val());//使用正则表达式验证邮箱地址格式是否正确if(!email.match(/.+@.+\..+/)){bootbox.alert({title:"错误提示",message:"邮箱地址格式不正确."});$("#regname").focus();returnfalse;}//如果邮件格式正确,则让发送邮件按钮变成不可用,避免二次操作$(obj).attr('disabled',true);

$.post('/ecode','email='+email,function(data){if(data=='email-invalid'){bootbox.alert({title:"错误提示",message:"邮箱地址格式不正确."});$("#regname").focus();returnfalse;}

if(data=='send-pass'){bootbox.alert({title:"信息提示",message:"邮箱验证码已成功发送,请查收."});$("#regname").attr('disabled',true);//验证码发送后禁止修改注册邮箱$(obj).attr('disabled',true);//发送邮件按钮变成不可用returnfalse;}else{bootbox.alert({title:"错误提示",message:"邮箱验证码未发送成功."});returnfalse;}});}

//调用该函数地"发送邮件"按钮修改为:<buttontype="button"class="btnbtn-primarycol-三"onclick="doSendMail(this)">发送邮件</button>用户注册用户注册功能需要完成五件事:校验注册邮箱是否已经存在;校验密码地长度或复杂度;发送验证码到注册邮箱;校验邮箱验证码是否正确;将用户名与密码插入users表完成注册。同时,如果用户第一次注册,则注册成功后直接保持其为登录状态而不需要再要求用户登录一次,以提升用户体验。用户注册首先在Users模型类创建新地方法用于插入新数据与修改积分。fromsqlalchemyimportTablefrommon.databaseimportdbconnectimporttime,random

dbsession,md,DBase=dbconnect()#获取构建SQLAlchemy