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

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

实现的功能有

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

1. 一些注意点

1. 页面body会自动有一些边界距,处理方法:
html 复制代码
<head>
	<style>
        body{			<---
            margin:0;	<---
        }				<---
    </style>
</head>       
2. 当html中部分语句样式为float时,记得在最后一定清除
html 复制代码
<body>
    <div class="header">

            <div class="menu">菜单</div>
            <div class="account">账户</div>
    <!--有浮动一定记得最后的清除 -->
            <div style="clear: both"></div>		<------- **

    </div>
</body>
3. 内容居中
  • 区域居中
html 复制代码
.c1{
	width: 200px;			# 注意,*这里宽度必须指定*
	margin: 0 auto;			# 上下边距为0,左右自动居中
}
  • 文本居中
html 复制代码
<div style="width: 2000px; text-align: center;">摩西摩西</div>
4. 如果想用别人的样式
5. 块级和行内标签
  • 块级
  • 行内
  • css样式:标签 -> display:inline-block

示例:行内&块级特性

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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>

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

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <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框架为了让咱们写标签方便,支持将字符串写入到文件里。

python 复制代码
  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)

html 复制代码
<meta charset="UTF-8">

2.2 标题

html 复制代码
<!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

html 复制代码
<div>内容</div>

<span>asdfa</span>
  • div,一个人占一整行。【块级标签】

    html 复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>我的联通</title>
    </head>
    <body>
        <div>山东蓝翔</div>
        <div>挖掘机哪家强</div>
    </body>
    </html>
  • span,自己多大占多少。【行内标签、内联标签】

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

    2.4.5 超链接

    html 复制代码
    跳转到其他网站
    <a href="http://www.chinaunicom.com.cn/about/about.html">点击跳转</a>
    html 复制代码
    跳转到自己网站其他的地址
    
    <a href="http://127.0.0.1:5000/get/news">点击跳转</a>
    <a href="/get/news">点击跳转</a>
    html 复制代码
    # 当前页面打开
    <a href="/get/news">点击跳转</a>
    
    # 新的Tab页面打开
    <a href="/get/news" target="_blank">点击跳转</a>

    2.4.6 图片

    html 复制代码
    <img src="图片地址" />
    html 复制代码
    直接显示别人的图片地址(防盗链):
    <img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />
    html 复制代码
    <img src="自己图片的地址" />
    显示自己的图片:
    	- 自己项目中创建:static目录,图片要放在static
    	- 在页面上引入图片
    	    <img src="/static/wbq.png" />

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

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

    小结

    • 学习的标签

      html 复制代码
      <h1></h1>
      <div></div>
      <span></span>
      <a></a>
      <img />
    • 划分

      - 块级标签
      	<h1></h1>
      	<div></div>
      - 行内标签
      	<span></span>
          <a></a>
          <img />
      
    • 嵌套

      html 复制代码
      <div>
          <span>xxx</span>
          <img />
          <a></a>
      </div>

2.4.7 列表

html 复制代码
<ul>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ul>
html 复制代码
<ol>
    <li>中国移动</li>
    <li>中国联通</li>
    <li>中国电信</li>
</ol>

2.4.8 表格

html 复制代码
<table>
    <thead>
    	<tr>  <th>ID</th>  <th>姓名</th>   <th>年龄</th>  </tr>
    </thead>
    <tbody>
    	<tr>  <td>10</td>  <td>武沛齐</td>  <td>19</td>   </tr>
        <tr>  <td>11</td>  <td>吴阳军</td>  <td>19</td>   </tr>
        <tr>  <td>12</td>  <td>刘东</td>  <td>19</td>    </tr>
        <tr>  <td>13</td>  <td>郭智</td>  <td>19</td>    </tr>
        <tr>  <td>14</td>  <td>电摩</td>  <td>19</td>    </tr>
    </tbody>
</table>

2.4.9 input系列(7个)

html 复制代码
<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 下拉框

html 复制代码
<select>
    <option>北京</option>
    <option>上海</option>
    <option>深圳</option>
</select>

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

2.4.11 多行文本

html 复制代码
<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中而是在请求体中。

注意点:

html 复制代码
.sub-header .logo a {
            margin-top: 22px;
            display: inline-block	<!-- 块级标签, a默认为行内标签,无法实现一行浮动 -->
}


.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

    css 复制代码
    .c1:hover{
        ...
    }
    a:hover{
        
    }

登录验证

加密

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

python 复制代码
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 确认登录

python 复制代码
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,用户信息

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

python 复制代码
def index(request):
    info = request.session.get("info")
    if not info:
        return redirect('/login/')
    
    ...

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

python 复制代码
info = request.session.get("info")
if not info:
    return redirect('/login/')

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

图片验证码

效果如下:

逻辑如下:
python 复制代码
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)
定义调用函数
python 复制代码
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.........

想要源码可以关注下等待后续...

相关推荐
斯凯利.瑞恩7 分钟前
Python决策树、随机森林、朴素贝叶斯、KNN(K-最近邻居)分类分析银行拉新活动挖掘潜在贷款客户附数据代码
python·决策树·随机森林
yannan2019031328 分钟前
【算法】(Python)动态规划
python·算法·动态规划
竹笋常青35 分钟前
《流星落凡尘》
django·numpy
蒙娜丽宁38 分钟前
《Python OpenCV从菜鸟到高手》——零基础进阶,开启图像处理与计算机视觉的大门!
python·opencv·计算机视觉
光芒再现dev40 分钟前
已解决,部署GPTSoVITS报错‘AsyncRequest‘ object has no attribute ‘_json_response_data‘
运维·python·gpt·语言模型·自然语言处理
极客小张1 小时前
基于STM32的智能充电桩:集成RTOS、MQTT与SQLite的先进管理系统设计思路
stm32·单片机·嵌入式硬件·mqtt·sqlite·毕业设计·智能充电桩
好喜欢吃红柚子1 小时前
万字长文解读空间、通道注意力机制机制和超详细代码逐行分析(SE,CBAM,SGE,CA,ECA,TA)
人工智能·pytorch·python·计算机视觉·cnn
小馒头学python1 小时前
机器学习是什么?AIGC又是什么?机器学习与AIGC未来科技的双引擎
人工智能·python·机器学习
神奇夜光杯1 小时前
Python酷库之旅-第三方库Pandas(202)
开发语言·人工智能·python·excel·pandas·标准库及第三方库·学习与成长
千天夜1 小时前
使用UDP协议传输视频流!(分片、缓存)
python·网络协议·udp·视频流