🌟所属专栏：献给榕榕
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该专栏系为女友准备的，里面会不定时发一些讨好她的技术作品，感兴趣的小伙伴可以关注一下~
👉文章简介：首页的前端实现
目录
👉系列文章
（1）
个人时间管理网站（初步简略计划）_rchjr的博客-CSDN博客
（2）
（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 Blueprint
login = Blueprint("login", __name__)
from . import view
app_login/view.py如下：
# coding: utf-8
# 作者(@Author): Messimeimei
# 创建时间(@Created_time): 2023/3/29 20:34
"""登录视图函数"""
from . import login
from flask import render_template
@login.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 Flask
def register_bp(app):
"""
注册蓝图
:param app:
:return:
"""
from .app_login import login as login_blueprint
app.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_app
app = create_app()
app.run()🔥母版设计base.html
这里我们使用了jinja2实现模板的继承，我们把base.html作为母版。
里面主体包括两个，一个是顶部导航栏，一个是底部的版权部分。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../static/css/base.css">
<link rel="stylesheet" href="../static/css/index.css">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<div class="top-nav">
<img src="../static/images/logo.png" alt="">
<span>TimeManager</span>
<ul class="choice">
<li><a href="#">登录 · 注册</a></li>
<li><a href="#">关于我</a></li>
<li><a href="#">更多</a></li>
</ul>
</div>
{% block body %}{% endblock %}
<div class="footer">
<img src="../static/images/logo.png" alt="">
<span>TimeManager</span>
<span class="speak">用数据管理好你的时间</span>
<div class="links">
<dl>
<dt>项目灵感</dt>
<dd><a href="#">起源</a></dd>
<dd><a href="#">感谢</a></dd>
</dl>
<dl>
<dt>过程记录</dt>
<dd><a href="#">起源</a></dd>
<dd><a href="#">感谢</a></dd>
<dd><a href="#">感谢</a></dd>
</dl>
<dl>
<dt>相关资料</dt>
<dd><a href="#">起源</a></dd>
<dd><a href="#">感谢</a></dd>
<dd><a href="#">感谢</a></dd>
</dl>
<dl>
<dt>联系我</dt>
<dd><a href="#">起源</a></dd>
<dd><a href="#">感谢</a></dd>
<dd><a 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 class="main-box">
<div class="text">
<h1>欢迎使用TimeManager</h1>
<br>
<p class="one">
TimeManager是一款专注于时间管理的应用，它高效简洁，能帮助你提升效率，但它并非适合所有用户，
只有本身自律但又缺少合适的时间管理工具的人才能用好它。借助它你可以实现：<br><br>
</p>
<p class="two">
·对每天所做事情的详细记录<br><br>
·以可视化的方式掌握各个事项所花费的时间,占比<br><br>
·智能统计你的时间使用特征，助力养成良好习惯<br><br>
</p>
</div>
<div class="img">
<img src="../static/images/show1.png" alt="">
</div>
<div class="s-use">
<span class="unique">独特的记录方法</span>
<span class="clean">简洁的展示手段</span>
<span class="statistics">全新的统计方式</span>
<button>
开始使用
</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上面！
💙这里是个人时间管理网站项目开发全流程记录，欢迎感兴趣的朋友关注我，关注《献给榕榕》专栏，让我们一起享受项目开发的过程吧！💙
扫一扫
1318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
