目录
路飞项目 - 前端准备
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中
标签：cookies,vue,models,前端,js,路飞,axios,准备,import
From： https://www.cnblogs.com/DuoDuosg/p/17165631.html