相关配置代码如下： 1.models.py
from django.db import models
# Create your models here.
GENDER = {
('male', '男'),
('female', '女'),
}
class User(models.Model):
username=models.CharField(max_length=32,null=False)
password=models.CharField(max_length=32,null=False)
email = models.EmailField(null=True)
name = models.CharField(max_length=20, null=True)
tel = models.CharField(max_length=20, null=True)
gender = models.CharField(max_length=20, choices=GENDER)
birthday = models.DateTimeField(null=True)
2.settings 数据库、static改动
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "/cdnpanel/static"),
)
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'django',
'USER': 'root',
'HOST': 'localhost',
'PORT': '3306',
'PASSWORD': '123456',
}
}
3.views服务端主程序
from django.core.exceptions import ValidationError
from django.db import IntegrityError
from django.shortcuts import redirect, render, HttpResponse
from cdnpanel.models import User,Domain
import json
def login(request):
return render(request, "login.html")
def register(request):
if request.method == "POST":
ajax_rsp = {"status": "ok", "msg": None}
try:
if request.is_ajax():
username= request.POST.get('username')
password= request.POST.get('password')
name= request.POST.get('name')
email= request.POST.get('email')
tel= request.POST.get('tel')
gender= request.POST.get('gender')
birthday= request.POST.get('birthday')
if User.objects.filter(username=username).exists():
ajax_rsp["status"]="err"
ajax_rsp["msg"]="用户已存在"
else:
User.objects.create(
username=username,
password=password,
email=email,
name=name,
tel=tel,
gender=gender,
birthday=birthday,
)
except IntegrityError:
ajax_rsp["status"] = "err"
ajax_rsp['msg']="性别为必选项"
except ValidationError:
ajax_rsp["status"] = "err"
ajax_rsp['msg']="日期为必选项"
return HttpResponse(json.dumps(ajax_rsp))
else:
return render(request, "register.html")
4.客户端register页面及其样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册页面</title>
<!-- 引入格式文件-->
<link rel="stylesheet" href="/static/css/register.css">
<style>
.err{
color: red;
}
</style>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<form action="/register" method="post">
{% csrf_token %}
<table>
<tr><!--label 标签的作用是当点击文字也会跳到文本输出框-->
<!--for属性与ID属性对应规定 label 绑定到哪个表单元素。-->
<td class="td_left"><label for="username">用户名</label> </td>
<td class="td_right"><input type="text" name="username" id="username">
<span class="user_err err"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label> </td>
<td class="td_right"><input type="password" name="password" id="password"> </td>
</tr>
<tr><!--label 标签的作用是当点击文字也会跳到文本输出框-->
<td class="td_left"><label for="email">email</label> </td>
<td class="td_right"><input type="email" name="email" id="email"> </td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label> </td>
<td class="td_right"><input type="text" name="name" id="name"> </td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label> </td>
<td class="td_right"><input type="text" name="tel" id="tel"> </td>
</tr>
<tr>
<td class="td_left">性别</td>
<td class="td_right">
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="famale">女
<span class="gender_err err"></span>
{# 加个span标签显示错误信息，默认为空值，err样式赋予红色字体 #}
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label> </td>
<td class="td_right"><input type="date" name="birthday" id="birthday">
<span class="birthday_err err"></span>
</td>
</tr>
<tr>
{# <td class="td_left"><label for="checkcode">验证码</label> </td>#}
{# <td class="td_right">#}
{# <input type="text" name="username1" id="checkcode">#}
{# <img src="image/verify_code.jpg" id="img_check">#}
{# </td>#}
</tr>
<tr>
<td colspan="2" align="center" >
<div id="btn_sub" >注册</div>
{# <input type="submit" value="注册" id="btn_sub">#}
</td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号？<a href="/login">立即登录</a></p>
</div>
</div>
</body>
<script src="/static/js/jquery-3.5.1.min.js"> </script>
<script>
$("#btn_sub").click(function (){
var data={}
data['username']=$("#username").val()
data['password']=$("#password").val()
data['email']=$('#email').val()
data['birthday']=$('#birthday').val()
data['name']=$('#name').val()
data['tel']=$('#tel').val()
data['gender']=$('input:radio[name="gender"]:checked').val();
$.ajax({
data:data,
dataType:"json",
"type":"POST",
"url":'/register',
"success":function (arg){
if(arg.status=="ok"){
window.location.replace("/login")
}else if(arg.msg=="用户已存在"){
$(".user_err").text(arg.msg)
}else if(arg.msg=="性别为必选项"){
$(".gender_err").text(arg.msg)
}else if(arg.msg=="日期为必选项"){
$(".birthday_err").text(arg.msg)
}
}
})
})
</script>
</html>
register.css
*{
margin: 0px;/*所有的外边距为0*/
padding: 0px;/*所有的内边距为0*/
box-sizing: border-box;/*规定两个并排的带边框的框*/
}
body{
background: url("image/register_bg.png")no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;/*solid 定义实线*/
background-color: white;
margin: auto;
}
.rg_left{
float: left;
margin: 15px;
}
.rg_left>p:first-child{
color: #FFD026;
font-size: 20px;
}
.rg_left>p:last-child{
color: #A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
}
.rg_right{
float: right;
margin: 15px;
padding-left: 50px;
}
.rg_right p{
font-size: 15px;
}
.rg_right p a{
color: coral;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;/*设置图片的位置垂直居中*/
}
#btn_sub{
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026;
padding-left: 10px;
}
<1>.ajax的作用 我们知道我们每次对服务器发送请求，服务器处理后都会发给我们一个页面，但是有时候我们两次发送请求的应该得到的页面是大同小异的，比如后台管理的时候增加一条数据，我只需要在页面上显示这条数据即可，其他关于页面的排版之类的是不需要动的，这个时候，重新接收一个页面显然是没必要的，于是ajax就出现了。 ajax就是当你做了某个动作（比如鼠标移动到某个位置）后，偷偷地往后台发送数据，然后取得数据后偷偷地在前端处理并显示，所以不难想象ajax是包含在事件处理函数中，需要数据（data），提交的地方（url），收到响应后的处理函数等参数，格式如下：
funtion(){ $.ajax({ data:{"a":1}, dataType:"json", //当服务端返回json字符串，自动把接收的arg转为json对象，不加此句，则需obj=json.parse(arg) "type":"POST", "url":'/register', "success":function (arg){ } }) } success代表处理成功函数，同理还有其他的函数 type表示请求方法
要点： <1>submit按钮要换成<div>标签并绑定事件（submit提交会刷新页面） <2>为了提示错误信息，要在页面安插位置（我这里直接设一个空的span并赋予class方便查找设样式，ajax收到服务器错误信息直接赋值即可） <3>服务器返回有两种状态，还要保存信息，所以必然要返回两个字段（这里我用字典ajax_rsp赋值保存）
debug:
jQuery 取选中的radio的值方法$('input:radio[name="gender"]:checked').val();
2.ajax 用get请求可以匹配url，post报错 “django.urls.exceptions.NoReverseMatch: Reverse for '<WSGIRequest: POST '/login'>' not found. '<WSGIRequest: POST '/login'>' is not a valid view function or pattern name.”
在url.py中排除半天，最后发现是views.register里面引用 redirect方法有误 错误：redirect(request,'login') 正确：redirect('/login') 可见，出现路径匹配错误是也要看看重定向等方法是否有误
3.ajax data变量有值，但是post数据为空 查了半天，后面发现是因为定义变量时用了[],应该用{}表字典 错误： var data=[] 正确： var data={}
补充：登录时的认证检查与js跳转post传递参数 代码如下： login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<link href="static/css/login.css" rel="stylesheet">
<style>
.err{
color: red;
font-size: 1%;
}
</style>
<body>
<div class="main">
<div class="title">
<span>密码登录</span>
</div>
<div class="title-msg">
<span>请输入登录账户和密码</span>
</div>
<form class="login-form" method="post" novalidate >
<!--输入框-->
<div class="input-content">
<!--autoFocus-->
<div class="user_err err"></div>
<div>
<input type="text" autocomplete="off"
placeholder="用户名" name="username" required/>
</div>
<div class="pwd_err err"></div>
<div style="margin-top: 16px">
<input type="password"
autocomplete="off" placeholder="登录密码" name="password" required maxlength="32"/>
</div>
</div>
<!--登入按钮-->
<div style="text-align: center">
{# <button type="submit" class="enter-btn" >登录</button>#}
<div class="enter-btn">登录</div>
</div>
<div class="foor">
<div class="left"><span>忘记密码 ?</span></div>
<div class="right"><a href="register"><span>注册账户</span></a></div>
</div>
{% csrf_token %}
</form>
</div>
</body>
<script src="/static/js/jquery-3.5.1.min.js"> </script>
<script>
function post(URL, PARAMS) {
var temp = document.createElement("form");
temp.action = URL;
temp.method = "post";
temp.style.display = "none";
for (var x in PARAMS) {
var opt = document.createElement("input");
opt.name = x;
opt.value = PARAMS[x];
temp.appendChild(opt);
}
document.body.appendChild(temp);
temp.submit();
return temp;
}
$(".enter-btn").click(function (){
var data=$("form").serialize() //序列化取得表单数据
$.ajax({
url:/login/,
data:data,
type:"POST",
dataType:"json",
success(arg){
if(arg.status=="err"){
console.log(arg)
if(arg.msg=="用户不存在"){
$(".user_err").text(arg.msg)
}
if(arg.msg=="密码错误")
$(".pwd_err").text(arg.msg)
}else {
postdata= "{\"" +data.replace(RegExp("=","g"),"\":\"").replace(RegExp("&",'g'),"\",\"")+ "\"}";
data=JSON.parse(postdata)
post('/index',data)
}
}
})
})
</script>
</html>
login.css
body{
background: #353f42;
}
*{
padding: 0;
margin: 0;
}
.main {
margin: 0 auto;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
width: 350px;
height: 350px;
background: #FFFFFF;
/*以下css用于让登录表单垂直居中在界面,可删除*/
position: absolute;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -175px;
}
.title {
width: 100%;
height: 40px;
line-height: 40px;
}
.title span {
font-size: 18px;
color: #353f42;
}
.title-msg {
width: 100%;
height: 64px;
line-height: 64px;
}
.title:hover{
cursor: default ;
}
.title-msg:hover{
cursor: default ;
}
.title-msg span {
font-size: 12px;
color: #707472;
}
.input-content {
width: 100%;
height: 120px;
}
.input-content input {
width: 330px;
height: 40px;
border: 1px solid #dad9d6;
background: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.enter-btn {
width: 350px;
height: 40px;
color: #fff;
background: #0bc5de;
line-height: 40px;
text-align: center;
border: 0px;
}
.foor{
width: 100%;
height: auto;
color: #9b9c98;
font-size: 12px;
margin-top: 20px;
}
.enter-btn:hover {
cursor:pointer;
background: #1db5c9;
}
.foor div:hover {
cursor:pointer;
color: #484847;
font-weight: 600;
}
.left{
float: left;
}
.right{
float: right;
}
view login处理部分
def login(request):
if request.method == "POST":
ajax_rep={"status":"err","msg":None}
user=request.POST.get('username')
pwd=request.POST.get('password')
if not User.objects.filter(username=user).exists():
ajax_rep['msg']="用户不存在"
elif not User.objects.filter(username=user,password=pwd).exists():
ajax_rep['msg']="密码错误"
else:
ajax_rep['status']='ok'
return HttpResponse(json.dumps(ajax_rep))
return render(request, "login.html")
登录多了个跳转传递参数的过程
debug：
1.登录完后用post 方式跳转
(程序摘抄自：https://HdhCmsTestcnblogs测试数据/xuejianbest/p/10284970.html)
function post(URL, PARAMS) {
var temp = document.createElement("form");
temp.action = URL;
temp.method = "post";
temp.style.display = "none";
for (var x in PARAMS) {
var opt = document.createElement("textarea");
opt.name = x;
opt.value = PARAMS[x];
temp.appendChild(opt);
}
document.body.appendChild(temp);
temp.submit();
return temp;
}
原理：
<1>生成form表单，对其action进行复制
<2>循环对PARAMS里面的参数，生成textarea标签并赋值
<3>利用submit方法进行提交
格式：post('pages/statisticsJsp/excel.action', {html :prnhtml,cm1:'sdsddsd',cm2:'haha'});
2.javascrip键值对字符串转化为字典
源字符串：
data=”username=linzb&password=123456&csrfmiddlewaretoken=GlBBlXJycO3yRKMP2fwJCM7OgkTikftqjTCg5PlRMpcbRwddDfUAYNDCKpDHaqyp“
处理：
postdata= "{" +data.replace(RegExp("=","g"),"\":\"").replace(RegExp("&",'g'),"\",\"")+ "\"}";
RegExp里面的=表示要替换掉=，g表示全局替换，不用这个只会替换第一个匹配到的字符串
要引用1的函数，还需要：data=JSON.parse(postdata)
3.关键部分：
postdata= "{\"" +data.replace(RegExp("=","g"),"\":\"").replace(RegExp("&",'g'),"\",\"")+ "\"}";
data=JSON.parse(postdata)
post('/index',data)
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did126573