代码收藏家技术教程 2025-01-23

【编程小白必看】Python的web开发库Flask+LayUI快速搭建美观网站秘籍一文全掌握

【编程小白必看】Python的web开发库Flask+LayUI快速搭建美观网站秘籍🔥一文全掌握

文章目录

前言

一、为什么选择 Flask 和 LayUI？

二、准备工作

1.安装 Python

2.安装 Flask

3.准备 LayUI

三、操作案例

1.创建第一个 Flask + LayUI 应用

2.添加 LayUI 到 HTML 文件

3.使用 LayUI 表单

4.使用 LayUI 表格

总结

前言

嘿，小伙伴们！今天我要带大家走进 Python Web 开发的世界，特别是使用 Flask 结合 LayUI 这个前端框架来快速搭建美观的网站。跟着我一起，轻松掌握 Flask 和 LayUI 的基础知识和实战技巧吧！

一、为什么选择 Flask 和 LayUI？

Flask 是一个用 Python 编写的轻量级 Web 应用框架。它非常适合初学者入门，
同时也被广泛应用于各种规模的应用程序中。Flask 的核心设计原则是简单性和灵活性，这使得开发者能够快速构建 Web 应用而不需要过多的配置。
LayUI 是一个基于 jQuery 的前端 UI 框架，它提供了丰富的组件和样式，
可以帮助开发者快速搭建出美观且功能丰富的网站界面。结合 Flask 和 LayUI，可以实现后端逻辑与前端界面的高效配合。

二、准备工作

1.安装 Python

确保你的计算机上已经安装了 Python。可以通过命令 python –version 或 python3 –version 来检查版本。

2.安装 Flask

使用 pip 安装 Flask：

代码如下（示例）：

pip install Flask

3.准备 LayUI

可以从 LayUI 的官方网站下载最新版本的压缩包：
https://layui.dev/

三、操作案例

1.创建第一个 Flask + LayUI 应用

让我们从创建一个简单的 Flask 应用开始，并引入 LayUI。

代码如下（示例）：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

2.添加 LayUI 到 HTML 文件

在 HTML 文件中引入 LayUI 的 CSS 和 JS 文件。

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask + LayUI Demo</title>
    <!-- 引入 LayUI CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css">
</head>
<body>
    <div class="layui-container">
        <h1 class="layui-bg-blue">Hello, World!</h1>
        <button class="layui-btn" onclick="alert('Hello!')">点击我</button>
    </div>

    <!-- 引入 LayUI JS -->
    <script src="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/layui.min.js"></script>
</body>
</html>

3.使用 LayUI 表单

利用 LayUI 提供的表单组件，可以轻松地创建美观的表单。

代码如下（示例）：

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        name = request.form['name']
        return f'Hello, {name}!'
    return render_template('form.html')

if __name__ == '__main__':
    app.run()

templates/form.html 文件内容如下（示例）：

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask + LayUI Form Demo</title>
    <!-- 引入 LayUI CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css">
</head>
<body>
    <div class="layui-container">
        <form class="layui-form" action="" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </form>
    </div>

    <!-- 引入 LayUI JS -->
    <script src="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/layui.min.js"></script>
    <script>
        // JavaScript 代码
        layui.use(['form'], function(){
          var form = layui.form;
          
          // 监听提交
          form.on('submit(formDemo)', function(data){
            console.log(data.field);
            return false; // 阻止表单跳转
          });
        });
    </script>
</body>
</html>

4.使用 LayUI 表格

LayUI 提供了一个强大的表格组件，可以用来展示数据。

代码如下（示例）：

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    data = [
        {'id': 1, 'name': '张三', 'age': 25},
        {'id': 2, 'name': '李四', 'age': 30},
        {'id': 3, 'name': '王五', 'age': 22}
    ]
    return render_template('table.html', data=data)

if __name__ == '__main__':
    app.run()

templates/table.html 文件内容如下（示例）：

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask + LayUI Table Demo</title>
    <!-- 引入 LayUI CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/css/layui.css">
</head>
<body>
    <div class="layui-container">
        <table class="layui-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                {% for item in data %}
                <tr>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <!-- 引入 LayUI JS -->
    <script src="https://cdn.jsdelivr.net/npm/layui@2.5.6/dist/layui.min.js"></script>
</body>
</html>