我的项目day02:前端全局样式和js配置，simpleui的使用，跨域问题，cors解决跨域问题，git的下载与安装，pycharm中配置git

一：前端全局样式和js配置

1.全局样式配置

1.目的：

• 把标签的默认样式同一去掉

2.实现

第一步：在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; /* 合并边框 */
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

第二步：在main.js中配置

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

2.全局js配置

第一步：在assets文件夹下创建一个js文件夹，写一个settings.js文件,写入以下文件

export default {
    BASE_URL:'http://127.0.0.1:8000/'
}
1
2
3

第二步：在main.js中配置

// 6 全局配置
import settings from "@/assets/js/settings";
Vue.prototype.$settings=settings
1
2
3

二：后台主页模块及接口

1.模块

第一步：先创建一个home的app

第二步：在utils文件夹中，写一个models.py的文件，写入以下代码

from django.db import models


# 编写一个BaseMosel
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  # 虚拟表，只用来做继承，不在数据库生成
1
2
3
4
5
6
7
8
9
10
11
12
13
14

第三步：在home/models.py中写入以下代码

from django.db import models
from utils.models import BaseModel
# Create your models here.


# 编写banner表
class Banner(BaseModel):
    # 图片地址，图片名，图片介绍，link地址
    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='跳转链接')  # /course/
    info = models.TextField(verbose_name='详情')  # 也可以用详情表

    class Meta:
        db_table = 'luffy_banner'
        verbose_name_plural = '轮播图表'

    def __str__(self):
        return self.title
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

第四步：执行数据库迁移的两条命令

python manage.py makemigrations
python manage.py migrate
1
2

2.轮播图接口编写

第一步：在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)
1
2
3
4
5
6

第二步：写序列化类serializer.py

class BannerSerializer(serializers.ModelSerializer):
    class Meta:
        model = Banner
        fields = ['title', 'image', 'link']
1
2
3
4

第三步：写视图类

from rest_framework.viewsets import GenericViewSet
from utils.view import CommonListModelMixin
from .models import Banner
from settings.common_settings import *
from .serializer import BannerSerializer
# Create your views here.


class BannerView(GenericViewSet, CommonListModelMixin):
    queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')[:BANNER_COUNT]
    serializer_class = BannerSerializer
1
2
3
4
5
6
7
8
9
10
11

第四步：在home中写urls.py文件

from . import views

from rest_framework.routers import SimpleRouter

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

urlpatterns = [
]
urlpatterns += router.urls
1
2
3
4
5
6
7
8
9
10

第五步：在项目的urls.py中

    path('api/v1/home/', include('home.urls')),
1

三：simpleui的使用及数据录入

1.simpleui的使用

第一步：先安装：django-simpleui

第二步：到配置文件中注册:

INSTALLED_APPS = [
    'simpleui',
]
1
2
3

2.数据录入

第一步：到home/admin.py中写入以下代码

from .models import Banner

admin.site.register(Banner)
1
2
3

四：跨域问题

1.跨域问题出现的原因？

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

2.解决跨域问题

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

3.cors解决跨域请求

# 1. 解释：cors：跨域资源共享，后端技术，核心就是在响应头中加入数据，允许浏览器接受数据

# 2. CORS基本流程：
 浏览器将CORS请求分成两类：
        -简单请求（simple request）
        -非简单请求（not-so-simple request）
    
# 简单请求：
    浏览器发出CORS简单请求，只需要在头信息之中增加一个Access-Control-Allow-Origin字段
    
# 非简单请求
    浏览器发出CORS非简单请求，会在正式通信之前，先发送一个options请求，称为”预检”请求。
    浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，如果运行，再发真正的请求
    
# 什么是简单请求，什么是非简单请求
	-满足下面两种情况，就是简单请求
    	-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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

 # 解决跨域，使用cors技术，在响应中写东西：如果自己写，需要写个中间件，每个请求都会走，在process_response中写入下面的代码即可
def test(request):
    print(request.method)
    # 如果自己写，需要写个中间件，每个请求都会走，在process_response中写入下面的代码即可
    # 解决简单请求
    res=HttpResponse('ok')
    res['Access-Control-Allow-Origin']='*'
    # 解决非简单请求
    if request.method=='OPTIONS':
        res['Access-Control-Allow-Headers'] = 'Content-Type'
    return res
1
2
3
4
5
6
7
8
9
10
11

# 第三方模块 

# 第一步：安装django-cors-headers

# 第二步：注册app:     'corsheaders',

# 第三步：注册中间件： 'corsheaders.middleware.CorsMiddleware',

# 第四步：配置以下代码

    # 允许跨域源
    CORS_ORIGIN_ALLOW_ALL = True

    # 允许的请求头
    CORS_ALLOW_HEADERS = (
        "accept",
        "accept-encoding",
        "authorization",
        "content-type",
        "dnt",
        "origin",
        "user-agent",
        "x-csrftoken",
        "x-requested-with",

        # 额外允许的请求头
        'token',
    )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

五：git介绍和安装

1.下载与安装

# 下载：安装在操作系统上    -https://git-scm.com/downloads    -一路下一步    -任意位置点右键，如果有两个东西（【git gui here】  【git bash here】），表示安装完成
1

2.pycharm中配置git

# 第一步：”使用pycharm直接拉下来，打开---》配置pycharm
	-settings中搜索git，把git安装可执行文件配置好
    
# 第二步：以后下载开源软件：vcs--->get from version contral--->填入路径---》clone下来即可
1
2
3
4

3.svn，git ，github，gitee，gitlab

# svn：版本管理软件，它是集中式的版本管理，必须有个svn的服务端，服务端如果过来，svn就用不了了
# git :版本管理软件，它是一个分布式的版本管理，每个客户端都可以作为服务端，即便服务端挂了，也能进行版本管理（本地管理）
# github：全球最大的开源远程git仓库，全球最大的开源仓库，git远程仓库
	-如果我要写开源软件，本地装git，把代码提交到github
    -python监控公司代码有没有被传到github
# gitee：中国最大的开源软件仓库   【私有仓库，花钱买空间】
# gitlab：公司内部的远程仓库，运维搭建维护
1
2
3
4
5
6
7