出于对网站制作以及前端的喜爱，恰好又懂一点python的知识，想想python会的wed框架不过就两个，django和flask，秉承简单好上手的原则我选择了flask这个小框架，非常适合建站新人练手。
这次的主要目的是建一个可以在局域网访问的小网站，内容比较简单。只要你链接了同一个wifi，你就可以通过ip+端口的形式进行访问，可以满足多台设备访问。
flask框架目录
网上关于flask的安装教程比较多，我就不介绍了，直接使用pycharm+pythob3.6操作一波
flask最简单的框架，你需要在工程目录Flaskr下包含一个app目录，我取名叫flaskr，在flaskr目录下面主要包含两个子目录，一个是static，他里面一般放一些静态文件，例如图片，音频，txt之类的资源；一个是templates目录，里面存放了html文件，html模板之类的，我的目录里还建立的Admin和Home，主要是为了以后拓展使用，现在可以忽略，然后flasker
.py文件，这个是程序的入口文件，它最好和templates在同一级目录下面，方便查找html模板，最后的models.py主要是和数据库建立链接，也属于之后的拓展，现在先完成静态网站，不要考虑数据库的情况。
flaskr.py程序核心入口
其中主要分为4部分，分别是导入库，初始化，页面路由，程序执行
1.在导入库的部分，尽量一次性将之后会用到的库放在一起，一起导入，看起来也舒服。
2.接着是初始化，这部分很重要，获取一个app实例为之后运行做准备
3.然后是页面路由，这就是你网站的结构了，页面路由的实现是靠python装饰器实现的绑定，十分简洁优雅，app.route()中的参数包括了，路径字符串，‘/’就代表了根目录；methods请求属性列表，代表了网站可以接收get和post两个请求，关于get和post两者的区别，我之前的博客也提到过。最后的返回值是一个html模板，flask会首先在与入口文件的同级目录下的templates文件中的html文件进行匹配，必须是同级哦，至于模板的封装运用到了一个强大的函数render_template()
4.最后就是程序执行，程序执行放在if判断中，if判断下的程序当该文件作为外部文件导入到其他python文件中时，其中的程序不会运行，而直接运行该py文件就没有这个障碍。其中的app.run()是一个死循环用来充当服务器，debug属性设为True，就可以在网页上打印错误信息，host设置为‘0.0.0.0’，程序会自动匹配主机的可用网络ip。关于最后一步也十分重要，具体实现我之前也提到过，如果遇到问题，点击下方链接查看解决方法。
# all the imports i will use
import os
import sqlite3
from flask import Flask, request, session, g, redirect, url_for, abort, \
render_template, flash
from flask_script import Manager
# 初始化
app = Flask(__name__)
manager = Manager(app)
# 页面路由,优雅
@app.route('/',methods=['Get','Post'])
def hello():
return render_template('home/index.html')
@app.route('/user/',methods=['Get','Post'])
def first():
return render_template('home/word_up.html')
# 程序执行
if __name__ == "__main__":
app.run(debug='True',host="0.0.0.0")
最后
最后你只需要将自己写的html文件放入tamplates目录下的相应位置，相应的css文件放在static目录下，就可以局域网访问这些页面了。
附上我的根页面，index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>标签对话框点击确认动画特效</title>
<link rel="stylesheet" href="../static/box.css">
</head>
<body>
<div class="bkg">
<div class="content">
<div>
心在这里
</div>
<div>
诗却在远方
</div>
<a href="/user/">确定</a>
</div>
</div>
</body>
</html>
index的css
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
width: 100%;
background: rgb(52,102,153,0.2);
}
.bkg{
position: relative;
background-color: rgb(153,102,255,0.2);
width: 360px;
height: 400px;
margin:200px auto;
border-radius: 6%;
box-shadow: 5px 5px 10px 1px rgb(153,102,255,0.3);
transition: 0.4s;
}
.bkg:hover{
width: 500px;
}
.content{
/* 子绝父相 */
position: absolute;
background-color: rgba(153,102,255,0.1);
left: 0;
top: 0;
right: 0;
bottom: 0;
margin:100px auto;
width: 200px;
border-radius: 8%;
text-align: center;
padding: 30px 20px;
font-family: "arial rounded mt bold";
font-size: 30px;
box-shadow: 5px 5px 10px 0.2px rgb(33,66,99,0.2);
}
a{
font-size: 20px;
width: 100px;
margin: auto;
display: block;
margin-top: 50px;
text-decoration: none;
color: rgb(104,100,155,0.9);
font-weight: 900;
border: 3px solid rgb(104,100,155,0.7);
border-radius: 15%;
}
a:hover{
display: block;
margin-top: 50px;
text-decoration: none;
color: rgb(51,0,102,0.9);
font-weight: 900;
border: 3px solid rgb(51,0,102,0.9);
border-radius: 15%;
background: rgb(51,0,102,0.4);
transform: scale(1.1,1.1);
}
至于word_up.html我之前的博客依然有源码，附上链接：
flask框架我还在学习中，日后会做一些，登陆表单验证，以及一些动态效果。
