一个学期即将过去，我们也迎来了2018年。这个学期，首次接触了web网站开发建设，不仅是这门课程，还有另外一门用idea的gradle框架来制作网页。
很显然，用python语言的flask框架更加简单易懂。Python不需要像Java语言一样设置类的类型，也没有gradle框架那么多的各层依赖，所以说Python更加容易上手。
初次接触网页开发，对我来说就像是打开了新世界的大门，无论是前端还是后端都有它有意思的地方，每次你写的网页成功实现你想要的效果的时候，都会有一种成就感。这种成就感也许也是做这一行的人继续坐下去的动力之一吧。
下面是我的Python+Flask+MysqL的web建设技术过程。
Python+Flask+MysqL的web建设技术过程
1 建立flask框架项目
首先是flask安装（这里默认已经安装好python了），这里我们学习的项目只是简单的用pip install flask的语句安装了flask库，如果你碰到多个项目并且有不同的python版本或外部依赖库，可以参考：http://docs.jinkan.org/docs/flask/installation.html
开发工具上使用了pycharm作为工具，建立项目首先新建项目，选择flask框架进行构建。
2 导航及CSS
在网页前端开发的过程中，我引用了bootstrap的前端架构（其实只用了一些组件）。具体的bootstrap学习可以参考菜鸟教程：http://www.runoob.com/bootstrap/bootstrap-tutorial.html
首先先建立前端html页面，页面导航通过标签<nav>进行编写。
<!-- 顶部导航 -->
<nav class="navbar navbar-default" role="navigation">
<div class="navsize">
<ul class="nav nav-tabs">
<li class="active"><a href="#">首页</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">客户端</a></li>
<li><a href="#">投稿</a></li> <ul class="nav navbar-nav navbar-right"><li><a href="#"><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> 登录</a></li></ul> <form class="navbar-form navbar-right" role="search" action="{{ url_for("search") }}" method="get"> <div class="form-group">
<input type="text" class="form-control" name="q" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
搜索
</button>
</form>
</ul>
</div>
</nav>
.navsize{
width: 80%;
margin:0 auto;
}
效果：
3 图片导航CSS实例
首先要学会使用div等块级元素标签来放置我们的网页元素，并会使用CSS选择器进行网页的开发。
这里先了解一下CSS的盒子模型：
margin：盒子的最外层，一般用于设置与其他元素的间隔距离
border：盒子的边框层，可以根据自己的需要设置是否可见及大小、颜色等
padding：盒子放置的内容与边框的中间层，可用于设置隔开内容及边框
content：盒子放置的内容层
图片导航实例：
<div>
<div class="img">
<a href="http://www.gzcc.cn"><img src="http://old.bz55.com/uploads/allimg/150316/140-150316134616.jpg"></a>
<div class="desc"><a href="http://www.gzcc.cn">第一张图片</a></div>
</div>
</div>
<div class="clearfloat">
<img src="http://old.bz55.com/uploads/allimg/150316/140-150316134616.jpg">
<img src="http://www.pp3.cn/uploads/201701/2017011709.jpg">
<img src="http://old.bz55.com/uploads/allimg/150316/140-150316134610.jpg">
<img src="http://old.bz55.com/uploads/allimg/150316/140-150316134613.jpg">
</div>
div.img{
width: 180px;
border:1px solid #eeeeee;
float: left;
margin:5px;
}
div.img img{
width: 100%;
height: auto;
}
div.desc{
text-align: center;
padding: 5px;
}
div.clearfloat{
clear: both;
}
div.img:hover{
border: 1px solid blue;
}
上面CSS语句中：
float：left是设置块级元素不换行并且向左边浮动，会根据浏览器大小进行浮动
clear：both是用于清除该块级元素与同一级上一个块级元素之间的浮动
hover：鼠标在该元素上时的样式，用于与鼠标不在元素上时的样式作为对比，形成一种动态效果
效果：
4 使用JS对登录、注册操作进行表单验证
JavaScript是现在各种网站十分常用的网页技术，动态的加载及相应请求等。
这里以登录及注册为例，可以用JavaScript来要求页面上登录账号及注册账号的输入，对数据的使用及存入数据库进行初步规范。
下面是登录功能的js代码：
function Login(){
var un=document.getElementById("id");
var us=document.getElementById("password");
var er=document.getElementById("error_box");
er.innerHTML = "<br>";
if(un.value.length<6||un.value.length>20){
er.innerHTML="用户名必须在6-20个字符之间";
return false;
}else if((un.value.charCodeAt(0))>=48 && un.value.charCodeAt(0)<=57){
er.innerHTML = "首字母不能为数字"
return false;
}else for(var i=0;i<un.value.length;i++){
if((un.value.charCodeAt(i)<48)||(un.value.charCodeAt(i)>57)&&(un.value.charCodeAt(i)<97)&&(un.value.charCodeAt(i)>122)){
er.innerHTML="用户名只能为数字和字母"
return false;
}
}
if(us.value.length<6||us.value.length>20){
er.innerHTML="密码必须在6-20个字符之间";
return false;
}
return true;
}
<input type="submit" class="btn btn-default" onclick="return Login()" value="登陆"></input>
在登录按钮中引用js函数进行应用，这里注意一个问题，需要在函数名前面增加return，否则即使输入的数据有误，js文件虽然会执行，但并不会拦截在登录页面，而是依旧会跳转到登录后的界面，注册功能甚至会直接把数据存进数据库中。这个问题我在idea中并没有碰到，而在这个项目中却会出现，原因我现在也不是很清楚，初步判断应该是后面添加的一些功能与其起了冲突，或者flask框架的一些不同。
效果图：
5 父模板制作
我们在编写多个页面的时候，会发现有许多地方是会用到一样的设计的，比如导航就是每页都有并且是一样的。
我们可以将其中相同的地方抽取出来，做一个父模板，然后让子页面继承父模板，就不需要多写许多相同的代码，减少了工作量，也使得代码更加简洁。
下面是我的父模板：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{% block title %}{% endblock %}</title>
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="{{ url_for("static",filename="CSS/bass.css") }}" type="text/css" rel="stylesheet" charset="UTF-8">
{% block head %}{% endblock %}
</head>
<body class="bgimg">
<!-- 顶部导航 -->
<nav class="navbar navbar-default" role="navigation">
<div class="navsize"> <ul class="nav nav-tabs">
<li class="active"><a href={{ url_for("index") }}>首页</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">客户端</a></li>
<li><a href={{ url_for("tougao") }}>投稿</a></li> <ul class="nav navbar-nav navbar-right">
{% if username %}
<li><a href="{{ url_for('author',user_id=useraction.id,tag=1) }}"><span
class="glyphicon glyphicon-user"></span> {{ username }}</a></li>
<li><a href={{ url_for("logout") }}><span class="glyphicon glyphicon-log-out"></span> 注销</a></li>
{% else %}
<li><a href={{ url_for("register") }}><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href={{ url_for("login") }}><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
{% endif %}
</ul> <form class="navbar-form navbar-right" role="search" action="{{ url_for("search") }}" method="get"> <div class="form-group">
<input type="text" class="form-control" name="q" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
搜索
</button>
</form>
</ul>
</div>
</div>
</div>
</nav> <div class="body">
{% block main %}{% endblock %}
</div> <!-- 底部导航 -->
<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
<div class="navsize"> <ul class="nav navbar-nav">
<li class="active"><a href="#">友情链接</a></li>
<li><a href="#">联系我们</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">关于我们</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"> 帮助中心</a></li>
<li><a href={{ url_for('fankui') }}> 反馈中心</a></li>
</ul>
</div> </nav>
</body>
</html>
子页面：
{% extends 'base.html' %}
{% block title %}
反馈中心
{% endblock %}
{% block main %}
<div class="divtouming">
<div class="panel panel-default" style="width: 800px">
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="fankuititle" class="col-sm-2 control-label">反馈原因</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="fankuititle">
</div>
</div>
<div class="form-group">
<label for="fankuitext" class="col-sm-2 control-label">详情</label>
<div class="col-sm-10">
<textarea id="fankuitext" rows="5" cols="87"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">提交</button>
</div>
</div>
</form>
</div>
</div></div>
{% endblock %}
在父模板中，通过添加 {% block title %}{% endblock %} 标签来连接父模板与子页面的关系，父模板中的 {% block title %}{% endblock %} 标签位置就是子页面的继承父模板后的代码插入位置。父模板的继承用 {% extends 'base.html' %} 这样的标签来继承。
并且也可以看到将后端的数据渲染到模板中则是使用 {{name}} 这样的形式，里面是变量名，用两个花括号包着。
6 flask项目开始
下面是一个简单的开始项目（后端）：
from flask import Flask,render_template
url_for('static',filename='js/login.js')
app = Flask(__name__)
@app.route('/')
def index():
return render_template("base.html")
@app.route('/login')
def login():
return render_template("login.html")
@app.route('/regis')
def register():
return render_template("Zhuce.html")
if __name__ == '__main__':
app.run(debug=True)
app = Flask(__name__) 即初始化一个flask实例对象。
app.run(debug=True) 将debug模式打开，是程序员测试时用的模式，真正使用项目的时候需要把这个模式关掉。
@app.route("/") 在运行实体上绑定URL路由
render_template("Zhuce.html") 返回一个模板文件
url_for('static',filename='js/login.js') 获取“static”文件夹下的静态资源
7 连接mysql数据库，创建用户模型
首先，需要安装好python+flask、MySQL。然后需要根据python的版本下载好MySQL和python的中间件。
下载中间件后用 pip install filename的方法将文件安装到python的Script文件夹中，然后创建一个数据库。
另外写一个config.py的配置文件，写入下面两行代码：
SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:数据库密码@数据库地址:3306/数据库名称?charset=utf8'
SQLALCHEMY_TRACK_MODIFICATIONS = False
然后在主py文件中导入config文件并初始化对象：
import config
from flask import Flask,render_template
from flask_sqlalchemy import SQLAlchemy app = Flask(__name__)
app.config.from_object(config)
db=SQLAlchemy(app)
开始创建用户模型，即在数据库中创建表格：
class User(db.Model):
__tablename__='user'
id = db.Column(db.Integer,primary_key=True,autoincrement=True)
username=db.Column(db.String(20),nullable=False)
password=db.Column(db.String(20),nullable=False) db.create_all()
db.create_all()用来执行db的建表操作
8 通过用户模型对数据库进行增删该查
class User(db.Model):
__tablename__='user'
id = db.Column(db.Integer,primary_key=True,autoincrement=True)
username=db.Column(db.String(20),nullable=False)
password=db.Column(db.String(20),nullable=False) #创建表格
db.create_all() #数据查询方法
User.query.filter(User.username == 'mis1114').first() #数据添加方法
user=User(username='mis777789',password='g6666')
db.session.add(user)
db.session.commit() # 数据的修改方法
user = User.query.filter(User.username=='mis777789').first
user.password='0.0.0.0'
db.session.commit() # 数据的删除方法
user = User.query.filter(User.username=='mis777789').first()
db.session.delete(user)
db.session.commit()
9 完成注册及登陆功能
- js文件： onclick函数return True时才提交表单，return False时不提交表单。
- html文件：
- <form>中设置 action和method="post"
- <input> 中设置 name
- 主py文件中：
- from flask import request, redirect, url_for
- @app.route('/regist/', methods=['GET', 'POST’])
注册：
@app.route('/regis',methods=['GET','POST'])
def register():
if request.method=='GET':
return render_template('Zhuce.html')
else:
username=request.form.get('zcid')#与html页面名字相同
password=request.form.get('zcpassword')
user=User.query.filter(User.username==username).first()
if user:
return 'exit'
else:
user=User(username=username,password=password)
db.session.add(user)
db.session.commit()
return redirect(url_for('login'))
登陆：
从flask中导入session，在config配置中加入SECRET_KEY=os.urandom(24)，将登陆的用户存入session对象中。
@app.route('/login',methods=['GET','POST'])
def login():
if request.method == 'GET':
return render_template('login.html')
else:
username = request.form.get('id') # 与html页面名字相同
password = request.form.get('password')
user = User.query.filter(User.username == username,User.password==password).first()
if user:
sessions['username']=username
sessions.permanent=True
return redirect(url_for('index'))
else:
return '用户不存在'
登陆与注册的HTML页面：
<form class="bs-example bs-example-form" role="form" action="{{ url_for('login') }}" method="post">
10 登陆之后更新导航
在父模板中使用IF函数判断是否有登陆对象：
<ul class="nav navbar-nav navbar-right">
{% if username %}
<li><a href="#"><span class="glyphicon glyphicon-user"></span> {{ username }}</a></li>
<li><a href={{ url_for("logout") }}><span class="glyphicon glyphicon-log-in"></span> 注销</a></li>
{% else %}
<li><a href={{ url_for("register") }}><span class="glyphicon glyphicon-user"></span> 注册</a></li>
<li><a href={{ url_for("login") }}><span class="glyphicon glyphicon-log-in"></span> 登录</a></li>
{% endif %}
</ul>
主py文件中，通过使用上下文处理器，将获取的session中的值以字典的形式返回页面：
@app.context_processor
def mycontext():
username=session.get('user')
if username:
return {'username':username}
else:
return {}
11 发布功能
登陆装饰器：
def log(func):#参数类型为函数
@wraps(func)
def wrapper(*args,**kwargs):
if session.get('user'):
return func(*args,**kwargs)
else:
return redirect(url_for('login'))
return wrapper
装饰器应用：
应用装饰器，要求在发布前进行登录，登录后可发布。
@app.route('/tougao',methods=['GET','POST'])
@log
def tougao():
完成发布功能：
@app.route('/tougao',methods=['GET','POST'])
@log
def tougao():
if request.method=='GET':
return render_template('tougao.html')
else:
title=request.form.get('tougaotitle')
content=request.form.get('tougaotext')
id=User.query.filter(User.username==session.get('user')).first().id
tougao=Tougao(title=title,content=content,userid=id)
db.session.add(tougao)
db.session.commit()
return redirect(url_for('index'))
12 首页列表显示全部问答
首页HTML代码：
<div class="container">
<div class="row clearfix">
<div class="col-md-2 column">
</div>
<div class="col-md-6 column">
<ul>
{% for item in touGao %}
<a href="" class="list-group-item list-group-item-light">
<li>
<div class="page-header">
<h3>{{ item.title }}</h3>
<p><span class="glyphicon glyphicon-user">{{ item.author.username }}</span> <span class="glyphicon glyphicon-time">{{ item.time }}</span></p>
</div>
<p>{{ item.content}}</p>
</li>
</a>
{% endfor %}
</ul>
</div>
<div class="col-md-4 column">
</div>
</div>
</div>
主py文件：
@app.route('/')
def index():
context={
'touGao':Tougao.query.order_by('-time').all()
}
return render_template("index.html",**context)
13从首页投稿到文章详情页
主PY文件写视图函数，带id参数。
@app.route('/pinglun/<question_id>')
def detial(question_id):
quest=Question.query.filter(Question.id==question_id).first()
return render_template('commentdetail.html',que=quest)
首页标题的标签做带参数的链接。
<a href="{{ url_for('commentdetail',question_id=foo.id) }}">{{ foo.title}}</a>
在详情页将数据的显示在恰当的位置。
{% for foo in question %}
<li class="list-group-item">
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
<a href="{{ url_for('commentdetail',question_id=foo.id) }}">{{ foo.title}}</a>
<p style="...">{{ foo.detail}}</p>
<span class="glyphicon glyphicon-leaf" aria-hidden="true"></span>
<span class="badge">{{ foo.creat_time}}</span>
</li>
{% endfor %}
建立评论的对象关系映射：
class Question(db.Model):
__tablename__ = 'comment'
id =db.Column(db.Integer,primary_key=True,autoincrement=True)
author_id=db.Column(db.Integer,db.ForeignKey('uesr.id'))
question_id=db.Column(db.Integer,db.ForeignKey('question.id'))
creat_time=db.Column(db.DateTime,default=datetime.now)
detail=db.Column(db.Text,nullable=False)
question =db.relationship('Question',backref=db.backref('comments'))
author=db.relationship('User',backref=db.backref('comments'))
14 完成评论功能
定义评论的视图函数，读取前端页面数据，保存到数据库中。
@app.route('/pinglun',methods=['POST'])
@log
def pinglun():
pl=request.form.get('pingluntext')
tougao_id=request.form.get('tougaoid')
user_id=User.query.filter(User.username==session.get('user')).first().id
pinglun=Pinglun(userid=user_id,tougaoid=tougao_id,content=pl)
db.session.add(pinglun)
db.session.commit()
context={
'pingLun':Pinglun.query.order_by('-time').all()
}
return render_template(url_for('digital',tougao_id=tougao_id),**context)
显示所有评论：
{% extends "base.html" %}
{% block title %}标题{% endblock %}
{% block main %}
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column divcolor" >
<div class="page-header">
<h1>
{{ quest.title }}
</h1>
<small><a href="{{ url_for('author',user_id=quest.author.id) }}"><span class="glyphicon glyphicon-user">{{ quest.author.username }}</span></a> <span class="glyphicon glyphicon-time">{{ quest.time }}</span></small>
</div>
<p>
{{ quest.content }}
</p>
<hr>
<form class="form-horizontal" role="form" action="{{ url_for('pinglun') }}" method="post">
<div class="form-group">
<label for="toutaotext" class="col-sm-2 control-label">评论</label>
<div class="col-sm-10">
<textarea id="pingluntext" rows="5" cols="100" name="pingluntext"></textarea>
<input name="tougaoid" type="hidden" value="{{ quest.id }}" id="tougaoid">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-success">评论</button>
</div>
</div>
</form>
<h4>评论（{{ quest.pinglun|length }}）：</h4>
<ul>
{% for pl in quest.pinglun %}
<li class="list-group-item">
<p><a href="{{ url_for('author',user_id=pl.author.id) }}"><span class="glyphicon glyphicon-user"></span>{{ pl.author.username }}</a></p>
<p class="text-right"><span class="label label-default">{{ pl.time }}</span></p>
<h4>{{ pl.content }}</h4>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endblock %}
15 个人中心页标签导航
新页面authorbase.html,用<ul ><li role="presentation"> 实现标签页导航。
<ul class="nav nav-tabs">
<li role="presentation"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
authorbase.html继承base.html。重写title,head,main块.将上述<ul>放在main块中.定义新的块user。
让上次作业完成的个人中心页面，继承user.html，原个人中心就自动有了标签页导航。
制作个人中心的三个子页面，重写authorbase.html中定义的user块。
authorbase：
{% extends "base.html" %}
{% block head %}{% endblock %}
{% block main %}
<div class="container">
<div class="row clearfix divcolor">
<div class="col-md-8 column">
<h2>{{ user.username }}</h2>
<p>投稿总数:{{ tougao|length }} 评论数量:{{ pinglun|length }}</p>
<hr>
<ul class="nav nav-pills" role="tablist">
<li class="active"><a href="#">全部投稿</a></li>
<li><a href="#">全部评论</a></li>
<li><a href="#">用户信息</a></li>
</ul>
<br>
{% block author %}{% endblock %}
</div>
<div class="col-md-4 column">
</div>
</div>
</div>
{% endblock %}
author1：
{% extends "authorbase.html" %}
{% block title %}个人中心{% endblock %}
{% block head %}{% endblock %}
{% block author %}
<div>
<ul>
{% for tg in tougao %}
<a href="{{ url_for('digital',tougao_id=tg.id) }}" class="list-group-item list-group-item-light">
<li>
<div class="page-header">
<h3>{{ tg.title }}</h3>
<p><span class="glyphicon glyphicon-user">{{ tg.author.username }}</span> <span class="glyphicon glyphicon-time">{{ tg.time }}</span></p>
</div>
</li>
</a>
{% endfor %}
</ul>
</div>
{% endblock %}
像上面这个继承authorbase编写三个不同的子网页，然后写一个视图函数带标签页面参数tag，从而达到点击点击不同按钮有不同的页面的效果。
@app.route('/author/<user_id>/<tag>')
def author(user_id,tag):
user=User.query.filter(User.id==user_id).first()
context={
'user':user,
'tougao':user.tougao,
'pinglun':user.pinglun
}
if tag=='':
return render_template('author1.html', **context)
elif tag=='':
return render_template('author2.html', **context)
else:
return render_template('author3.html', **context)
导航标签链接增加tag参数：
<small><a href="{{ url_for('author',user_id=quest.author.id,tag=1) }}"><span class="glyphicon glyphicon-user">{{ quest.author.username }}</span></a> <span class="glyphicon glyphicon-time">{{ quest.time }}</span></small>
有链接到个人中心页面的url增加tag参数：
<a href="{{ url_for('usercenter',user_id = session.get('userid'), tag=1) }}">{{ session.get('user') }}</a>
16 实现搜索功能
准备视图函数search()：
from sqlalchemy import or_
@app.route("/search")
def search():
q=request.args.get("q")
tg=Tougao.query.filter(
or_(
Tougao.title.contains(q),
Tougao.content.contains(q)
)
).order_by("-time")
return render_template("index.html",touGao=tg)
修改base.html 中搜索输入框所在的：
<form class="navbar-form navbar-right" role="search" action="{{ url_for("search") }}" method="get">
<div class="form-group">
<input type="text" class="form-control" name="q" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
搜索
</button>
</form>
17 密码保护
1.更新User对象，设置对内的_password
class User(db.Model):
__tablename__='user'
id = db.Column(db.Integer,primary_key=True,autoincrement=True)
username=db.Column(db.String(20),nullable=False)
_password=db.Column(db.String(200),nullable=False)
2.编写对外的password
from werkzeug.security import generate_password_hash, check_password_hash
@property
def password(self): #外部使用，取值
return self._password
@password.setter
def password(self, row_password):#外部使用，赋值
self._password = generate_password_hash(row_password)
3.密码验证方法：
def check_password(self, row_password): #密码验证
result = check_password_hash(self._password,row_password)
return result
4.登录验证：
password1 = request.form.get('password')
user = User.query.filter(User.username == username).first()
if user:
if user.check_password(password1):