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

基于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文件导入完成

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页