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

石小疯  金牌会员 | 2024-6-9 15:41:25 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 649|帖子 649|积分 1947

  1. 此项目基于Django + MySQL + HTML + CSS + JS + jQuery + bootstrap
复制代码
实现的功能有



  • 学生管理
  • 部门管理
  • 代庖清单管理
  • 校园论坛
  • 校园医疗服务
  • 校园看点
  • 校园生活助手
  • 常用功能入口
1. 一些注意点

1. 页面body会自动有一些界限距，处置惩罚方法：

  1. <head>
  2.         <style>
  3.         body{                        <---
  4.             margin:0;        <---
  5.         }                                <---
  6.     </style>
  7. </head>      
复制代码
2. 当html中部门语句样式为float时，记得在最后一定扫除

  1. <body>
  2.     <div class="header">
  4.             <div class="menu">菜单</div>
  5.             <div class="account">账户</div>
  6.     <!--有浮动一定记得最后的清除 -->
  7.             <div style="clear: both"></div>                <------- **
  9.     </div>
  10. </body>
复制代码
3. 内容居中



  • 区域居中
  1. .c1{
  2.         width: 200px;                        # 注意，*这里宽度必须指定*
  3.         margin: 0 auto;                        # 上下边距为0，左右自动居中
  4. }
复制代码


  • 文本居中
  1. <div style="width: 2000px; text-align: center;">摩西摩西</div>
复制代码
4. 如果想用别人的样式


5. 块级和行内标签



  • 块级
  • 行内
  • css样式：标签 -> display:inline-block
示例：行内&块级特性
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .c1{
  8.             display: inline-block;
  10.             height: 100px;
  11.             width: 300px;
  12.             border: 1px solid red;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <span class="c1">中国</span>
  19.     <span class="c1">联通</span>
  21.     <span class="c1">联通</span>
  23.     <span class="c1">联通</span>
  24. </body>
  25. </html>
复制代码
示例：块级和行内标签的设置
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  8.     </style>
  9. </head>
  10. <body>
  11.     <div style="display: inline;">中国</div>
  12.     <span style="display: block;">联通</span>
  13. </body>
  14. </html>
复制代码
2.快速开发网站

  1. pip install flask
复制代码
  1. from flask import Flask
  3. app = Flask(__name__)
  6. # 创建了网址 /show/info 和 函数index 的对应关系
  7. # 以后用户在浏览器上访问 /show/info，网站自动执行 index
  8. @app.route("/show/info")
  9. def index():
  10.     return "中国联通"
  13. if __name__ == '__main__':
  14.     app.run()
复制代码


  • Flask框架为了让咱们写标签方便，支持将字符串写入到文件里。
    1.   from flask import Flask,render_template
    2.   
    3.   app = Flask(__name__)
    4.   
    5.   @app.route("/show/info")
    6.   def index():
    7.       # Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。
    8.       # 默认：去当前项目目录的templates文件夹中找。
    9.       return render_template("index.html")
    10.   
    11.   if __name__ == '__main__':
    12.       app.run()
    复制代码
3.欣赏器能识别的标签

2.1 编码（head）

  1. <meta charset="UTF-8">
复制代码
2.2 标题

  1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">
  2.     <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

  1. <div>内容</div>
  3. <span>asdfa</span>
复制代码


  • div，一个人占一整行。【块级标签】
    1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">
    2.     <title>我的联通</title></head><body>    <div>山东蓝翔</div>    <div>发掘机哪家强</div></body></html>
    复制代码
  • span，自己多大占多少。【行内标签、内联标签】
    1. <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">
    2.     <title>我的联通</title></head><body>    <span>山东蓝翔</span>    <span>发掘机哪家强</span></body></html>
    复制代码
    2.4.5 超链接

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

    1. <img src="图片地址" />
    复制代码
    1. 直接显示别人的图片地址（防盗链）：
    2. <img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />
    复制代码
    1. <img src="自己图片的地址" />
    2. 显示自己的图片：
    3.         - 自己项目中创建：static目录，图片要放在static
    4.         - 在页面上引入图片
    5.             <img src="/static/wbq.png" />
    复制代码
    关于设置图片的高度和宽度
    1. <img src="图片地址" style="height:100px; width:200px;" />
    2. <img src="图片地址" style="height:10%; width:20%;" />
    复制代码
    小结

    • 学习的标签
      1. <h1></h1>
      2. <div></div>
      3. <span></span>
      4. <a></a>
      5. <img />
      复制代码
    • 划分
      1. - 块级标签
      2.         <h1></h1>
      3.         <div></div>
      4. - 行内标签
      5.         <span></span>
      6.     <a></a>
      7.     <img />
      复制代码
    • 嵌套
      1. <div>
      2.     <span>xxx</span>
      3.     <img />
      4.     <a></a>
      5. </div>
      复制代码

2.4.7 列表

  1. <ul>
  2.     <li>中国移动</li>
  3.     <li>中国联通</li>
  4.     <li>中国电信</li>
  5. </ul>
复制代码
  1. <ol>
  2.     <li>中国移动</li>
  3.     <li>中国联通</li>
  4.     <li>中国电信</li>
  5. </ol>
复制代码

2.4.8 表格

  1. <table>
  2.     <thead>
  3.             <tr>  <th>ID</th>  <th>姓名</th>   <th>年龄</th>  </tr>
  4.     </thead>
  5.     <tbody>
  6.             <tr>  <td>10</td>  <td>武沛齐</td>  <td>19</td>   </tr>
  7.         <tr>  <td>11</td>  <td>吴阳军</td>  <td>19</td>   </tr>
  8.         <tr>  <td>12</td>  <td>刘东</td>  <td>19</td>    </tr>
  9.         <tr>  <td>13</td>  <td>郭智</td>  <td>19</td>    </tr>
  10.         <tr>  <td>14</td>  <td>电摩</td>  <td>19</td>    </tr>
  11.     </tbody>
  12. </table>
复制代码
2.4.9 input系列（7个）

  1. <input type="text" />
  2. <input type="password">   
  3. <input type="file">
  5. <input type="radio" name="n1">男
  6. <input type="radio" name="n1">女
  8. <input type="checkbox">篮球
  9. <input type="checkbox">足球
  10. <input type="checkbox">乒乓球
  11. <input type="checkbox">棒球
  13. <input type="button" value="提交">  -->普通的按钮
  14. <input type="submit" value="提交">  -->提交表单
复制代码
2.4.10 下拉框

  1. <select>
  2.     <option>北京</option>
  3.     <option>上海</option>
  4.     <option>深圳</option>
  5. </select>
  7. <select multiple>
  8.     <option>北京</option>
  9.     <option>上海</option>
  10.     <option>深圳</option>
  11. </select>
复制代码
2.4.11 多行文本

  1. <textarea></textarea>
复制代码
2.4.12网络哀求



  • 在欣赏器的URL中写入地址，点击回车，访问。
    1. 浏览器会发送数据过去，本质上发送的是字符串：
    2. "GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n"
    4. 浏览器会发送数据过去，本质上发送的是字符串：
    5. "POST /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n数据库"
    复制代码
  • 欣赏器向后端发送哀求时

    • GET哀求【URL方法 / 表单提交】

      • 现象：GET哀求、跳转、向后台传入数据数据会拼接在URL上。
        1. https://www.sogou.com/web?query=安卓&age=19&name=xx
        复制代码
        注意：GET哀求数据会在URL中体现。

    • POST哀求【表单提交】

      • 现象：提交数据不在URL中而是在哀求体中。


注意点：

  1. .sub-header .logo a {
  2.             margin-top: 22px;
  3.             display: inline-block        <!-- 块级标签， a默认为行内标签，无法实现一行浮动 -->
  4. }
  7. .sub-header .menu-list a{
  8.             display: inline-block;
  9.             padding: 0 10px;        <!-- 填补下内边距，使得鼠标在链接对应字体外一定距离也能点击跳转 -->
  10.             color: #333;
  11.             font-size: 16px;
  12.             text-decoration: none;        <!-- 取消链接下默认的下划线 -->
  13. }
  16. .sub-header .menu-list a:hover{                <!--- 鼠标移动到链接对应入口处变色 --->
  17.             color: #ff6700;
  18. }
复制代码


  • a标签是行内标签，行内标签的高度、内外边距，默认无效。
  • 垂直方向居中

    • 本文 + line-height
    • 图片 + 边距

  • a标签默认有下划线。 - - - > text-decoration: none
  • 鼠标放上去之后hover
    1. .c1:hover{
    2.     ...
    3. }
    4. a:hover{
    5.    
    6. }
    复制代码
登录验证

加密

首先导入下方代码用md5实现加密
  1. from django.conf import settings
  2. import hashlib
  4. def md5(data_string):
  5.     obj = hashlib.md5(settings.SECRET_KEY.encode('utf-8'))
  6.     obj.update(data_string.encode('utf-8'))
  7.     return obj.hexdigest()
复制代码

登录 and 确认登录

  1. from django import forms
  2. from app01.utils.bootstrap import BootStrapModelForm
  3. class AdmiModelnForm(BootStrapModelForm):
  4.     confirm_password = forms.CharField(
  5.         label="确认密码",
  6.         widget=forms.PasswordInput()
  7.     )
  9.     class Meta:
  10.         model = models.Admin
  11.         fields = ["username", 'password', 'confirm_password']
  12.         widgets = {
  13.             'password': forms.PasswordInput()
  14.         }
  16.     def clean_password(self):
  17.         pwd = self.cleaned_data.get('password')
  18.         return md5(pwd)
  20.     def clean_confirm_password(self):
  21.         pwd = self.cleaned_data.get('password')
  22.         confirm = md5(self.cleaned_data.get('confirm_password'))
  23.         if pwd != confirm:
  24.             raise ValidationError("密码不一致，请重新输入")
  25.         return confirm  # 这里返回要存入数据库的密码
  27. def admin_add(request):
  28.     title = "新建管理员"
  29.     if request.method == 'GET':
  30.         form = AdmiModelnForm()
  31.         return render(request, 'change.html', {'form': form, "title": title})
  33.     form = AdmiModelnForm(request.POST)
  34.     if form.is_valid():
  35.         form.save()
  36.         return redirect('/admin/list/')
  38.     return render(request, 'change.html', {'form': form, "title": title})
复制代码
检验之前是否登录过：

登录乐成后：


  • cookie，随机字符串
  • session，用户信息
在其他需要登录才能访问的页面中，都需要加入：
  1. def index(request):
  2.     info = request.session.get("info")
  3.     if not info:
  4.         return redirect('/login/')
  5.    
  6.     ...
复制代码
目的：在18个视图函数前面统一加入判断。
  1. info = request.session.get("info")
  2. if not info:
  3.     return redirect('/login/')
复制代码
功能太多一个一个复制太繁琐，django自带封装的中间件可以用
图片验证码

结果如下：

逻辑如下：

  1. import random
  2. from PIL import Image, ImageDraw, ImageFont, ImageFilter
  5. def check_code(width=120, height=30, char_length=5, font_file='Monaco.ttf', font_size=28):
  6.     code = []
  7.     img = Image.new(mode='RGB', size=(width, height), color=(255, 255, 255))
  8.     draw = ImageDraw.Draw(img, mode='RGB')
  10.     def rndChar():
  11.         """
  12.         生成随机字母
  13.         :return:
  14.         """
  15.         # return str(random.randint(0, 9))
  16.         return chr(random.randint(65, 90))
  19.     def rndColor():
  20.         """
  21.         生成随机颜色
  22.         :return:
  23.         """
  24.         return (random.randint(0, 255), random.randint(10, 255), random.randint(64, 255))
  26.     # 写文字
  27.     font = ImageFont.truetype(font_file, font_size)
  28.     for i in range(char_length):
  29.         char = rndChar()
  30.         code.append(char)
  31.         h = random.randint(0, 4)
  32.         draw.text([i * width / char_length, h], char, font=font, fill=rndColor())
  34.     # 写干扰点
  35.     for i in range(40):
  36.         draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
  38.     # 写干扰圆圈
  39.     for i in range(40):
  40.         draw.point([random.randint(0, width), random.randint(0, height)], fill=rndColor())
  41.         x = random.randint(0, width)
  42.         y = random.randint(0, height)
  43.         draw.arc((x, y, x + 4, y + 4), 0, 90, fill=rndColor())
  45.     # 画干扰线
  46.     for i in range(5):
  47.         x1 = random.randint(0, width)
  48.         y1 = random.randint(0, height)
  49.         x2 = random.randint(0, width)
  50.         y2 = random.randint(0, height)
  52.         draw.line((x1, y1, x2, y2), fill=rndColor())
  54.     img = img.filter(ImageFilter.EDGE_ENHANCE_MORE)
  55.     return img, ''.join(code)
复制代码
界说调用函数

  1. def image_code(request):
  2.     """生成图片验证码"""
  3.     # 调用pillow 函数， 生成图片
  4.     img, code_str = check_code()
  5.     print(code_str)
  6.     # 写入到session中，以便于或许获取再次验证
  7.     request.session['image_code'] = code_str
  8.     # 给session设置60s超时
  9.     request.session.set_expiry(60)
  10.    
  11.     stream = BytesIO()
  12.     img.save(stream, 'png')
  13.     return HttpResponse(stream.getvalue())
复制代码
连着两天几乎一动不动的在电脑旁做体系，emm………




想要源码可以关注下等候后续…

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

石小疯

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表