Vue和drf的一些操作

django-drf 后端部分操作

####1  urls.py 路由配置
from rest_framework.routers import  SimpleRouter
router=SimpleRouter()

router.register('banner',views.BannerView,'banner')  # /banner/banner/
router.register('',views.BannerView,'banner')  # /banner/

urlpatterns = [
    path('', include(router.urls)),
]

####2 views.py  排序，切片，返回一部分
from django.conf import settings
class BannerView(GenericViewSet,ListModelMixin):
    queryset = models.Banner.objects.filter(is_delete=False,is_show=True).order_by('display_order')[:settings.BANNER_COUNTER]
    serializer_class = serializer.BannerModelSerilaizer
    
        
### 4 models.py  图片字段
from utils.models import BaseModel

class Banner(BaseModel):
    img=models.ImageField(upload_to='banner',verbose_name='轮播图',help_text='图片尺寸必须是：3840*800',null=True)

    def __str__(self):
        return self.name
    
####5 utils/models.py  抽象表，公共字段

class BaseModel(models.Model):
    display_order = models.IntegerField()
    class Meta:
        abstract=True  # 抽象表，不生成实际的表
        
### 6 settings/const.py  配置文件中 记录一些变量
# 首页轮播图个数
BANNER_COUNTER=3

#### 7 settings/dev.py  导入其它自定义配置文件的配置 变量
from .const import *

vue 前端路由配置

路由的配置方式

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/free-course',
        name: 'FreeCourse',
        component: FreeCourse
    }
]

路由跳转的方式

#html中路由点击跳转链接  相当于超链接
<router-link to="/">
<img src="../assets/img/head-logo.svg" alt="">
</router-link>
#js中控制路由跳转  跳转到指定路径
this.$router.push('/');
或者
open(url)

配置全局css和setting

# 在main.js中配置
// 配置全局样式 @ 符号，代指src路径
import '@/assets/css/global.css'
// 配置全局自定义设置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
// this.$settings.base_url + '后台路由'

# 在assets下的css中加入global.css
全局 css ，导入使用

# 在assets下的js中加入settings.js
export default {                         # 暴露变量
    base_url: 'http://127.0.0.1:8000'
}