前端配置、跨域、扩写用户表、轮播图

luffy项目前端配置

# 1 跟后端交互：axios
	cnpm install -S axios
	以后想发送ajax请求，必须导入，使用
    可以把axios放到vue实例中，以后任意组件中  this.$axios.get()
	main.js中加入
    import axios from 'axios'
	Vue.prototype.$axios = axios;

# 2 操作cookie： vue-cookies
	cnpm install -S vue-cookies
    import cookies from 'vue-cookies'
    Vue.prototype.$cookies = cookies;
# 3 ui库：elementui
    cnpm install -S element-ui
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';  // 全局都会有这个css的样式
    Vue.use(ElementUI);

    
    
# 4 去掉 标签的默认样式
    1 编写全局css
        assets/css/global.css
    2 main.js中导入
    import '@/assets/css/global.css'

# 5 全局配置文件
	# 写一个settings.js
    export  default {
        BASE_URL:'http://127.0.0.1:8000/'
    }
   	# main.js中
    import settings from "@/assets/js/settings";
	Vue.prototype.$setting = settings

去除默认样式

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

跨域问题

#1 前后端打通---出现CORS policy 错误

#2 跨域问题出现的原因，源自于浏览器的同源策略，同源策略问题只会出现在前后端分离的web项目中

#3 同源策略：
	同源策略（Same origin policy）是一种约定，约定了请求的url地址，必须与浏览器上的url地址处于同一域上，也就是域名、端口、协议相同，如果违背了这个协议，浏览器就会报错
    请求正常发送了，服务器也响应了，但是返回浏览器的时候，报错了，被浏览器的同源策略拦截了
    
#4 CORS（跨域资源共享）--->是一个后端技术-->后端只需要在响应头中加入固定的响应头，前端就不禁止了

#5 CORS请求分为两类(浏览器发请求之前会判断)
    -简单请求：
    	只发送一次请求，就是真正的请求
    -非简单请求：
    	先发送一个options的预检请求，服务端如果写了cors，再发送真正的请求，如果没写cors，浏览器就不会发送真正的请求，
        
#6 只要同时满足以下两大条件，就属于简单请求。
    # 1 请求方法是以下三种方法之一：
        HEAD
        GET
        POST
    #2 HTTP的头信息不超出以下几种字段：
        Accept
        Accept-Language
        Content-Language
        Last-Event-ID
        Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

自己解决跨域问题

from django.utils.deprecation import MiddlewareMixin
class CORSMiddleWare(MiddlewareMixin):
    def process_response(self, request, response):
        # 简单请求
        response['Access-Control-Allow-Origin'] = '*'  # 允许所有客户端
        # 非简单请求
        if request.method == 'OPTIONS':
            # res['Access-Control-Allow-Methods'] = 'DELETE,PUT'
            response['Access-Control-Allow-Methods'] = '*'
            response['Access-Control-Allow-Headers'] = '*'
        return response

使用第三方解决

# 1 下载
pip install django-cors-headers
# 2 注册app
INSTALLED_APPS = (
	...
	'corsheaders',
	...
)
# 3 加中间件
MIDDLEWARE = [  
	...
	'corsheaders.middleware.CorsMiddleware',
	...
]
# 4 配置文件
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
	'DELETE',
	'GET',
	'OPTIONS',
	'PATCH',
	'POST',
	'PUT',
	'VIEW',
)

CORS_ALLOW_HEADERS = (
	'XMLHttpRequest',
	'X_FILENAME',
	'accept-encoding',
	'authorization',
	'content-type',
	'dnt',
	'origin',
	'user-agent',
	'x-csrftoken',
	'x-requested-with',
	'Pragma',
	'token'
)

后端数据库迁移

用户板块，用户表迁移

# 用户表，使用auth的user表，自己写
	-如果用的是auth的user表，必须在迁移之前，就定好，扩写的要写完
    
from django.db import models
from django.contrib.auth.models import AbstractUser
# 扩写auth的user表，新增两个字段
class User(AbstractUser):
    mobile = models.CharField(max_length=11, unique=True)
    # 需要pillow包的支持
    icon = models.ImageField(upload_to='icon', default='icon/default.png')

    class Meta:
        db_table = 'luffy_user'  # 指定表名
        verbose_name = '用户表'  # 后台管理看到的中文
        verbose_name_plural = verbose_name

    def __str__(self):  # 打印对象，显示的
        return self.username

3 dev.py中注册
    INSTALLED_APPS = [
            'user',
        ]
    AUTH_USER_MODEL='user.User'
4 迁移命令 两条

后台主页功能

软件开发模式

# 1 瀑布开发模式
	-架构，数据库设计---》分任务开发(周期很长，可能半年)---》测试---》上线
    
# 2 敏捷开发(devops)
	-架构设计--》很多板块
    -开发某个版块，再设计相关板块的数据库   # 一周左右
    -开发某个板块
    -测试测试该板块
    -运维上线该板块
    
    -开发另一个版本
    
    
# 根据原型图，分析出首页需要配合俩接口
	-轮播图接口(要写)
    	-查询所有轮播图
    -推荐课程接口(暂时先不写)
    
    
# 设计表：
	轮播图表：Banner
	
# 写轮播图接口
	-查询所有轮播图

轮播图表

# 公共字段
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  # 这个表，只用来继承，不会再数据库生成表


# 轮播图表
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 = '轮播图表'

    def __str__(self):
        return self.title

轮播图接口

视图类

#### 轮播图接口
from rest_framework.generics import GenericAPIView
from rest_framework.mixins import ListModelMixin
from rest_framework.generics import ListAPIView
from rest_framework.viewsets import ViewSetMixin, GenericViewSet
from .models import Banner
from .serializer import BannerSerializer
from django.conf import settings

# class BannerView(ViewSetMixin,ListAPIView): # 自动生成路由
# class BannerView(ViewSetMixin,GenericAPIView,ListModelMixin): # 自动生成路由

class BannerView(GenericViewSet, ListModelMixin):  # 自动生成路由
    queryset = Banner.objects.filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]
    serializer_class = BannerSerializer

序列化类

from rest_framework import serializers
from .models import Banner


class BannerSerializer(serializers.ModelSerializer):
    class Meta:
        model = Banner
        fields = ['id', 'image', 'link']

路由

from django.contrib import admin
from django.urls import path
from home import views  # pycharm报错，但实际上不报错 ，只需要把加入到环境变量的路径都做成source root即可
from rest_framework.routers import SimpleRouter
from .views import BannerView

router = SimpleRouter()
# 127.0.0.1:8080/api/v1/home/banner/--- get
router.register('banner', BannerView, 'banner')

urlpatterns = [

]
urlpatterns += router.urls

配置文件

# 导入用户配置
from .user_settings import *


### user_settings.py
# 用户自己配置，单独放到一个py文件中
BANNER_COUNT=3

# 后续可能还用别的配置

后台管理界面

# 1 下载simpleui--->app中注册
# 2 创建一个root用户，后台登录
# 3 后台登录，录入数据：admin中注册这个表
    -from django.contrib import admin
    -from .models import Banner
    -admin.site.register(Banner)
# 4 默认情况文件传到根路径下
	需要配置：以后照片都会放到meida文件夹下 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
    
# 5 接口中不带meida 路径的： 
	在配置文件中：
		MEDIA_URL = 'media/'   # 取出的文件地址，拼接上media这个目录
# 6 让前端能访问图片
	在主路由中配置：
        from django.contrib import admin
        from django.urls import path, include
        from django.conf import settings
        from django.views.static import serve
        urlpatterns = [
            path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),
        ]