【编程小白必看】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 Flask3.准备 LayUI
可以从 LayUI 的官方网站下载最新版本的压缩包：
https://layui.dev/
三、操作案例
1.创建第一个 Flask + LayUI 应用
让我们从创建一个简单的 Flask 应用开始，并引入 LayUI。
代码如下（示例）：
from flask import Flask, render_templateapp = 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, requestapp = 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_templateapp = 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>总结
以上就是使用 Flask 和 LayUI 构建 Web 应用的基础知识和实战技巧。Flask 和 LayUI 的结合不仅可以让你快速搭建出美观的界面，还可以通过 Flask 的后端逻辑处理数据。如果你在实际应用中遇到任何问题，请随时留言讨论！
希望这篇笔记对你有所帮助，快去试试吧！