商品分类增加

进入应用myadmin里的models.py,并增加模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 商品分类模型
class Cates(models.Model):
  name = models.CharField(max_length=20)
  pid = models.IntegerField()
  path = models.CharField(max_length=50)
  ''' 无限分类
      id  name    pid  path
      1    服装     0    0,
      2    男装     1    0,1,
      3    西服     2    0,1,2,
      4    休闲西服  3    0,1,2,3,
      5    女装     1    0,1,
      6    裙子     5    0,1,5,
      7    超短裙    6   0,1,5,6,
  '''

进入pycharm的终端输入python manage.py makemigrations和python manage.py migrate,进行模型迁移.

进入应用myadmin/views，创建CatesViews.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
25
26
27
28
29
30
31
32
33
34
35
from django.shortcuts import render,reverse
from django.http import HttpResponse,JsonResponse
from ..models import Cates

# 分类 添加
def cate_add(request):
  if request.method == 'POST':
      # 接受数据
      data = {}
      data['name'] = request.POST.get('name')
      data['pid'] = request.POST.get('pid')

      # 判断是否为顶级分类
      if data['pid'] == '0':
          data['path'] = '0,'
      else:
          # 获取当前父级的path路径,
          pob = Cates.objects.get(id=data['pid'])
          # 拼接当前数据的path
          data['path'] = pob.path+data['pid']+','

      # 数据 入库
      ob = Cates(**data)
      ob.save()

      return HttpResponse('aaaaaaa')

  else:
      # 显示表单
      # 获取当前已有的 分类
      catelist = Cates.objects.all()
      # 分配数据
      context = {'catelist':catelist}
      # 加载一个模板
      return render(request,'myadmin/cates/add.html',context)

进入模板templates/myadmin,创建cates文件夹,在此文件夹下创建add.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
{% extends 'myadmin/index.html' %}

{% block title %}
<title>后台商品分类添加</title>
{% endblock %}

{% block con %}
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">
                        商品分类添加
                    </div>
                    <div class="widget-function am-fr">
                        <a href="javascript:;" class="am-icon-cog">
                        </a>
                    </div>
                </div>
                <div class="widget-body am-fr">
                    <form action="{% url 'myadmin_cate_add' %}" method="POST" enctype="multipart/form-data" class="am-form tpl-form-line-form">
                        {% csrf_token %}
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">
                                所属分类
                            </label>
                            <select name="pid" data-am-selected="{btnSize: 'sm'}" style="display: none;">
                              <option value="0" >顶级分类</option>
                              {% for v in catelist %}
                              <option value="{{ v.id }}" >{{ v.sub }}{{ v.name }}</option>
                              {% endfor %}
                            </select>
                        </div>

                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">
                                分类名称
                            </label>
                            <div class="am-u-sm-9">
                                <input type="text" name="name" class="tpl-form-input"
                                 placeholder="分类名称">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                                <button class="am-btn am-btn-primary tpl-btn-bg-color-success ">
                                    提交
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

1
2
3
from .views import CatesViews

url(r'^cate/add/$', CatesViews.cate_add, name="myadmin_cate_add"),

显示商品分类列表

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

1
url(r'^cate/index/$',CatesViews.cate_index,name="myadmin_cate_index"),

进入应用myadmin/views/CatesViews.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
25
26
# 分类 列表
def cate_index(request):
  # 获取数据
  data = get_cates_all()
  # 分配数据
  context = {'catelist':data}
  # 加载模板
  return render(request,'myadmin/cates/index.html',context)

# 封装函数.格式化获取分类数据
def get_cates_all():
  # 获取所有的分类
  # data = Cates.objects.all()
  # select *,concat(path,id) as paths from myadmin_cates order by paths;
  data = Cates.objects.extra(select = {'paths':'concat(path,id)'}).order_by('paths')
  # 处理数据的顺序,缩进,及父级名
  for x in data:
      l = x.path.count(',')-1 # 0,1,2,
      x.sub = l*'|----'
      if x.pid == 0:
          x.pname = '顶级分类'
      else:
          pob = Cates.objects.get(id=x.pid)
          x.pname = pob.name
      # print(x.name,l)
  return data

进入模板templates/myadmin,创建cates文件夹,在此文件夹下创建index.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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
  {% extends 'myadmin/index.html' %}

{% block title %}
<title>后台商品分类列表</title>
{% endblock %}

{% block con %}
<div class="row-content am-cf">
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title  am-cf">商品分类列表</div>

                </div>
                <div class="widget-body  am-fr">

                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                        <div class="am-form-group">
                            <div class="am-btn-toolbar">
                                <div class="am-btn-group am-btn-group-xs">
                                    <a href="{% url 'myadmin_cate_add' %}" class="am-btn am-btn-default am-btn-success"><span class="am-icon-plus"></span> 新增</a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black ">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>分类名</th>
                                    <th>所属父级</th>
                                    <th>Path路径</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                            {% for v in catelist %}
                                <tr>
                                    <td class="am-text-middle">{{ v.id }}</td>
                                    <td class="am-text-middle cate_name">{{ v.sub }}<span cid="{{ v.id }}">{{ v.name }}</span></td>
                                    <td class="am-text-middle">{{ v.pname }}</td>
                                    <td class="am-text-middle">{{ v.path }}</td>

                                    <td class="am-text-middle">
                                        <div class="tpl-table-black-operation">
                                             <a href="javascript:void(0)" cid="{{ v.id }}" class="removeCate tpl-table-black-operation-del">
                                                <i class="am-icon-pencil"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}

                                <!-- more data -->
                            </tbody>
                        </table>
                    </div>
                    <div class="am-u-lg-12 am-cf">

                        <div class="am-fr">
                            <ul class="am-pagination tpl-pagination">
                                <!-- <li class="am-disabled"><a href="#">«</a></li> -->
                                <!-- <li class="am-active"><a href="#">1</a></li> -->

                                <!-- <li><a href="#">»</a></li> -->
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% comment %}<script type="text/javascript">
    // $(this) window 对象   窗口对象  --> 文档对象(DOM),location(地址对象) history(历史对象)

    // 分类编辑
    $('.cate_name').dblclick(function(){
        // 1 绑定双击事件,获取name换成input
        var span = $(this).find('span')
        // 获取当前分类名字
        var catename = span.text()
        // 创建一个 input
        var inp = $('<input type="text" style="color:black;" value="'+catename+'">')
        // 把分类名换成input
        $(this).find('span').html(inp)
        // 让input中的值 处于选中状态
        inp.select()
        // 获取当前选择的元素的 分类 id
        var cid = span.attr('cid')

        // 2,给input绑定丧失焦点事件,判断是否更新了name,发送ajax去修改
        inp.blur(function(){
            // 获取当前新的name
            var newname = $(this).val()
            // 判断当前的值和原来的值是否一样
            if(newname == catename){
                // 不需要修改,恢复原样
                span.html(catename)
            }else{
                // 需要发送ajax去更新
                $.get('{% url 'myadmin_cate_edit' %}',{'cid':cid,'newname':newname},function(data){
                    // 判断是否更新成功
                    if(data['code'] == 0){
                        span.html(newname)
                        alert(data['msg'])
                    }
                },'json')
            }
        })
    })

    // 删除
    $('.removeCate').click(function(){
        // 获取当前选择的分类的id
        var cid = $(this).attr('cid')
        var a = $(this)
        // 发送ajax请求.到后台执行删除
        $.get('{% url 'myadmin_cate_del' %}',{'cid':cid},function(data){
            // 判断当前的返回值
            if(data['code'] == 0){
                // 删除成功
                // $(this).parents('tr').remove()
                //  此处的 $(this) 是谁? ajax对象 XMLHttpRequest
                a.parents('tr').remove()
            }
            alert(data['msg'])
        },'json')


    })
</script>{% endcomment %}
{% endblock %}

进入应用myadmin/views/CatesViews.py,并修改cate_add函数

1
2
3
4
5
6
7
from django.shortcuts import reverse

# 修改  return HttpResponse('aaaaaaa')
return HttpResponse('<script>alert("添加成功");location.href="'+reverse('myadmin_cate_index')+'";</script>')

# 修改 catelist = Cates.objects.all()
catelist = get_cates_all()

商品分类的ajax删除

进入模板templates/myadmin/cates/index.html，并显示js代码中的删除点击事件$(‘.removeCate’)

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

1
url(r'^cate/del/$', CatesViews.cate_del, name="myadmin_cate_del"),

进入应用myadmin/views/CatesViews.py,并增加cate_del函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 分类删除
def cate_del(request):
  cid = request.GET.get('cid')
  # 判断当前分类下是否还有子类
  res = Cates.objects.filter(pid=cid).count()
  if res:
      # 有子类
      return JsonResponse({'msg':'当前类下有子类,不能删除','code':1})
  # 判断当前分类下是否有商品发布

  # 执行删除
  ob = Cates.objects.get(id=cid)
  ob.delete()
  return JsonResponse({'msg':'删除成功','code':0})

商品分类的ajax修改

进入模板templates/myadmin/cates/index.html，并显示js代码中的编辑点击事件$(‘.cate_name’)

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

1
url(r'^cate/edit/$',CatesViews.cate_edit,name="myadmin_cate_edit"),

进入应用myadmin/views/CatesViews.py,并增加cate_edit函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 分类 名字修改
def cate_edit(request):
  try:
      # 获取 参数
      cid = request.GET.get('cid')
      newname = request.GET.get('newname')

      # 获取对象
      ob = Cates.objects.get(id=cid)
      ob.name = newname
      # 修改属性
      ob.save()
      data = {'msg':'更新成功','code':0}
  except:
      data = {'msg':'更新失败','code':1}

  # 返回结果
  return JsonResponse(data)