基于Flask框架的简易网页开发_2、开发

2.1 工程目录

在这里插入图片描述
初始的目录结构如上：

static目录：
如其名，静态文件夹，里面防止一些静态文件，比如js、css、以及图片
templates目录：
中文为模板，里面放置html文件
venv目录：
python工程的虚拟环境，里面只需要了解一下，Lib-site-packages这个目录里面放置的当前工程需要的一些供调用的库。工程内下载的库也都在这里面。
app.py：
可以简单理解为html页面的后台控制程序
External Libraries:
External Libraries则为你通过pip安装在python里的一些包
如果你没有在新建工程的时候勾选允许导入外部依赖包的选项的话，不能直接用pip安装过的库，还需要通过工程内导入的方法导入包:
- 直接复制进venv-Lib-site-packages文件夹中
- 通过pycharm工程内联网下载：

2.2 在项目中加入html文件

我们知道，大部分网页的主体都是基于html文件的，因此没有html，网页开发无从开始。下面说明如何在项目中加入html文件

导入html
找到templates目录，右击：New一个HTML File，命名为test.html

在test.html中
重命名title（这里是我帮朋友做的一个小项目，以此为例，别嫌名字奇怪）
写入一串测试字符
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能艾灸Demo</title>
</head>
<body>
<p>hello！</p>
</body>
</html>
```
用render_template渲染html
在app.py中
导入render_template包
将hello_word（）中的return 改成如下代码
```
from flask import Flask,render_template
app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('test.html')
    
if __name__ == '__main__':
    app.run(Debug=True)
```
此段代码的意思是，渲染了一个html的网页模板
可以直接理解为，显示这个网页
ok，这样一个html文件就可以在flask框架中应用了，恭喜，你已经成功了一半。

2.3 加入css文件

找到static目录，右键在之中new一个新的directory（目录、文件夹）命名为css，这个目录专门用来存放css文件
在这里插入图片描述
然后再css目录右击new一个css样式文件（stylesheet）命名为mystyle.css

创建成功后在html的head标签中加入css样式表

<head>
    <meta charset="UTF-8">
    <title>智能艾灸Demo</title>
    
    <link rel="stylesheet" href="../static/css/mystyle.css">
 
</head>

href中的路径为你css样式表文件的路径
"…/"的意思为返回上一级目录
这里html的目录为template，那么他的上一级目录则为工程文件夹在我这里是叫Flask-Demo,
（其实只有两个点“。。/”，但是在MarkDown这个编辑语法下打出两个英文字符“.”他会自动帮我补全为三个…，在此指出，避免误导，以代码片中为准）

接下来在html的body标签中加入一个div，设置其id为bg，并在css样式表中修改id为bg的块的背景色，验证css是否成功被html导入并且发挥渲染样式的作用
html文件：

<body>

    <div id="input"></div>

</body>

css文件中
（css样式看不懂的不必太纠结，这里只是随便写了一下，便于后面的展示）

#input
{
    background-color: lightblue;    
    width: 100px;                   
    height: 40px;                   
    position: absolute;             
    top: 100px;                     
    left: 100px;              
}

然后Ctrl+s之后刷新原网页查看、或点击下面的127.0.0.1：5000
（如果没有效果，可能是前篇的原因，建议清除缓存之后刷新，或者打开浏览器的开发者模式之后再刷新）
效果如下:
在这里插入图片描述
这说明你的css样式表已经成功导入了

2.4 导入js文件

同上在static目录下新建一个js名的目录，然后在之下再新建一个js文件，命名为control.js
在这里插入图片描述
然后再html的head标签中加入如下代码，导入这个js文件：

<head>
    <meta charset="UTF-8">
    <title>智能艾灸Demo</title>

    <link rel="stylesheet" href="../static/css/mystyle.css">
    <script type="text/javascript" src="../static/js/control.js" ></script>

</head>

至此，js文件导入完成

基于Flask框架的简单网页开发_2、加入html文件以及css、js文件

基于Flask框架的简易网页开发_2、开发

2.1 工程目录

2.2 在项目中加入html文件

2.3 加入css文件

2.4 导入js文件

猜你喜欢