规格管理，及规格选项管理功能实现

后端

创建模型类
规格模型类和规格选项模型类
规格模型类外键绑定spu表
规格选项类绑定规格表

# 规格模型类定义
class SPUSpec(models.Model):name=models.CharField('规格名称',max_length=20)spu=models.ForeignKey(SPUS,on_delete=models.CASCADE,verbose_name='所属spu')def __str__(self):return self.nameclass Meta:db_table='spu_spec'verbose_name_plural='spu的规格'# 规格选项模型类定义
class SpecOption(models.Model):value=models.CharField('选项值',max_length=20)spec=models.ForeignKey(SPUSpec,on_delete=models.CASCADE,verbose_name='规格名称')def __str__(self):return '%s:%s-%s'%(self.spec.spu.name,self.spec.name,self.value)class Meta:db_table='spec_option'verbose_name_plural='规格选项值'

编写序列化器

#SPU规格模型类的序列化器
class SPUSpecSer(serializers.ModelSerializer):spu_name=serializers.SerializerMethodField(read_only=True)def get_spu_name(self,obj):return obj.spu.nameclass Meta:model=SPUSpecfields='__all__'read_only_fields=['id']
#SPU模型类的序列化器---简洁版
class SPUSerSimple(serializers.ModelSerializer):class Meta:model=SPUSfields=["id","name"]read_only_fields=['id','name']
# 规格选项值模型类的序列化器
class SpecOptionSer(serializers.ModelSerializer):spec_name=serializers.SerializerMethodField(read_only=True)def get_spec_name(self,obj):return obj.spec.nameclass Meta:model=SpecOptionfields='__all__'read_only_fields=['id']

编写视图类

#规格的视图
class SPUSpecView(ModelViewSet):queryset = SPUSpec.objects.all()serializer_class = SPUSpecSerlookup_field = 'pk'lookup_url_kwarg = 'pk'pagination_class = MyPagination
#spu简化的视图 避免分页器导致数据显示不全
class SPUAllAPIView(ModelViewSet):queryset = SPUS.objects.all()serializer_class = SPUSerSimple
#规格选项值的视图
class SpecOptionViewSet(ModelViewSet):queryset = SpecOption.objects.all()serializer_class = SpecOptionSerlookup_field = 'pk'lookup_url_kwarg = 'pk'pagination_class = MyPagination#加载所有的规格spuSpec  避免分页器导致数据不全
class SPUSpecAllAPIView(ListAPIView):queryset = SPUSpec.objects.all()serializer_class = SPUSpecSer

配置路由

from django.urls import path
from rest_framework import routers
from .views import *
urlpatterns = [#加载所有的规格spuSpec 避免分页器导致数据不全path('spuSpecs/all/',SPUSpecAllAPIView.as_view())]
#品牌的路由
router=routers.SimpleRouter()
router.register('spusall',SPUAllAPIView)     #spu简化的路由
router.register('spuSpecs',SPUSpecView,'spuSpecs')    #规格的路由
router.register('specOption',SpecOptionViewSet,'specOption')   #规格选项路由
urlpatterns+=router.urls

前端

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

<script>
import BreadCrumb from '@/components/widget/BreadCrumb'
//添加规格
import AddSpecs from '@/components/widget/AddSpecs'
//展示 删除 修改 规格
import SpecsTable from '@/components/widget/SpecsTable'
// import cons from '@/components/constant'export default {name: 'Specs',data () {return {page:1,total:0,pagesize:3,aSpecsList:[]}},components:{BreadCrumb,AddSpecs,SpecsTable},mounted(){this.fnGetData(1);},methods:{fnGetData(num){this.axios.get('/v1/goods/spuSpecs/',{params:{page:num ? num :this.page,pageSize:this.pagesize},headers:{Authorization:'JWT '+localStorage.token},responseType:'json'}).then((result) => {console.log("111111111111111111",result)this.aSpecsList=result.data.resultsthis.total=result.data.count}).catch((err) => {console.log('err:',err)});},//分页的时间函数fnGetPage(num){this.page=numthis.fnGetData(num)a}}
}
</script>

例如：SpecsTable.vue进行展示修改数据
修改事件中的路由，字段等

<script>
let token = localStorage.token;
export default {name: 'AuthorityTable',props:['specs'],data () {var validateName = (rule, value, callback) => {if (value === '') {callback(new Error('规格名不能为空'));} else {         callback()          }}; return {pop_show:false,edit_id:'',spus_list:[],specsForm:{name:'',spu:''},rulesSpecsForm:{name: [{ validator:validateName, trigger: 'blur' }]}}},methods:{// 点击编辑触发的方法fnPopShow(id){this.pop_show = true;this.edit_id = id;this.axios.get('/v1/goods/spuSpecs/'+this.edit_id+'/', {headers: {'Authorization': 'JWT ' + token},responseType: 'json',}).then(res=>{this.specsForm.name = res.data.name;this.specsForm.spu = res.data.spu;}).catch(err=>{console.log('获取错误的信息',err);});},// 提交submitForm(){this.axios.put('/v1/goods/spuSpecs/'+this.edit_id+'/', {"name": this.specsForm.name,"spu": this.specsForm.spu,}, {headers: {'Authorization': 'JWT ' + token},responseType: 'json'           }).then(res=>{this.$message({type: 'success',message: '修改规格成功!'}); this.pop_show = false;this.$emit('fnResetTable');           this.resetForm('specsForm');          }).catch(err=>{console.log(err.response);})},fnDelSpecs(id){this.edit_id = id;this.$confirm('此操作将删除该规格, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.axios.delete('/v1/goods/spuSpecs/'+this.edit_id+'/',{headers: {'Authorization': 'JWT ' + token},responseType:'json'           }).then(res=>{if (res.status==204){this.$message({type: 'success',message: '删除成功!'});this.$emit('fnResetTable');}else{this.$message({type:'error',message:'删除失败'})}}).catch(err=>{if(err.response.status==404){this.$message({type:'info',message:'规格未找到！'});}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});          });        },// 获取所有的spu数据fnGetSPUs(){this.axios.get('/v1/goods/spusall/', {headers: {'Authorization': 'JWT ' + token},responseType: 'json',}).then(res=>{this.spus_list = res.data;        }).catch(err=>{      console.log(err.response);});},resetForm(formName){this.$refs[formName].resetFields();}},mounted(){this.fnGetSPUs();}
}
</script>

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

<script>
let token = localStorage.token;
export default {name: 'AddUser',data () {var validateName = (rule, value, callback) => {if (value === '') {callback(new Error('规格名不能为空'));} else {         callback()          }}; return {pop_show:false,spus_list:[],specsForm:{name:'',spu_id:''},rulesSpecsForm:{name: [{ validator:validateName, trigger: 'blur' }]}}},methods:{submitForm(){// console.log("spu_id<<<<<",this.specsForm.spu_id)this.axios.post('/v1/goods/spuSpecs/', {"name":this.specsForm.name,"spu":this.specsForm.spu_id}, {headers: {'Authorization': 'JWT ' + token},responseType: 'json'           }).then(res=>{if(res.status==201){this.$message({type: 'success',message: '添加规格成功!'}); this.pop_show = false; this.$emit('fnResetTable');           this.resetForm('spcesForm');                                     }}).catch(err=>{if(err.response){var errmsg = err.response.data;if(errmsg.name){this.$message({type:'info',message:errmsg.name[0]});}if(errmsg.non_field_errors){this.$message({type:'info',message:errmsg.non_field_errors[0]});}           }});},//获取所有spu数据fnGetGoods(){this.axios.get('/v1/goods/spusall/', {headers: {'Authorization': 'JWT ' + token},responseType: 'json',}).then(res=>{this.spus_list = res.data;        }).catch(err=>{      console.log(err.response);});},resetForm(formName){this.$refs[formName].resetFields();}},mounted(){this.fnGetGoods();}
}
</script>

规格选项跟上边的类似，找到对应的vue组件即可实现

规格管理，及规格选项管理功能实现相关推荐

商城-商品规格管理-商品规格参数管理
商城-商品规格管理-商品规格参数管理 2.商品规格参数管理 2.1.页面实现 2.1.1.整体布局 2.1.2.data中定义的属性 2.2.规格参数的查询 2.2.1.树节点的点击事件 2.2.2. ...
商城-商品规格管理-商品规格数据结构
商城-商品规格管理-商品规格数据结构 1.商品规格数据结构 1.1.SPU和SKU 1.2.数据库设计分析 1.2.1.思考并发现问题 1.2.2.分析规格参数 1.2.3.SKU的特有属性 1.2. ...
图书管理系统需求规格说明书
图书管理系统需求规格说明书何海军.熊跃华摘要介绍了信息中心图书管理系统数据库的设计.该系统是运行在学校内的图书管理系统,实现了图书资料的计算机管理和图书查询功能. 关键词图书网络管理系 ...
【Lilishop商城】No3-5.模块详细设计，商品模块-1（商品分类、品牌管理、规格管理、参数、计量单位、店铺分类）的详细设计
仅涉及后端,全部目录看顶部专栏,代码.文档.接口路径在: [Lilishop商城]记录一下B2B2C商城系统学习笔记~_清晨敲代码的博客-CSDN博客全篇会结合业务介绍重点设计逻辑,其中重点包括 ...
图书管理系统需求规格说明文档目录_一个已经超越普通设计素材管理范畴的文档管理软件—Eagle...
为什么我要使用Eagle?本篇文章是我第一次在知乎写的专栏文,我觉得我应该把我对这个软件的日常使用体会介绍给同样是产品汪的同学们,如果适合大家,是我的荣幸,如果不适合,那就略过.本文就以下几点来描述我 ...
图书管理系统需求规格说明文档目录_软件需求分析教与学（教学大纲）
需求分析课程教学大纲 01. 课程说明课程名称需求分析总学时 32 先修课程: 软件工程导论.数据库原理与设计.信息系统基础 02. 课程性质.目的和任务软件开发一般包括可行性分析.需求分析. ...
阿里云服务器产品规格、产品优势、产品功能及应用场景介绍
阿里云服务器产品是目前国内用户购买云服务器的首选云服务器产品,本文通过产品规格.产品优势.产品功能及应用场景等方面为大家介绍下阿里云服务器. 一.产品规格阿里云服务器分为入门级和企业级,入门级包含突 ...
复习Java第一个项目学生信息管理系统 04（权限管理和动态挂菜单功能） python简单爬数据实例Java面试题三次握手和四次挥手生活【记录一个咸鱼大学生三个月的奋进生活】016
记录一个咸鱼大学生三个月的奋进生活016 复习Java(学生信息管理系统04权限管理和动态挂菜单功能) 改写MainFrame的构造方法新增LoginFrame的验证登录是否成功的代码新增Logi ...
ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证)...
原文:ASP.NET MVC+EF框架+EasyUI实现权限管理系列(17)-注册用户功能的细节处理(各种验证) ASP.NET MVC+EF框架+EasyUI实现权限管系列 (开篇) (1):框 ...
企业网上下单订货管理软件源码搭建功能介绍|移讯云订货通订单管理系统
网上下单订货管理软件源码搭建功能介绍|移讯云订货通订单管理系统一:系统概述和用途系统基于网络,实现厂家和代理商批发商通过网络下单订货功能. 什么是移讯云订货通.什么是企业订货管理系统. 是一款针对 ...

规格管理，及规格选项管理功能实现

后端

编写序列化器

编写视图类

前端

规格管理，及规格选项管理功能实现相关推荐

最新文章

热门文章