luffy前台全局样式和js配置、后台主页模块接口、跨域问题详解、前后端打通、自定义配置、git介绍和安装

前台全局样式和js配置

body div 有自己默认样式，统一去掉
写一个,应用到项目中
后端接口的地址，统一写，以后统一改

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; /* 合并边框 */
}

assets/js/settings.js

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

main.js配置

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

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

通过this.$settings.BASE_URL使用

this.$axios.post(this.$settings.BASE_URL + "api/v1/user/user/", {
	username,
	password,
})

后台主页模块接口

根据原型图分析出来

首页轮播图接口
首页推荐课程接口

补充

软件开发模式
	瀑布模式:bbs项目
	敏捷模式:路飞,管理软件
bbs项目：设计数据库--->全设计完了--->开始写项目
路飞：写一块设计一块数据库

一、创建一个app、写轮播图表

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

二、utils下编写一个BaseMosel

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  # 虚拟表，只用来做继承，不在数据库生成

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='跳转链接')  # /course/
    info = models.TextField(verbose_name='详情')  # 也可以用详情表

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

    def __str__(self):
        return self.title

四、执行两条迁移命令

python manage.py makemigrations
python manage.py migrate

轮播图接口编写

一、分路由--->home的app中新建urls.py

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

二、视图函数中

from utils.views import CommonListModelMixin
from rest_framework.response import Response

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

三、utile下的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)

四、序列化类

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

五、django-simpleui

安装：django-simpleui
配置文件中注册
	INSTALLED_APPS = [
    'simpleui',  #  放在第一
     ...
]
下载，注册app，国际化
创建超级用户
录入数据

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

前后端交互会存在跨域问题

跨域问题出现的原因？

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

解决跨域问题

前端代理
nginx代理
cors解决跨域

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

CORS需要浏览器和服务器同时支持，IE浏览器不能低于IE10

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

解决跨域问题

使用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

第三方模块解决跨域问题

只需要集成进来，使用即可--->djagno

一、安装`pip install django-cors-headers`

二、注册到app中

INSTALLED_APPS = (
	...
	'corsheaders',
	...
)

三、中间件加入

MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
	...
	'corsheaders.middleware.CorsMiddleware',
	'django.middleware.common.CommonMiddleware',
	...
]

四、配置文件添加下面的配置

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

自定义配置

有些公共配置信息，放到单独一个配置文件中

一、settings文件夹下新建一个common_settings.py

后续公共的配置信息放来这里，需要使用带的导入使用即可

# 轮播图显示的条数
BANNER_COUNT = 3

二、在dev.py 中导入

from settings.common_settings import *

三、在查询所有轮播图接口中使用

from django.conf import settings

class BannerView(GenericViewSet, CommonListModelMixin):
    queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]  # 使用
    serializer_class = BannerSerialiser

git介绍和安装

后端写了一个接口，完成了一个功能，在公司里，功能完成，要把代码提交到远程仓库

公司里协同开发,版本管理需要使用软件：svn，git

下载安装在操作系统上

官网:https://git-scm.com/downloads

一路下一步

在电脑桌面任意位置点右键、如果有两个东西(【git gui here】【git bash here】)，表示安装完成

一、pycharm中配置git

二、svn，git ，github，gitee，gitlab

svn

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

git

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

github

全球最大的开源远程git仓库，全球最大的开源仓库，git远程仓库
如果要写开源软件，本地装git，把代码提交到github
python监控公司代码有没有被传到github

gitee

中国最大的开源软件仓库【私有仓库，花钱买空间】

gitlab

公司内部的远程仓库，运维搭建维护

posted on 2022-11-07 22:04 Joker_Ly 阅读(23) 评论(0) 收藏举报

刷新页面返回顶部

前台全局样式和js配置

assets/css/global.css

assets/js/settings.js

main.js配置

通过this.$settings.BASE_URL使用

后台主页模块接口

补充

一、创建一个app、写轮播图表

二、utils下编写一个BaseMosel

三、home下编写Banner表

四、执行两条迁移命令

轮播图接口编写

一、分路由--->home的app中新建urls.py

二、视图函数中

三、utile下的views.py

四、序列化类

五、django-simpleui

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

解决跨域问题

第三方模块解决跨域问题

一、安装`pip install django-cors-headers`

二、注册到app中

三、中间件加入

四、配置文件添加下面的配置

自定义配置

一、settings文件夹下新建一个common_settings.py

二、在dev.py 中导入

三、在查询所有轮播图接口中使用

git介绍和安装

下载安装在操作系统上

一、pycharm中配置git

二、svn，git ，github，gitee，gitlab

公告

前台全局样式和js配置

assets/css/global.css

assets/js/settings.js

main.js配置

通过this.$settings.BASE_URL使用

后台主页模块接口

补充

一、创建一个app、写轮播图表

二、utils下编写一个BaseMosel

三、home下编写Banner表

四、执行两条迁移命令

轮播图接口编写

一、分路由--->home的app中新建urls.py

二、视图函数中

三、utile下的views.py

四、序列化类

五、django-simpleui

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

解决跨域问题

第三方模块解决跨域问题

一、安装pip install django-cors-headers

二、注册到app中

三、中间件加入

四、配置文件添加下面的配置

自定义配置

一、settings文件夹下新建一个common_settings.py

二、在dev.py 中导入

三、在查询所有轮播图接口中使用

git介绍和安装

下载 安装在操作系统上

一、pycharm中配置git

二、svn，git ，github，gitee，gitlab

公告

一、安装`pip install django-cors-headers`

下载安装在操作系统上