基于Django+MySQL的智慧校园系统

此项目基于Django + MySQL + HTML + CSS + JS + jQuery + bootstrap

实现的功能有

学生管理
部门管理
代办清单管理
校园论坛
校园医疗服务
校园看点
校园生活助手
常用功能入口

1. 一些注意点

1. 页面`body`会自动有一些边界距，处理方法：

<head>
	<style>
        body{			<---
            margin:0;	<---
        }				<---
    style>
head>

2. 当`html`中部分语句样式为`float`时，记得在最后一定清除

<body>
    <div class="header">

            <div class="menu">菜单div>
            <div class="account">账户div>
    
            <div style="clear: both">div>		<------- **

    div>
body>

3. 内容居中

区域居中

.c1{
	width: 200px;			# 注意，*这里宽度必须指定*
	margin: 0 auto;			# 上下边距为0，左右自动居中
}

文本居中

<div style="width: 2000px; text-align: center;">摩西摩西div>

4. 如果想用别人的样式

在这里插入图片描述

5. 块级和行内标签

块级
行内
css样式：标签 -> display:inline-block

示例：行内&块级特性

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        .c1{
            display: inline-block;

            height: 100px;
            width: 300px;
            border: 1px solid red;
        }
    style>
head>
<body>
    <span class="c1">中国span>

    <span class="c1">联通span>

    <span class="c1">联通span>

    <span class="c1">联通span>
body>
html>

示例：块级和行内标签的设置

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>

    style>
head>
<body>
    <div style="display: inline;">中国div>
    <span style="display: block;">联通span>
body>
html>

2.快速开发网站

pip install flask

from flask import Flask

app = Flask(__name__)


# 创建了网址 /show/info 和 函数index 的对应关系
# 以后用户在浏览器上访问 /show/info，网站自动执行 index
@app.route("/show/info")
def index():
    return "中国联通"


if __name__ == '__main__':
    app.run()

Flask框架为了让咱们写标签方便，支持将字符串写入到文件里。

  from flask import Flask,render_template
  
  app = Flask(__name__)
  
  @app.route("/show/info")
  def index():
      # Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
      # 默认：去当前项目目录的templates文件夹中找。
      return render_template("index.html")
  
  if __name__ == '__main__':
      app.run()

3.浏览器能识别的标签

2.1 编码（head）

<meta charset="UTF-8">

2.2 标题

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通title>
head>
<body>
    <h1>1级标题h1>
    <h2>2级标题h2>
    <h3>3级标题h3>
    <h4>4级标题h4>
    <h5>5级标题h5>
    <h6>6级标题h6>
body>
html>

2.3 div和span

<div>内容div>

<span>asdfaspan>

div，一个人占一整行。【块级标签】

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通title>
head>
<body>
    <div>山东蓝翔div>
    <div>挖掘机哪家强div>
body>
html>

span，自己多大占多少。【行内标签、内联标签】

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的联通title>
head>
<body>
    <span>山东蓝翔span>
    <span>挖掘机哪家强span>
body>
html>

2.4.5 超链接

跳转到其他网站
<a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转a>

跳转到自己网站其他的地址

<a href="http://127.0.0.1:5000/get/news">点击跳转a>
<a href="/get/news">点击跳转a>

# 当前页面打开
<a href="/get/news">点击跳转a>

# 新的Tab页面打开
<a href="/get/news" target="_blank">点击跳转a>

2.4.6 图片

<img src="图片地址" />

直接显示别人的图片地址（防盗链）：
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />

<img src="自己图片的地址" />
显示自己的图片：
	- 自己项目中创建：static目录，图片要放在static
	- 在页面上引入图片
	    <img src="/static/wbq.png" />

关于设置图片的高度和宽度

<img src="图片地址" style="height:100px; width:200px;" />
<img src="图片地址" style="height:10%; width:20%;" />

小结

学习的标签

<h1>h1>
<div>div>
<span>span>
<a>a>
<img />

划分

- 块级标签
	
	
- 行内标签

嵌套

<div>
    <span>xxxspan>
    <img />
    <a>a>
div>

2.4.7 列表

<ul>
    <li>中国移动li>
    <li>中国联通li>
    <li>中国电信li>
ul>

<ol>
    <li>中国移动li>
    <li>中国联通li>
    <li>中国电信li>
ol>

在这里插入图片描述

2.4.8 表格

<table>
    <thead>
    	<tr>  <th>IDth>  <th>姓名th>   <th>年龄th>  tr>
    thead>
    <tbody>
    	<tr>  <td>10td>  <td>武沛齐td>  <td>19td>   tr>
        <tr>  <td>11td>  <td>吴阳军td>  <td>19td>   tr>
        <tr>  <td>12td>  <td>刘东td>  <td>19td>    tr>
        <tr>  <td>13td>  <td>郭智td>  <td>19td>    tr>
        <tr>  <td>14td>  <td>电摩td>  <td>19td>    tr>
    tbody>
table>

2.4.9 input系列（7个）

<input type="text" />
<input type="password">    
<input type="file"> 

<input type="radio" name="n1">男
<input type="radio" name="n1">女

<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">乒乓球
<input type="checkbox">棒球

<input type="button" value="提交">  -->普通的按钮
<input type="submit" value="提交">  -->提交表单

2.4.10 下拉框

<select>
    <option>北京option>
    <option>上海option>
    <option>深圳option>
select>

<select multiple>
    <option>北京option>
    <option>上海option>
    <option>深圳option>
select>

2.4.11 多行文本

<textarea>textarea>

2.4.12网络请求

在浏览器的URL中写入地址，点击回车，访问。

浏览器会发送数据过去，本质上发送的是字符串：
"GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n"

浏览器会发送数据过去，本质上发送的是字符串：
"POST /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n数据库"

浏览器向后端发送请求时
- GET请求【URL方法 / 表单提交】
  - 现象：GET请求、跳转、向后台传入数据数据会拼接在URL上。
```
https://www.sogou.com/web?query=安卓&age=19&name=xx
```
    注意：GET请求数据会在URL中体现。
- POST请求【表单提交】
  - 现象：提交数据不在URL中而是在请求体中。

注意点：

.sub-header .logo a {
            margin-top: 22px;
            display: inline-block	
}


.sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;	
            color: #333;
            font-size: 16px;
            text-decoration: none;	
}


.sub-header .menu-list a:hover{		
            color: #ff6700;
}

a标签是行内标签，行内标签的高度、内外边距，默认无效。
垂直方向居中
- 本文 + line-height
- 图片 + 边距
a标签默认有下划线。 - - - > text-decoration: none
鼠标放上去之后hover
```
.c1:hover{
    ...
}
a:hover{
    
}
```

登录验证

加密

首先导入下方代码用md5实现加密

from django.conf import settings
import hashlib

def md5(data_string):
    obj = hashlib.md5(settings.SECRET_KEY.encode('utf-8'))
    obj.update(data_string.encode('utf-8'))
    return obj.hexdigest()

在这里插入图片描述

登录 and 确认登录

from django import forms
from app01.utils.bootstrap import BootStrapModelForm
class AdmiModelnForm(BootStrapModelForm):
    confirm_password = forms.CharField(
        label="确认密码",
        widget=forms.PasswordInput()
    )

    class Meta:
        model = models.Admin
        fields = ["username", 'password', 'confirm_password']
        widgets = {
            'password': forms.PasswordInput()
        }

    def clean_password(self):
        pwd = self.cleaned_data.get('password')
        return md5(pwd)

    def clean_confirm_password(self):
        pwd = self.cleaned_data.get('password')
        confirm = md5(self.cleaned_data.get('confirm_password'))
        if pwd != confirm:
            raise ValidationError("密码不一致，请重新输入")
        return confirm  # 这里返回要存入数据库的密码

def admin_add(request):
    title = "新建管理员"
    if request.method == 'GET':
        form = AdmiModelnForm()
        return render(request, 'change.html', {'form': form, "title": title})

    form = AdmiModelnForm(request.POST)
    if form.is_valid():
        form.save()
        return redirect('/admin/list/')

    return render(request, 'change.html', {'form': form, "title": title})

检验之前是否登录过：

登录成功后：

cookie，随机字符串
session，用户信息

在其他需要登录才能访问的页面中，都需要加入：

def index(request):
    info = request.session.get("info")
    if not info:
        return redirect('/login/')
    
    ...

目标：在18个视图函数前面统一加入判断。

info = request.session.get("info")
if not info:
    return redirect('/login/')

功能太多一个一个复制太繁琐，django自带封装的中间件可以用

图片验证码

效果如下：

在这里插入图片描述

逻辑如下：

import random
from PIL import Image, ImageDraw, ImageFont, ImageFilter


def check_code(width=120, height=30, char_length=5, font_file='Monaco.ttf', font_size=28):
    code = []
    img = Image.new(mode='RGB', size=(width, height), color=(255, 255, 255))
    draw = ImageDraw.Draw(img, mode='RGB')

    def rndChar():
        """
        生成随机字母
        :return:
        """
        # return str(random.randint(0, 9))
        return chr(random.randint(65, 90))


    def rndColor():
        """
        生成随机颜色
        :return:
        """
        return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))

    # 写文字
    font = ImageFont.truetype(font_file, font_size)
    for i in range(char_length):
        char = rndChar()
        code.append(char)
        h = random.randint(0, 4)
        draw.text([i * width / char_length, h], char, font=font, fill=rndColor())

    # 写干扰点
    for i in range(40):
        draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())

    # 写干扰圆圈
    for i in range(40):
        draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
        x = random.randint(0, width)
        y = random.randint(0, height)
        draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())

    # 画干扰线
    for i in range(5):
        x1 = random.randint(0, width)
        y1 = random.randint(0, height)
        x2 = random.randint(0, width)
        y2 = random.randint(0, height)

        draw.line((x1, y1, x2, y2), fill=rndColor())

    img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)
    return img, ''.join(code)

定义调用函数

def image_code(request):
    """生成图片验证码"""
    # 调用pillow 函数， 生成图片
    img, code_str = check_code()
    print(code_str)
    # 写入到session中，以便于或许获取再次验证
    request.session['image_code'] = code_str
    # 给session设置60s超时
    request.session.set_expiry(60)
    
    stream = BytesIO()
    img.save(stream, 'png')
    return HttpResponse(stream.getvalue())

连着两天几乎一动不动的在电脑旁做系统，emm………

在这里插入图片描述

在这里插入图片描述
想要源码可以关注下等待后续…

相关阅读:
HTML开篇之安装VSvode(用记事本编辑HTML)
Nginx 平滑升级方案 1.21.0升级至1.23.2
Maven安装配置
 HarmonyOS/OpenHarmony应用开发-DevEco Studio新建项目的整体说明
 卷积神经网络（CNN）：基于PyTorch的遥感影像、无人机影像的地物分类、目标检测、语义分割和点云分类
 Spring的后处理器
 外包干了3个月，技术倒退1年。。。
南卡和益博思哪个电容笔比较好？国产电容笔全方位对比
 一文学会设计模式
 SLAM学习——开启cmake的第一个项目
原文地址：https://blog.csdn.net/m0_72256122/article/details/139485594

基于Django+MySQL的智慧校园系统

实现的功能有

1. 一些注意点

1. 页面body会自动有一些边界距，处理方法：

2. 当html中部分语句样式为float时，记得在最后一定清除

3. 内容居中

4. 如果想用别人的样式

5. 块级和行内标签

2.快速开发网站

3.浏览器能识别的标签

2.1 编码（head）

2.2 标题

2.3 div和span

2.4.5 超链接

2.4.6 图片

小结

2.4.7 列表

2.4.8 表格

2.4.9 input系列（7个）

2.4.10 下拉框

2.4.11 多行文本

2.4.12网络请求

注意点：

登录验证

加密

登录 and 确认登录

检验之前是否登录过：

图片验证码

逻辑如下：

定义调用函数

连着两天几乎一动不动的在电脑旁做系统，emm………

1. 页面`body`会自动有一些边界距，处理方法：

2. 当`html`中部分语句样式为`float`时，记得在最后一定清除