轮播图

前台全局样式和js配置

  • 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
// 去掉所有标签样式
import '@/assets/css/global.css'

全局配置js

1.js/settings.js
export default {
    BASE_URL: 'http://127.0.0.1:8000/'
}

2.main.js
import settings from '@/assets/js/settings'
// 全局配置
Vue.prototype.$settings = settings

3.使用
this.$settings.BASE_URL

后台主页模块接口

1.软件开发模式
-瀑布模式:设计-->开发-->测试-->部署
-敏捷开发:设计-->开发-->测试-->开发-->测试...-->部署
-DevOps:设计-->开发-->测试-->部署-->开发-->测试-->部署...

2.创建app,写轮播图表
python ../../manage.py startapp home

3.将常用字段封装utils
from django.db import models\models.py


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

4.继承BaseModel编写Banner表
from django.db import models
from utils.models 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

轮播图

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

2.home中urls.py
from rest_framework.routers import SimpleRouter

router = SimpleRouter()
router.register('banner', views.BannerView, 'banner')
urlpatterns = [
]
urlpatterns += router.urls

3.序列化类
from .models import Banner
from rest_framework import serializers


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

4.utils中的view.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视图类
from .models import Banner
from .serializer import BannerSerializer
from rest_framework.viewsets import GenericViewSet
from utils.views import CommonListModelMixin


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

'''
录入数据
-下载、注册simpleui,国际化
-创建超级用户
python manage.py createsuperuser
-录入数据
'''

跨域问

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

2.解决跨域问题
-前端代理
-nginx代理
-cors解决跨域

3.cors解决跨域
-跨域资源共享,后端技术,核心就是在响应头中加入数据,允许浏览器接受数据
'cors需要浏览器和服务器同时支持,IE浏览器不能低于IE10'
3.1浏览器将CORS的请求分为两类:
-简单请求(simple request)
-非简单请求(not-so-simple request)

3.2简单请求
浏览器发出CORS简单请求,只需要在头信息之中增加一个Access-Control-Allow-Origin字段
3.3非简单请求
-浏览器发出CORS非简单请求,会在正式通信之前,先发送一个options请求,称为”预检”请求
-浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,如果允许,再发真正的请求

3.4什么是简单请求、非简单请求:满足下面两种情况的就是简单请求
-请求方式是三种之一: HEAD、GET、POST
-HTTP的请求头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

4.使用cors解决跨域
4.1使用第三方模块
-安装django-cors-headers
-注册app
'corsheaders',
-加入中间件
'corsheaders.middleware.CorsMiddleware',
-配置文件配置
CORS_ALLOW_CREDENTIALS = True
# 允许所有域
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
    '*'
)
# 允许请求方式
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',
)

4.2写下面的代码
def test(request):
    print(request.method)
    # 解决简单请求
    res = HttpResponse('ok')
    res['Access-Control-Allow-Origin'] = '*'
    # 解决非简单请求
    if request.method == 'OPTIONS':
        res['Access-Control-Allow-Headers'] = 'Content-Type'
    return res

自定义配置

'公共配置信息要放到单独一个配置文件中'
1.在settings.py中common_settings.py
# 轮播图显示的条数
BANNER_COUNT = 3

2.
from settings.common_settings import *
queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')[:BANNER_COUNT]

git介绍和安装

1.在企业中写一个接口,完成一个功能后,会把代码提交到远程仓库中


2.下载
https://git-scm.com/downloads
-下载完后在任意位置右键,会有两个东西【git gui here】、【git bash here】)

pycharm中配置git

1.如果使用的是pycharm,直接在打开配置pycharm
-在setting中搜索git,配置get安装可执行文件

2.下载开源软件:vcs--->get from version contral--->填入路径---》clone下来即可

svn,git ,github,gitee,gitlab

1.svn
版本管理软件,它是集中式的版本管理,必须有个svn的服务端,服务端如果过来,svn就用不了了

2.git
版本管理软件,它是一个分布式的版本管理,每个客户端都可以作为服务端,即便服务端挂了,也能进行版本管理(本地管理)

3.github
-全球最大的开源远程git仓库,全球最大的开源仓库,git远程仓库
-如果要写开源软件,本地装git,把代码提交到github

4.gitee
中国最大的开源软件仓库

5.gitlab
公司内部自己搭建的远程仓库,由运维负责搭建
posted @ 2022-11-07 23:15  无言以对啊  阅读(36)  评论(0)    收藏  举报