写一个简单的web登录网页例子,登录后进入新网页并将本地的excel数据显示出来
时间: 2024-03-23 19:37:18 浏览: 14
好的,以下是一个简单的实现代码:
1. 前端页面设计
登录页面(login.html):
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
</head>
<body>
<h1>登录</h1>
<form id="login-form">
<label>用户名:</label>
<input type="text" name="username"><br>
<label>密码:</label>
<input type="password" name="password"><br>
<button type="submit">登录</button>
</form>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="login.js"></script>
</body>
</html>
```
数据展示页面(data.html):
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>数据展示</title>
</head>
<body>
<h1>数据展示</h1>
<table id="data-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="data.js"></script>
</body>
</html>
```
2. 前端页面实现
登录页面的JavaScript代码(login.js):
```javascript
$(function() {
$('#login-form').submit(function(event) {
event.preventDefault();
var username = $('input[name="username"]').val();
var password = $('input[name="password"]').val();
$.post('/login', {username: username, password: password}, function(data) {
if (data.success) {
window.location.href = '/data';
} else {
alert('登录失败,请检查用户名和密码!');
}
});
});
});
```
数据展示页面的JavaScript代码(data.js):
```javascript
$(function() {
$.get('/data', function(data) {
var tbody = $('#data-table tbody');
for (var i = 0; i < data.length; i++) {
var row = $('<tr></tr>');
row.append($('<td></td>').text(data[i].name));
row.append($('<td></td>').text(data[i].age));
tbody.append(row);
}
});
});
```
3. 后端实现
使用Flask框架实现后端逻辑,代码如下:
```python
from flask import Flask, request, jsonify, render_template
import pandas as pd
app = Flask(__name__)
# 假设有一个用户列表
users = {'admin': '123456', 'guest': 'password'}
# 假设有一个Excel文件,包含姓名和年龄两列数据
df = pd.read_excel('data.xlsx')
@app.route('/')
def index():
return render_template('login.html')
@app.route('/login', methods=['POST'])
def login():
username = request.form.get('username')
password = request.form.get('password')
if username in users and users[username] == password:
return jsonify({'success': True})
else:
return jsonify({'success': False})
@app.route('/data')
def data():
data = df.to_dict(orient='records')
return jsonify(data)
if __name__ == '__main__':
app.run(debug=True)
```
4. 运行代码
将以上代码保存在相应的文件中(login.html, data.html, login.js, data.js, app.py),并将Excel文件保存为data.xlsx放在同一目录下。
在命令行中进入到代码所在目录,执行以下命令启动Flask应用:
```
$ export FLASK_APP=app.py
$ export FLASK_ENV=development
$ flask run
```
在浏览器中访问 http://localhost:5000/ 就可以看到登录页面了。登录成功后会跳转到数据展示页面,展示Excel中的数据。