if user is not None: if user.is_active: login(request, user) messages.success(request, '登录成功!') return redirect('index') else: messages.error(request, '账户被禁用!') return redirect('login') else: messages.error(request, '无效的用户名或密码!') return redirect('login') 利用 bootstrap 设置在前端点击登录后消息弹出窗口提示
时间: 2023-08-24 09:06:25 浏览: 860
可以使用 Bootstrap 中的模态框(Modal)来实现弹出窗口提示。具体实现方式可以参考以下步骤:
1. 在 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件:
```html
<!-- 引入 Bootstrap 的 CSS -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<!-- 引入 Bootstrap 的 JavaScript -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.9.3/umd/popper.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
```
2. 在 HTML 文件中添加一个模态框(Modal):
```html
<!-- 模态框 -->
<div class="modal fade" id="login-modal" tabindex="-1" role="dialog" aria-labelledby="login-modal-label" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="login-modal-label">登录提示</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p id="login-message"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
```
3. 在 Django 中使用 messages 模块来设置提示消息,并在 JavaScript 中获取消息并显示模态框:
```python
if user is not None:
if user.is_active:
login(request, user)
messages.success(request, '登录成功!')
return redirect('index')
else:
messages.error(request, '账户被禁用!')
return redirect('login')
else:
messages.error(request, '无效的用户名或密码!')
return redirect('login')
```
```javascript
$(document).ready(function() {
{% if messages %}
var loginModal = $('#login-modal');
var loginMessage = $('#login-message');
{% for message in messages %}
{% if message.tags == 'success' %}
loginMessage.html('{{ message }}');
loginModal.modal('show');
{% else %}
// 这里可以根据消息类型设置不同的样式和内容
{% endif %}
{% endfor %}
{% endif %}
});
```
这样,当用户登录成功时,就会在前端弹出一个模态框,显示登录成功的提示消息。注意,这只是一个简单的示例,你可以根据自己的需要进行修改和扩展。
阅读全文