目录
1.django配置步骤
2.django链接数据库(MySQL)
3.利用orm创建数据库表
4.django的myweb01项目中的url.py添加路由
5.django的app01应用中的views.py添加逻辑函数
6.templates文件夹的四个html页面
6.1 userlist.html
6.2 reg.html
6.3 login.html
6.4 edit_user.html
7.效果图
前提:此为django+mysql+前端,为了方便测试在登录或注册返回的都是现有用户列表页面
1.django配置步骤
1.cmd创建项目django-admin startproject myweb01
2.vscode打开项目,通过manage.py启动django项目,或cmd下python manage.py runserver
3.创建app01:python manage.py startapp app01
4.把app01加进项目myweb01中settings.py文件中:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app01' # 直接写qpp01
]
5.项目myweb01同级下手动创建templates文件夹用来存放HTML文件,并且配置权限
即将templates文件夹权限添加进项目myweb01中settings.py中
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
其中:'DIRS': [],中加templatew拼接路径:os.path.join(BASE_DIR, 'templates')
6.项目myweb01同级下手动创建static文件夹用来存放静态文件,也就是写好的ccs,js等
当然static文件夹也要配置:在项目myweb01中settings.py中的STATIC_URL = '/static/'下面添加:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
7.因为前端用得到bootstrap,jquery,将bootstrap的css和js,jquery.js放到static中
8.在使用django提交post请求的时候,需要在项目myweb01中settings.py配置文件中注释掉一行代码(重要)
MIDDLEWARE = [
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
# 'django.middleware.csrf.CsrfViewMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
'django.contrib.messages.middleware.MessageMiddleware',
'django.middleware.clickjacking.XFrameOptionsMiddleware',
]
2.django链接数据库(MySQL)
1.MySQL用navicat软件快速创建名为myweb01数据库
2.到项目myweb01中的setting.py文件中配置:
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql', # 声明连接mysql
'NAME': 'myweb01', # 数据库名
'USER':'root', # 用户
'PASSWORD':'117', # 密码
'HOST':'127.0.0.1', # 本地连接
'PORT':3306, # 端口
'CHARSET':'utf8'
}
}
3.在项目名下的init文件中书写以下代码声明:
import pymysql
pymysql.install_as_MySQLdb()
3.利用orm创建数据库表
1.在app01中的models.py文件中创建相关类(表):
from django.db import models
# Create your models here.
class User(models.Model):
id = models.AutoField(primary_key=True, verbose_name='主键')
username = models.CharField(max_length=32, verbose_name='用户名')
password = models.CharField(verbose_name='密码', max_length=64)
2.并且执行两条数据库迁移命令
(1)python manage.py makemigrations # 将操作记录记录到小本本上(migrations文件夹)
(2)python manage.py migrate # 将操作真正的同步到数据库中
4.django的myweb01项目中的url.py添加路由
from django.conf.urls import url
from django.contrib import admin
from app01 import views
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^register/', views.reg), # 注册功能
url(r'^login/', views.login), # 登陆功能
url(r'^userlist/', views.userlist), # 展示用户列表
url(r'^edit_user/', views.edit_user), # 编辑用户
url(r'^delete_user/', views.delete_user) # 删除用户
]
5.django的app01应用中的views.py添加逻辑函数
通过orm来与MySQL做数据交互
from django.shortcuts import render, HttpResponse, redirect
from app01 import models
# Create your views here.
# 用户列表
def userlist(request):
user_queryset = models.User.objects.all()
return render(request, 'userlist.html', locals())
# 注册页面
def register(request):
if request.method == "POST":
username = request.POST.get('username')
password = request.POST.get('password')
user_obj = models.User.objects.filter(username=username).first()
if user_obj:
return HttpResponse("用户已存在")
else:
user_obj = models.User(username=username, password=password)
user_obj.save() # 保存数据
return redirect('/userlist/')
return render(request, 'reg.html')
# 登录页面
def login(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
user_obj = models.User.objects.filter(username=username).first()
if user_obj:
if password == user_obj.password:
return redirect('/userlist/')
else:
return HttpResponse("密码错误")
else:
return HttpResponse("用户不存在")
return render(request, 'login.html')
# 修改密码页面
def edit_user(request):
edit_id = request.GET.get('user_id') # 获取url问号后面的参数
edit_obj = models.User.objects.filter(
id=edit_id).first() # 查询当前用户想要编辑的数据对象
if request.method == "POST":
username = request.POST.get('username')
password = request.POST.get('password')
models.User.objects.filter(id=edit_id).update(username=username,
password=password)
return redirect('/userlist/')
return render(request, 'edit_user.html', locals())
# 删除账号页面
def delete_user(request):
delete_id = request.GET.get('user_id') # 获取用户想要删除的数据id值
models.User.objects.filter(id=delete_id).delete() # 直接去数据库中找到对应的数据删除即可
return redirect('/userlist/')
6.templates文件夹的四个html页面
6.1 userlist.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/jQuery 3.6.0.js"></script>
</head>
<body>
<h1 class="text-center">数据展示</h1>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>username</th>
<th>password</th>
<th>action</th>
</tr>
</thead>
<tbody>
<!-- for循环数据库取值 -->
{% for user_obj in user_queryset %}
<tr>
<td>{{ user_obj.id }}</td>
<td>{{ user_obj.username }}</td>
<td>{{ user_obj.password }}</td>
<td>
<a href="/edit_user/?user_id={{ user_obj.id }}" class="btn btn-primary btn-xs">编辑</a>
<a href="/delete_user/?user_id={{ user_obj.id }}" class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
6.2 reg.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/jQuery 3.6.0.js"></script>
</head>
<body>
<h1 class="text-center">注册</h1>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="" method="post">
<p>username:<input type="text" name="username" class="form-control"></p>
<p>password:<input type="password" name="password" class="form-control"></p>
<input type="submit" class="btn btn-danger btn-block">
</form>
</div>
</div>
</div>
</body>
</html>
6.3 login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/jQuery 3.6.0.js"></script>
</head>
<body>
<h1 class="text-center">登陆</h1>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="" method="post">
<p>username:<input type="text" name="username" class="form-control"></p>
<p>password:<input type="password" name="password" class="form-control"></p>
<input type="submit" class="btn btn-success btn-block">
</form>
</div>
</div>
</div>
</body>
</html>
6.4 edit_user.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../static/css/bootstrap.min.css">
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/jQuery 3.6.0.js"></script>
</head>
<body>
<h1 class="text-center">编辑</h1>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<form action="" method="post">
<p>username:<input type="text" name="username" class="form-control" value="{{ edit_obj.username }}"></p>
<p>password:<input type="text" name="password" class="form-control" value="{{ edit_obj.password }}"></p>
<input type="submit" class="btn btn-info btn-block" value="编辑">
</form>
</div>
</div>
</div>
</body>
</html>
7.效果图
最后:此为wo在b站egon老师视频那跟学总结
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)