Python+Flask+MysqL的web建设技术过程
Posted 093陈泽琪
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Python+Flask+MysqL的web建设技术过程相关的知识，希望对你有一定的参考价值。
1. 个人学期总结
第一次接触Python，在不了解Python的情况下，基础又差，望而生畏，一开始就给自己打了个叉。然而，通过前期turtle库的学习，我发现这门语言似乎很有趣，用其他语言要写好几十行的代码，用Python语言只要十几二十行的代码就能实现，它的turtle库很简单地用一些条件、循环、函数定义，就能画出漂亮的图案，像五角星、同心圆、太阳花、中国国旗这些图案，我才发觉这是一门多么简洁实用又功能强大的语言。有了开始的兴趣，我也就沉下那颗从前就浮躁不安的心，在杜云梅老师的带领下，慢慢地一步一步地去熟悉了解python。
在前面的学习中，我了解turtle库（海龟库），利用条件、循环、函数定义画出了五角星、同心圆、太阳花、中国国旗等；我学习了字符串的基本操作，输出代码计算后的结果，还有凯撒密码、GDP格式化输出、九九乘法表等简单操作；利用python进行英文词汇统计，组合数据类型练习，用文件形式实现完成的英文词频统计、中文词频统计；利用datetime处理日期和时间，将字符串转化成imestamp与timedelta等等。在后面，我们使用了PyCharm学会了网页的开发设计，第一次知道网页设计也有前端、后台，还要连接数据库。在这个学习的过程中，我遇到很多问题，有时候一些小小的错误都要找上老半天，但是看到自己的成果，还是会甘之如饴，有时甚至还会犯一些低级错误，例如mysql没有开启，代码拼写错误，相对应的功能代码没有放在对应的位置上，粗心导致我犯了不少错误，这告诫我们需要细心，更需要细心领会每一行代码所代表的意思，要运用在那里。同时，在这门课程的学习中，我也得到了很多同学的帮助，相互帮忙有时候能够更快找出错误在哪里，当然，自己也要更加努力。编程就像做数学题，一道数学题目可能有多种解法，但我们不必要像解数学题那样讲得很详细，只要一目了然并能清晰简洁的表达和实现功能即可，只有多去练习多去运用它，少用复制粘贴、投机取巧，我们才能在编程道路上越走越远。第一次自己设计网站，诸多不足，但是在最后看到自己的作品，虽然还不是很完善，但是心里还是忍不住有点自豪。之后我会继续努力学习Python语言，尽量吸取更多的知识，做出更加美观实用的网站。
2. 使用工具：pycharm64.exe + Python 3.6 64-bit + Navicat for MySQL
Python下载地址：https://www.python.org/downloads/
MySQL下载地址：https://www.mysql.com/downloads/
Pycharm下载地址：https://www.jetbrains.com/pycharm/download/#section=windows
（安装指南可以自己去网上查看教程，很容易就安装好了，这里就不加赘述）
3. 网页基本布局及基本功能的实现
1）加载静态文件，父模板及其他页面的继承
a. 加载静态文件（用 url_for 反转链接相关文件）
<link rel="stylesheet" type="text/css" href="{{url_for(\'static\',filename=\'css/base.css\') }}"> <script src="{{ url_for(\'static\',filename=\'js/base.js\') }}"></script>
b. 父模板的设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> {% block title %} {% endblock %} </title> {% block head %} {% endblock %} </head> <body> {% block aa %}{% endblock %} </body> </html>
c. 子模板继承
{% extends \'base.html\' %}
{% block title %}
首页
{% endblock %}
{% block main %}
{% endblock %}
2）注册页面
主要代码：HTML+JS
{% extends \'base.html\' %} {% block title %} 欢迎开启美食之旅 {% endblock %} {% block main %} <link href="../static/css/hh.css" rel="stylesheet" type="text/css"> <script src="../static/js/zc.js"></script> <div><h1>美食祭|注册</h1></div><br><br><br> <form action="{{ url_for(\'zhuce\') }}" method="post"> <div class="box"> <p class="input_box"> 账户： <input id="uname" type="text" placeholder="请输入您的昵称" name="username"> </p> <p class="input_box"> 密码： <input id="upass" type="password" placeholder="请设置您的密码" name="password"> </p> <p class="input_box"> 验证： <input id="upass1" type="password" placeholder="请再次输入密码" name="password"> </p> <p class="input_box"> 邮箱： <input id="youxiang" type="password" placeholder="请输入您的邮箱" name="email"> </p> <div id="error_box"><br></div> <div class="input_button"> <button type="submit" onclick="return fozhuce()">立即注册</button> </div> </div> </form> {% endblock %}
function fozhuce() { var oUname = document.getElementById("uname"); var oError = document.getElementById("error_box"); var oUpass = document.getElementById("upass"); var oUpass1 = document.getElementById("upass1"); var isError = true; oError.innerHTML = "<br>"; if (oUname.value.length < 6 || oUname.value.length > 20) { oError.innerHTML = "用户名要6-20位"; isError = false; return isError; }else if(oUname.value.charCodeAt(0)>=48 &&(oUname.value.charCodeAt(0)<=57)){ oError.innerHTML="首位不能为数字"; isError = false; return isError; }else for (var i=0;i<oUname.value.length;i++){ if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<58)&&(oUname.value.charCodeAt(i)>97)){ oError.innerHTML="只能为数字和字母"; isError = false; return isError; } }if (oUpass.value.length < 6 || oUpass.value.length > 20) { oError.innerHTML = "密码要6-20位"; isError = false; return isError; }else if(oUpass.value!=oUpass1.value) { oError.innerHTML = "设置密码和验证密码不一致"; isError = false; return isError; } return ture; }
3）登录页面
主要代码：HTML+JS
{% extends \'base.html\' %} {% block title %} 登录 {% endblock %} {% block main %} <link rel="stylesheet" type="text/css" href="../static/css/hh.css"> <script src="../static/js/dl.js"></script> <div><h1>美食祭|登录</h1></div> <br><br><br> <body><div class="box"> <form action="{{ url_for(\'denglu\') }}" method="post"> <p class="input_box"> 账户： <input id="uname" type="text" placeholder="敢问阁下大名"name="username"> </p> <p class="input_box"> 密码： <input id="upass" type="password" placeholder="请输入通关密码" name="password"> </p> <div id="error_box"><br></div> <div class="input_box"> <button onclick="return fnLogin()">登录</button> </div> </form> {% endblock %} </body>
function foLogin() { var oUname = document.getElementById("uname"); var oError = document.getElementById("error_box"); var oUpass = document.getElementById("upass"); var isError = true; oError.innerHTML = "<br>"; if (oUname.value.length < 6 || oUname.value.length > 12) { oError.innerHTML = "用户名要6-12位"; isError = false; return; }else if(oUname.value.charCodeAt(0)>=48 &&(oUname.value.charCodeAt(0)<=57)){ oError.innerHTML="首位不能为数字"; isError = false; return isError; }else for (var i=0;i<oUname.value.length;i++){ if((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<58)&&(oUname.value.charCodeAt(i)>97)){ oError.innerHTML="只能为数字和字母"; isError = false; return isError; } } if (oUpass.value.length < 6 || oUpass.value.length > 12) { oError.innerHTML = "密码要6-20位"; isError = false; isError = false; return isError; } return ture; }
4）问答平台及问题详情页
{% extends \'base.html\' %} {% block title %} 问答平台 {% endblock %} {% block main %} <link type="text/css" rel="stylesheet" href="{{ url_for(\'static\',filename=\'css/hh.css\') }}"> <form action="{{ url_for(\'wenda\') }}" method="post"> <div class="box"> <h2 align="center">发布问答</h2> <div class="q"> <label for="questionDetail">问题</label><br> <textarea class="form-control" id="questionDetail" rows="2" style="width: 500px"name="title"></textarea></div><br> <div class="form-group"> <label for="result">详情</label><br> <textarea class="form-control" id="result" rows="4" style="width: 500px" name="detail"></textarea></div><br> </div> <div id="error_box"><br></div> <div class="input-area"> <button type="submit" onclick="foLogin()">发布问答</button> </div> </div> </form> {% endblock %}
{% extends \'base.html\' %} {% block title %} 问答详情 {% endblock %} {% block main %} <link rel="stylesheet" type="text/css" href="../static/css/hh.css"> <div class="box"> <h3 href="#" >问题标题：{{ ques.title }}</h3> <small>发布者： {{ ques.author.username }}<span class="badge" style="margin-left: 75%">发布时间{{ ques.create_time }}</span></small> <hr> <p style="font-size: 18px;color: black;">问题详情：{{ ques.detail }}</p> <hr> <form action="{{ url_for(\'comment\') }}" method="post"> <div><textarea class="form-control" id="comment" rows="3" style="margin-left: 1%" name="new_comment" placeholder="write your comment"></textarea><br></div> <input type="hidden" name="question_id" value="{{ ques.id }}"> <button type="submit" >发送</button> </form> <h4>评论:（{{ ques.comments|length }}）</h4> <ul class="list-unstyled"> {% for foo in ques.comments %} <li class="list-group-item"> <a href="{{ url_for(\'usercenter\',user_id = foo.author.id,tag=\'1\') }}">{{ foo.author.username }}</a> <span class="badge pull-right">{{ foo.create_time }}</span> <p>{{ foo.detail }}</p> <br> </li> {% endfor %} </ul> </div> {% endblock %}
5）个人中心：个人中心父模板 + 全部评论 + 全部问答 + 个人信息
个人中心父模板
{% extends \'base.html\' %} {% block title %} {% endblock %} {% block main %} <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <div class="container"> <div class="row clearfix"> <div class="col-md-2 column"></div> <ul class="nav nav-pills"> <li><a href="{{ url_for(\'usercenter\',user_id=user.id,tag = 1) }}">全部评论</a></li> <li><a href="{{ url_for(\'usercenter\',user_id=user.id,tag = 2) }}">全部问答</a></li> <li><a href="{{ url_for(\'usercenter\',user_id=user.id,tag = 3) }}">个人信息</a></li> </ul> {% block hh %}{% endblock %} {% endblock %}
{% extends \'userbase.html\' %} {% block title %} 全部评论 {% endblock %} {% block hh %} <div class="container"> <div class="row clearfix"> <div class="col-md-2 column"></div> <div class="col-md-8 column"> <ul class="list-unstyled" > {% for foo in comments %} <li class="list-group-item"> <img style="width: 30px" src="{{ url_for(\'static\',filename=\'css/tx.jpg\') }}" alt="64"> <a href="#">{{ username }}</a><br> <span class="badge pull-right">{{ foo.create_time }}</span> <a href="{{ url_for(\'detail\',question_id=foo.id) }}">文章标题：{{ foo.question.title }}</a><br> <p style="align-content: center">评论内容：{{ foo.detail }}</p> <br> </li> {% endfor %} </ul> </div> <div class="col-md-2 column"> </div> </div> </div> {% endblock %}
{% extends \'userbase.html\' %} {% block title %} 全部问答 {% endblock %} {% block hh %} <div class="container"> <div class="row clearfix"> <div class="col-md-2 column"></div> <div class="col-md-8 column"> <ul class="list-unstyled"> {% for foo in questions %} <li class="list-group-item"> <img style="width: 30px" src="{{ url_for(\'static\',filename=\'css/tx.jpg\') }}" alt="64"> <a href="#">{{ username }}</a><br> <a href="{{ url_for(\'detail\',question_id=foo.id) }}">问题：{{ foo.title }}</a><br> <p style="align-content: center">{{ foo.detail }}</p> <span>评论数: ({{ foo.comments|length }})</span> <span class="badge" style="margin-left: 60%">{{ foo.create_time }}</span> <p style="margin-left: 25%"></p><br> </li> {% endfor %} </ul> </div> <div class="col-md-2 column"> Python+Flask+MysqL的web建设技术开发一个网站沿用Python+Flask+Mysql的web建设技术开发网站