个人学期总结及Python+Flask+MysqL的web建设技术过程
Python+Flask+MysqL的web建设技术过程
1 建立flask框架项目
首先是flask安装（这里默认已经安装好python了），这里我们学习的项目只是简单的用pip install flask的语句安装了flask库，如果你碰到多个项目并且有不同的python版本或外部依赖库，可以参考：安装 — Flask 0.10.1 文档
开发工具上使用了pycharm作为工具，建立项目首先新建项目，选择flask框架进行构建。
2 导航及CSS
在网页前端开发的过程中，我引用了bootstrap的前端架构（其实只用了一些组件）。具体的bootstrap学习可以参考菜鸟教程：Bootstrap 教程 | 菜鸟教程
首先先建立前端html页面，页面导航通过标签
.navsize{
width: 80%;
margin:0 auto;
}
效果：
3 图片导航CSS实例
首先要学会使用div等块级元素标签来放置我们的网页元素，并会使用CSS选择器进行网页的开发。
这里先了解一下CSS的盒子模型：
margin：盒子的最外层，一般用于设置与其他元素的间隔距离
border：盒子的边框层，可以根据自己的需要设置是否可见及大小、颜色等
padding：盒子放置的内容与边框的中间层，可用于设置隔开内容及边框
content：盒子放置的内容层
图片导航实例：
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 = "
";
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;i57)&&(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;
}
在登录按钮中引用js函数进行应用，这里注意一个问题，需要在函数名前面增加return，否则即使输入的数据有误，js文件虽然会执行，但并不会拦截在登录页面，而是依旧会跳转到登录后的界面，注册功能甚至会直接把数据存进数据库中。这个问题我在idea中并没有碰到，而在这个项目中却会出现，原因我现在也不是很清楚，初步判断应该是后面添加的一些功能与其起了冲突，或者flask框架的一些不同。
效果图：
5 父模板制作
我们在编写多个页面的时候，会发现有许多地方是会用到一样的设计的，比如导航就是每页都有并且是一样的。
我们可以将其中相同的地方抽取出来，做一个父模板，然后让子页面继承父模板，就不需要多写许多相同的代码，减少了工作量，也使得代码更加简洁。
下面是我的父模板：
{% block title %}{% endblock %}
{% block head %}{% endblock %}
子页面：
{% extends 'base.html' %}
{% block title %}
反馈中心
{% endblock %}
{% block main %}
{% 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文件：
- 中设置 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页面：