Pycharm社区版创建Flask项目(配置项目文件)_pycharm community flask

作者：空白诗007 | 2024-07-23 02:44:43

踩

pycharm community flask

一. 创建工程

Pycharm专业版可以很容易的创建Flask项目，但是社区版需要我们手动的创建并配置文件目录

一. 创建工程

创建一个名为 Pattern 的项目

二. 导入第三方库Flask

这个前提是有 pip 安装下载 flask ，就是在命令提示符里 pip install flask ，这里我就不放图演示了

Pycharm里面 File ---> Settings

找到 flask ，然后 Install Package

三. 配置项目文件

在根目录新建名为 static 的 Python Package，

新建完成后删除其下自动生成的 __init__.py 文件 ，

static 文件夹用来存放 css、JavaScript、image 等静态资源文件

按同样的方式新建 templates 文件夹，该文件夹用来存放 HTML文件

别打错了，向这样就行了

四. 应用

在 templates 里面创建一个 index.html 文件，里面随便写点网页内容


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>应用</title>
    <style>
        h1 {
            text-align : center
        }
 
        div h2{
            border :solid black;
            font-faimly : 楷体 ;
            color : red
        }
    </style>
</head>
<body>
    <h1>网页的注册</h1>
    <form>
        <p>姓名 : <input type="text" placeholder="请输入姓名"></p>
        <p>邮箱 : <input type="email" placeholder="请输入邮箱"></p>
        <p>电话 : <input type="tel" placeholder="请输入您的电话"></p>
        <p><input type="submit" value="提交"></p>
    </form>
    <div>
        <h2>注册成功！</h2>
        <p>欢迎注册新账户</p>
        <p>希望您能在此有愉快的体验！</p>
    </div>
</body>
</html>

在工程根目录新建app.py文件

app.py里的代码：

( 记得要从 flask 里面导入 )


from flask import Flask, render_template
 
app = Flask(__name__)
 
@app.route("/")
def index():
    return render_template('index.html')
 
if __name__ == '__main__':
    app.run(debug=True)

然后允许，以下是我在 Terminal 允许结果

点击链接

就可以看到之前创建的 index.html 网页了

五.补充

如果你在社区版不想创建 static 和 templates 文件夹也是可以应用实现以上程序，只不过...........

你得把你所写的不管是 html 也好还是 JavaScript 也好都得在当前所写的 .py文件里以字符串的形式出现

举个例子：


from flask import Flask
 
app = Flask(__name__)
 
@app.route('/index')
def index():
    content = '''
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <style>
        div h1{
            font-weight : bolder;
            text-align : center;
            color : green
        }
        div p{
            font-weight : 600px;
            color : darkgreen;
        }
    </style>
</head>
<body>
    <div>
        <h1>欢迎来到京东购物网站</h1>
        <p>食品类</p><br>
        <p>衣物类</p><br>
        <p>家居类</p>
    </div>
</body>
</html>
    '''
 
    return index
 
 
if __name__ == '__main__':
    app.run()

运行结果：（无法直接导入 .html 等文件）

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】