使用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 
今天就学到这么多 不写了 腰疼·········································

python+flask开发小白第二天的更多相关文章

  1. 【selenium+python】之Python Flask 开发环境搭建(Windows)

    一.先安装python以及pip 二.其次, Python的虚拟环境安装: 在github上下载https://github.com/pypa/virtualenv/tree/master  zip文 ...

  2. python自动开发之第二十三天(Django)

    一.一大波model操作 1. 创建数据库表 # 单表 # app01_user ==> tb1 # users class User(models.Model): name = models. ...

  3. python自动开发之第二十二天

    知识点概要 - Session - CSRF - Model操作 - Form验证(ModelForm) - 中间件 - 缓存 - 信号 一. Session 基于Cookie做用户验证时:敏感信息不 ...

  4. Python Flask 开发学习笔记

    Flask学习 安装pipenv虚拟环境 pip Install pipenv 运行pipenv pipenv --version 进入虚拟容器 pipenv install 安装flask pipe ...

  5. python自动开发之第二十五天

    一.组合搜索 参考: http://www.cnblogs.com/ccorz/p/5985205.html 二.JSONP 1.在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,但 ...

  6. python自动开发之第二十四天(Django)

    一.ModelForm操作及验证 1.class Meta:class Meta: #注意以下字段不能加逗号 model = models.UserInfo #这里的all代指所用的字段,也可以是一个 ...

  7. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架 II第二部 0. 本系列教程 1. 登录功能准备 a.python中操控mysql b. 安装数据库 c.安装mys ...

  8. Python开发【第二十一篇】:Web框架之Django【基础】

    Python开发[第二十一篇]:Web框架之Django[基础]   猛击这里:http://www.cnblogs.com/wupeiqi/articles/5237704.html Python之 ...

  9. Python Flask高级编程之从0到1开发《鱼书》精品项目 ☝☝☝

    Python Flask高级编程之从0到1开发<鱼书>精品项目 ☝☝☝ 一 .安装环境我们使用 flask web框架,并用 sqlalchemy来做数据库映射,并使用 migrate做数 ...

随机推荐

  1. UI自动化(三)css优先级

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 再谈git和github-深入理解-3

    git tag -a 和 -m的区别? -a是 注解 是单词 "annotate"的意思 , 表示 "给标签一个名字, 标签名 -m 是创建标签时的消息备注 git ta ...

  3. BZOJ 4480 [JSOI2013] 快乐的jyy

    思路 两个字符串都插入回文自动机中(每次重置last) 最后统计两个right集合的大小就好了 代码 #include <cstdio> #include <algorithm> ...

  4. scala 入门Eclipse环境搭建

    scala 入门Eclipse环境搭建及第一个入门经典程序HelloWorld IDE选择并下载: scala for eclipse 下载: http://scala-ide.org/downloa ...

  5. variable 'o' used without having been completely initialized Compiling Vertex program

    variable 'o' used without having been completely initialized Compiling Vertex program   v2f vert (ap ...

  6. P1908 逆序对

    传送门 这题似乎不应该出现在这里.. 日常做法(归并): #include<iostream> #include<cstdio> #include<algorithm&g ...

  7. [译] 关于 Angular 依赖注入你需要知道的

    如果你之前没有深入了解 Angular 依赖注入系统,那你现在可能认为 Angular 程序内的根注入器包含所有合并的服务提供商,每一个组件都有它自己的注入器,延迟加载模块有它自己的注入器. 但是,仅 ...

  8. openssl dgst(生成和验证数字签名)

    openssl系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html 该伪命令是单向加密工具,用于生成文件的摘要信息,也可以进行数字签名,验证数字 ...

  9. EL函数库及用法

    导入标签库: <%@ tablib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%&g ...

  10. 『Python CoolBook:Collections』数据结构和算法_容器型value字典&顺序字典

    一.collections.defaultdict:多值映射字典 defaultdict省去了初始化容器的过程,会默认value对象为指定类型的容器 指定list时可以使用.append, from ...