Flask博客实战实现博客首页视图及样式

　　本套教程是一个Flask实战类教程，htmlcssjavascript等相关技术栈不会过多的去详细解释，那么就需要各位初学者尽可能的先去掌握这些基础知识，当然本套教程不需要你对其非常精通，但最起码得做到能看懂其意思！静态文件
　　静态文件是相对动态的web应用而言的，一般是指css和js文件！网站应用部署的时候，这些静态文件通常由Nginx等静态文件服务器处理，但是在开发过程中，Flask也能做好这项工作。
　　一般，Flask的静态文件位于应用的static中，模板文件位于应用的templates中。
　　因此上，我们需要在appblog目录下分别创建一个static及templates的文件夹，用来对应的存放博客的静态文件及模板文件！创建博客首页视图
　　在appblogviews。py中通过蓝图的方式创建首页视图，代码如下：
　　Flask会自动为你配置Jinja2模板引擎。
　　使用rendertemplate（）方法可以渲染模板，你只需要提供模板名称和需要作为参数传递给模板的变量就行了。fromflaskimportBlueprint，rendertemplatebpBlueprint（blog，name，urlprefixblog，templatefoldertemplates，staticfolderstatic）defindex（）：首页视图posts〔1，2，3，4，5，6〕returnrendertemplate（index。html，postsposts）
　　在之前的蓝图应用章节我们对蓝图的使用做了大概的说明，其中这里新增了几个参数需要单独拉出来说一下，Blueprint类的templatefolder参数就是指定该蓝图需要独立使用的模板文件夹，这个路径是相对路径或绝对路径，staticfolder参数即设置静态文件目录，这样做的好处是我们就可以把每个功能模块拆分，静态文件和模板文件也可以独立拆分，这个思路是有借鉴django项目的布局方式，利于维护和后期的动态扩展！
　　index函数则就是一个python的普通函数，只是在返回的时候我们使用了Flask提供的rendertemplate方法来动态渲染模板和载入上下文数据，启动postsposts就是我们构造的一个上下文演示数据，下来将会在模板文件中使用该上下文，这里需要注意的是我们并没有使用装饰器的方法去绑定url，下来我们要介绍一个url和视图分离的url方式！addurlrule方法分离视图与url
　　在项目目录（RealProject）的init。py中的工厂函数createapp底部创建如下代码defcreateapp（testconfigNone）：appFlask（name，instancerelativeconfigTrue）省略中间代码。。。returnappdefregisterbp（app：Flask）：注册视图方法fromapp。blogimportviewsasblog注册蓝图app。registerblueprint（blog。bp）首页urlapp。addurlrule（rule，endpointindex，viewfuncblog。index）
　　addurlrule的参数解析：rule参数是真正的url，url开头必须以斜杠开始；endpoint参数是该url的端点，类似于django的name参数，它的作用是方便反查该url，一般的加载解析顺序是访问该url会先找该端点再找其关联的视图，然后开始处理逻辑，相当于url的id；viewfunc参数则是该url指向的函数，绑定url与函数！
　　之后只需要将registerbp函数引入工厂函数中即可，工厂函数代码修改如下：defcreateapp（testconfigNone）：appFlask（name，instancerelativeconfigTrue）iftestconfigisNone：CONFIGPATHBASEDIRRealProjectsettings。pyapp。config。frompyfile（CONFIGPATH，silentTrue）else：testconfig为一个字典app。config。frommapping（testconfig）db。initapp（app）migrate。initapp（app，db）注册视图registerbp（app）注册模型fromapp。blogimportmodelsfromapp。authimportmodelsreturnapp创建博客首页模板文件
　　在appblogtemplates目录下创建index。html，这就是rendertemplate方法第一个参数对应的模板文件，内容如下：
　　模板中用到的相关Jinja2模板语法，请自行查询文档理解Jinja2模板文档：https：jinja。palletsprojects。comen3。1。xtemplates！DOCTYPEhtmlhtmllangcnheadmetacharsetUTF8metahttpequivXUACompatiblecontentIEedgemetanameviewportcontentwidthdevicewidth，initialscale1。0title｛blocktitle｝｛endblocktitle｝titlelinkrelstylesheethref｛｛urlfor（blog。static，filenamecssstyle。css）｝｝linkrelstylesheethref｛｛urlfor（blog。static，filenamecssbuefy。min。css）｝｝｛blockextraheadstyle｝｛endblockextraheadstyle｝headbody！导航｛blocknavbar｝templatebnavbarspacedshadowtemplatebrandbnavbaritemimgsrca2020imgdataimg。jpgdatasrcimg02。bs178。combfphbcda1114040a9c34。jpgaltFlaskBlogbnavbaritemtemplatetemplatestartbnavbaritemhrefHomebnavbaritembnavbaritemhrefDocumentationbnavbaritembnavbardropdownlabelInfobnavbaritemhrefAboutbnavbaritembnavbaritemhrefContactbnavbaritembnavbardropdowntemplatetemplateendbnavbaritemtagpstrongSignupstrongLoginbnavbaritemtemplatebnavbartemplate｛endblocknavbar｝！导航end｛blockhero｝sectionclassheroismediumisprimarypclasstitleLargeheropclasssubtitleLargesubtitlesection｛endblockhero｝｛blockmain｝｛forpostinposts｝figureclassimageis4by3imgsrca2020imgdataimg。jpgdatasrcimg02。bs178。combfph7ae79c5de5a56e74。jpgaltPlaceholderimagefigurepclasstitleis4Flask博客实战掌握增删改查pclasshastextgreyissize7既然我们选择了使用ORM框架，那就必须熟练掌握其提供的增删改查方法，在正式编写视图事前，本节内容我们先在shell环境中来了解和熟悉其增删改查的基础方法！timedatetime20161111：09PM1Jan2016time｛endfor｝navclasspaginationrolenavigationarialabelpaginationPreviousNextpageulclasspaginationlistli1lili2lili3liulnav｛endblockmain｝｛blockfooter｝2022FlaskBlog博客实战版权所有备案号：陕ICP备20005686号｛endblockfooter｝｛blockextrafootscript｝｛endblockextrafootscript｝｛blockvuescript｝｛endblockvuescript｝bodyhtml静态文件说明
　　模板中我们看到加载静态文件的方法使用了｛｛urlfor（blog。static，filenamecssstyle。css）｝｝这样的语法，这是固定写法，第一个参数就是静态文件的路径，这里使用了蓝图来隔离了各应用之间的静态文件，那么blog。static即代表加载blog蓝图中的静态文件夹，filename则是静态文件的路径字符串，加载图片也是同样的方法！
　　本项目前端依赖的第三方框架有：buefyhttps：buefy。orgbulmahttps：bulma。iovue2https：cn。vuejs。org
　　请自行下载该三个框架的相关文件引入，这里就当是给大家留的作业，去试试吧！最终样式
　　其他章节Flask博客开发实战前言Flask博客开发实战配置环境并安装FlaskFlask博客实战快速上手Flask博客实战目录结构Flask博客实战工厂函数Flask博客实战蓝图应用Flask博客实战FlaskSQLAlchemy的使用Flask博客实战配置FlaskMigrateFlask博客实战博客相关模型创建Flask博客实战掌握FlaskSQLAlchemy的增删改查