商品的增加
进入应用myadmin里的models.py,并增加模型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
class Goods(models.Model):
cateid = models.ForeignKey(to="Cates", to_field="id")
goodsname = models.CharField(max_length=50)
title = models.CharField(max_length=255)
price = models.FloatField()
goodsnum = models.IntegerField()
pic_url = models.CharField(max_length=255)
goodsinfo = models.TextField()
ordernum = models.IntegerField(default=0)
clicknum = models.IntegerField(default=0)
status = models.IntegerField(default=0)
addtime = models.DateTimeField(auto_now_add=True)
|
进入pycharm的终端输入python manage.py makemigrations和python manage.py migrate,进行模型迁移.
进入应用myadmin/views/GoodsViews.py,并输入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| from django.shortcuts import render,reverse
from django.http import HttpResponse,JsonResponse
from . CatesViews import get_cates_all
def goods_add(request):
data = get_cates_all()
context = {'catelist':data}
return render(request,'myadmin/goods/add.html',context)
def goods_insert(request):
return HttpResponse('商品添加成功')
|
进入应用myadmin里的urls.py,并增加路径
1
2
3
4
| from .views import GoodsViews
url(r'^goods/add/$',GoodsViews.goods_add,name="myadmin_goods_add"),
url(r'^goods/insert/$',GoodsViews.goods_insert,name="myadmin_goods_insert"),
|
进入模板templates/myadmin,创建goods文件夹,在此文件夹下创建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
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
| {% extends 'myadmin/index.html' %}
{% block title %}
<title>后台商品添加</title>
{% endblock %}
{% block con %}
<link rel="stylesheet" type="text/css" href="/ueditor/UE/third-party/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript" src="/ueditor/UE/third-party/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript" src="/ueditor/UE/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/UE/ueditor.all.min.js"></script>
<script type="text/javascript" src="/ueditor/UE/lang/zh-cn/zh-cn.js"></script>
<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_goods_insert' %}" 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="cateid" data-am-selected="{btnSize: 'sm'}" style="display: none;">
{% for v in catelist %}
<option value="{{ v.id }}" {% if v.pid == 0 %} disabled {% endif %} >{{ 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="goodsname" class="tpl-form-input"
placeholder="商品名称">
</div>
</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="title" class="tpl-form-input"
placeholder="请输入商品标题">
</div>
</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="price" class="tpl-form-input"
placeholder="请输入商品价格">
</div>
</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="number" name="goodsnum" class="tpl-form-input"
placeholder="请输入商品库存">
</div>
</div>
<div class="am-form-group">
<label for="user-weibo" class="am-u-sm-3 am-form-label">
封面图
</label>
<div class="am-u-sm-9">
<div class="am-form-group am-form-file">
<div class="tpl-form-file-img">
<img id="showImg" style="width: 200px;" src="assets/img/a5.png" alt="">
</div>
<button type="button" class="am-btn am-btn-danger am-btn-sm">
<i class="am-icon-cloud-upload"></i> 添加封面图片</button>
<input id="ReadFile" name="pic" type="file" multiple="">
</div>
</div>
</div>
<div class="am-form-group">
<label for="user-intro" class="am-u-sm-3 am-form-label">商品简介</label>
{% comment %}
<div class="am-u-sm-9">
<!-- <textarea name="descr" class="" rows="10" id="user-intro" placeholder="请输入商品简介"></textarea> -->
<!-- <script id="editor" type="text/plain" style="width:100%;height:500px;"></script> -->
<script id="editor" name="goodsinfo" type="text/plain" style="height:500px;color:red;"></script>
</div>
{% endcomment %}
</div>
{% comment %}
<script type="text/javascript">
var ue = UE.getEditor('editor');
SyntaxHighlighter.all();
</script>
{% endcomment %}
<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>
{% comment %}
<script type="text/javascript">
$('#ReadFile').change(function(){
var file = this.files[0];
//限定上传文件的类型，判断是否是图片类型
if (!/image\/\w+/.test(file.type)) {
alert("只能选择图片");
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
base64Code = this.result;
//把得到的base64赋值到img标签显示
$("#showImg").attr("src", base64Code);
}
})
</script>
{% endcomment %}
{% endblock %}
|
进入应用myadmin/views/GoodsViews.py,并修改goods_insert函数
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
| from . UsersViews import uploads_pic
from .. models import Cates, Goods
def goods_insert(request):
try:
data = request.POST.dict()
data.pop('csrfmiddlewaretoken')
data['cateid'] = Cates.objects.get(id=data['cateid'])
myfile = request.FILES.get('pic',None)
if not myfile:
return HttpResponse('<script>alert("必须上传商品图片");history.back(-1);</script>')
data['pic_url'] = uploads_pic(myfile)
ob = Goods(**data)
ob.save()
return HttpResponse('<script>alert("商品添加成功");location.href="/myadmin/goods/index/";</script>')
except:
pass
return HttpResponse('<script>alert("商品添加失败");history.back(-1);";</script>')
|
进入应用myadmin/urls.py,并增加路径
1
| url(r'^goods/index/$',GoodsViews.goods_index,name="myadmin_goods_index"),
|
进入应用myadmin/views/GoodsViews.py,并添加goods_index函数
1
2
3
4
5
6
7
| def goods_index(request):
data = Goods.objects.all()
context = {'goodslist': data}
return render(request, 'myadmin/goods/index.html', context)
|
进入模板templates/myadmin/goods,在此文件夹下创建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
137
138
139
| {% 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_user_add' %}" class="am-btn am-btn-default am-btn-success"><span class="am-icon-plus"></span> 新增</a>
</div>
</div>
</div>
</div>
<form>
<div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
<div class="am-form-group tpl-table-list-select">
<select name="types" data-am-selected="{btnSize: 'sm'}" style="display: none;">
<option value="all" {% if request.GET.types == 'all' %} selected {% endif %}>全局搜索</option>
<option value="phone" {% if request.GET.types == 'phone' %} selected {% endif %}>手机号</option>
<option value="id" {% if request.GET.types == 'id' %} selected {% endif %}>ID</option>
<option value="nikename" {% if request.GET.types == 'nikename' %} selected {% endif %}>昵称</option>
<option value="email" {% if request.GET.types == 'email' %} selected {% endif %}>邮箱</option>
</select>
</div>
</div>
<div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
<div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
<input type="text" name="keywords" value="{{ request.GET.keywords }}" class="am-form-field ">
<span class="am-input-group-btn">
<button class="am-btn am-btn-default am-btn-success tpl-table-list-field am-icon-search"></button>
</span>
</div>
</div>
</form>
<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>标题</th>
<th>所属分类</th>
<th>价格</th>
<th>库存</th>
<th>销量</th>
<th>点击量</th>
<th>状态</th>
<th>注册时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for v in goodslist %}
<tr>
<td class="am-text-middle">{{ v.id }}</td>
<td>
<img src="{{ v.pic_url }}" class="tpl-table-line-img" alt="">
</td>
<td class="am-text-middle">{{ v.goodsname }}</td>
<td class="am-text-middle">{{ v.title }}</td>
<td class="am-text-middle">{{ v.cateid.name }}</td>
<td class="am-text-middle">{{ v.price }}</td>
<td class="am-text-middle">{{ v.goodsnum }}</td>
<td class="am-text-middle">{{ v.ordernum }}</td>
<td class="am-text-middle">{{ v.clicknum }}</td>
<td class="am-text-middle">
{% if v.status == 0 %}
新品
{% elif v.status == 1 %}
推荐
{% elif v.status == 2 %}
下架
{% endif %}
</td>
<td class="am-text-middle">{{ v.addtime }}</td>
<td class="am-text-middle">
<div class="tpl-table-black-operation">
<a href="{% url 'myadmin_user_edit' %}?uid={{ v.id }}">
<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">
$('.select-status').change(function(){
// 获取当前元素的 值
var status = $(this).val()
// 获取当前元素的 id
var uid = $(this).attr('uid')
// 发送ajax请求.修改状态
$.get('{% url 'myadmin_user_set_status' %}',{'uid':uid,'status':status},function(data){
// 判断当前的返回值
if(data['code'] == 0){
alert(data['msg'])
}
},'json')
})
</script>{% endcomment %}
{% endblock %}
|
进入模板templates/myadmin/cates/index.html，并增加列表
1
2
3
4
5
| 在<thead>/<tr>标签下增加一格
<th>该类下的商品数量</th>
在<tbody>/<tr>标签下增加一格
<td class="am-text-middle">{{ v.goods_set.count|default:'无' }}</td>
|
富文本编辑器的使用
进入项目的根目录下,把刚刚解压的ueditor文件夹黏贴进来.
进入DjangoProject目录下的setting.py,添加INSTALLED_APPS:‘ueditor’,
进入DjangoProject目录下的urls.py,添加路径
1
| path('ueditor/', include('ueditor.urls')),
|
进入模板templates/myadmin/goods/add.html,把商品简介代码下的隐藏代码显示出来
进入static/myadmin/assets/css/app.less/app.css,把379行的position隐藏
这是从富文本编辑器传到数据库的是html代码,所以在显示数据要使用如下格式
1
| {{ goods.goodsinfo |safe }}
|
wechat
alipay