个人时间管理网站—首页的前端实现【源码】
🌟所属专栏：献给榕榕
🐔作者简介：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——五带信管菜只因一枚 😮前言：该专栏系为女友准备的，里面会不定时发一些讨好她的技术作品，感兴趣的小伙伴可以关注一下~👉文章简…...
Python毕业设计推荐
今天给大家推荐4个基于python的毕业设计/课程设计 1 网上商城系统 这是一个基于pythonvue开发的商城网站，平台采用B/S结构，后端采用主流的Python语言进行开发，前端采用主流的Vue.js进行开发。 整个平台包括前台和后台两个部分。 前台功能…...
使用nodemon时报错：“无法加载文件...，因为在此系统上禁止运行脚本“；windows执行策略修改
报错内容如下图： Windows 系统会对全局安装的脚本进行一个限制，防止恶意脚本执行，所以此处会报错。 如何解决？通过修改 windows 执行策略来解决此问题。 一、什么是 windows 执行策略 Windows 给 PowerShell 设定了一个叫 “…...
网络协议分析期末复习（五）
目录 0.前言 1.PC和PPPOE服务器建立连接的流程以及包含LCP配置选项的PPP帧 -Discovery阶段 -Session阶段 -Terminate阶段 包含LCP配置选项的PPP帧如下 2.ARP的步骤以及过程中的具体ARP报文 Step1：查看路由表项以及本地的ARP缓存表 Step2：发送ARP…...
外贸找客户软件：Yellow Page Spider 8.7.1 Crack
黄页蜘蛛 |黄页提取器 从PAGINE GIALLE中提取数据，电子邮件，公司，协会，商业活动的电话！ Yellow Page Spider 8.7.1对于那些在附近或任何意大利地点寻找商业活动、公司、协会、各种俱乐部的人来说，PagineGia…...
博客管理系统(前端页面设计)
文章目录一、预期效果二、博客列表页三、博客详情页四、博客登录页五、博客编辑页一、预期效果 博客登录页： 博客列表页： 博客详情页： 博客编辑页： 目录结构： 大家需要注意，我们下述代码的所有路径都…...
安装yolov5环境
当今世界上，深度学习技术在各个领域都有广泛的应用，因此掌握深度学习技术对于从事人工智能相关工作的人来说是非常重要的。而 YOLOv5 是一个非常流行的目标检测框架，本文将介绍如何在 Ubuntu 系统上安装 YOLOv5 环境。 1.安装 Anaconda Ana…...
IP 归属地查询 API 教你从0到1顺着网线找到键盘侠
写在前面 前一段时间，微博、头条、抖音、知乎等各大互联网平台相继推出了“个人主页、评论显示 IP 属地，用户不能自己开启或关闭”的功能，那么这些平台是如何获取到用户的 IP 地址呢？ 本文将从 IP 归属地的技术原理、实际应用场…...
【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 投票 序言 任何一件事情，只要坚持六个月以上，你都可以看到质的飞跃。 在…...
从3千到3万，我的测试之路真的坎坷
其实测试行业未来发展之路是几乎所有关于软件测试工程师都会在意的话题，相信各位看官也很迷茫自己的发展路线。为了方便大家选择和比较，我也将我的经验和观点分享出来，以作参考。如果小伙伴们有更好的观点，欢迎分享和探讨…...
linux下使用system函数在程序中运行linux的shell命令
一、功能 linux下在程序中调用shell命令实现某个功能，比如拷贝命令cp 二、使用 添加头文件 #include <stdlib.h> 函数原型 int system(const char *command); 描述说明是system的调用过程： 使用fork创建一个子进程，子进程使用 execl 执…...
银行数字化转型导师坚鹏：银行业发展趋势及对人才的需求分析
数字化转型背景下银行业发展趋势及对人才的需求分析 ——洞察先机，重塑人才核心竞争力 课程背景： 数字化转型背景下，很多银行存在以下问题：不知道银行整体发展现状与发展趋势？不清楚金融科技对银行发展有什么影响&…...
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…...
IDEA使用技巧
IntelliJ IDEA是一款流行的Java集成开发环境（IDE），它为开发者提供了许多有用的功能和工具来提高他们的工作效率和开发质量。直接使用IntelliJ IDEA就相当于节省了自己的时间，如果先使用其他编译器后来在使用IntelliJ IDEA会觉得非…...
自动化测试之一【接口测试总结】
本文主要分为两个部分：第一部分：主要从问题出发，引入接口测试的相关内容并与前端测试进行简单对比，总结两者之前的区别与联系。但该部分只交代了怎么做和如何做？并没有解释为什么要做？第二部分：…...
科大奥瑞物理实验——傅里叶光学
实验名称：傅里叶光学 1. 实验目的： 加深对傅里叶光学中的一些基本概念和基本理论的理解，如空间频率空间频谱和空间滤波和卷积等。通过实验验证阿贝成像理论，理解透镜成像的物理过程，进而掌握光学信息处理实质。通过阿…...
的性能如何？)
mysql count(*)的性能如何？
文章目录 为什么会出现这种情况呢？如何优化count(*)性能？增加redis缓存加二级缓存多线程执行减少join的表改成ClickHousecount的各种用法性能对比为什么会出现这种情况呢？ 在Mysql中，count(*)的作用是统计表中记录的总行数。 而count()的性能跟存储引擎有直接关系，并非所…...
gan实战（基础GAN、DCGAN）
一、基础Gan 1.1 参数 （1）输入：会被放缩到6464 （2）输出：6464 （3）数据集：https://pan.baidu.com/s/1RY1e9suUlk5FLYF5z7DfAw 提取码：8n89 1.2 实现 import t…...
使用C语言实现服务器/客户端的TCP通信
本文力求使用简单的描述说明一个服务器/客户端TCP通信的基本程序框架，文中给出了服务器端和客户端的实例源程序，本文的程序在ubuntu 20.04中编译运行成功，gcc版本号为：9.4.0 1. 前言 当两台主机间需要通信时，TCP和UDP是两种最常用的传输层协议，TCP是一种面向连接的传输协…...
AI模型训练推理一定要知道的事情
AI训练的算力要求 算力 模型训练需要大量计算资源，包括CPU( Central Processing Unit)、GPU(Graphical Processing Unit)、TPU(Tensor Processing Unit)等，其中GPU是最为常见的硬件加速器。另外还可以通过算法优化提高模型训练效率。例如分布式训练技术…...
应用升级/灾备测试时使用guarantee 闪回点迅速回退
1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间， 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点，不需要开启数据库闪回。…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序
一、开发准备 环境搭建： 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 项目创建： File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
论文笔记——相干体技术在裂缝预测中的应用研究
目录 相关地震知识补充地震数据的认识地震几何属性 相干体算法定义基本原理第一代相干体技术：基于互相关的相干体技术（Correlation）第二代相干体技术：基于相似的相干体技术（Semblance）基于多道相似的相干体…...
JVM虚拟机：内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...
无人机侦测与反制技术的进展与应用
国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机（无人驾驶飞行器，UAV）技术的快速发展，其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统，无人机的“黑飞”&…...
深度学习水论文：mamba＋图像增强
🧀当前视觉领域对高效长序列建模需求激增，对Mamba图像增强这方向的研究自然也逐渐火热。原因在于其高效长程建模，以及动态计算优势，在图像质量提升和细节恢复方面有难以替代的作用。 🧀因此短时间内，就有不…...
基于Springboot+Vue的办公管理系统
角色： 管理员、员工 技术： 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能： 该办公管理系统是一个综合性的企业内部管理平台，旨在提升企业运营效率和员工管理水…...
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要
根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分： 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...