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

本文介绍了如何使用Flask框架进行简单的网页开发,包括设置工程目录,将html、css和js文件引入项目。在templates目录下创建html文件,通过render_template渲染。接着在static目录下创建css文件并链接到html,最后添加js文件并导入,实现网页样式的调整和交互功能。
摘要由CSDN通过智能技术生成

基于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
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值