当前位置：首页 > news >正文

个人时间管理网站—首页的前端实现【源码】

news 2025/11/5 5:53:57

🌟所属专栏：献给榕榕
🐔作者简介：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 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 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 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上面！

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

个人时间管理网站—首页的前端实现【源码】

🌟所属专栏：献给榕榕 🐔作者简介：rchjr——五带信管菜只因一枚 😮前言：该专栏系为女友准备的，里面会不定时发一些讨好她的技术作品，感兴趣的小伙伴可以关注一下~👉文章简…...

编程日记 2023/4/18 22:05:09

Python毕业设计推荐

今天给大家推荐4个基于python的毕业设计/课程设计 1 网上商城系统这是一个基于pythonvue开发的商城网站，平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。整个平台包括前台和后台两个部分。前台功能…...

编程日记 2023/3/30 16:08:43

使用nodemon时报错：“无法加载文件...，因为在此系统上禁止运行脚本“；windows执行策略修改

报错内容如下图： Windows 系统会对全局安装的脚本进行一个限制，防止恶意脚本执行，所以此处会报错。如何解决？通过修改 windows 执行策略来解决此问题。一、什么是 windows 执行策略 Windows 给 PowerShell 设定了一个叫 “…...

编程日记 2023/4/18 22:06:19

网络协议分析期末复习（五）

目录 0.前言 1.PC和PPPOE服务器建立连接的流程以及包含LCP配置选项的PPP帧 -Discovery阶段 -Session阶段 -Terminate阶段包含LCP配置选项的PPP帧如下 2.ARP的步骤以及过程中的具体ARP报文 Step1：查看路由表项以及本地的ARP缓存表 Step2：发送ARP…...

编程日记 2023/3/30 15:58:39

外贸找客户软件：Yellow Page Spider 8.7.1 Crack

黄页蜘蛛 |黄页提取器从PAGINE GIALLE中提取数据，电子邮件，公司，协会，商业活动的电话！ Yellow Page Spider 8.7.1对于那些在附近或任何意大利地点寻找商业活动、公司、协会、各种俱乐部的人来说，PagineGia…...

编程日记 2023/4/18 22:08:16

博客管理系统(前端页面设计)

文章目录一、预期效果二、博客列表页三、博客详情页四、博客登录页五、博客编辑页一、预期效果博客登录页： 博客列表页： 博客详情页： 博客编辑页： 目录结构： 大家需要注意，我们下述代码的所有路径都…...

编程日记 2023/4/15 17:57:37

安装yolov5环境

当今世界上，深度学习技术在各个领域都有广泛的应用，因此掌握深度学习技术对于从事人工智能相关工作的人来说是非常重要的。而 YOLOv5 是一个非常流行的目标检测框架，本文将介绍如何在 Ubuntu 系统上安装 YOLOv5 环境。 1.安装 Anaconda Ana…...

编程日记 2023/4/15 17:59:10

IP 归属地查询 API 教你从0到1顺着网线找到键盘侠

写在前面前一段时间，微博、头条、抖音、知乎等各大互联网平台相继推出了“个人主页、评论显示 IP 属地，用户不能自己开启或关闭”的功能，那么这些平台是如何获取到用户的 IP 地址呢？ 本文将从 IP 归属地的技术原理、实际应用场…...

编程日记 2023/4/15 17:59:37

【K8S系列】深入解析Pod对象(二)

目录序言 1.Volume 简单介绍 2 Projected Volume 介绍 2.1 Secret 2.1.1 yaml讲解 2.1.2 创建Pod 2.2 Downward API 2.2.1 yaml示例 2.2.2 Downward API 支持字段 3 投票序言任何一件事情，只要坚持六个月以上，你都可以看到质的飞跃。在…...

编程日记 2023/4/18 22:09:50

从3千到3万，我的测试之路真的坎坷

其实测试行业未来发展之路是几乎所有关于软件测试工程师都会在意的话题，相信各位看官也很迷茫自己的发展路线。为了方便大家选择和比较，我也将我的经验和观点分享出来，以作参考。如果小伙伴们有更好的观点，欢迎分享和探讨&#xf…...

编程日记 2023/4/16 6:31:58

linux下使用system函数在程序中运行linux的shell命令

一、功能 linux下在程序中调用shell命令实现某个功能，比如拷贝命令cp 二、使用添加头文件 #include <stdlib.h> 函数原型 int system(const char *command); 描述说明是system的调用过程： 使用fork创建一个子进程，子进程使用 execl 执…...

编程日记 2023/4/16 6:33:06

银行数字化转型导师坚鹏：银行业发展趋势及对人才的需求分析

数字化转型背景下银行业发展趋势及对人才的需求分析 ——洞察先机，重塑人才核心竞争力课程背景： 数字化转型背景下，很多银行存在以下问题：不知道银行整体发展现状与发展趋势？不清楚金融科技对银行发展有什么影响&…...

编程日记 2023/4/18 22:10:11

NFS挂载

0、创建 mkdir /nfsdata mkfs.xfs /dev/vdb mount /dev/vdb /nfsdata 1、两边主机启动nfs服务 service nfs start 2、被挂载主机查看，文件系统是否可挂载 showmount -e 3、将被挂载主机，设置任何主机可挂载文件系统 vi /etc/exports /nfsdata (in…...

编程日记 2023/4/18 22:12:04

IDEA使用技巧

IntelliJ IDEA是一款流行的Java集成开发环境（IDE），它为开发者提供了许多有用的功能和工具来提高他们的工作效率和开发质量。直接使用IntelliJ IDEA就相当于节省了自己的时间，如果先使用其他编译器后来在使用IntelliJ IDEA会觉得非…...

编程日记 2023/4/15 18:01:09

自动化测试之一【接口测试总结】

本文主要分为两个部分：第一部分：主要从问题出发，引入接口测试的相关内容并与前端测试进行简单对比，总结两者之前的区别与联系。但该部分只交代了怎么做和如何做？并没有解释为什么要做？第二部分：…...

编程日记 2023/4/18 22:13:01

科大奥瑞物理实验——傅里叶光学

实验名称：傅里叶光学 1. 实验目的： 加深对傅里叶光学中的一些基本概念和基本理论的理解，如空间频率空间频谱和空间滤波和卷积等。通过实验验证阿贝成像理论，理解透镜成像的物理过程，进而掌握光学信息处理实质。通过阿…...

编程日记 2023/3/30 14:58:20

mysql count(*)的性能如何？

文章目录为什么会出现这种情况呢？如何优化count(*)性能？增加redis缓存加二级缓存多线程执行减少join的表改成ClickHousecount的各种用法性能对比为什么会出现这种情况呢？在Mysql中，count(*)的作用是统计表中记录的总行数。而count()的性能跟存储引擎有直接关系，并非所…...

编程日记 2023/4/15 18:02:26

gan实战（基础GAN、DCGAN）

一、基础Gan 1.1 参数 （1）输入：会被放缩到6464 （2）输出：6464 （3）数据集：https://pan.baidu.com/s/1RY1e9suUlk5FLYF5z7DfAw 提取码：8n89 1.2 实现 import t…...

编程日记 2023/4/15 18:03:41

使用C语言实现服务器/客户端的TCP通信

本文力求使用简单的描述说明一个服务器/客户端TCP通信的基本程序框架，文中给出了服务器端和客户端的实例源程序，本文的程序在ubuntu 20.04中编译运行成功，gcc版本号为：9.4.0 1. 前言当两台主机间需要通信时，TCP和UDP是两种最常用的传输层协议，TCP是一种面向连接的传输协…...

编程日记 2023/4/15 18:04:59

AI模型训练推理一定要知道的事情

AI训练的算力要求算力模型训练需要大量计算资源，包括CPU( Central Processing Unit)、GPU(Graphical Processing Unit)、TPU(Tensor Processing Unit)等，其中GPU是最为常见的硬件加速器。另外还可以通过算法优化提高模型训练效率。例如分布式训练技术…...

编程日记 2023/3/30 14:38:13

网络编程（Modbus进阶）

思维导图 Modbus RTU（先学一点理论） 概念 Modbus RTU 是工业自动化领域最广泛应用的串行通信协议，由 Modicon 公司（现施耐德电气）于 1979 年推出。它以高效率、强健性、易实现的特点成为工业控制系统的通信标准。包…...

编程新知 2025/11/4 13:36:24

docker详细操作--未完待续

docker介绍 docker官网: Docker：加速容器应用程序开发 harbor官网：Harbor - Harbor 中文使用docker加速器: Docker镜像极速下载服务 - 毫秒镜像是什么 Docker 是一种开源的容器化平台，用于将应用程序及其依赖项（如库、运行时环…...

编程新知 2025/10/29 19:16:36

【JavaEE】-- HTTP

1. HTTP是什么？ HTTP（全称为"超文本传输协议"）是一种应用非常广泛的应用层协议，HTTP是基于TCP协议的一种应用层协议。应用层协议：是计算机网络协议栈中最高层的协议，它定义了运行在不同主机上…...

编程新知 2025/10/25 8:00:21

本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2025/10/24 16:29:44