luffy商城项目（二）

路飞后端配置

二次封装response

drf提供的Response对象，不能很方便的加入code和msg字段，自己封装一个Response类，以后都用我们自己封装的，方便咱们写code和msg

封装步骤：

1 在utils/common_response.py

from rest_framework.response import Response
class APIResponse(Response):
def __init__(self, code=100, msg='成功', status=None, headers=None, **kwargs):
data = {'code': code, 'msg': msg}
if kwargs:
data.update(kwargs)
super().__init__(data=data, status=status, headers=headers)

2 以后在视图类中，导入使用即可

class TestResponseView(APIView):
    def get(self,request):
        # return APIResponse(token='xx.xx.xx',icon='/media/icon/default.png')
        # return APIResponse(msg='创建成功')
        # return APIResponse(msg='用户不存在',code='101')
        # return APIResponse(results=[{},{}])
        return APIResponse(headers={'xx':'yy'})

封装drf五个视图扩展类

1 在utils/mixins.py

from rest_framework.mixins import ListModelMixin, DestroyModelMixin, RetrieveModelMixin, CreateModelMixin, \
    UpdateModelMixin
from .common_response import APIResponse

class CommonListModelMixin(ListModelMixin):
    def list(self, request, *args, **kwargs):
        # Response的对象，res.data
        res = super().list(request, *args, **kwargs)
        return APIResponse(results=res.data) # {code:100,msg:成功,results:[{},{}]}

class CommonCreateModelMixin(CreateModelMixin):
    def create(self, request, *args, **kwargs):
        res = super().create(request, *args, **kwargs)
        return APIResponse(msg='新增成功', result=res.data) # {code:100,msg:新增成功,result:{}}

class CommonDestroyModelMixin(DestroyModelMixin):
    def destroy(self, request, *args, **kwargs):
        super().destroy(request, *args, **kwargs)
        return APIResponse(msg='删除成功') # {code:100,msg:删除成功}

class CommonUpdateModelMixin(UpdateModelMixin):
    def update(self, request, *args, **kwargs):
        res = super().update(request, *args, **kwargs)
        return APIResponse(msg='修改成功', result=res.data) # {code:100,msg:修改成功,result:{}}

class CommonRetrieveModelMixin(RetrieveModelMixin):
    def retrieve(self, request, *args, **kwargs):
        res = super().retrieve(request, *args, **kwargs)
        return APIResponse(msg='修改成功', result=res.data) # {code:100,msg:成功,result:{}}

开启media访问

# 1 新增用户---》先配置media--》以后头像都传到 media/icon 内
createsuperuser 创建用户

# 2 配置文件
# media配置
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = 'media/'

#3 路由
from django.views.static import serve
from django.conf import settings
path('media/<path:path>', serve, kwargs={'document_root': settings.MEDIA_ROOT}),

路飞前台项目创建和配置

创建项目

# 1 创建项目

在目标路径 vue create 项目名
# 2 删除一些不用的
-App.vue中只保留
<template>
<div id="app">
<router-view/>
</div>
</template>
# 3 HomeView.vue
<template>
<div class="home">
<h1>首页</h1>
</div>
</template>
<script>
export default {
name: 'HomeView',
}
</script>
# 4 router/index.js
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
]

记得＋npm

前台全局样式和js配置

global.css

/* 声明全局样式和项目的初始化样式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}

table {
    border-collapse: collapse; /* 合并边框 */
}

main.js

// 在这导入即可--》全局样式生效
import '@/assets/css/global.css'

// 在main.js中注册
import settings from "@/assets/js/settings";
Vue.prototype.$settings = settings

settings.js

export default {
    BASE_URL:'http://127.0.0.1:8000/'
}

# 以后再任意组件中
this.$settings.BASE_URL # 拿到基地址

axios

# 1 安装
cnpm install -S axios

# 2 在main.js中注册
import axios from "axios";
Vue.prototype.$axios = axios

# 3 以后再任意组件中直接使用
this.$axios.get(this.$settings.BASE_URL+'user/user/login/')

使用elementui

# 1 安装
cnpm install element-ui -S
# 2 main.js 配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

操作cookie

# 安装：前端项目目录下的终端
cnpm install vue-cookies
# 配置：main.js
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

# 以后任意组件直接使用
this.$cookies操作即可

后台主页功能

轮播图表

# 首页
-轮播图接口
-推荐课程接口---》写到课程才能写

# 创建app，创建轮播图表
####utils/common_model.py
from django.db import models
class BaseModel(models.Model):
created_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
updated_time = models.DateTimeField(auto_now=True, verbose_name='最后更新时间')
is_delete = models.BooleanField(default=False, verbose_name='是否删除')
is_show = models.BooleanField(default=True, verbose_name='是否上架')
orders = models.IntegerField(verbose_name='优先级')

class Meta:
abstract = True # 这样写了，这张表是个虚拟的，不会在数据库创建，只用来继承

#####home/models.py
from utils.common_model import BaseModel
# 通过写一个BaseModel 实现，以后如果其他表中有对应字段，直接继承即可
class Banner(BaseModel):
# 排序，上传时间，是否显示，是否删除（软删除--》通过字段控制--》数据还在）
# 轮播图名字，路径，点击跳转的页面，轮播图描述
title = models.CharField(max_length=16, unique=True, verbose_name='名称')
image = models.ImageField(upload_to='banner', verbose_name='图片')
link = models.CharField(max_length=64, verbose_name='跳转链接')
info = models.TextField(verbose_name='详情')

轮播图接口

###### 序列化类#####
from rest_framework import serializers
from .models import Banner
class BannerSerializer(serializers.ModelSerializer):
class Meta:
model = Banner
fields = ['id', 'title', 'image', 'link']

#### 视图类##########
from .models import Banner
from rest_framework.viewsets import GenericViewSet
from utils.mixins import CommonListModelMixin
from .serializer import BannerSerializer
from django.conf import settings
# 查询所有轮播图
class BannerView(GenericViewSet, CommonListModelMixin):
# qs对象可以切片----》 limit 2
queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]
serializer_class = BannerSerializer

#### 路由##########
from rest_framework.routers import SimpleRouter
from .views import BannerView
router = SimpleRouter()
router.register('banner', BannerView, 'banner')
urlpatterns = [
]
urlpatterns += router.urls

自定义配置

#1 以后咱们会有自定义的配置，统一都写在
#common_settings.py中
BANNER_COUNT=3

#2 只需要在配置文件中导入
# 导入自定义配置---》统一都会给 django的的settings
from .common_settings import *

#3 以后用，
from django.conf import settings
queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]