luffei---前台全局样式和js配置,前台使用axios，cookies，elementui, 后台主页模块接口,跨域问题详解，前后端打通,自定义配置和git介绍和安装

前台全局样式和js配置

---

引入全局css

第一步：创建一个css样式

这里可以放在assets下的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

跟后端交互，有个后端地址，设置成一个变量，以后要换，只要改这个变量即可

第一步：写一个settings

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

第二步：在main.js中引入

import settings from '@/assets/js/settings'
    //把settings对象，放到了Vue的原型中,相当于放到了Vue类中，类可以拿到，对象也可以拿到
    Vue.prototype.$settings=settings

-第三步：以后再任意组件中直接使用

this.$settings

前台使用axios，cookies，elementui

---

axios

作用：跟后端交互

-第一步：安装

cnpm install axios -S

-第二步：在main.js中引入

import axios from 'axios'
Vue.prototype.$axios=axios

-第三步：使用

this.$axios.get()

cookies

作用：项目做了前后端分离，后端操作不了前端的cookie了，后端返回，前端自己把数据(token)放到cookie中，第三方模块，它可以方便我们直接使用js操作cookie

-第一步：安装

cnpm install vue-cookies -S

-第二步：在main.js中引入

import cookies from 'vue-cookies'
Vue.prototype.$cookies=cookies

-第三步：使用

this.$cookies.set('key','value',秒)
this.$cookies.get('key')

补充：cookie，sessionStroage，localStorage的区别？
-cookie：会放到客户端浏览器的cookie中，有过期时间
-sessionStroage：放在客户端浏览器的会话存储中，没有过期时间，关闭浏览器，就没了
-localStorage：放在客户端浏览器的会话存储中，没有过期时间，永久生效

elementui

作用：前端的ui库，样式

-第一步：安装

cnpm install element-ui -S

-第二步：在main.js引入

import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUi)

-第三步：组件中使用

<el-button>按钮</el-button>

后台主页模块接口

---

软件开发模式

-瀑布开发模式：设计，开发，测试，上线
-敏捷开发：按板块设计，开发，测试，上线 （周期基本上一个周，）
-学bbs时候，数据完全设计好了 瀑布开发模式

首页轮播图接口

第一步：创建一个homeapp

第二步：创建一个基表，然后在在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  # BaseModel这个表，只用来继承用，不会在数据库生成
                
# 轮播图表banner表继承基表

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

第三步：迁移数据，后台admin录入数据

python manage.py makemigrations
python manage.py migrate

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

---

前后端分离后，前端向后端发送请求，会被禁止，所谓的跨域问题。

同源策略：它是浏览器的安全策略，浏览器不允许向不同的域发送请求获取数据。

同一个域(同源)：ip地址和端口号完全一致。请求发出去，后端执行了，但是到前端浏览器，被拦截了，不让进

解决方法

给响应头加固定东西

通过CORS（跨域资源共享）解决。服务端，只要在响应头中加入固定的东西，浏览器就能允许数据进入。

浏览器将跨域请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）

简单请求：只发一次，满足以下两个条件，就是简单请求。

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
解决：在响应头中添加：{'Access-Control-Allow-Origin':'*'}

非简单请求：发送两次，第一次是options预检请求，如果允许，再发送第二次真正的请求.

def options(self, request, *args, **kwargs):
        return APIResponse(headers={'Access-Control-Allow-Headers':'TOKEN','Access-Control-Allow-Origin':'*'})  # options预检请求通过走其他请求

中间件

如果没有第三方，我们可以自己解决

from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
    def process_response(self,request,response):
        if request.method=="OPTIONS":
            #可以加*
            response["Access-Control-Allow-Headers"]="Content-Type"
            response["Access-Control-Allow-Origin"] = "*"
            return response

使用第三方

-第一步：安装---装完确认以下django版本是否还是2.2.2

pip3 install django-cors-headers

-第二步：把它加入到app中

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

-第三步：加入中间件

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  #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',

        )

自定义配置

---

django中有配置文件，项目自己会有一些配置信息，新增一个配置文件
步骤

第一步：在settings文件夹下新建common_settings.py

第二步：写入 BANNER_COUNT = 3

第三步：在配置文件中导入

from settings.common_settings import *

git介绍和安装

---

多人，个人开发程序，需要解决的问题

1. 帮助开发者合并开发的代码
2. 如果出现冲突代码的合并，会提示后提交合并代码的开发者，让其解决冲突
3. 做版本管理，找回很久以前写的代码

可以做版本管理和合并代码的软件:SVN 、 GIT

名词解释

git，gitee，github，gitlab
# git 是版本管理软件，可以装在不同操作系统平台，主要用来做版本管理
# github：全球最大的开源软件仓库（私有软件，花钱，国内公司一般不放在github） 
# gitee：码云 中国版的github（少量公司用码云）
# gitlab：公司内部使用的代码托管平台
svn和git	
# git：集群化，有没有客户端，git都可以使用
# svn是客户端---》服务端架构

git 的安装

-linux：centos

yum install git -y

-mac 下：

-https://github.com/timcharper/git_osx_installer/releases
下载软件，下一步安装

-win下:

-https://git-scm.com/download/win
下载软件，下一步安装

什么是集群，什么是分布式？

单机结构：整个项目所有的服务都由这台服务器提供。这就是单机结构。
集群：单机处理到达瓶颈的时候，你就把单机复制几份，这样就构成了一个“集群”
分布式结构：将一个完整的系统，按照业务功能，拆分成一个个独立的子系统，在分布式结构中，每个子系统就被称为“服务”。

什么叫负载均衡，有哪些常用算法？

负载均衡：比如进来一个请求，然后根据当前所有节点的负载情况，选择一个最优选的节点去处理这个请求，使得每个节点的压力都比较平均，从来扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处理能力、提高网络的灵活性和可用性。
常用算法：轮询法，随机法，最小连接法

通过数据库反向生成models？

python manage.py inspectdb