django初识(以django4.2.11为例)
创建一个django项目
进入想要创建项目的空文件夹,打开终端,输入一下指令.
django-admin startproject 项目名称项目自动生成文件,简单介绍,如下图(该图来源于武沛齐老师课程):
创建app
这里说的"app"不是"手机app", 而是一个大项目中, 为每一个相对独立的功能创建一个app, 比如一个外卖系统,可以有多个app: 订单管理app, 用户管理app, 后台管理app等.
python manage.py startapp app名字app文件简介如下图 (改图来源于武沛齐老师课程):
设置url路径
django的url路径, 不是像flask, 通过注解去实现的, 而是在urls.py中去配置的
格式为urlname/, 但是默认的路径http://127.0.0.1:8000/对应path("",views.home)而不是path("/",views.home), 如下图
其中对应的函数为, views.py的函数
比如path("/login",views.login)对应views.py中的login函数,如下图:
html和flask差不多
注意,表单项必须加{% csrf_token %},必须加,用于校验,防止跨站攻击
<!--该界面由bootstrap3.4的css样式的表单为主体修改而来-->
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的登录页面</title>
<!--flask项目中引入的css文件的(flask项目的css文件的路径为在static目录下)-->
<link rel="stylesheet"
href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
<style>
.account{
/*宽度和高度*/
width: 500px;
/*边框*/
border: 1px solid rgb(102, 97, 97);
/*左右居中*/
margin-left: auto;
margin-right: auto;
/*上边距*/
margin-top: 100px;
/*内边距*/
padding: 20px 40px;
/*阴影 水平方向 垂直方向 模糊距离*/
box-shadow: 5px 5px 5px rgba(88, 88, 88, 0.5);
}
.account h3{
/*文本居中*/
text-align: center;
/*加粗*/
font-weight: bold;
}
#error{
color: red;
margin: 10px
}
#great{
color: rgb(0, 255, 0);
margin: 10px
}
</style>
</head>
<body>
<div class="account">
<!--form表单-->
<form action="/login/" method="post" onsubmit="return validateForm2()">
{% csrf_token %}<!--用于校验,防止跨站攻击,必须加-->
<h3>用户登录</h3>
<!-- 用户名输入框 -->
<div class="form-group">
<label>用户名</label>
<input class="form-control" id="Username"
placeholder="请输入用户名/手机号" name="username">
</div>
<!-- 密码输入框 -->
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control"
id="Password" placeholder="请输入密码"
name="password">
</div>
<!-- 协议及同意复选框 -->
<div class="checkbox">
<a href="/用户协议/">《某某协议》</a>
<label>
<input type="checkbox" name="agree" id="agreementCheckbox">我已详细阅读此协议
</label>
</div>
<div id="error">{{msg}}</div>
<div id="great">{{msg2}}</div>
<!-- 提交按钮 -->
<button type="submit" class="btn btn-primary">登 录</button>
</form>
<!--注册页面-->
<a href="/register/">去注册</a>
</div>
<script>
function validateForm2() {
// 验证用户名和密码是否为空
var username = document.getElementById("Username").value;
var password = document.getElementById("Password").value;
var error = document.getElementById("error");
if (!username || !password) {
error.innerHTML = "用户名和密码不能为空";
return false;
}
// 验证是否同意协议
var agreeCheckbox = document.getElementById("agreementCheckbox");
if (!agreeCheckbox.checked) {//没有勾选"我已详细阅读此协议"
error.innerHTML = '请先同意用户协议';
return false;
}
// 通过所有验证，允许提交表单
return true;
}
function validateForm() {
// 验证用户名和密码是否为空
var username = document.getElementById("Username").value;
var password = document.getElementById("Password").value;
if (!username || !password) {
alert('用户名和密码不能为空');
return false;
}
// 验证是否同意协议
var agreeCheckbox = document.getElementById("agreementCheckbox");
if (!agreeCheckbox.checked) {//没有勾选"我已详细阅读此协议"
alert('请先同意用户协议');
return false;
}
// 通过所有验证，允许提交表单
return true;
}
</script>
</body>
</html>
