0. 本系列教程

#1使用html+css+js制作网站教程 准备
#2使用html+css+js制作网站教程 测试
#3使用html+css+js制作网页 制作登录网页
#3使用html+css+js制作网页 番外篇 制作接收php
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架 (II)

1. 准备

a.python

python在计算机语言不同于非常难学的C语言，非常流行的Java语言，适合初学者的Basic语言，适合网页编程的JavaScript语言等等。它以其代码风格简洁，易学闻名，却也因其的运行效率低下被一些大项目抛弃。其特性使它适合做一些个人小型项目，而不是像c系列的系统。

建议参考网站
廖雪峰的官方网站
菜鸟教程

而本教程主要内容为python作后端，html+js+css做前端，所以不会过于深入python的语法。

推荐python环境搭建使用anacoda
本文使用的版本为3.6.2

b. flask

Flask是一个基于Jinja2和Werkzeug的python微框架，有以下特点：

  • 内建的单元测试支持
  • 模板使用Jinjia2
  • 大量文档
  • 客户端会话使用安全cookies
  • 开发服务器和调试器
  • Restful请求
  • 与WSGI 1.0兼容
  • 基于unicode
  • 大量的扩展
    flask是微框架，比较灵活，适合小型项目。

其他python框架参考点击跳转简书
flask官网

c. flask 环境安装

在命令行中运行

pip install flask

作者是使用vscode编辑，实际上使用任何可以使用任何的编辑器（例记事本）都行

d. flask 基本文件结构

首先要新建文件夹如以下构造
flask-demo(项目总文件夹，名字自取)
–templates(前端部分文件夹)
-run.py(后端文件，名字自取)
-tempcoderunnerfile.py(系统缓存文件)

如图

2. 后端实现

a. flask 基本框架

# coding: utf-8

from flask import Flask,render_template,url_for

app = Flask(__name__)

# 路径对应的执行函数，有路径就对应路径名，没路径就对应index

#如@app.route('/login') 对应def login()

@app.route('/')

def index():

	return

if __name__ == '__main__':

    app.run(host='127.0.0.1', port='5000', debug=True)#映射

这段代码的作用就是把这个项目映射到127.0.0.1:5000的ip上，不过由于还没有挂网页文件上去，所以看不到什么效果

b. flask 显示前端页面

在flask框架中，使用

 render_template('index.html')

可以在用户页面上显示index.html的内容也就是返回index.html

c. flask 给前端传值

想要flask给前端传值，只需要在上面的函数中增加几个参数

render_template('index.html',a=1)

这里给前端也就是index.html，传了参数名为a值为1，可以在前端接收

d. flask 接收前端传值

实现这个功能，要在route和处理函数里面增加，例如前端给后端a=1

app.route('/', methods=['GET','POST'])

def index():

    l = request.args.get('a', 0, type=int)

3. 前端实现

a. 分层

在flask 框架中提供了一个小巧简单又方便的把多个文件组合在一起展示的功能，例如：我的全部网页都有一个相同的<head>部分，使用flask框架就可以组合在一起通过在前端插入代码。

index.html

{% extends "head.html" %}

{% block body %}

...

{% endblock %}

head.html

<!doctype html>

<head>

    <title>Hi</title>

    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

</head>

<body>

    {% block body %}

    {% endblock %}

</body>

b. 接收参数

正如我们上面讲的后传前的方法，前端接收后端的参数也十分简单，例如后端传给前端a=1

<h>{{ a }}</h>

这样子就可以在h标签中显示1，此外，flask还提供了在前端中判断参数的方法，例

...

{% if a==1 %}

...

{% endif %}

...

c. 前端给后端传参

这里只能使用post或者get方法，笔者在这推荐jq的ajax异步，例

function sign_up() {

        var x = $("#i").val();

        if (x != "" && x != " ") {

            $.ajax({

                type: "GET",

                url: "{{ url_for('login') }}",

                //url_for是获取路径

                data: {

                    sign_up_name: x

                },

                dataType: "html",

                success: function (data) {

                }

            })

        }

    }

d. 登录页面前端

新建一个login.html 文件，里面写上最简单的登录页面

{% extends "head.html" %}

{% block body %}

<h1>sign in</h1>

<input id="u" type="text" />

<buttom onclick="sign_in()">确定</buttom>

<script>

function sign_up() {

        var x = $("#i").val();

        if (x != "" && x != " ") {

            $.ajax({

                type: "GET",

                url: "{{ url_for('login') }}",

                data: {

                    sign_up_name: x

                },

                dataType: "html",

                success: function (data) {

                }

            })

        }

    }

</script>

{% endblock %}

新建一个head.html文件，里面存放标题和引入jq，这对我们以后增加大量页面有帮助

<!doctype html>

<head>

    <title>Hi</title>

    <!--- 引入新浪的jq--->

    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

</head>

<body>

    {% block body %}

    {% endblock %}

</body>

4. 前端+后端的简单组合

run.py

from flask import Flask, url_for, request, render_template

app = Flask(__name__)

@app.route('/', methods=['GET'])

def index():

    return render_template('index.html',name="xxx")

if __name__ == '__main__':

    app.run(host='127.0.0.1', port=5000,  debug=True)

templates\head.html

<!doctype html>

<head>

    <title>Hi</title>

    <!--- 引入新浪的jq--->

    <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

</head>

<body>

    {% block body %}

    {% endblock %}

</body>

templates\index.html

{% extends "head.html" %}

{% block body %}

<h1>Hello {{ name }}!</h1>

{% endblock %}

实践图:

一定要把网页模板文件放在templates目录下，run.py和templates同一目录
访问这个网页要先运行run.py，然后在浏览器输入127.0.0.1:5000
因为作者时间较赶，这个现在还没有任何功能，请期待下一部教程
有问题留言

本作续集

-END-

#3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)的更多相关文章

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

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

  2. #3使用html+css+js制作网页 番外篇 制作接收php

    使用html+css+js制作网页 番外篇 制作接收php 本系列链接 基础 php语法 例子 本系列链接 #1使用html+css+js制作网站教程 准备 #2使用html+css+js制作网站教程 ...

  3. #3使用html+css+js制作网页 制作登录网页

    #3使用html+css+js制作网页 制作登录网页 本系列链接 2制作登录网页 2.1 准备 2.1.1 创建文件夹 2.1.2 创建主文件 2.2 html部分 2.2.1 网站信息 2.2.2 ...

  4. #2使用html+css+js制作网站教程 测试

    #2使用html+css+js制作网站教程 测试 本系列链接 1 测试 1.1 运行 1.2 审查 1.3 审查技巧 1.4 其他 引言: 编写完代码后就要上机测试代码,获得用户体验,筛选bug 笔者 ...

  5. #1使用html+css+js制作网站教程 准备

    #1使用html+css+js制作网站教程 准备 本系列链接 0 准备 0.1 IDE编辑软件 0.2 浏览器 0.3 基础概念 0.3.1 html 0.3.2 css 0.3.3 js 0.4 文 ...

  6. html+css+js实现网页拼图游戏

    代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...

  7. 【番外篇】ASP.NET MVC快速入门之免费jQuery控件库（MVC5+EF6）

    目录 [第一篇]ASP.NET MVC快速入门之数据库操作(MVC5+EF6) [第二篇]ASP.NET MVC快速入门之数据注解(MVC5+EF6) [第三篇]ASP.NET MVC快速入门之安全策 ...

  8. 渗透测试思路 - CTF(番外篇)

    渗透测试思路 ​ Another:影子 (主要记录一下平时渗透的一些小流程和一些小经验) CTF(番外篇) ​ 笔者是一个WEB狗,更多的是做一些WEB类型题目,只能怪笔者太菜,哭~~ 前言 ​ 本篇 ...

  9. 《手把手教你》系列技巧篇（三十一）-java+ selenium自动化测试- Actions的相关操作-番外篇（详解教程）

    1.简介 上一篇中,宏哥说的宏哥在最后提到网站的反爬虫机制,那么宏哥在自己本地做一个网页,没有那个反爬虫的机制,谷歌浏览器是不是就可以验证成功了,宏哥就想验证一下自己想法,于是写了这一篇文章,另外也是 ...

随机推荐

  1. Linux 挂载，卸载光盘

    首先我们点击虚拟机 点击设置 选择CD 接着我们将设备状态两个勾都勾选,并且ISO映像文件选择我们需要挂载的光盘 点击了确定之后,我们到centos7的命令行下 1,创建挂载目录 mkdir /mnt ...

  2. python学生管理名片

    name=['刘备','关羽','张飞','赵云','马超'] print('名片管理系统1.0\n1.增加一个新的名片\n2.删除一个名片\n3.修改一个名片\n4.查找一个名片\n5.退出名片管理 ...

  3. 【Dotnet9-01】从0开始搭建开源项目-lqclass.com

    行文目录 一. 前言 1.1 我的现有网站 1.2 想法:新开发一个网站 1.3 目前开发计划 二. 行动了 2.1 Github创建项目 2.2 使用 WTM 搭建后台框架 2.3 项目演示 2.4 ...

  4. 使用VNC远程linux机器

    一,在Windows机器上下载vnc客户端 vnc viewer是一款vnc远程客户端,可以很方便的从Windows机器远程安装了图形界面和vnc服务器的linux机器. 从官网下载https://w ...

  5. 【震惊】padding-top的百分比值参考对象竟是父级元素的宽度

    引言 书写页面样式与布局是前端工程师Coding 中必不可少的一项工作,在定义页面元素的样式时,padding 属性也是经常被使用到的. padding 属性用于设置元素的内边距,其值可以是lengt ...

  6. css 10-CSS3选择器详解

    10-CSS3选择器详解 #CSS3介绍 CSS3在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效和便捷. #CSS3的现状 浏览器支持程度不够好,有 ...

  7. WP | [MRCTF2020]Ezpop

    2020.10.14 最近开始努力提高代码能力 题目代码 Welcome to index.php <?php //flag is in flag.php //WTF IS THIS? //Le ...

  8. 持久层之 MyBatis: 第一篇：快速入门

    MyBatis入门到精通 JDBC回顾 1.1.认识MyBatis 1.1.使用IDEA创建maven工程 1.2.引入mysql依赖包 1.3.准备数据 1.4 使用JDBC手写MyBatis框架 ...

  9. 服务器安装ESXI6.7

    1    从官网下载ESXI镜像文件到本地 https://my.vmware.com/web/vmware/details?downloadGroup=ESXI670&productId=7 ...

  10. matplotlib学习日记（十）-共享绘图区域的坐标轴

    (1)共享单一绘图区域的坐标轴 ''' 上一讲介绍了画布的划分,有时候想将多张图放在同一个绘图区域, 不想在每个绘图区域只绘制一幅图形,这时候借助共享坐标轴的方法实现在一个绘图区 绘制多幅图形的目的. ...