一、前端全局样式与Js配置

我们前端创建完成是默认是有样式的 所以我们得配置自己的样式
src/assets/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; /* 合并边框 */
}

src/main.js

import '@/assets/css/global.css'        // 去掉所有的标签默认样式

import settings from "@/assets/settings/settings";  // 全局配置
Vue.prototype.$settings = settings;

在我们发送请求的时候目前我们还是写固定的地址 后期上线修改比较麻烦 所以我们单独添加一个settings文件专门存放路径

src/assets/settings/settings.js

export default {
    base_url: 'http://127.0.0.1:8000/'
}

后续我们发送请求就可以通过$settings.base_url拿到路径

  created() {
    this.$axios.get(this.$settings.base_url+'testview').then(res => {
          console.log(res)
        },)
  },

二、后端主页轮播图功能编写

1. 创建App(home)

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

3. 编写一个父类后续方便写表

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		 // 表示是否战士在数据库 跟AbstractUser一样底层原理

3. 编写轮播图表 Banner

from django.db import models
from utils.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

4. 迁移命令

python manage.py makemigrations
python manage.py migrate

三、轮播图接口编写

1. 分路由

from django.urls import path, include
from home import views
urlpatterns = [
    path('api/v1/home/', include('home.urls')),     # 路由分发 8000/api/v1/home
]

2. 在home的app中新建url.py

from . import views
from rest_framework.routers import SimpleRouter

router = SimpleRouter()
router.register('banner', views.BannerView, 'banner')

urlpatterns = [
                    # 如果没有也需要写 否则报错 
]
urlpatterns += router.urls

3. home.views.py

from .models import Banner
from rest_framework.viewsets import GenericViewSet
from utils.views import CommonListModelMixin
from .serializer import BannerSerializer

class BannerView(GenericViewSet, CommonListModelMixin):		// 注意自定义的CommonListModelMixin方便重写List
    queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')
    serializer_class = BannerSerializer

4. 重写list方法—utils/views.py

from rest_framework.mixins import ListModelMixin
from utils.response import APIResponse

class CommonListModelMixin(ListModelMixin):
    def list(self, request, *args, **kwargs):
        res = super().list(request, *args, **kwargs)
        return APIResponse(result=res.data)

5. 编写序列化类 home/serializer.py

from .models import Banner
from rest_framework import serializers

class BannerSerializer(serializers.ModelSerializer):
    class Meta:
        model = Banner
        fields = ['title', 'image', 'link']		// 根据需求写入信息

5. SimpleUi

pip install django-simpleui

dev.setting.py
	INSTALLED_APPS = [
    'simpleui',
	]

6. 创建超级用户 录入数据

python manage.py createsuperuser

四、跨域问题详解 前后端打通

这个时候我们前端朝后端发送请求 会出现前后端交互跨域问题

跨域问题出现的原因是什么呢？

同源策略Same origin policy是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现请求的url地址,必须与浏览器上的url地址处于同域上,
也就是域名,端口,协议相同.比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名：127.0.0.1:8001一段数据浏览器上就会报错，
这个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险。

解决跨域问题方法

1. 前端代理
2. nginx代理
3. cors解决跨域

我们主要讲一讲cors解决跨域问题

CORS：跨域资源共享，后端技术，核心就是在响应头中加入数据，允许浏览器接受数据CORS需要浏览器和服务器同时支持，IE浏览器不能低于IE10

CORS基本流程
浏览器将CORS请求分为两类：

• 简单请求 simple request
• 非简单请求 not so simple request

什么是简单请求？

浏览器发出CORS简单请求，只需要在头信息之中增加一个Access-Control-Allow-Origin字段，请求方式是一下三分之一 HEAD、GET、POST

什么是非简单请求？

浏览器发出CORS非简单请求，会在正式通信之前，先发送一个options请求，称为”预检”请求。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，如果运行，再发真正的请求。

HTTP的请求头信息有以下几种字段：Accept、Accept-Language、Content-Language、Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

1)CORS解决跨域方式一

def test(request):
    print(request.method)
    res = HttpResponse('OK')
    res['Access-Control-Allow-Origin'] = '*'
    if request.method == 'OPTIONS':
        res['Access-Control-Allow-Origin'] = 'Content-Type'
    return res

2)CORS解决跨域方式二

安装django-cors-headers

pip install django-cors-headers

注册模块

INSTALLED_APPS = [
    'corsheaders',
]

注册中间件

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',
]

配置

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',
)

五、自定义配置

有些公共配置信息 放到单独一只配置文件中 方便后期修改

新建一个common_settings.py

BANNER_NUM = 3

控制Banner显示数量

class BannerView(GenericViewSet, CommonListModelMixin):
    queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')[
               :settings.common_settings.BANNER_NUM]
    serializer_class = BannerSerializer

六、Git安装

后端写了一个接口，完成了一个功能，在公司里功能完成要把代码提交到远程仓库
公司里协同开发,版本管理需要使用软件：svn、git

Git官网：https://git-scm.com/download
进官网>MacOs>Binary installer>Download
安装一直下一步即可

查看是否安装成功

终端输入>>>>>>>.     git version

1）Pycharm中配置git

1. 插件中搜索git配置
   
2. 下载源文件
   
   

技术小白记录学习过程，有错误或不解的地方请指出，如果这篇文章对你有所帮助请点点赞收藏+关注谢谢支持 !!!