个人时间管理网站—首页的前端实现【源码】
🌟所属专栏：献给榕榕
🐔作者简介：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是最为常见的硬件加速器。另外还可以通过算法优化提高模型训练效率。例如分布式训练技术…...
SPSS27破解安装后，出现应用程序无法正常启动(0xc000007b)
破解完SPSS 27软件后，点击图标出现下图错误 可以尝试以下方法： 1. 在安装目录下找到VC开头的文件夹 2. 点击此软件进行修复 若修复完成，重新启动SPSS软件即可。 3. 若提示错误，显示如下界面，进行下面的方法j 4. 下…...
央企程序员写了重大bug，会造成用户个人信息泄露，领导已经知道了，需要赶紧跑路吗？...
开发过程中出现bug是很正常的事情，小bug无关紧要，可如果是重大bug该怎么办？一位央企程序员就陷入了这样的困境：因为自己没有考虑周全，不小心写了个重大bug，会造成用户个人信息泄露（用爬虫可以攻…...
day14—选择题
文章目录1.定义学生、教师和课程的关系模式 S (S#,Sn,Sd,Dc,SA ）（其属性分别为学号、姓名、所在系、所在系的系主任、年龄）； C （ C#,Cn,P# ）（其属性分别为课程号、课程名、先修课）&a…...
翻转链表(力扣刷题)
给你单链表的头节点 head ，请你反转链表，并返回反转后的链表。 示例 1： 输入：head [1,2,3,4,5] 输出：[5,4,3,2,1] 示例 2： 输入：head [1,2] 输出：[2,1] 示例 3： 输入…...
JavaEE——锁相关
在开发过程中，如果需要开发者自主实现一把锁，就必须了解锁策略和锁的实现原理。 目录 锁策略 乐观锁和悲观锁 互斥锁和读写锁 轻量级锁和重量级锁 自旋锁和挂起等待锁 公平锁和非公平锁 可重入锁和不可重入锁 死锁 发生死锁的必要条件 synchr…...
C语言指针与数组 进阶
本章主要是补充 指针和数组方面的指示，把前面指针的知识补充下。参考前面的C语言基础—指针 C语言指针与数组 进阶用一级指针访问二维数组❗易错点: 不能直接指针变量数组名指向数组的指针1. 指向指针的指针2. 指向一维数组的指针 (*P)[4]—行指针二维数组名指针数组…...
Java连接SqlServer错误
Java连接SqlServer错误 🏠个人主页：shark-Gao 🧑个人简介：大家好，我是shark-Gao，一个想要与大家共同进步的男人😉😉 🎉目前状况：23届毕业生，目…...
Elastic 可观察性 - 适用于当今 “永远在线” 世界的解决方案
作者：Bahubali Shetti 当今世界，我们的生活很大程度上由应用程序控制。 无论是用于商业用途还是个人用途，我们都希望这些应用程序 “始终在线” 并能够立即做出响应。 这些高期望对开发人员和运营人员提出了巨大的要求。 管理这些应用程序需…...
Temu病毒式营销，如何在大红利时期快人一步？
从去年9月开始，拼多多推出海外版Temu，大手笔烧钱买量、大手笔补贴消费者，通过令人难以置信的超低价（比如一件卫衣2.44美元，且包邮），在北美市场迅速打开局面，并引发海外网友“人传人”…...
ChatGPT使用案例之写代码
ChatGPT使用案例之写代码 可以对于许多开发者而言又惊又喜的是我们可以使用ChatGPT 去帮我们完成一些代码，或者是测试用例的编写，但是正如我们提到的又惊又喜，可能开心的是可以解放一部分劳动力，将自己的精力从繁琐无聊的一些任务…...