<!DOCTYPE html>
<html>
<head>
<title>验证码对比</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
function checkCaptcha() {
var input = document.getElementById("inputCaptcha").value;
axios.post('/check_captcha', {
captcha: input
})
.then(function (response) {
alert(response.data.message);
})
.catch(function (error) {
console.log(error);
});
}
</script>
</head>
<body>
<h1>验证码对比</h1>
<input type="text" id="inputCaptcha" placeholder="请输入验证码">
<button onclick="checkCaptcha()">提交</button>
</body>
</html>
from flask import Flask, request, jsonify
import captcha_util
app = Flask(__name__)
@app.route('/')
def index():
return open('index.html').read()
@app.route('/captcha')
def get_captcha():
data = captcha_util.generate_captcha()
# 假设captcha_util.generate_captcha()返回的是一个包含'image'和'text'的字典
# 将生成的验证码图片和文本保存在session中供后续使用
session['captcha_text'] = data['text']
return data['image']
@app.route('/check_captcha', methods=['POST'])
def check_captcha():
user_input = request.json.get('captcha')
expected_captcha = session.get('captcha_text')
if user_input and expected_captcha and user_input.lower() == expected_captcha.lower():
return jsonify({'message': '验证码正确'})
return jsonify({'message': '验证码错误'})
if __name__ == '__main__':
app.run(debug=True)在这个例子中，我们使用了Flask框架来创建一个简单的Web应用，并使用Axios库在前端发送POST请求进行验证码的对比。同时，我们假设有一个captcha_util模块，它有一个generate_captcha函数用于生成验证码，并有一个check_captcha函数用于检查用户输入的验证码是否正确。这个例子展示了前后端验证码的生成与对比，并且简单地说明了如何在Web应用中集成验证码功能。