公司网站建设说明书,十大手游平台app排行榜,北京建设网官网下载,360上做网站#x1f31f;所属专栏#xff1a;献给榕榕 #x1f414;作者简介#xff1a;rchjr——五带信管菜只因一枚 #x1f62e;前言#xff1a;该专栏系为女友准备的#xff0c;里面会不定时发一些讨好她的技术作品#xff0c;感兴趣的小伙伴可以关注一下~#x1f449;文章简… 所属专栏献给榕榕 作者简介rchjr——五带信管菜只因一枚 前言该专栏系为女友准备的里面会不定时发一些讨好她的技术作品感兴趣的小伙伴可以关注一下~文章简介首页的前端实现 目录
系列文章 前言回顾 更新后的文件夹 添加第一个应用 app/__init__.py添加注册蓝图 manage.py实现项目启动 母版设计base.html 系列文章
1
个人时间管理网站初步简略计划_rchjr的博客-CSDN博客
2
个人时间管理网站—项目准备_rchjr的博客-CSDN博客
3
个人时间管理网站—Git项目管理_rchjr的博客-CSDN博客
4
个人时间管理网站—相关产品调研_rchjr的博客-CSDN博客
5
个人时间管理网站—基于Axure的首页原型设计_rchjr的博客-CSDN博客 前言回顾
上篇文章中我们实现了首页和登录界面的原型设计得到最后的文件夹结构如下那么今天我们就基于首页的原型设计来完成前端的实现。 更新后的文件夹 这篇文章我们将实现以下的更新
1.添加第一个应用app_login
2.app/__init__.py添加注册蓝图
2.manage.py实现项目启动
3.完成母版设计base.html和首页设计index.html和对应的两个css文件 添加第一个应用
我们创建一个包app_login里面增加一个view视图文件 源码如下
app_login中的__init__.py如下
# coding: utf-8
# 作者(Author): Messimeimei
# 创建时间(Created_time): 2023/3/29 20:34登录视图
from flask import Blueprintlogin Blueprint(login, __name__)
from . import viewapp_login/view.py如下
# coding: utf-8
# 作者(Author): Messimeimei
# 创建时间(Created_time): 2023/3/29 20:34登录视图函数
from . import login
from flask import render_templatelogin.route(/, methods[GET, POST])
def a():return render_template(index.html)这里我们实现了第一个蓝图login后续还会详细介绍蓝图 app/__init__.py添加注册蓝图
代码如下
# coding: utf-8
# 作者(Author): Messimeimei
# 创建时间(Created_time): 2023/3/29 19:05
from flask import Flaskdef register_bp(app):注册蓝图:param app::return:from .app_login import login as login_blueprintapp.register_blueprint(login_blueprint)def create_app():app Flask(__name__)with app.app_context():register_bp(app)return app
这里是执行蓝图注册数据库连接等操作的地方 manage.py实现项目启动
代码如下 这里我们从app/__init__.py中导入了启动的app然后app.run启动应用
# coding: utf-8
# 作者(Author): Messimeimei
# 创建时间(Created_time): 2023/3/29 19:06
from app import create_appapp create_app()app.run() 母版设计base.html
这里我们使用了jinja2实现模板的继承我们把base.html作为母版。
里面主体包括两个一个是顶部导航栏一个是底部的版权部分。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0link relstylesheet href../static/css/base.csslink relstylesheet href../static/css/index.csstitle{% block title %}{% endblock %}/title
/head
body
div classtop-navimg src../static/images/logo.png altspanTimeManager/spanul classchoicelia href#登录 · 注册/a/lilia href#关于我/a/lilia href#更多/a/li/ul
/div
{% block body %}{% endblock %}
div classfooterimg src../static/images/logo.png altspanTimeManager/spanspan classspeak用数据管理好你的时间/spandiv classlinksdldt项目灵感/dtdda href#起源/a/dddda href#感谢/a/dd/dldldt过程记录/dtdda href#起源/a/dddda href#感谢/a/dddda href#感谢/a/dd/dldldt相关资料/dtdda href#起源/a/dddda href#感谢/a/dddda href#感谢/a/dd/dldldt联系我/dtdda href#起源/a/dddda href#感谢/a/dddda href#感谢/a/dd/dl/div
/div
/body
/html
对应的base.css文件如下
* {margin: 0;padding: 0;
}li {list-style: none;
}a {text-decoration: none;
}/* 顶部导航栏 */
.top-nav {position: fixed;top: 0;height: 100px;width: 100%;background-color: #f2ecec;
}/* 图标与文字 */
.top-nav img {position: absolute;line-height: 100px;top: 20px;left: 39px;width: 54px;height: 50px;
}.top-nav span {display: inline-block;position: absolute;top: 26px;left: 110px;font: 700 32px Times New Roman;font-style: oblique;width: 181px;height: 37px;
}/* 多个选项 */
.choice {position: absolute;right: 120px;height: 100px;
}.choice li {float: left;margin-left: 60px;margin-top: 38px;line-height: 100px;
}.choice li a {display: block;font: 700 16px 宋体;color: rgba(14, 10, 10, 0.85);
}.choice li a:hover {color: rgba(245, 201, 3, 0.863);
}/* 信息介绍展示部分 */.main-box {margin-top: 100px;width: 100%;height: 730px;background-image: linear-gradient(to top, #FFFFFF, #000000);
}/* 底部栏 */
.footer {width: 100%;height: 250px;background-image: radial-gradient(ellipse farthest-corner at left bottom, #ffffff, #aaaaaa, #000000);
}/* 图标与文字 */
.footer img {position: relative;top: 20px;left: 39px;width: 54px;height: 50px;
}.footer span {position: relative;top: 10px;left: 50px;font: 700 32px Times New Roman;font-style: oblique;width: 181px;height: 37px;
}.footer .speak {position: relative;top: 10px;left: 800px;font-style: oblique;width: 181px;height: 37px;font: 600 oblique 24px 楷体;color: #d8d3d3;
}/* 相关连接 */
.links {position: relative;top: 25px;left: -20px;width: 1080px;
}.links dl {float: left;top: 25px;margin-left: 130px;font: 700 24px;
}.links dt {font: 700 24px 楷体;
}.links dl dd a {display: block;margin-top: 8px;margin-bottom: 16px;color: #1a1919;font: 700 12px 楷体;
}.links dl dd a:hover {color: rgba(245, 201, 3, 0.863);
}
然后我们继承base.html得到首页index.html。这里主要是在中间添加了一个信息介绍部分和开始使用部分。注意继承的语法哦~
{% extends base.html %}{% block title %}首页
{% endblock %}{% block body %}div classmain-boxdiv classtexth1欢迎使用TimeManager/h1brp classoneTimeManager是一款专注于时间管理的应用它高效简洁能帮助你提升效率但它并非适合所有用户只有本身自律但又缺少合适的时间管理工具的人才能用好它。借助它你可以实现brbr/pp classtwo·对每天所做事情的详细记录brbr·以可视化的方式掌握各个事项所花费的时间,占比brbr·智能统计你的时间使用特征助力养成良好习惯brbr/p/divdiv classimgimg src../static/images/show1.png alt/divdiv classs-usespan classunique独特的记录方法/spanspan classclean简洁的展示手段/spanspan classstatistics全新的统计方式/spanbutton开始使用/button/div/div
{% endblock %}
对应的index.css如下
/* 信息介绍展示部分 */.main-box {margin-top: 100px;width: 100%;height: 730px;background-image: linear-gradient(to bottom, #FFFFFF, #000000);
}/* 文字介绍 */
.main-box .text {float: left;margin-top: 51px;margin-left: 380px;padding-left: 24px;width: 431px;height: 457px;background-color: #4B4952;border-radius: 8px;
}.main-box .text .one {font: 400 normal 18px 楷体;color: #000000;text-indent: 3em;
}.main-box .text .two {font: 400 normal 24px 楷体;color: #fff;
}/* 图片介绍 */
.img {float: left;margin-top: 51px;margin-left: 60px;width: 431px;height: 457px;border-radius: 8px;
}.img img {width: 431px;height: 457px;border-radius: 8px;
}/* 开始使用 */
.s-use {float: left;margin-top: 28px;margin-left: 462px;width: 802px;height: 156px;background-color: #6d6d6d;
}.s-use .unique,
.clean,
.statistics {font: normal oblique 24px 楷体;
}.s-use .unique {display: block;margin-top: 10px;text-align: center;
}.s-use .clean {display: inline-block;margin-top: 10px;margin-left: 37px;
}.s-use .statistics {display: block;float: right;margin-top: 10px;margin-right: 37px;
}.s-use button {position: relative;top: 50px;left: 128px;width: 140px;height: 28px;background-color: #161513;font: normal 13px 楷体;color: #fff;border: 0;border-radius: 8px;
}.s-use button:hover {background-color: #ffffff;color: #000000;box-shadow: 0px 0px 15px 2px rgb(190, 225, 255);
}得到的效果如下 最后别忘记推送到github上面 这里是个人时间管理网站项目开发全流程记录欢迎感兴趣的朋友关注我关注《献给榕榕》专栏让我们一起享受项目开发的过程吧
