基于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 改成如下代码
此段代码的意思是,渲染了一个html的网页模板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)
可以直接理解为,显示这个网页
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文件
发布评论