Realize SKU management in the background

What is? SPU? What is? SKU

SPU: It's a standardized product unit
SKU: A unit of stock

Create model classes

establish spu Follow sku Model class of
List of related brands and categories ( Continue in the background project )

from django.db import models
# spu  surface 
class SPUS(models.Model):
    name=models.CharField('spu',max_length=20)
    # # Bind brand table 
    brand=models.ForeignKey(Brand,on_delete=models.CASCADE,verbose_name=' Brand ')
    # # List of commodity types  # Reverse queries can be called directly 
    category1=models.ForeignKey(Cate,on_delete=models.CASCADE,related_name='cate1_spu',verbose_name=' Primary categories ')
    category2=models.ForeignKey(Cate,on_delete=models.CASCADE,related_name='cate2_spu',verbose_name=' Level 2 categories ')
    category3=models.ForeignKey(Cate,on_delete=models.CASCADE,related_name='cate3_spu',verbose_name=' Level III category ')
    comment_num=models.IntegerField(' Comment quantity ',default=0)
    sales=models.IntegerField(' sales ',default=0)
    desc_detail=models.TextField(' Detailed description ',default='')
    desc_pack=models.TextField(' Packaging information ',default='')
    desc_service=models.TextField(' After-sales service ',default='')
    def __str__(self):
        return self.name
    class Meta:
        db_table='spu'

# 'sku'  Commodity list 
class SKUS(models.Model):
    name=models.CharField('sku',max_length=100)
    describe=models.CharField(' Commodity Description ',max_length=500)
    price=models.DecimalField(' Price ',decimal_places=2,max_digits=8)
    stick=models.IntegerField(' stock ',default=0)
    sales=models.IntegerField(' sales ',default=0)
    detail=models.TextField(' details ',default='')
    image_default=models.CharField(' The default image ',max_length=300,default='')
    is_selling=models.BooleanField(' Are you selling ',default=True)  # Boolean type 
    # # Bind the product category table 
    cate=models.ForeignKey(Cate,on_delete=models.CASCADE,verbose_name=' Primary categories ')
    # # binding spu surface 
    spu=models.ForeignKey(SPUS,on_delete=models.CASCADE,verbose_name=' Belongs to SPU')
    def __str__(self):
        return self.name
    class Meta:
        db_table='sku'
        verbose_name_plural=' goods sku'

Generate migration files for migration
Write a piece of data inside

Write a serializer

from rest_framework import serializers
from .models import *
#SKU Serializer of model class 
class SKUSer(serializers.ModelSerializer):
    cate_name=serializers.SerializerMethodField(read_only=True)
    def get_cate_name(self,obj):
        return obj.cate.name
    class Meta:
        model=SKUS
        fields='__all__'
        read_only_fields=['id','detail','image_default','sales']
#SPU Serializer of model class 
class SPUSer(serializers.ModelSerializer):
    class Meta:
        model=SPUS
        fields=['id','name']
        read_only_fields=['id']

Write view classes

from rest_framework.viewsets import ModelViewSet
from .serializers import *
from .models import *
# sku View set 
class SKUAPIView(ModelViewSet):
    queryset = SKUS.objects.all()
    serializer_class = SKUSer
    lookup_field = 'pk'
    lookup_url_kwarg = 'pk'

#spu The view of 
class SPUAPIView(ModelViewSet):
    queryset = SPUS.objects.all()
    serializer_class = SPUSer

Configure the routing

from django.urls import path
from rest_framework import routers
from .views import *
urlpatterns = [
    # Interface of channel group , Get all 、 Add a new one 
    path('channels/',ListCreateGroupAPIView.as_view()),
    # Interface of channel group , retrieval , change , Delete 
    path('channels/<int:pk>/',ReUpDeAPIViwe.as_view()),
    # Load all first level categories 
    path('channels/firstcates/',FirstCateAPIView.as_view())
]
# Brand routing 
router=routers.SimpleRouter()
router.register('brands',BrandViewSet,'brands')
#spu Follow sku The routing 
router.register('skus',SKUAPIView,'skus')
router.register('spus',SPUAPIView,'spus')
urlpatterns+=router.urls

front end

Find the corresponding veu Components , To configure
Realization sku Addition, deletion and modification of
for example ：Sku.vue Get all the data

<script> import BreadCrumb from "@/components/widget/BreadCrumb"; //  Pass to sub components for function realization   Add data  import AddSku from "@/components/widget/AddSku"; //  Exhibition   modify   Delete data  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: {
       //  Get all the data  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); }); }, //  The method triggered when switching paging  }, }; </script>

for example ：AddSku.vue To add data
Modify the route in the event , Field etc.
Add the field of binding foreign key to realize the drop-down box addition

<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: {
       //  Get all the first level categories  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); }); }, //  Get all spu fnGetSPUs() {
       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); }); }, //  Click submit to trigger scoring method  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: " Product added successfully !", }); this.pop_show = false; this.$ref['userForm'].resetFields() this.$emit("fnResetTable"); }else{
       this.$message({
       type: "error", message: " Product addition failed !", }); } }) .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>

for example ：SkuTable.vue Modify the data
Modify the route in the event , Field etc.
Add the field of binding foreign key to realize the drop-down box addition

<script> import cons from "@/components/constant"; let token = localStorage.token; export default {
       name: "SkuTable", //  Receive the value from the parent component  props: ["skus"], data() {
       return {
       pop_show: false, edit_id: 0, skuForm: {
       name: "", spu: "", describe: "", cate: "", // Category id price: "", cost_price: "", market_price: "", stick: "", is_selling: "", cate_name: "", //  Category name  }, //  All categories  category_list: [], spus_list: [], specs_list: [], }; }, methods: {
       //  Get classification information   Get the first level category  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); }); }, //  get spu data  fnGetSPUs() {
       this.axios .get("/v1/goods/spus/", {
       headers: {
       Authorization: "JWT " + token, }, responseType: "json", }) .then((res) => {
       console.log(" load spus>>>", res.data); this.spus_list = res.data; }) .catch((err) => {
       console.log(err.response); }); }, //  Click the Modify button to trigger the method  fnPopShow(id) {
       //  Show pop ups  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; //  Classified id this.skuForm.cate_name = res.data.cate_name; //  Category name  // this.skuForm.spu_name = dat.data.spu_name; // spu Name  this.skuForm.spu = res.data.spu; // spu Of id }) .catch((err) => {
       console.log(err.response); }); }, //  Modify data submission  submitForm() {
       this.axios .put("/v1/goods/skus/" + this.edit_id + "/", this.skuForm, {
       headers: {
       Authorization: "JWT " + token, }, responseType: "json", } ) .then((res) => {
       console.log(' to update sku Response ',res); this.$message({
       type: "success", message: " The product has been modified successfully !", }); this.pop_show = false; this.$emit("fnResetTable"); }) .catch((err) => {
       if (err.response.status == 400) {
       this.$message({
       type: "info", message: err.response.data.name[0], }); } }); }, //  Delete function  fnDelSku(id) {
       this.edit_id = id; this.$confirm(" This action will delete the item ,  Whether or not to continue ?", " Tips ", {
       confirmButtonText: " determine ", cancelButtonText: " Cancel ", 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: " Delete successful !", }); this.$emit("fnResetTable"); }) .catch((err) => {
       if (err.response.status == 404) {
       this.$message({
       type: "info", message: " Item not found ！", }); } }); }) .catch(() => {
       this.$message({
       type: "info", message: " Delete cancelled ", }); }); }, }, computed: {
       look_good_id() {
       return this.skuForm.spu_id; }, }, watch: {
      } }, mounted() {
       // Load the first level category  this.fnGetCategory(); // load spu this.fnGetSPUs(); }, }; </script>