luffy-(3)

内容概览

  • 前台全局样式和js配置
  • 后台主页模块接口
  • 跨域问题详解
  • 自定义配置
  • Git介绍与安装

前台全局样式和js配置

前端标签都有默认的样式,我们不需要默认的样式,所以统一去掉:写一个css,应用到项目中

  • 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; /* 合并边框 */
}
  • main.js
// 去除所有标签默认样式
import '@/assets/css/global.css'

将ip和端口抽取设置成一个属性,在后边如果需要修改就只需要修改配置中的即可

  • assets/js/settings.js
export default {
    BASE_URL:'http://127.0.0.1:8000/'
}
  • main.js
import settings from '@/assets/js/settings.js'
Vue.prototype.$settings = settings

后台主页模块接口

# 根据原型图分析出来
    # 首页轮播图接口
    # 首页推荐课程接口
1. 创建一个app,写轮播图表
	python ../../manage.py startapp home
2. 将多个表都需要用到的字段抽取出来,编写一个BaseModel
	"""utils/model.py"""
	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  # 虚拟表,只用来做继承,不在数据库生成
3. 编写banner表
	from django.db import models
	from utils.model import BaseModel

	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
4. 执行表迁移命令
轮播图接口
1. 视图类
	from rest_framework.viewsets import GenericViewSet
	from utils.view import CommonListModelMixin
	from home.models import Banner
	from home.serializers import BannerSerializer
	
	class BannerView(GenericViewSet, CommonListModelMixin):
	    queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')  # 过滤和排序
	    serializer_class = BannerSerializer
2. 每次都重写list方法太麻烦,所以将修改了返回格式的封装在utils中
	from rest_framework.mixins import ListModelMixin
	from .response import APIResponse
	
	class CommonListModelMixin(ListModelMixin):
	    def list(self, request, *args, **kwargs):
	        res = super().list(request, *args, **kwargs)
	        return APIResponse(result=res.data)
3. 编写序列化类
	from rest_framework import serializers
	from home.models import Banner
	
	class BannerSerializer(serializers.ModelSerializer):
	    class Meta:
	        model = Banner
	        fields = ['title', 'image', 'link']
4. 路由分发
	from django.contrib import admin
	from django.urls import path, include
	from django.views.static import serve
	from django.conf import settings
	
	urlpatterns = [
	    path('admin/', admin.site.urls),
	    path('api/v1/home/', include('home.urls')),
	    path('media/', serve, kwargs={'document_root': settings.MEDIA_ROOT}),
	]
5. 在home中新建urls.py,编写路由
from rest_framework.routers import SimpleRouter
from home.views import BannerView

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

urlpatterns = [
]
urlpatterns += router.urls

补充:软件开发模式;瀑布模式和敏捷开发

跨域问题详解

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

# 解决跨域问题
    1. 前端代理
    2. nginx代理
    3. 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

# 解决跨域
1. 使用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

2. 第三方模块,解决了这个问题,只需要集成进来,使用即可
	1. 安装django-cors-headers
		pip install django-cors-headers
	2. 注册app
		INSTALLED_APPS = [
			...
			'corsheaders',
			...
			]
	3. 添加中间件
		MIDDLEWARE = [
		    ...
		    'corsheaders.middleware.CorsMiddleware',
		]
	4. 添加配置文件
		# cors的配置
		# 允许所有域
		CORS_ORIGIN_ALLOW_ALL = True
		# 允许的请求方式
		CORS_ALLOW_METHODS = (
		    'DELETE',
		    'GET',
		    'OPTIONS',
		    'PATCH',
		    'POST',
		    'PUT',
		    'VIEW',
		)
		# 允许请求头带
		CORS_ALLOW_HEADERS = (
		    'accept-encoding',
		    'authorization',
		    'content-type',
		    'origin',
		    'user-agent',
		    'x-csrftoken',
		)

自定义配置

将公共的配置信息,单独放在一个配置文件中

1. 新建一个common_settings.py
	# 轮播图显示的条数
	BANNER_COUNT = 3
2. 在配置中导入
	from settings.common_settings import *
3. 查询所有轮播图接口中使用
	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 = BannerSerializer

git介绍与安装

# 后端,写了一个接口,完成了一个功能,在公司里,功能完成,要把代码提交到远程仓库
# 公司里协同开发,版本管理需要使用软件:svn,git
# 下载:安装在操作系统上
	https://git-scm.com/downloads
	安装后任意位置点右键,如果有两个东西(【git gui here】  【git bash here】),表示安装完成
pycharm中配置git
pycharm的settings中搜索git,把git安装可执行文件配置好(Git/bin/git.exe)
以后下载开源软件:vcs--->get from version contral--->填入路径---》clone下来即可
svn,git ,github,gitee,gitlab
"""
svn:版本管理软件,它是集中式的版本管理,必须有个svn的服务端,服务端如果过来,svn就用不了了
git :版本管理软件,它是一个分布式的版本管理,每个客户端都可以作为服务端,即便服务端挂了,也能进行版本管理(本地管理)
github:全球最大的开源远程git仓库,全球最大的开源仓库,git远程仓库
gitee:中国最大的开源软件仓库   【私有仓库,花钱买空间】
gitlab:公司内部的远程仓库,运维搭建维护
"""

你可能感兴趣的:(javascript,前端,开发语言)