极客教程使用Flask实现单页作品集
在这篇文章中，我们将学习如何用Flask框架构建一个作品集网页。 这个项目将告诉你如何向HR和同事更深刻地展示你的作品集。它还将包含一些功能，如 下载简历 ，它允许你发布你的简历，并让每个访问你的作品集的用户下载它。任何用户也可以通过这项服务与你联系，填写 “联系我 “表格，这将向你的Gmail账户发送一封电子邮件。
要求
- HTML和CSS的基础
- Bootstrap
- Python的基础
- Flask
安装Flask
pip install Flask
下面的图片显示了投资组合的界面：
文件结构:
逐步实施
Step 1: 首先建立基本的文件夹，为此在你的cmd终端键入以下cmd
mkdir Flask
Step 2: 移动到你的Flask文件夹中
cd Flask static templates
Step 3: 建立我们项目所需的所有文件夹，如：
- static: 在这个静态文件夹中，我们将把我们的图片和CSS文件放在这个文件夹中。
- templates: 在这个文件夹中，我们可以保存我们的HTML文件。
mkdir static templates
Step 3: 现在在你的模板文件夹中创建你的index.html文件
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
<title>Portfolio</title>
</head>
<body>
<div class="text-center">
<img src="https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-12.png"
style="width:30%; height: 100px;"
alt="...">
</div>
<!-- Navbar Section -->
<nav class="navbar navbar-expand-sm bg-success navbar-light">
<!-- Brand/logo -->
<a class="navbar-brand" href="">
<img src="https://www.geeksforgeeks.org/wp-content/uploads/gfg_transparent_white_small.png" alt="logo"
style="width:40px;">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#collapse_Navbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapse_Navbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white" href="#educational-info">Education</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#Prof-skill">Professional Skills</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="#contact-us">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!-- Carousel wrapper -->
<div id="carouselExampleControls" class="carousel slide text-center carousel-dark"
data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="rounded-circle shadow-1-strong mb-4"
src="../static/images/gfglogo.jpg" alt="avatar" style="width: 150px;" />
<div class="row d-flex justify-content-center">
<div class="col-lg-8">
<h5 class="mb-3">Suraj Kr. Gupta</h5>
<p>Python - TCE</p>
<p class="text-muted">
<i class="fas fa-quote-left pe-2"></i>
A Technical Content Engineer is a technologist
that ensures that Tetrate's
products are positioned in such a way that they
effectively represent the
value we provide to our clients. This entails
creating unique marketing
solutions and communications that clearly
communicate our products'
technical and business benefits.
</p>
</div>
</div>
<ul class="list-unstyled d-flex justify-content-center text-warning mb-0">
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="fas fa-star fa-sm"></i></li>
<li><i class="far fa-star fa-sm"></i></li>
</ul>
</div>
</div>
</div>
<!-- Carousel wrapper -->
<div class="section" id="about">
<div class="container">
<div class="card aos-init aos-animate"
data-aos="fade-up" data-aos-offset="10">
<div class="row">
<div class="col-lg-6 col-md-12">
<div class="card-body">
<div class="h4 mt-0 title">About</div>
<p>Recent graduate with an MS in Computer Science looking to
leverage my experience
building responsive and scalable web... Lorem ipsum,
dolor sit amet consectetur adipisicing elit.
"Graduate of computer science with experience working across
the full-stack of software development. Ive built a few.
</div>
</div>
<div class="col-lg-6 col-md-12">
<div class="card-body">
<div class="h4 mt-0 title">Basic Information</div>
<div class="row">
<div class="col-sm-4">
<strong class="text-uppercase">
Age:
</strong></div>
<div class="col-sm-8">25</div>
</div>
<div class="row mt-3">
<div class="col-sm-4">
<strong class="text-uppercase">
Email:
</strong></div>
<div class="col-sm-8">S***@gmail.com</div>
</div>
<div class="row mt-3">
<div class="col-sm-4">
<strong class="text-uppercase">
Phone:
</strong></div>
<div class="col-sm-8">8*******89</div>
</div>
<div class="row mt-3">
<div class="col-sm-4">
<strong class="text-uppercase">
Address:
</strong></div>
<div class="col-sm-8">
Patna, Bihar, India
</div>
</div>
<div class="row mt-3">
<div class="col-sm-4">
<strong class="text-uppercase">
Language:
</strong></div>
<div class="col-sm-8">English, Hindi</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="skill">
<div class="container my-2">
<div class="h4 text-center mb-4 title" id="educational-info">
Education
</div>
<div class="card" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
<div class="card-body">
<div class="h5">Master in Computer Application</div>
<p class="category">LNMI INSTITUTE OF TECHNOLOGY</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Suscipit, dolore.</p>
<p>
<b>Projects:</b><br>
<ul>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Praesentium a veritatis voluptas
officiis distinctio molestiae nesciunt in eos nulla quam!</li>
<li>Lorem ipsum dolor sit amet, consectetur adipisicing e
lit. Facilis, assumenda.</li>
</ul>
</p>
</div>
</div>
</div>
</div>
<div class="section" id="skill">
<div class="container my-2">
<div class="h4 text-center mb-4 title" id="Prof-skill">Professional Skills</div>
<div class="card" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
<div class="card-body">
<b>Programming Languages:</b> R, Python, SQL, GoLang<br><br>
<b>Tools:</b> NumPy, Pandas, Matplotlib, MS Excel, OpenCV<br><br>
<b>Database Management Systems:</b> MySQL, , postgres, MongoDB, SQLite3<br><br>
<b>Internet Technologies:</b> Flask, HTML5, CSS, Django
</div>
</div>
</div>
</div>
<div class="container">
<div class="section" id="contact">
<div class="cc-contact-information">
<div class="container" style="margin-top: 3rem;">
<div class="cc-contact">
<div class="row">
<!-- <div class="col-md-9"> -->
<div class="h4 text-center title" id="contact-us">
Contact Us
</div>
<div class="card mb-0" data-aos="zoom-in">
<div class="row">
<div class="col-md-6">
<div class="card-body">
<form action="/sendemail/" method="POST">
<div class="p pb-3">
<strong>Feel free to contact </strong>
</div>
<div class="row mb-3">
<div class="col">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-user-circle"></i></span>
<input class="form-control" type="text"
name="name" placeholder="Name"
required="required" />
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-file-text"></i></span>
<input class="form-control" type="text"
name="Subject" placeholder="Subject"
required="required" />
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-envelope"></i></span>
<input class="form-control" type="email"
name="_replyto" placeholder="E-mail"
required="required" />
</div>
</div>
</div>
<div class="row mb-3">
<div class="col">
<div class="form-group">
<textarea class="form-control" name="message"
placeholder="Your Message"
required="required"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col">
<button class="btn btn-primary" type="submit">
Send
</button>
<a class="btn btn-primary" target="_blank"
href="{{ url_for('static',filename='Suraj.pdf') }}"
data-aos="zoom-in"
data-aos-anchor="data-aos-anchor">
Download CV</a>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-6">
<div class="card-body">
<p class="mb-0">
<strong>Address </strong>
</p>
<p class="pb-2">136, Royal Kapson, Noida, India, 800123</p>
<p class="mb-0"><strong>Phone</strong></p>
<p class="pb-2">+91 345-567-8346</p>
<p class="mb-0"><strong>Email</strong></p>
<p>skr@gmail.com</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
</body>
</html>
Step 4: 在你的Flask文件夹中创建你的app.py文件
- 我们正在导入所有在项目执行中需要的模块
from flask import Flask, render_template, request, url_for, redirect
from email.mime.text import MIMEText
import smtplib
from email.message import EmailMessage
app = Flask(__name__)
- 我们可以理解，每当我们点击主页（”/”），它就会渲染我们模板文件夹中的gfg.html页面，这是我们投资组合的主页。
@app.route("/")
def index():
return render_template("index.html")
- 我们可以理解，每当用户向人发送消息时，就会发生一个POST请求，然后我们将从HTML页面上获取所有需要的信息，如 “姓名、主题、电子邮件和一条消息”。我们还将为接下来的步骤设置我们的名字、电子邮件和密码。
@app.route("/sendemail/", methods=['POST'])
def sendemail():
if request.method == "POST":
name = request.form['name']
subject = request.form['Subject']
email = request.form['_replyto']
message = request.form['message']
# Set your credentials
yourEmail = "skr@gmail.com"
yourPassword = "$$$$$$"
- 我们将尝试在python内置的smptlib库的帮助下连接到我们的Gmail服务器。”smtplib “创建了一个简单邮件传输协议客户端会话对象，用于向互联网上任何有效的电子邮件ID发送电子邮件。不同的网站使用不同的端口号。我们使用Gmail账户来发送邮件。这里使用的端口号是’587’。然后，我们将使用smtp.ehlo来发送一个EHLO（Extended Hello）命令。现在，我们将使用smtp.starttls来启用传输层安全（TLS）加密。
# Logging in to our gmail account server
server = smtplib.SMTP('smtp.gmail.com', 587)
server.ehlo()
server.starttls()
server.login(yourEmail, yourPassword)
- 我们正在设置电子邮件内容的主体结构。即发件人电子邮件、主题、电子邮件内容。
注: 你可以在这里了解更多关于如何自动化电子邮件的信息。
# Sender's and Receiver's email address
msg = EmailMessage()
msg.set_content("First Name : "+str(name)+"\nEmail : "+str(email) +"\n
Subject: "+str(subject)+"\nMessage: "+str(message))
msg['To'] = email
msg['From'] = yourEmail
msg['Subject'] = subject
app.py代码的完整实现
from flask import Flask, render_template, request, url_for, redirect
from email.mime.text import MIMEText
import smtplib
from email.message import EmailMessage
app = Flask(__name__)
@app.route("/")
def index():
return render_template("index.html")
@app.route("/sendemail/", methods=['POST'])
def sendemail():
if request.method == "POST":
name = request.form['name']
subject = request.form['Subject']
email = request.form['_replyto']
message = request.form['message']
# Set your credentials
yourEmail = "suraj@geeksforgeeks.org"
yourPassword = "########"
# Logging in to our email account
server = smtplib.SMTP('smtp.gmail.com', 587)
server.ehlo()
server.starttls()
server.login(yourEmail, yourPassword)
# Sender's and Receiver's email address
msg = EmailMessage()
msg.set_content("First Name : "+str(name)
+"\nEmail : "+str(email)
+"\nSubject : "+str(subject)
+"\nMessage : "+str(message))
msg['To'] = email
msg['From'] = yourEmail
msg['Subject'] = subject
# Send the message via our own SMTP server.
try:
# sending an email
server.send_message(msg)
print("Send")
except:
print("Fail to Send")
pass
return redirect('/')
if __name__ == "__main__":
app.run(debug=True)
注: 在运行你的代码之前，请将你的Gmail设置为通过你的组合接收来信。你可以直接点击这里，并把它打开，否则你会显示一个SMTP认证错误。
