1.路飞前台全局css，全局配置文件
1.1 整理项目
将App.vue中的内容删除:
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
</style>
router/index.js:
import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
目前前端home页面什么都没有，只剩一个标题:
1.2 全局css
正常写前端项目，需要去掉所有标签的默认样式，css。我们首先定义一个全局样式:
步骤一：
src>>>asserts>>>css>>>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只需要导入就会生效，在main.js中配置:
main.js
import '@/assets/css/global.css'
1.3 全局js
向后端发送请求，请求地址测试阶段 127.0.0.1:8000。后期上线，地址要变，如果在组件中将地址写死，后期每个都需要改很麻烦。我们的解决方案是写一个全局js，js中有个url地址，后所有组件中发送请求时，都是用这个url地址。
步骤一:在assest>>>js中新建settings.js:
settings.js:
export default {
BASE_URL:'http://127.0.0.1:8000/api/v1'
}
步骤二:在main.js中引入:
main.js:
import settings from "@/assets/js/settings";
Vue.prototype.$settings = settings
// 此后在任意组件中只要 this.$settings.BASE_URL中即可拿到跟路由，再根据根录音继续拼接:this.$axios.get(this.$settings.BASE_URL+'/users').then(res=>{
})
2.安装axios
步骤一:安装:在Local命令行执行:
cnpm install axios -S
步骤二:
在main.js中配置:
main.js:
import axios from 'axios'
Vue.prototype.$axios=axios
步骤三:
在任意组件中可以使用:
this.$axios.get()
3.安装vue-cookies
后期登陆成功，token存储在cookie中
安装vue-cookies步骤:
步骤一:在Local命令行安装:
cnpm install vue-cookies -S
步骤二:把vue-cookie放到vue原型中
main.js
import cookies from "vue-cookies";
Vue.prototype.$cookies=cookies
步骤三:在任意组件中使用:
this.$cookies.set()
4.安装elementui
步骤一:在Local命令行安装:
(安装完成之后要在package.json中检查是否已经成功安装)
cnpm install element-ui -S
步骤二：在main.js中配置：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
步骤三:在组件中找到合适的样式复制粘贴
5.轮播图表创建
我们一进入主页就能看到一个轮播图，轮播图图片可以是写死的，也可以是动态获取的。对于轮播图有如下几个可能的字段:
创建时间、更新时间、更新人、是否删除、是否展示(对于没有删除的图片，也可以选择不展示)、图片标题、说明、跳转链接(可有可无)等。
其中几个字段比如:创建时间、更新时间、更新人、是否删除、是否展示，可能不止在轮播图这一张表中使用，所以我们采用建立一张基表(一个类)的形式，让其他需要用到这些字段的表继承该表(类)。
参考AbstratUser，User表继承了该类，但是该表在数据迁移后并没有显示，这是由于该类中:abstract = True来控制。我们也通过该命令控制基表不显示在表当中。
步骤一:在utils>>>common_model.py中建立该基表:
utils/common_model.py:
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=True, verbose_name='最后更新时间')
update_person = models.CharField(max_length=32, verbose_name='更新人')
is_show = models.BooleanField(default=True, verbose_name='是否展示')
is_delete = models.BooleanField(default=False, verbose_name='是否删除')
orders = models.IntegerField(verbose_name='优先级')
class Meta:
abstract = True # 控制该表不出现在luffy库当中
步骤二：在home>>>models.py中继承该表，并且扩展字段:
在home/models.py:
from django.db import models
from utils.common_model import 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='详情')
class Meta:
db_table = 'luffy_banner'
verbose_name_plural = '轮播图表' # 在admin后台管理中显示的名字
def __str__(self):
return self.title # 打印对象时自动触发
步骤三:执行数据库迁移命令:
python manage.py makemigrations
python manage.py migrate
6.后台主页轮播图模块接口
apps>>>views>>>home>>>views.py:
from rest_framework.viewsets import GenericViewSet
from .models import Banner
from .serializer import BannerSerializer
from rest_framework.mixins import ListModelMixin
class BannerView(GenericViewSet, ListModelMixin):
'''GenericViewSet继承了ModelViewSet和GenericAPIView，GenericAPIView中含有queryset和serializer_class，ModelViewSet负责自动生成路由'''
queryset = Banner.objects.filter(is_delete=False, is_show=True).order_by('orders')
serializer_class = BannerSerializer
序列化类继承ModelSerializer:
apps>>>home>>>serializer.py:
from rest_framework import serializers
from .models import Banner
class BannerSerializer(serializers.ModelSerializer):
class Meta:
model = Banner
fields = ['id', 'image', 'title', 'link', 'info'] # 返回给前端的字段
urls.py:
from rest_framework.routers import SimpleRouter
from home import views as home_view # 由于有两个app，每个app里面都有views，所以给每个app中的views起不同的别名。
router = SimpleRouter()
router.register('banner',home_view.BannerView,'banner') # 127.0.0.1:8000/api/v1/banner
urlpatterns = [
path('admin/', admin.site.urls),
path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}), # 负责开设media访问限制
path('api/v1/',include(router.urls))
]
目录结构如下:
7.用simpleui创建轮播图数据
步骤一:在django.admin中注册Banner表
apps>>>home>>>admin.py:
from django.contrib import admin
from .models import Banner
admin.site.register(Banner)
步骤二:下载simpleui
在Local命令行输入:
pip install django-simpleui
步骤三:在dev.py中注册simpleui(一般注册在最上面):
INSTALLED_APPS = [
'simpleui',
...
'rest_framework',
'home',
'user'
]
步骤四：创建超级管理员
在Local命令行输入:
python manage.py createsuperuser
此时我们通过root和123的超级管理员可以登录到admin后台管理:
步骤五：在admin后台管理中对轮播图表插入数据:
这时我们通过自动生成的路由:127.0.0.1:8000/api/v1/banner，发送get请求就可以拿的到所有的banner数据:
