django+layui实现登录详细
时间: 2023-10-08 11:05:16 浏览: 211
实现登录需要前端页面、后端API接口、数据库等。下面是一个简单的django+layui实现登录的详细步骤:
1. 创建django项目和应用
首先需要创建django项目和应用,可以使用命令行执行如下命令:
```
django-admin startproject myproject
cd myproject
python manage.py startapp myapp
```
2. 配置数据库
在 `myproject/settings.py` 中配置数据库,例如使用sqlite3:
```
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': BASE_DIR / 'db.sqlite3',
}
}
```
3. 编写模型类
在 `myapp/models.py` 中编写用户模型类:
```
from django.db import models
class User(models.Model):
username = models.CharField(max_length=50)
password = models.CharField(max_length=50)
```
4. 创建数据库表
执行如下命令创建数据库表:
```
python manage.py makemigrations
python manage.py migrate
```
5. 编写API接口
在 `myapp/views.py` 中编写登录API接口:
```
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt
from .models import User
@csrf_exempt
def login(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
try:
user = User.objects.get(username=username, password=password)
return JsonResponse({'code': 0, 'msg': '登录成功'})
except User.DoesNotExist:
return JsonResponse({'code': 1, 'msg': '用户名或密码错误'})
```
6. 编写前端页面
在 `myapp/templates` 目录下创建 `login.html` 文件,编写前端页面:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
</head>
<body>
<div class="layui-container">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户名</label>
<div class="layui-input-block">
<input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">密码</label>
<div class="layui-input-block">
<input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="login">登录</button>
</div>
</div>
</form>
</div>
<script>
layui.use('form', function(){
var form = layui.form;
form.on('submit(login)', function(data){
$.ajax({
url: '/login/',
type: 'POST',
data: data.field,
success: function(res){
if (res.code === 0) {
layer.msg(res.msg, {icon: 1});
setTimeout(function(){
location.href = '/index/';
}, 1000);
} else {
layer.msg(res.msg, {icon: 2});
}
}
});
return false;
});
});
</script>
</body>
</html>
```
7. 配置URL路由
在 `myproject/urls.py` 中配置URL路由:
```
from django.urls import path
from myapp.views import login
urlpatterns = [
path('login/', login, name='login'),
]
```
8. 运行测试
执行如下命令运行django服务器:
```
python manage.py runserver
```
在浏览器中访问 `http://127.0.0.1:8000/login/`,即可看到登录页面。输入用户名和密码,点击登录按钮,即可调用API接口进行登录验证。如果验证通过,返回JSON数据 `{'code': 0, 'msg': '登录成功'}`,否则返回 `{'code': 1, 'msg': '用户名或密码错误'}`。
阅读全文