Python制作网页Day 1（一个简单的网页）

一、一个简单的网页
（一）一个简单的网页

from flask import Flask

app = Flask(__name__)

@app.route("/haha")
def haha():
    return "哈哈哈哈哈"

if __name__  ==  '__main__':
    app.run()

易出错：
1、每个有"_“的地方都有两条，即”__"。
2、if与下划线之间需要由空格

运行。
运行成功后，可以发现*Running on 后的一串网址，点击该网址即可弹出一个网页，在网址后加上"/haha"，回车后，即可查看运行结果：

注意：
1、我们在网址后添加的"/haha"，是与代码中@app.route("/haha")相对应2、的。我们当然可以把代码改为"/hello"，在网址后加上"/hello"即可。

（二）我们还可以另写一个代码块，输入不同的域名得到不同的运行结果:

from flask import Flask

app = Flask(__name__)

@app.route("/haha")
def haha():
    return "哈哈哈哈哈"
    
@app.route("/hello")
def hello():
    return "hello world!"

if __name__  ==  '__main__':
    app.run()

在网址后添加"/haha"，得到与上一次一样的运行结果
在网址后添加"/hello"，得到"hello world!"

二、在本机查看运行结果
（一）

from flask import Flask

app = Flask(__name__)

@app.route("/haha")
def haha():
    return "哈哈哈哈哈"

if __name__ == '__main__':
    app.run(host = '0.0.0.0')

我们在最后一行的括号里添加了：host = ‘0.0.0.0’
运行后可以发现网址已经变成：

刚才我们看到的网址主要由两部分构成： IP地址：端口号
IP地址，如：202.101.105.66
端口号，如：5000

当我们打开网页并在网址后添加"/haha"时，仍然无法成功看到结果，因为我们还需要把0.0.0.0这一地址更改成电脑在局域网下的IP地址，这样就可以在本机查看运行结果。那么如何获取IP地址呢？

（二）IP地址的获取
1、想要获取IP地址，可以在电脑所有程序里搜索”cmd”，打开命令提示符：

2、输入”ipconfig”，回车：

3、找到IPv4 地址，则该地址（红框）为在电脑所联局域网下的IP地址：

注意：
1、电脑需要联网。如果找不到IPv4地址，可以看看是否联网。
2、在不同的局域网下，IP地址不同

三、可显示输入内容的网页
如果想要在hello，xxx!中的xxx处显示自己随机输入的名字，可以在代码中添加变量。以下代码只显示被改动过的五、六、七行：

@app.route("/hello/")
def hello_name(name):
    return "hello,%s!" %name

可以看到，我们添加了变量name，从代码中我们可以知道，在网址后需要添加：/hello/April_town

注意：
1、April_town：就是我们自由输入的name，希望被展示在网页中的名字（输入时，不带<>）
2、同时，return中的%s对应替换成后面的%name，即%s会被替换成April_town

运行结果：

四、字体的修饰
如果我们想对字体进行修饰，比如加粗，换颜色等等，我们可以用各种标签实现。

（一）标签
1、标签，由一对尖括号括起来<…> ，如等等。
2、标签，往往成对出现分为开始标签和结束标签。比如： ，结束标签比开始标签多了一个’/’
3、标签可以嵌套使用，如：
April_town
它是在之外，嵌套了一层。它的总作用是对April_town加粗并改为橙色。注意，嵌套时，内层标签对应内层标签，外层标签对应外层标签，顺序不可混乱。

（二）代码实现
下面我们就来验证一下上述第4点的效果：

from flask import Flask

app = Flask(__name__)

@app.route("/hello/")
def hello_name(name):
    return "hello,%s!" %name

if __name__ == '__main__':
    app.run(host = '0.0.0.0')

在代码中，我们可以推测出，hello为橙色，用户自由输入的部分为加粗&绿色，’,‘和’!'为默认的黑色。本次运行，依旧输入April_town的名字。

运行结果：

五、html模板的创建和使用
（一）创建
在工作的文件夹下创建一个新的文件夹，并命名为templates，注意，名字不能随意取。

(二)使用
1、在这个新的文件夹下创建html file，命名随意，这里命名为hahahaha。
在html file下的 区域内添加字符：

hello,April_town!

2、回到.py的代码区，将代码做更改。

from flask import Flask,render_template

app = Flask(__name__)

@app.route("/hello/")
def hello(name):
    return render_template('hahaha.html')

if __name__  ==  '__main__':
    app.run(host='0.0.0.0')

请注意观察第一行：from flask import Flask,render_template
和第七行：return render_template('hahaha.html')

运行结果：

可以发现，我们并没有在.py文件中直接输出字符，而是调用了hahaha.html，输出了html文件中的字符。

但是我们也发现，用户自己输入的name:aaaaaa并没有起作用，为了让aaaaaa传入html中显示出来，我们需要在两文件之间用一个变量联系起来，这个变量命名随意（最好与原变量name区分开来），如namex，它的作用是接受name所赋的字符，然后在html中替换{{namex}}。
.html:

hello,{{namex}}!

.py:

@app.route("/hello/")
def hello(name):
    return render_template('hahaha.html',namex=name)

运行结果：

（四）html文件中的图片插入
1、在工作文件夹下，按层级依次创建static文件夹、image文件夹

2、将图片拖入image文件夹中，或者复制粘贴至文件夹中。

注意：
A、图片命名最好不要出现中文字符和数字字符，因为在运行时，可能无法显示图片而只显示一个图标
B、若图片做拖入处理，很可能导致图片在原文件夹中丢失，所以尽量做复制粘贴操作，或从网页复制。

3、在html文件中的代码：（添加了第二行代码）

'image/DSC_0458.jpg'     是文件的路径

在.py文件中运行。运行结果：