Python+Flask+MysqL的web建设技术过程
前言
Python 是一种不受局限、跨平台的开源编程语言，它功能强大且简单易学。因而得到了广泛应用和支持。Flask是一个使用 Python 编写的轻量级 Web 应用框架。其 WSGI工具箱采用 Werkzeug ，模板引擎则使用 Jinja2 。Flask使用 BSD 授权。Flask也被称为 "microframework" ，因为它使用简单的核心，用 extension 增加其他功能。Flask没有默认使用的数据库、窗体验证工具。
一、相关工具
pycharm-professional-2017.2
二、创建Flask应用架构（CSS+JAVASCRIPT+HTML+PYTHON）
1.CSS：层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
2.Javascript是一种基于对象（Object）和事件驱动（Event Driven），并具有安全性能的脚本语言。
函数是命名的语句段，这个语句段可以被当作一个整体来引用和执行。使用函数要注意以下几点：
1）函数由关键字function定义（也可由Function构造函数构造）。
2）使用function关键字定义的函数在一个作用域内是可以在任意处调用的（包括定义函数的语句前）；而用var关键字定义的必须定义后才能被调用。
3）函数名是调用函数时引用的名称，区分大小写，调用函数时不可写错函数名。
4）参数表示传递给函数使用或操作的值，它可以是常量，也可以是变量，也可以是函数，在函数内部可以通过arguments对象（arguments对象是一个伪数组，属性callee引用被调用的函数）访问所有参数。
5）return语句用于返回表达式的值。
6）yield语句扔出一个表达式，并且中断函数执行直到下一次调用next。
3.编写HTML
html：超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 <html><head></head><body></body></html>
4.创建主py文件+config.py（运行程序和连接数据库）
三、前端
1.登录注册功能
（1）注册
实现注册功能的主要代码：
{% extends "base.html" %} {% block title %} 注册 {% endblock %} {% block head %} <link href="../static/css/register.css" type="text/css" rel="stylesheet"> <script src="../static/js/login.js"></script> {% endblock %} {% block main %} <body> <div class="box"> <div class="title">注册</div> <form action="{{ url_for('register') }}" method="post"></form> <form class="form" method="post" action="{{ url_for('register') }}"> <div class="input_box1" > <img src="../static/image/注册.png" height="40"><input id="uname" name="username" type="text" placeholder="请输入用户名" style="border-radius: 5px;"> </div> <div class="input_box2"> <img src="../static/image/注册登密码.png" height="40"><input id="upass" name="password" type="password" placeholder="请输入密码" style="border-radius: 5px;"> </div> <div class="input_box2" > <img src="../static/image/注册登密码.png" height="40"><input id="upass" name="password1" type="password" placeholder="请确认密码" style="border-radius: 5px;"> </div> <div id="error_box"><br></div> <div class="input_box3"> <button onclick="mylogin()" style=" border: none;background-color:lightblue;border-radius: 5px;">注册</button> </div> <br> <img src="../static/image/鲜花礼品1.png" height="30"> </form> </div> </body> {% endblock %}
function mylogin(){ var uName = document.getElementById("name"); var uPass = document.getElementById("upass"); var uError = document.getElementById("error_box"); if(uName.value.length<2){ uError.innerHTML = "User name is at least 6 digits！" } if(uName.value.length>20){ uError.innerHTML = "The user name can not be greater than 20 digits！" } if(uName.value.length>=6&&uName.value.length<=20){ if(uPass.value.length<6){ uError.innerHTML = "Password is at least 6 digits！" } if(uPass.value.length>20){ uError.innerHTML = "The password can not be greater than 20 digits！" } } }
（2）实现登录功能的主要代码：
{% extends "base.html" %} {% block title %} 登录 {% endblock %} {% block head %} <link href="../static/css/login.css" type="text/css" rel="stylesheet"> <script src="../static/js/login.js"></script> {% endblock %} {% block main %} <body> <div class="box"> <div class="title">登录</div> <form action="{{ url_for('login') }}" method="post"></form> <form class="form" method="post" action="{{ url_for('login') }}"> <div class="input_box1" > <img src="../static/image/登录.png" height="35"><input id="uname" name="username" type="text" placeholder="请输入用户名" style="width:150px; height:30px;border-radius: 5px;" /> </div> <div class="input_box2"> <img src="../static/image/密码.png" height="35"><input id="upass" name="password" type="password" placeholder="请输入密码" style="width:150px; height:30px;border-radius: 5px;"/> </div> <div id="error_box"><br></div> <div class="input_box3"> <button onclick="mylogin()" style=" border: none;background-color:lightpink;border-radius: 5px;">登录</button> </div> <br> <img src="../static/image/鲜花礼品.png" height="30"> </form> </div> </body> {% endblock %}
登录页面效果图：
（3）首页
首页的主要代码，发布问答的内容也可以显示在首页
{% extends "base.html" %} {% block title %} 首页 {% endblock %} {% block head %} <link href="../static/css/index.css" rel="stylesheet" type="text/css"> {% endblock %} {% block main %} <body> <table align="center"> <tr> <td><h2 style="color: sandybrown;text-align: center">花千骨</h2></td> <td><img src="../static/image/hua4.jpg" width="192" height="150"></td> <th><h2 style="color: mediumslateblue;text-align: center">花无缺</h2></th> <td><img src="../static/image/hua1.jpg" width="192" height="150"></td> </tr> <tr> <td><img src="../static/image/hua5.jpg" width="192" height="150"></td> <td><h2 style="color: lightskyblue;text-align: center">花世界</h2></td> <td><img src="../static/image/hua2.jpg" width="192" height="150"></td> <th><h2 style="color: lightcoral;text-align: center">花言花语</h2></th> </tr> <tr> <th>Flower</th> <td><img src="../static/image/hua7.jpg" width="192" height="150"></td> <td><h2 style="color: yellow;text-align: center">花时间</h2></td> <td><img src="../static/image/hua8.jpg" width="192" height="150"></td> </tr> </table> <table align="center"> {% for foo in questions %} <tr> <td><img src="../static/image/机智.gif" width=60px; height=60px></td> <td> <a href="{{ url_for('detail',question_id=foo.id) }}">{{ foo.title}}</a> </td> <td>{{ foo.creat_time }}</td> {% if username %} <td> <a href="{{ url_for('usercenter', user_id=foo.id,tag=1) }}">{{ username}}</a></td> {% endif %} <td><p style="text-indent: 18px">{{ foo.detail }}</p></td> </tr> {% endfor %} </table> </body> {% endblock %}
首页效果图：
搜索内容效果图：
(4)base页面，用于各页面继承头部导航和底部导航
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>花无缺{% block title %}{% endblock %}</title> <link href="../static/css/base.css" rel="stylesheet" type="text/css"> {% block head %}{% endblock %} </head> <body> <ul> {% if username %} <li><a href="{{ url_for('usercenter',user_id=session.get('userid'),tag='1')}}">{{session.get('user')}}</a></li> <li><a href="{{ url_for("logout") }}">注销</a></li> {% else %} <li><a href="{{ url_for("login") }}">登录</a></li> <li><a href="{{ url_for("register") }}">注册</a></li> {% endif %} <li><a href="{{ url_for("question") }}">发布问答</a></li> <li> <form action="{{ url_for('search') }}" method="get"> <input name="q" type="text" placeholder="请输入搜索内容" style="margin-top: 10px"> <input type="submit" value="搜索"> </form> </li> <li style="float:right"><a class="active" href="#about">关于</a></li> </ul> {% block main %}{% endblock %} <div style="background-color: lightgoldenrodyellow;text-align: center">版权 © 花无缺.com</div> </div> </body> </html>
（5）实现发布问答的主要代码：
@app.route('/question/',methods=['GET','POST']) @log def question(): if request.method == 'GET': return render_template('question.html') else: title = request.form.get('title') detail = request.form.get('detail') author_id = User.query.filter(User.username == session.get('user')).first().id user = User.query.filter(User.username == session.get('user')).first() question=Question(title=title,detail=detail,author_id=author_id) question.author = user db.session.add(question)#保存到数据库 db.session.commit()#提交 return redirect(url_for('index'))
（6）详情页的主要代码：
@app.route('/comment/',methods=['GET','POST']) @log def comment(): if request.method == 'GET': return render_template("detail.html") else: comment = request.form.get('new_comment') ques_id = request.form.get('question_id') author_id = User.query.filter(User.username == session.get('user')).first().id comm = Comment(author_id=author_id,question_id=ques_id,detail=comment) db.session.add(comm) # 保存到数据库 db.session.commit() # 提交 return redirect(url_for('detail',question_id =ques_id))
详情页的效果图：
（7）个人中心全部评论
{% extends 'usercenter.html' %} {% block head %} <link href="{{ url_for('static',filename='css/usercenter.css') }}" rel="stylesheet" type="text/css" > {% endblock %} {% block user %} <div style="border: none;width: 1300px;height: 400px" > <div align="center"> {% for foo in questions %} <ul style="border:2px solid lightblue;padding:10px 40px;width:300px;height:40px;border-radius:25px;background: linear-gradient(white,lightpink); "> <li > <a href="{{ url_for('usercenter',user_id=foo.author_id,tag=1)}}" style="float: left"><h8 style="color: deepskyblue">{{ foo.author.username }}</h8></a> <span>{{ foo.creat_time }}<br> {{ foo.detail }}</span></li> </ul> {% endfor %} </div> </div> {% endblock %}
效果图：
（8）个人中心全部评论
{% extends 'usercenter.html' %} {% block head %} <link href="{{ url_for('static',filename='css/usercenter.css') }}" rel="stylesheet" type="text/css" > {% endblock %} {% block user %} <div class="list" align="center"> {% for foo in comments %} <ul style="border:2px solid lightblue;padding:10px 40px;width:300px;height:80px;border-radius:25px;background-color: lemonchiffon "> <li > <a href="#" style="float: left"><h8 style="color: deepskyblue">{{ foo.author.username }}</h8></a> <span>{{ foo.creat_time }}<br> <p style="align-content: center">{{ foo.detail }}</p></span></li> </ul> {% endfor %} </div> {% endblock %}
（9）个人中心的个人信息
{% extends 'usercenter.html' %} {% block head %} <link href="{{ url_for('static',filename='css/usercenter.css') }}" rel="stylesheet" type="text/css" > {% endblock %} {% block user %} <table align="center" style="border:5px dashed dodgerblue;width: 720px;height: 320px"> <tr> <td ><h2 align="center" style="color: #4CAF50">用户：{{ username }}<br>编号：{{ id }}<br>文章篇数：{{ questions|length }}</h2></td> <td><div style="float: right;width: 500px"><p style="float:left;"><u>工艺花是有可降解塑料制做而成的，工艺花既溶入了简约华丽的欧美、日韩风格， 又蕴含了深厚的东方艺术创意。设计大胆时尚，色彩时尚款式流行。现在目前上流行的工艺花有装饰工艺花和 家居工艺花。工艺花，主要用于家具装饰，和酒店点缀。中国现在生产的工业花主要属于出口。工艺花将慢慢 的取代一些，新鲜的花种，绝不浪费，而又美观大方。 手工花艺又称“仿真花”，“假花”，“干花”等，包括市场上流行的绢花，干花，丝网花，塑料花等等，是 采用丝网，布艺，塑料各类材质通过人工加工而成！其耐久性，以及其观赏价值使用价值得到了世界各地人的 高度认可！开始逐步走进人们的生活！ 新型时尚仿真“鲜花”，是近年在日本、韩国、台湾及香港新兴极为流行的一种特别逼真的新型工艺精品。 制作出的仿真鲜花、蔬果等新产品，无论在外观上、颜色上和质感上都和真花极为接近，如果不仔细观察就很 难辨真假，所用主要制作原料直接从日本引进，其柔韧性和可塑性是其它材料无法比拟的，面且成品不易损坏， 保存期可达 5—10年，被誉为“家中鲜花开不败，天天室内有花香”的美称。 </u></p></div></td> </tr> </table> {% endblock %}
效果图：
四、数据存储
五、个人总结
本学期学习的前端技术虽然简单，但还是很新颖的。希望今后把相关技术学好，做出更好的项目。
