后台品牌管理功能实现

新建子应用

在现在的后台项目里再创建一个goods子应用
再settings.py文件里注册子应用
路由分发，新建urls.py文件
配置序列化器，创建serializers.py

创建模型类

在子应用下的models.py文件中创建

from django.db import models
# Create your models here.
class Brand(models.Model):
    first_name=models.CharField('品牌首字母',max_length=10,default=None)
    name=models.CharField('品牌名称',max_length=20)
    # 用来存储图片地址
    logo=models.CharField('品牌logo',max_length=200)
    def __str__(self):
        return self.name
    class Meta:
        db_table='brand'
        verbose_name_plural='品牌'

生成迁移文件进行迁移

往里添加几条数据
例如：

需要配置静态文件
在根目录创建static文件夹
在项目根目录中的settings.py里进行配置

STATIC_URL = '/static/'
STATICFILES_DIRS=(       #注意，逗号不能忘记加
    os.path.join(BASE_DIR,'static'),
)

编写序列化器

在子应用下创建serializers.py文件中创建

from rest_framework import serializers
from .models import *
#定义品牌的序列化器
class BrandSer(serializers.ModelSerializer):
    #                         输入允许为空
    logo=serializers.CharField(allow_null=True,allow_blank=True)
    class Meta:
        model=Brand
        fields='__all__'
        # 只能序列化输出  只读
        read_only_fields=['id']

编写视图类

from django.shortcuts import render
from rest_framework.viewsets import ModelViewSet
from rest_framework.views import APIView
from rest_framework.response import Response
from p6_306 import settings
from .models import *
from .serializers import *
import os
# Create your views here.
#分页器类
from rest_framework.pagination import PageNumberPagination
class MyPagination(PageNumberPagination):
    page_size = 3
    max_page_size = 5
    page_query_param = 'page'
    page_size_query_param = 'pageSize'
#品牌的视图集
class BrandViewSet(ModelViewSet):
    queryset = Brand.objects.all()
    serializer_class = BrandSer
    lookup_field = 'pk'
    lookup_url_kwarg = 'pk'
    pagination_class = MyPagination

#上传logo的视图
class UploadLogoAPIView(APIView):
    def post(self,request):
        #1.获取前端的数据
        file=request.data.get('file')
        #2.拼接一下路径
        static_path='static/images/logos'
        file_path=os.path.join(settings.BASE_DIR,static_path)
        #最终文件名
        file_name=os.path.join(file_path,file.name)
        # 3.保存图片的字节流
        with open(file_name,'wb')as f:
            f.write(file.file.read())
        return Response({
            'code':200,
            'msg':'图片上传成功',
            'static_path':static_path
        })

配置路由

from django.urls import path
from rest_framework import routers
from .views import *
urlpatterns = [
 #上传logo
    path('upload/logo/',UploadLogoAPIView.as_view())
]
#品牌的路由
router=routers.SimpleRouter()
router.register('brands',BrandViewSet,'brands')
urlpatterns+=router.urls

前端

找到对应的vue组件进行配置
展示全部品牌信息
组件例如：Brands.vue

<script>
import BreadCrumb from '@/components/widget/BreadCrumb'
// 添加的子组件
import Addbrands from '@/components/widget/AddBrands'   
// 展示 删除 修改 的子组件
import BrandsTable from '@/components/widget/BrandsTable'  
export default {
  name: 'Brands',
  data () {
    return {
      page:1,
      total:0,
      pagesize:2,
      aBrandsList:[]
    }
  },
  components:{
    BreadCrumb,
    Addbrands,
    BrandsTable
  },
  mounted(){
    this.fnGetData(1);
  },
  methods:{
    fnGetData(num){  // 接收全部品牌信息
      this.axios.get('/v1/goods/brands/',{
        params:{
          page:num,
          pageSize:this.pageSize
        },
        headers:{
          Authorization:'JWT '+localStorage.token
        },
        responseType:'json'
      }).then((result) => {
        console.log('加载所有品牌的响应',result)
        if (result.status==200){
          this.aBrandsList=result.data.results
          this.total=result.data.count
        }else{
          this.$message({
            type:'error',
            message:'加载品牌错误'
          })
        }
      }).catch((err) => {
        console.log('加载失败的响应',err)
      });
    },
    // 加载对应页面的数据
    fnGetPage(page){
      this.page=page
      this.fnGetData(page)
    },
  }
}
</script>

展示删除修改的vue组件

<script>
import cons from '../constant';
// import cons from '@/components/constant';
let token = localStorage.token;
export default {
  name: 'OptionsTable',
  // 接收父组件传递的值
  props:['brands'],
   data () { 
    return {
      host:'http://127.0.0.1:8000',
      pop_show:false,
      group_type_list:[],
      category_list:[],
      BrandsForm:{
        name:'',
        first_name:'',
        logo:''
      },
      fileList:[],
      rulesBrandsForm:{}
    }
  },
  methods:{
    handleSuccess(res,files){
      console.log('上传成功的响应',res)
      this.BrandsForm.logo='/'+res.static_path+'/'+files.name
    },
    // 点击编辑触发的方法
  	fnPopShow(id){
  		this.pop_show = true;
      this.edit_id = id;
      this.axios.get('/v1/goods/brands/'+this.edit_id+'/', {
            headers: {
              'Authorization': 'JWT ' + token
            },
            responseType: 'json',
        })
        .then(res=>{
           this.BrandsForm.name = res.data.name;
           this.BrandsForm.logo = res.data.logo;
           this.BrandsForm.first_name = res.data.first_name;
        }).catch(err=>{
           console.log(err.response);
      });
  	},
    // 修改点击提交触发的方法
  	submitForm(){
  		this.axios.put('/v1/goods/brands/'+this.edit_id+'/', this.BrandsForm, {
            headers: {
              'Authorization': 'JWT ' + token
            },
            responseType: 'json'           
        }).then(res=>{
          this.$message({
            type: 'success',
            message: '品牌修改成功!'
          }); 
        	this.pop_show = false;           
          this.resetForm('ChannelsForm');
          this.$emit('fnResetTable');
        }).catch(err=>{
        	console.log(err.response);
        })
  	},
    // 删除品牌
  	fnDelBrands(id){
        this.edit_id = id;
        this.$confirm('此操作将删除该品牌, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.delete('/v1/goods/brands/'+this.edit_id+'/',{
              headers: {
                'Authorization': 'JWT ' + token
              },
              responseType:'json'           
          }).then(res=>{
            console.log('删除品牌的响应',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: '已取消删除'
          });          
        });  		
  	},
    resetForm(formName){
      this.$refs[formName].resetFields();
    }
  },
  mounted(){
    this.fnGetChannelType();
    this.fnGetCategories();
  }
}
</script>

添加的组件

<script>
// import cons from '@/components/constant';
let token = localStorage.token;
export default {
  name: 'AddChannels',
  data () { 
    return {
      daka:false,
      host:'http://127.0.0.1:8000',
      pop_show:false,
      group_type_list:[],
      category_list:[],
      BrandsForm:{
        name:'',
        first_name:'',
        logo:''
      },
      fileList:[],
      rulesBrandsForm:{}
    }
  },
  methods:{
    handleSuccess(res,files){
      console.log('上传成功的响应',res)
      this.BrandsForm.logo='/'+res.static_path+'/'+files.name
      this.daka=true
    },
    // 点击提交触发的方法
    submitForm(){
        this.axios.post('/v1/goods/brands/',this.BrandsForm,{
          headers:{
            Authorization:'JWT '+token
          },
          responseType:'json'
        }).then((result) => {
          if (result.status==201){
            this.$message({
              type:'success',
              message:'添加品牌成功'
            })
          this.pop_show=false
          this.resetForm('BrandsForm')
          this.$emit('fnResetTable')
          }else{
            this.$message({
              type:'error',
              message:'添加品牌失败'
            })
          }
        }).catch((err) => {
          console.log('添加品牌错误',err)
        });
    },
    fnGetChannelType(){},
    fnGetCategories(){},
    resetForm(formName){
      this.$refs[formName].resetFields();
      this.daka=false
    }
  },
  mounted(){
    this.fnGetChannelType();
    this.fnGetCategories();
  }
}
</script>