讨好她的技术作品感兴趣的小伙伴可以关注一下~文章简介首页的前端实现

系列文章

个人时间管理网站—Git项目管理_rchjr的博客-CSDN博客

个人时间管理网站—相关产品调研_rchjr的博客-CSDN博客

个人时间管理网站—基于Axure的首页原型设计_rchjr的博客-CSDN博客

前言回顾

上篇文章中我们实现了首页和登录界面的原型设计得到最后的文件夹结构如下那么今天我们就基于首页的原型设计来完成前端的实现。

1.添加第一个应用app_login

3.完成母版设计base.html和首页设计index.html和对应的两个css文件

添加第一个应用

render_template(index.html)这里我们实现了第一个蓝图login后续还会详细介绍蓝图

代码如下

login_blueprintapp.register_blueprint(login_blueprint)def

create_app():app

app.app_context():register_bp(app)return

app

这里我们从app/__init__.py中导入了启动的app然后app.run启动应用

coding:

这里我们使用了jinja2实现模板的继承我们把base.html作为母版。

!DOCTYPE

href../static/css/index.csstitle{%

block

然后我们继承base.html得到首页index.html。

这里主要是在中间添加了一个信息介绍部分和开始使用部分。

注意继承的语法哦~

extends

classtexth1欢迎使用TimeManager/h1brp

classoneTimeManager是一款专注于时间管理的应用它高效简洁能帮助你提升效率但它并非适合所有用户只有本身自律但又缺少合适的时间管理工具的人才能用好它。

借助它你可以实现brbr/pp

classtwo·对每天所做事情的详细记录brbr·以可视化的方式掌握各个事项所花费的时间,占比brbr·智能统计你的时间使用特征助力养成良好习惯brbr/p/divdiv

classimgimg

classstatistics全新的统计方式/spanbutton开始使用/button/div/div

endblock

这里是个人时间管理网站项目开发全流程记录欢迎感兴趣的朋友关注我关注《献给榕榕》专栏让我们一起享受项目开发的过程吧