漂亮的管理员界面,显示用户信息,并且提供相应的查找和管理功能的html界面,并且和flask框架实现分页功能,前后端代码
时间: 2024-05-10 17:16:59 浏览: 198
2种非常漂亮的信息系统管理界面及框架完整HTML源码.rar
以下是一个简单的示例,漂亮的管理员界面使用 Bootstrap 进行美化,前端使用 jQuery 和 Ajax 实现分页和数据获取,后端使用 Flask 实现数据的查询和处理。
HTML 页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>用户管理</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script>
// 分页函数
function get_page(page) {
$.ajax({
type: "POST",
url: "/get_page",
data: {
page: page,
search_text: $("#search_text").val(),
order_by: $("#order_by").val(),
order: $("#order").val()
},
success: function (result) {
$("#user_list").html(result);
}
});
}
// 查找函数
function search() {
get_page(1);
}
// 排序函数
function order_by(order_by) {
if ($("#order_by").val() == order_by) {
if ($("#order").val() == "asc") {
$("#order").val("desc");
} else {
$("#order").val("asc");
}
} else {
$("#order_by").val(order_by);
$("#order").val("asc");
}
get_page(1);
}
</script>
</head>
<body>
<div class="container">
<h1>用户管理</h1>
<div class="row">
<div class="col-md-6">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="搜索用户" id="search_text">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onclick="search()">搜索</button>
</div>
</div>
</div>
<div class="col-md-6">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="order_by">排序</label>
</div>
<select class="custom-select" id="order_by" onchange="order_by(this.value)">
<option value="id">ID</option>
<option value="username">用户名</option>
<option value="email">邮箱</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" onclick="order_by($('#order_by').val())">
<i class="fas fa-sort"></i>
</button>
</div>
</div>
</div>
</div>
<div id="user_list"></div>
</div>
<script>
// 页面加载时获取第一页数据
$(document).ready(function () {
get_page(1);
});
</script>
</body>
</html>
```
Flask 后端代码:
```python
from flask import Flask, request, render_template, jsonify
from sqlalchemy import create_engine, Column, Integer, String
from sqlalchemy.orm import sessionmaker
from sqlalchemy.ext.declarative import declarative_base
app = Flask(__name__)
# 数据库配置
engine = create_engine('mysql+pymysql://username:password@host:port/database?charset=utf8mb4')
Base = declarative_base()
# 用户模型
class User(Base):
__tablename__ = 'users'
id = Column(Integer, primary_key=True)
username = Column(String(50), nullable=False)
email = Column(String(50), nullable=False)
# 分页查询用户
@app.route('/get_page', methods=['POST'])
def get_page():
# 获取请求参数
page = int(request.form['page'])
search_text = request.form['search_text']
order_by = request.form['order_by']
order = request.form['order']
# 构建查询条件
query = session.query(User)
if search_text:
query = query.filter(User.username.like('%{}%'.format(search_text)))
if order_by:
if order == 'asc':
query = query.order_by(getattr(User, order_by))
else:
query = query.order_by(getattr(User, order_by).desc())
# 查询总数和分页数据
total = query.count()
users = query.offset((page - 1) * 10).limit(10).all()
# 构建 HTML 返回结果
html = '<table class="table"><thead><tr><th>ID</th><th>用户名</th><th>邮箱</th></tr></thead><tbody>'
for user in users:
html += '<tr><td>{}</td><td>{}</td><td>{}</td></tr>'.format(user.id, user.username, user.email)
html += '</tbody></table>'
html += '<nav><ul class="pagination">'
for i in range(1, (total // 10) + 2):
if i == page:
html += '<li class="page-item active"><span class="page-link">{}</span></li>'.format(i)
else:
html += '<li class="page-item"><a class="page-link" href="#" onclick="get_page({})">{}</a></li>'.format(i, i)
html += '</ul></nav>'
return html
# 启动服务
if __name__ == '__main__':
Session = sessionmaker(bind=engine)
session = Session()
Base.metadata.create_all(engine)
app.run(debug=True)
```
在运行 Flask 应用程序之前,需要安装必要的依赖项:
```bash
pip install flask sqlalchemy pymysql
```
在浏览器中打开 HTML 页面,就可以看到漂亮的管理员界面,以及相应的查找和管理功能。
阅读全文