实现功能：Flask框架+平台访问+批量自动造测试数据
import osfrom flask import Flask, render_template, request, jsonify, url_for, redirect
from werkzeug.urls import url_parsefrom HuiCai import InsertHuiCaiOrderapp = Flask(__name__, template_folder='E:/flaskProject/templates')@app.route('/login')
def index():return render_template('login.html')@app.route('/home')
def home():return render_template('home.html')@app.route('/warn')
def warn():return render_template('warn.html')@app.route('/login', methods=['POST'])
def login():username = request.json.get('username')password = request.json.get('password')if username == 'admin' and password == 'password':return jsonify({'code': 0})else:return jsonify({'code': -1, 'message': '用户名或密码错误！'})@app.route('/create_order', methods=['POST'])
def create_order():data = request.form['order']order_number = InsertHuiCaiOrder(int(data))return order_number# 限制页面访问顺序
@app.before_request
def check_referer():if request.endpoint == 'home':referer = request.headers.get('Referer')if referer is None or url_parse(referer).path != url_for('login'):return redirect(url_for('warn'))if __name__ == '__main__':app.run()login登录页面
<!DOCTYPE html>
<html>
<head><link rel="icon" href="data:;base64,iVBORw0KGgo="><meta charset="utf-8"><title>用户登录</title><style>/* 样式调整 */form {width: 300px;margin: 20px auto;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;}fieldset {border: none;}legend {font-size: 24px;margin-bottom: 20px;}label {display: block;margin-bottom: 10px;}input[type=text], input[type=password] {width: 100%;padding: 5px;margin-bottom: 10px;display: none; /* 初始隐藏输入框 */}input[type=submit] {background-color: #3a4b53;color: #fff;border: none;padding: 10px;cursor: pointer;display: none; /* 初始隐藏提交按钮 */}.error {font-size: 14px;color: red;margin-top: 10px;}.mask {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5); /* 添加遮罩 */}</style>
</head><body>
<style>form {width: 100%;margin: 0 auto;display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100vh;background-image: url('../static/images/zhuomian.gif');background-size: cover;background-repeat: no-repeat;background-position: center;}
</style>
<form><div class="mask"></div> <!-- 添加遮罩 --><fieldset><legend>用户登录</legend><label for="username">用户名:</label><input type="text" id="username" name="username" placeholder="请输入用户名"><label for="password">密码:</label><input type="password" id="password" name="password" placeholder="请输入密码"><input type="submit" value="登录"><p class="error"></p></fieldset>
</form><script type="text/javascript">window.onload = function () {// 隐藏输入框和提交按钮var inputs = document.querySelectorAll('input[type="text"], input[type="password"], input[type="submit"]');for (var i = 0; i < inputs.length; i++) {inputs[i].style.display = 'none';}// 绑定鼠标点击事件，显示输入框和提交按钮document.querySelector('.mask').addEventListener('click', function (event) {event.preventDefault();this.style.display = 'none';for (var i = 0; i < inputs.length; i++) {inputs[i].style.display = 'block';}document.querySelector('#username').focus(); // 自动聚焦到用户名输入框});// 绑定登录表单提交事件document.querySelector('form').addEventListener('submit', function (event) {event.preventDefault(); // 阻止表单默认提交行为var username = document.querySelector('#username').value;var password = document.querySelector('#password').value;if (!username || !password) {showError('用户名和密码均不能为空！');return;}// 发送登录请求var xhr = new XMLHttpRequest();xhr.open('POST', '/login');xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');xhr.onreadystatechange = function () {if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {var response = JSON.parse(xhr.responseText);if (response.code === 0) {window.location.href = '/login'; // 登录成功跳转到首页} else {showError(response.message); // 显示错误信息}}};xhr.send(JSON.stringify({'username': username,'password': password}));});// 显示错误信息function showError(message) {document.querySelector('.error').innerText = message;}}
</script>
</body>
</html>home页面，输入后–调取后端接口–loading等待–回显返回结果
<!DOCTYPE html>
<html>
<head><title>创建订单</title><script src="https://code.jquery.com/jquery-3.5.1.min.js"></script><style>.container {position: relative;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;}.form {display: flex;flex-direction: column;justify-content: center;align-items: center;}label {margin-bottom: 10px;}#order-input {width: 200px;margin-bottom: 20px;}#submit-btn {width: 100px;}#loading {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: none;background-color: #ccc;border-radius: 5px;text-align: center;line-height: 50px;width: 100px;height: 50px;}#result {margin-top: 20px;font-weight: bold;}</style>
</head>
<body>
<div class="container"><form class="form"><label for="order-input">填写需要的慧采订单数量：</label><input type="text" id="order-input" name="order-input"><br/><br/><button id="submit-btn" type="button">提交</button></form><div id="loading">加载中...</div><div id="result"></div>
</div>
<script>$(document).on('click', '#submit-btn', function () {var order = $('#order-input').val();$('#loading').show();$.ajax({url: '/create_order',type: 'POST',data: {order: order},success: function (response) {$('#loading').hide();var result = JSON.stringify(response);$('#result').text(result);$('#result').show();alert('订单创建成功');},error: function (xhr, textStatus, errorThrown) {$('#loading').hide();alert('订单创建失败');}});});
</script>
</body>
</html>login.html页面2.0
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>动态登录页面</title><style>body {background-color: #1E1F26;color: #FFFFFF;font-family: Arial, sans-serif;font-size: 16px;margin: 0;padding: 0;}.container {display: flex;justify-content: center;align-items: center;height: 100vh;}form {background-color: #282A36;border-radius: 10px;box-shadow: 0px 0px 10px 0px #FFFFFF;padding: 30px;text-align: center;width: 400px;}input {background-color: #44475A;border: none;border-radius: 5px;color: #FFFFFF;font-size: 16px;margin-bottom: 20px;padding: 10px;width: 100%;}input[type="submit"] {background-color: #50FA7B;cursor: pointer;font-weight: bold;transition: background-color 0.3s ease-in-out;}input[type="submit"]:hover {background-color: #FF5555;}h1 {font-size: 28px;margin-bottom: 30px;}.loading {display: none;font-size: 20px;margin-top: 20px;}.error {font-size: 14px;color: red;margin-top: 10px;}.loading:before {content: "";display: inline-block;height: 20px;width: 20px;border-radius: 50%;border: 2px solid #FFFFFF;border-top-color: transparent;animation: spin 0.8s linear infinite;margin-right: 10px;vertical-align: middle;}@keyframes spin {to {transform: rotate(360deg);}}</style>
</head>
<body>
<div class="container"><form><h1>登录</h1><label for="username">用户名</label><input type="text" id="username" name="username" required><label for="password">密码</label><input type="password" id="password" name="password" required><input type="submit" value="登录"><div class="loading">登录中，请稍候...</div><p class="error"></p></form>
</div>
<script>const form = document.querySelector('form');const loading = document.querySelector('.loading');form.addEventListener('submit', (event) => {event.preventDefault();loading.style.display = 'inline-block';var username = document.querySelector('#username').value;var password = document.querySelector('#password').value;if (!username || !password) {showError('用户名和密码均不能为空！');return;}// 发送登录请求var xhr = new XMLHttpRequest();xhr.open('POST', '/login');xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');xhr.onreadystatechange = function () {if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {var response = JSON.parse(xhr.responseText);if (response.code === 0) {console.log(11111)window.location.href = '/create'; // 登录成功跳转到首页} else {form.reset();loading.style.display = 'none';showError(response.message); // 显示错误信息}}};xhr.send(JSON.stringify({'username': username,'password': password}));});// 显示错误信息function showError(message) {document.querySelector('.error').innerText = message;}
</script>
</body>
</html>
