路飞项目 - 前端准备

目录

• 路飞项目 - 前端准备
  • 1 路飞前台全局css，全局配置文件
    • 1.1 vue-cli创建项目，整理项目
    • 1.2 全局css清理
    • 1.3 全局js
      • 组件中发送url的两种方法
        • （1）方法一：放到vue的原型中
  • 2 axios放入Vue原型中
    • 使用步骤
  • 3 安装vue-cookies并放入Vue原型
    • 使用步骤
  • 4 安装并使用elementui
    • 使用步骤
  • 5 后台主页模块 - 模型表设计
    • 5.1 接口分析
    • 5.2 在后端中编写 轮播图的表模型
  • 6 后台主页轮播图接口 - 前端接口
    • 6.1 视图类home-views.py
    • 6.2 序列化类
    • 6.3 路由分发
  • 7 使用simpleui并录入数据
    • 7.1 安装注册simpleui
    • 7.2 录入数据

路飞项目 - 前端准备

---

1 路飞前台全局css，全局配置文件

1.1 vue-cli创建项目，整理项目

通过vue-cli创建vue3项目，选择安装vuex和router插件

并整理项目

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

router/index.js

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
]

HomeView.vue

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>
 
<script>
 
export default {
  name: 'HomeView',
}
</script>
 

其它页面组件和小组件都删除

1.2 全局css清理

由于全局的样式需要我们自己去调整，而html的各种标签自带一些样式，以及margin、boder等等，所以我们需要统一将默认样式去掉

① 第一步：在assets中新建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中配置

使用global.css中设置的全局css样式，在main.js中导入即可生效

import '@/assets/global.css'

1.3 全局js

全局中的一些常常用到的js变量，我们可以新建一个js文件来存放，这样就不用反复定义了。

比如axios发送的url地址，我们可以封装到全局js中，方便修改。

组件中发送url的两种方法

（1）方法一：放到vue的原型中

① 新建全局js文件：assets - 新建settings.js

// 声明全局js变量
 
 
export default {
    // url地址
    BASE_URL:'http://127.0.0.1:9000/api/v1'
}

② 在main.js中引入 - 放入vue原型中

// 在全局js中导入
import settings from "@/assets/settings";
 
将 settings 的全局js变量放入Vue原型中
Vue.prototype.$settings = settings

③ 在任意组件中导入使用

this.$settings.BASE_URL

（2）方法二：做成混入

2 axios放入Vue原型中

在与后端交互中常常用到axios，所以我们应该也讲axios放入Vue原型中

使用步骤

① 第一步：安装axios插件

npm install axios -S

② 第二步：将axios导入main.js-把axios放到vue原型中

import axios from "axios";
Vue.prototype.$axios = axios

③ 在组件中使用

this.$axios.get(this.$settings.BASE_URL+'/media/球球.jpeg').then(res=>{})

3 安装vue-cookies并放入Vue原型

后期登录成功之后，token存在cookie中，所以我们也要重复用到vue-cookies，要将其放入原型中以便使用

使用步骤

① 第一步：安装vue-cookies

npm install vue-cookies -S

② 第二步：将vue-cookies导入main.js 并把vue-cookies放到vue原型中

import cookies from 'vue-cookies'
 
Vue.prototype.$cookies = cookies

③ 第三步：在组件中使用

this.$cookies.get()
this.$cookies.set()

4 安装并使用elementui

使用步骤

① 第一步：安装elementui

npm install element-ui -S

② 第二步：在main.js中配置

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI)

③ 第三步：需要使用的地方直接复制

5 后台主页模块 - 模型表设计

5.1 接口分析

- 轮播图接口
- 推荐课程接口(暂时没写)
- 推荐老师(没有)
- 学员评论(没有)

5.2 在后端中编写 轮播图的表模型

① 第一步：在后端apps文件夹下建立home

切换到apps文件夹下，在终端中执行

python ../../manage.py  startapp home

② 第二步：在utils下新建 common_models.py 文件夹

• 用于存储基表，这样其他app的共有字段不用再重编，只需要继承基表

• 表明该基表只用来继承，不会在执行迁移命令的时候生成实体表，所以abstract为true

from django.db import models
 
 
class BaseModel(models.Model):
    """表的基类，包含了很多共有字段"""
    create_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
    update_time = models.DateTimeField(auto_now_add=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时，表明该基表只用来继承，不会在执行迁移命令的时候生成实体表
        abstract = True
 

③ 第三步：在app-home的models.py中建立轮播图表

from django.db import models
# 导入基表，其他表继承与该表
from utils.common_models import BaseModel
 
 
class Banner(BaseModel):
    """轮播图表"""
    title = models.CharField(max_length=16, verbose_name='名称')
    image = models.ImageField(upload_to='banner', verbose_name='图片')
    link = models.CharField(max_length=64, verbose_name='跳转链接')
    info = models.TextField(verbose_name='详情')
 
    class Meta:
        db_table = 'luffy_banner'
        verbose_name_plural = '轮播图表'
 
    def __str__(self):
        return self.title

④ 第四步：执行迁移命令

python manage.py makemigrations
python manage.py migrate

6 后台主页轮播图接口 - 前端接口

在app-home下编写轮播图后台接口

6.1 视图类home-views.py

from django.shortcuts import render
# 导入drf的视图类
from rest_framework.viewsets import GenericViewSet
from rest_framework.mixins import ListModelMixin
# 导入表模型
from .models import Banner
# 导入序列化类
from .serializers import BannerSerializer
# 导入封装好的统一返回给前端的项目的Response类，帮助我们返回定制格式给前端
from utils.common_response import MyResponse
 
 
# app home下的视图类
 
class BannerView(GenericViewSet, ListModelMixin):
    # 继承了GenericViewSet，则需要声明序列化对象和序列化类
    queryset = Banner.objects.filter(is_delete=False, is_show=True).order_by('orders')
    serializer_class = BannerSerializer
 
    def list(self, request, *args, **kwargs):
        ser = super().list(request, *args, **kwargs)
        return MyResponse(data=ser.data)

6.2 序列化类

from rest_framework import serializers
# 导入表模型
from .models import Banner
 
 
class BannerSerializer(serializers):
    class Meta:
        # 指定序列化的表模型与字段
        model = Banner
        fields = ['id', 'title', 'image', 'link']

6.3 路由分发

• 在父路由中

from django.contrib import admin
from django.urls import path, include
from django.views.static import serve
 
from luffy_api.apps.user import views
from django.conf import settings
 
 
urlpatterns = [
    path('admin/', admin.site.urls),
    # path('test_logging/', views.test_logging),
    # path('test_exc/', views.TestExceptions.as_view()),
 
    # 开启media访问路由
    path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),
 
    # 由于有多个app所以减少耦合进行路由分发
    path('api/v1/home',include('home.urls'))
]

• home的子路由

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

7 使用simpleui并录入数据

7.1 安装注册simpleui

后台管理使用django 的admin做的simpleui

① 第一步：pip安装simpleui

 pip install django-simpleui 

② 第二步：注册app

 # Application definition
 
  INSTALLED_APPS = [
      'simpleui',
      'django.contrib.admin',
      'django.contrib.auth',
      ...
  ]

7.2 录入数据

① 在home的admin.py中对模型表注册

这样在django-admin的后台页面上才能显示出来

from django.contrib import admin
 
# Register your models here.
from .models import Banner
admin.site.register(Banner)

② 在Home下的轮播图表中新增四张图，则会保存到media中