python+flask开发小白第二天

使用VSCode编译python web页面

1.先从最基础的说起吧,关于VSCode的使用: 
运行python程序与运行java,c,c++程序一样,需要新建一个文件,第一个文件建议不要新建在本地的C盘,不方便查找,文件路径也会一不小心很繁琐,为之后的开发带来不便! 
第一段代码是从https://dormousehole.readthedocs.io/en/latest/中的快速上手一文中get到的,所以建的文件名和里面的一致,方便理解,文件夹放在d盘中 名字叫做app.py,”.py”是python文件的统一扩展名,前面app所在位置建议用有意义的英文命名,不要用flask ,这会与flask本身冲突 
打开VScode,点击文件,打开app.py文件 
运行下面的代码 同样是最简单的helloworld:

from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world(): return 'Hello World!' if __name__ == '__main__': app.run()

要注意书写,因为python是严格规范缩进的,以及下划线,name和main前后都是双下划线的, 
“from flask import Flask”首先我们导入了 Flask 类。这个类的实例将会成为我们的 WSGI 应用。(WSGI:Web服务器 网关接口(Python Web Server Gateway Interface,缩写为WSGI)是Python应用程序或框架和Web服务器之间的一种接口) 
接着我们创建了这个类的实例。第一个参数是应用模块或者包的名称。如果你使用一个 单一模块(就像本例),那么应当使用 _ name _ ,因为名称会根据这个模块是按 应用方式使用还是作为一个模块导入而发生变化(可能是 ‘_ main _’ ,也可能是 实际导入的名称)。这个参数是必需的,这样 Flask 就可以知道在哪里找到模板和静态文件等东西。 
接着我们使用root()装饰器来告诉Flask出发函数的URL; 
“def”用来定义后面的hello_world函数 函数名称可用于生成相关联的 URL ,并返回需要在用户浏览器中显示的信息(return ‘hello world!’) 
最后使用run()来运行服务器和我们的本地应用 
“if _ name =’ main _’ ”这一句是确保服务器只会在Python解释器下运行,而不会作为模块导入时运行; 
最后运行的时候打开cygwin中的.bat 双击运行后输入以下命令: 
source pyvenv/bin/activate(按下enter键):venv是我们创建的一个独立的python运行环境 可以用source进入这个环境 
cd /cygdrive/d/app.py(cygdrive后的是新建的包所在的位置/x/xxx.xx 输完继续按下enter键):cd是change directory(更改目录)的英文缩写。它的功能是更改当前的工作目录,cygdrive/d的意思是你的windows下的整个D盘被cygwin挂载成/cygdrive/d的意思 
python3 app.py(按下enter键) 
运行正确后悔出现一行英文 中有一段链接 点击复制 粘贴在我们的浏览器的网址栏上 就会出现我们想要的 Hello World这句英文。 
2.几个有用的链接: 
1. PEP8 Python 编码规范:https://www.douban.com/note/134971609/ 
2. Flask 学着用模板:http://blog.csdn.net/bestallen/article/details/52055061 
另外打开VSCode后 点击文件—首选项—键盘快捷方式会有一个很长很全的常用编译器快捷键,比如ctrl+s是保存 ;ctrl+z是返回上一步 ; 
3.用python做一个简单的web页面: 
需要一个bootstrap的包 里面含有三个文件夹: 
这里写图片描述 
和一个jQuery的.js文件 
在我们在d盘中建的app.py文件夹中建一个名称为static 的文件夹,内层建一个叫bootstrap的文件夹 把准备好的bootstrap中 三个文件夹和jQuery的文件放进去 , 
这里写图片描述 
像这样 我们就可以在VScode中看见这几个文件了, 
接着我们在app.py中运行下面的代码:

from flask import Flask,render_template

app = Flask(__name__)

@app.route('/')
def index(): return render_template('login.html',name='123') @app.route('/abc') def login(): return 'hey' if __name__ == '__main__': app.run()

render_template是一个模板 相当于我们的数学公式 这是一个已经在python库中已经存在的模板 我们调用即可 作用是可以在我们的python中 加入更多的我们想要输出的东西而不需要一个一个的来return;说白了,其实render_template的功能是对先引入index.html,同时根据后面传入的参数,对html进行修改渲染。 
关于@app.route及其他的装饰器 这个文章中有详细的讲解;http://python.jobbole.com/80956/ 
我们需要我们的python运行出来的页面更漂亮!这时就用到了我们python中的template模板 它是一个可以用来制作web页面的模板; 
我们首先在我们的app.py文件夹下新建一个叫templates的文件,在这个文件下新建一个叫login 的HTML文件,开始我们的web页面编写,

<!DOCTYPE html>
<html>
<head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="/static/bootstrap/jquery-1.12.4.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="/static/bootstrap/js/bootstrap.min.js"></script> <body bgcolor="#EEE5DE> <div class="container"> <div class="now"> <div class="cd-md-4"> <div class="panel panel-danger"> <div class="panel-body"> <marquee><b><font color="#EE6AA7"><h3>您好,请登录!</h3></font></b> </marquee> <!--走马灯效果--> </div> </div> </div> </div> </div> <form class="text-center"> NAME:<input type="text" name="name"> <br/> PASSWORD:<input tupe="password" name="password"> </form> </body> </html>

点击ctrl+s保存后使用cygwin的.bat运行 出现网址后粘贴到网址栏就可以了 上面的代码是一个非常简单的含有一个边框 一串走马灯特效的文字 以及表格组成的登录页面 
扔两个有趣实用的链接: 
https://www.cnblogs.com/zendu/p/4991090.html 
http://www.114la.com/other/rgb.htm 
今天就学到这么多 不写了 腰疼·········································

猜你喜欢

转载自www.cnblogs.com/zhangxin123/p/9353986.html