图片预加载

进入模板templates/myadmin/goods/add.html,把隐藏的js代码$(‘#ReadFile’)显示

后台的登录

进入应用myadmin/urls.py,并增加路径

1
2
3
url(r'^login/$',IndexViews.myadmin_login,name="myadmin_login"),
url(r'^dologin/$',IndexViews.myadmin_dologin,name="myadmin_dologin"),
url(r'^verifycode/$',IndexViews.verifycode,name="myadmin_vcode"),

进入应用myadmin/views/indexViews.py,并增加myadmin_login、myadmin_dologin、verifycode函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
# 登录页
def myadmin_login(request):
  # 加载页面
  return render(request, 'myadmin/login.html')

# 处理登录
def myadmin_dologin(request):
  # 检测验证是否正确
  if request.session.get('verifycode').upper() != request.POST.get('vcode').upper():
      return HttpResponse('<script>alert("验证码错误");location.href="/myadmin/login/"</script>')

  # 判断用户名是否存在,检验密码是否正确
  if request.POST['username'] == 'admin' and request.POST['password'] == '123456':
      # 成功,把用户信息记录在session中
      request.session['AdminUser'] = {'username': 'admin', 'uid': 10}
      return HttpResponse('<script>alert("欢迎登录");location.href="/myadmin/"</script>')

  return HttpResponse('<script>alert("账号或密码错误");location.href="/myadmin/login/"</script>')

# 验证码
def verifycode(request):
  #引入绘图模块
  from PIL import Image, ImageDraw, ImageFont
  #引入随机函数模块
  import random
  #定义变量，用于画面的背景色、宽、高
  bgcolor = (random.randrange(20, 100), random.randrange(
      20, 100), 255)
  width = 100
  height = 25
  #创建画面对象
  im = Image.new('RGB', (width, height), bgcolor)
  #创建画笔对象
  draw = ImageDraw.Draw(im)
  #调用画笔的point()函数绘制噪点
  for i in range(0, 100):
      xy = (random.randrange(0, width), random.randrange(0, height))
      fill = (random.randrange(0, 255), 255, random.randrange(0, 255))
      draw.point(xy, fill=fill)
  #定义验证码的备选值
  str1 = 'ABCD123EFGHIJK456LMNOPQRS789TUVWXYZ0'
  # str1 = '123456789'
  #随机选取4个值作为验证码
  rand_str = ''
  for i in range(0, 4):
      rand_str += str1[random.randrange(0, len(str1))]
  #构造字体对象
  font = ImageFont.truetype('simhei.ttf', 23)
  #构造字体颜色
  fontcolor = (255, random.randrange(0, 255), random.randrange(0, 255))
  #绘制4个字
  draw.text((5, 2), rand_str[0], font=font, fill=fontcolor)
  draw.text((25, 2), rand_str[1], font=font, fill=fontcolor)
  draw.text((50, 2), rand_str[2], font=font, fill=fontcolor)
  draw.text((75, 2), rand_str[3], font=font, fill=fontcolor)
  #释放画笔
  del draw
  #存入session，用于做进一步验证
  request.session['verifycode'] = rand_str
  #内存文件操作
  import io
  buf = io.BytesIO()
  #将图片保存在内存中，文件类型为png
  im.save(buf, 'png')
  #将内存中的图片数据返回给客户端，MIME类型为图片png
  return HttpResponse(buf.getvalue(), 'image/png')

进入模板templates/myadmin,创建login.html，并输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>后台登录</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/static/myadmin/assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="/static/myadmin/assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <link rel="stylesheet" href="/static/myadmin/assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="/static/myadmin/assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="/static/myadmin/assets/css/app.css">
    <script src="/static/myadmin/assets/js/jquery.min.js"></script>
</head>

<body data-type="login">
    <script src="/static/myadmin/assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 风格切换 -->
        <div class="tpl-skiner">
            <div class="tpl-skiner-toggle am-icon-cog">
            </div>
            <div class="tpl-skiner-content">
                <div class="tpl-skiner-content-title">
                    选择主题
                </div>
                <div class="tpl-skiner-content-bar">
                    <span class="skiner-color skiner-white" data-color="theme-white"></span>
                    <span class="skiner-color skiner-black" data-color="theme-black"></span>
                </div>
            </div>
        </div>
        <div class="tpl-login">
            <div class="tpl-login-content">

                <form action="{% url 'myadmin_dologin' %}" method="post" class="am-form tpl-form-line-form">
                    {% csrf_token %}
                    <div class="am-form-group">
                        <input type="text" name="username" class="tpl-form-input"  placeholder="请输入账号">
                    </div>

                    <div class="am-form-group">
                        <input type="password" name="password" class="tpl-form-input"  placeholder="请输入密码">
                    </div>

                    <div class="am-form-group" style="position: relative;">
                        <input type="text" name="vcode" class="tpl-form-input"  placeholder="请输入验证码">
                        <img src="{% url 'myadmin_vcode' %}" onclick="this.src='{% url 'myadmin_vcode' %}'+'?'+Math.random()" style="position: absolute;top:-5px;right: 2px;">
                    </div>


                    <div class="am-form-group">
                        <button  class="am-btn am-btn-primary  am-btn-block tpl-btn-bg-color-success  tpl-login-btn">提交</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script src="/static/myadmin/assets/js/amazeui.min.js"></script>
    <script src="/static/myadmin/assets/js/app.js"></script>
</body>
</html>

后台的退出

进入应用myadmin/urls.py,并增加路径

1
url(r'^logout/$',IndexViews.myadmin_logout,name="myadmin_logout"),

进入应用myadmin/views/indexViews.py,并添加myadmin_logout函数

1
2
3
4
# 退出登录
def myadmin_logout(request):
  del request.session['AdminUser']
  return HttpResponse('<script>alert("退出成功");location.href="'+reverse('myadmin_login')+'";</script>')

进入模板templates/myadmin/index.html,修改欢迎语和退出的路径

1
2
3
4
5
6
7
8
9
10
11
<!-- 欢迎语 -->
<li class="am-text-sm tpl-header-navbar-welcome">
    <a href="javascript:;">欢迎你, <span>{{ request.session.AdminUser.username }}</span> </a>
</li>

<!-- 退出 -->
<li class="am-text-sm">
    <a href="{% url 'myadmin_logout' %}">
        <span class="am-icon-sign-out"></span> 退出
    </a>
</li>

后台登录的中间件

进入应用myadmin，创建AdminMiddleware.py,并输入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
from django.shortcuts import render,reverse
from django.http import HttpResponse
import re

class AdminLoginMiddleware:
  def __init__(self, get_response):
      self.get_response = get_response
      # One-time configuration and initialization.

  def __call__(self, request):
      # 用户的请求路径# /myadmin/cate/index/
      path = request.path
      # 定义允许访问的路径
      arr = ['/myadmin/login/','/myadmin/dologin/','/myadmin/verifycode/']
      # 检测用户是否访问后台,并且不是进入登录页面
      if re.match('/myadmin/',path) and path not in arr:
          # 检测是否已经登录
          AdminUser = request.session.get('AdminUser',None)
          if not AdminUser:
              # 没有登录
              return HttpResponse('<script>alert("请先登录");location.href="'+reverse('myadmin_login')+'";</script>')

      response = self.get_response(request)
      return response

进入DjangoProject目录下的settings.py,在MIDDLEWARE里增加中间件

1
2
# 自定义登录检测的中间件
'myadmin.AdminMiddleware.AdminLoginMiddleware',

仿照用户列表的模糊、精确查询以及当前页码来写商品列表的模糊、精确查询以及当前页码