后台实现sku 管理

什么是SPU?什么是SKU

SPU:是标准化产品单元
SKU:库存量单位

创建创建模型类

创建spu跟sku的模型类
关联品牌表跟种类表(继续在后台项目中)

from django.db import models
# spu 表
class SPUS(models.Model):name=models.CharField('spu',max_length=20)#                       #绑定品牌表brand=models.ForeignKey(Brand,on_delete=models.CASCADE,verbose_name='所属品牌')#                       #商品种类表                       #反向查询可以直接调用category1=models.ForeignKey(Cate,on_delete=models.CASCADE,related_name='cate1_spu',verbose_name='一级类别')category2=models.ForeignKey(Cate,on_delete=models.CASCADE,related_name='cate2_spu',verbose_name='二级类别')category3=models.ForeignKey(Cate,on_delete=models.CASCADE,related_name='cate3_spu',verbose_name='三级类别')comment_num=models.IntegerField('评论量',default=0)sales=models.IntegerField('销量',default=0)desc_detail=models.TextField('详细描述',default='')desc_pack=models.TextField('包装信息',default='')desc_service=models.TextField('售后服务',default='')def __str__(self):return self.nameclass Meta:db_table='spu'# 'sku'  商品表
class SKUS(models.Model):name=models.CharField('sku',max_length=100)describe=models.CharField('商品描述',max_length=500)price=models.DecimalField('价格',decimal_places=2,max_digits=8)stick=models.IntegerField('库存',default=0)sales=models.IntegerField('销量',default=0)detail=models.TextField('详情',default='')image_default=models.CharField('默认图片',max_length=300,default='')is_selling=models.BooleanField('是否在售',default=True)  #布尔类型#                   #绑定商品种类表cate=models.ForeignKey(Cate,on_delete=models.CASCADE,verbose_name='一级类别')#                   #绑定spu表spu=models.ForeignKey(SPUS,on_delete=models.CASCADE,verbose_name='所属SPU')def __str__(self):return self.nameclass Meta:db_table='sku'verbose_name_plural='商品sku'

生成迁移文件进行迁移
往里边写一条数据

编写序列化器


from rest_framework import serializers
from .models import *
#SKU模型类的序列化器
class SKUSer(serializers.ModelSerializer):cate_name=serializers.SerializerMethodField(read_only=True)def get_cate_name(self,obj):return obj.cate.nameclass Meta:model=SKUSfields='__all__'read_only_fields=['id','detail','image_default','sales']
#SPU模型类的序列化器
class SPUSer(serializers.ModelSerializer):class Meta:model=SPUSfields=['id','name']read_only_fields=['id']

编写视图类

from rest_framework.viewsets import ModelViewSet
from .serializers import *
from .models import *
# sku视图集
class SKUAPIView(ModelViewSet):queryset = SKUS.objects.all()serializer_class = SKUSerlookup_field = 'pk'lookup_url_kwarg = 'pk'#spu的视图
class SPUAPIView(ModelViewSet):queryset = SPUS.objects.all()serializer_class = SPUSer

配置路由

from django.urls import path
from rest_framework import routers
from .views import *
urlpatterns = [#频道组的接口，获取所有、新增一个path('channels/',ListCreateGroupAPIView.as_view()),#频道组的接口，检索，更改，删除path('channels/<int:pk>/',ReUpDeAPIViwe.as_view()),#加载所有的一级类别path('channels/firstcates/',FirstCateAPIView.as_view())
]
#品牌的路由
router=routers.SimpleRouter()
router.register('brands',BrandViewSet,'brands')
#spu跟sku的路由
router.register('skus',SKUAPIView,'skus')
router.register('spus',SPUAPIView,'spus')
urlpatterns+=router.urls

前端

找到对应的veu组件,进行配置
实现sku的增删改查
例如：Sku.vue 获取全部数据

<script>
import BreadCrumb from "@/components/widget/BreadCrumb";
// 传递到子组件进行功能实现     添加数据
import AddSku from "@/components/widget/AddSku";
// 展示 修改 删除数据
import SkuTable from "@/components/widget/SkuTable";
import cons from "@/components/constant";export default {name: "Sku",data() {return {keyword: "",page: 1,pagesize: 3,aSkuList: [],total: 0,pop_show: false,};},components: {BreadCrumb,AddSku,SkuTable,},mounted() {this.fnGetData(1);},methods: {// 获取所有的数据fnGetData(num) {this.axios.get("/v1/goods/skus/", {params: {page: num,pageSize: this.pagesize,},headers: {Authorization: "JWT " + localStorage.token,},responseType: "json",}).then((result) => {console.log(result);this.aSkuList = result.data;}).catch((err) => {console.log(err);});},// 切换分页时触发的方法},
};
</script>

例如：AddSku.vue进行添加数据
修改事件中的路由，字段等
添加绑定外键的字段实现下拉框添加

<script>
let token = localStorage.token;
export default {name: "AddUser",data() {return {pop_show: false,skuForm: {name: "",spu: "",describe: "",cate: "",price: "",cost_price: "",market_price: "",stick: "",is_selling: "",},category_list: [],spus_list: [],};},methods: {// 获取所有的一级类别fnGetCategory() {this.axios.get("/v1/goods/channels/firstcates/", {headers: {Authorization: "JWT " + token,},responseType: "json",}).then((res) => {this.category_list = res.data;}).catch((err) => {console.log(err.response);});},// 获取所有的spufnGetSPUs() {this.axios.get("/v1/goods/spus/", {headers: {Authorization: "JWT " + token,},responseType: "json",}).then((res) => {this.spus_list = res.data;}).catch((err) => {console.log(err.response);});},// 点击提交触发得分方法submitForm() {this.axios.post("/v1/goods/skus/",this.skuForm,{headers: {Authorization: "JWT " + token,},responseType: "json",}).then((res) => {if (res.status == 201) {this.$message({type: "success",message: "商品添加成功!",});this.pop_show = false;this.$ref['userForm'].resetFields()this.$emit("fnResetTable");}else{this.$message({type: "error",message: "商品添加失败!",});}}).catch((err) => {if (err.response.status == 400) {this.$message({type: "info",message: err.response.data.name[0],});}});},resetForm() {this.skuForm.name = "";this.skuForm.spu = "";this.skuForm.describe = "";this.skuForm.cate = "";this.skuForm.price = "";this.skuForm.cost_price = "";this.skuForm.market_price = "";this.skuForm.stick = "";this.skuForm.is_selling = "";},},computed: {look_good_id() {return this.skuForm.spu_id;},},mounted() {this.fnGetCategory();this.fnGetSPUs();},watch: {},
};
</script>

例如：SkuTable.vue进行修改数据
修改事件中的路由，字段等
添加绑定外键的字段实现下拉框添加

<script>
import cons from "@/components/constant";
let token = localStorage.token;
export default {name: "SkuTable",// 接收父组件传来的值props: ["skus"],data() {return {pop_show: false,edit_id: 0,skuForm: {name: "",spu: "",describe: "",cate: "",  //类别idprice: "",cost_price: "",market_price: "",stick: "",is_selling: "",cate_name: "", // 分类的名字},// 所有分类category_list: [],spus_list: [],specs_list: [],};},methods: {// 获取分类信息 获取一级类别fnGetCategory() {this.axios.get("/v1/goods/channels/firstcates/", {headers: {Authorization: "JWT " + token,},responseType: "json",}).then((res) => {this.category_list = res.data;}).catch((err) => {console.log(err.response);});},// 获得spu数据fnGetSPUs() {this.axios.get("/v1/goods/spus/", {headers: {Authorization: "JWT " + token,},responseType: "json",}).then((res) => {console.log("加载spus>>>", res.data);this.spus_list = res.data;}).catch((err) => {console.log(err.response);});},// 点击修改按钮触发的方法fnPopShow(id) {// 显示弹窗this.pop_show = true;this.edit_id = id;this.axios.get("/v1/goods/skus/" + id + "/", {headers: {Authorization: "JWT " + token,},responseType: "json",}).then((res) => {this.skuForm.name = res.data.name;this.skuForm.describe = res.data.describe;this.skuForm.price = res.data.price;this.skuForm.market_price = res.data.price;this.skuForm.cost_price = res.data.price;this.skuForm.stick = res.data.stick;this.skuForm.is_selling = res.data.is_selling;this.skuForm.cate = res.data.cate; // 分类的idthis.skuForm.cate_name = res.data.cate_name; // 分类的名字// this.skuForm.spu_name = dat.data.spu_name; // spu的名字this.skuForm.spu = res.data.spu; // spu的id}).catch((err) => {console.log(err.response);});},// 修改数据提交submitForm() {this.axios.put("/v1/goods/skus/" + this.edit_id + "/",this.skuForm,{headers: {Authorization: "JWT " + token,},responseType: "json",}).then((res) => {console.log('更新sku的响应',res);this.$message({type: "success",message: "商品修改成功!",});this.pop_show = false;this.$emit("fnResetTable");}).catch((err) => {if (err.response.status == 400) {this.$message({type: "info",message: err.response.data.name[0],});}});},// 删除功能fnDelSku(id) {this.edit_id = id;this.$confirm("此操作将删除该商品, 是否继续?", "提示", {confirmButtonText: "确定",cancelButtonText: "取消",type: "warning",}).then(() => {this.axios.delete("/v1/goods/skus/" + this.edit_id + "/", {headers: {Authorization: "JWT " + token,},responseType: "json",}).then((dat) => {this.$message({type: "success",message: "删除成功!",});this.$emit("fnResetTable");}).catch((err) => {if (err.response.status == 404) {this.$message({type: "info",message: "商品未找到！",});}});}).catch(() => {this.$message({type: "info",message: "已取消删除",});});},},computed: {look_good_id() {return this.skuForm.spu_id;},},watch: {}},mounted() {//加载一级类别this.fnGetCategory();//加载sputhis.fnGetSPUs();},
};
</script>

后台实现sku 管理相关推荐

element ui 电商后台商品属性管理页面
电商后台商品属性管理最近在做电商后台,电商商品中有个SKU值,类似于服装的 "尺码""颜色""款式"等. 界面如下: 所用到的知识点如下 ...
linux中daemonize用法,daemonize Unix系统后台守护进程管理软件
在我们的工作中,很多时候都需要在linux中后台运行程序, 方法1: nohup & 方法2: daemonize Unix系统后台守护进程管理软件优点:更加正规后台运⾏更稳定 git c ...
Java-Web机试练习题一、后台管理系统——管理员管理模块
题目:后台管理系统--管理员管理模块一. 语言和环境 1. 实现语言:JAVA 语言. 2. 环境要求:MyEclipse/Eclipse + Tomcat + MySql. 3. 使用技术:Jsp ...
CRM管理系统、教育后台、赠品管理、优惠管理、预约管理、试听课、教师、学生、客户、学员、商品管理、科目、优惠券、完课回访、客户管理系统、收费、退费、回访、账号权限、订单流水、审批、转账、rp原型
CRM管理系统.教育后台.赠品管理.优惠管理.预约管理.试听课.教师.学生.客户.学员.商品管理.科目.优惠券.完课回访.客户管理系统.收费.退费.回访.账号权限.订单流水.Axure原型.rp原型 ...
保险后台管理系统/订单管理/保单管理/客户管理/咨询管理/保险原型/保单详情/客户详情/权限管理/部门管理/账号管理/保险系统原型/汽车保险后台管理系统/角色管理/咨询详情/axure原型/需求文档
保险后台管理系统/订单管理/保单管理/客户管理/咨询管理/保险原型/保单详情/客户详情/权限管理/部门管理/账号管理/保险系统原型/汽车保险后台管理系统/角色管理/咨询详情/axure原型/需求文档 ...
电商Sass平台-商城运营后台原型-仓储管理-订单管理-店铺运营-采购管理-数据分析-交易分析-留存分析-客户管理-用户运营-围栏管理-商品管理-流量分析-电商erp后台管理-用户权限-销量分析
axure作品内容介绍:电商Sass平台-商城运营后台原型-仓储管理-订单管理-平台运营-采购管理-数据分析-交易分析-留存分析-客户管理-用户运营-围栏管理-商品管理-店铺装修-门店管理-商品档案- ...
超市百货电商app移动端原型+通用模块全局规则说明+超市电商后台管理web端原型+超市电商产品原型及需求文档+业务后台（商品管理+广告管理+活动管理）
作品介绍:Axure原型内容主要包括:超市百货电商app移动端原型+文档变更记录+名词术语说明+产品业务功能框架+通用模块和全局规则说明(消息推送机制+输入提交规则+图片加载机制+权限类提示说明+搜索 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Form表单填写、Dialog对话框弹出
文章目录目标代码 0.页面结构 1.新增按钮和弹出表单:结构 2.新增按钮和弹出表单:点击新增弹出表单 3.表单样式 4.表单验证 5.表单的提交和取消功能:接口.mock相关准备 6.表单的提交 ...