前台全局样式和js配置、前台使用axios，cookies，elementui、后台主页模块接口、 跨域问题解决，前后端打通

前台全局样式和js配置#

引入全局css#

-第一步：创建一个css样式
-第二步：在main.js中引入即可
import './assets/css/global.css'

在global里写入以下初始化样式

/* 声明全局样式和项目的初始化样式 */
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; /* 合并边框 */
}

引入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')

elementui --> ui库，样式#

-第一步：安装
    cnpm install element-ui -S
-第二步：在main.js中引入
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';

补充#

cookie，sessionStroage，localStorage的使用

  methods: {
    handleCookie() {
      this.$cookies.set('name', 'tom', 30)
    },
    handlesessionStroage() {
      sessionStorage.setItem('name', 'kevin')
    },
    handlelocalStorage() {
      localStorage.setItem('name', 'jerry')
    }

  },

cookie，sessionStroage，localStorage的区别？

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

后台主页模块接口#

首页轮播图接口#

第一步：创建一个home app

第二步：在models中创建轮播图表banner

第三步：在until文件夹下创建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这个表，只用来继承用，不会在数据库生成

第四步，home下的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

第五步：迁移数据

python manage.py makemigrations
python manage.py migrate

第六步：录入数据，可以使用admin后台

补充#

# 学长问题：
-写个表：表中字段
    -image：图片
    -link：跳转地址
    -type:跳转类型（0：跳app内部，1：跳外链，浏览器打开）
-写接口
    {code:100,msg:成功，image:'http://127.0.0.1/media/banner/a.png',type:0,link:'Home'}

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

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


#2  同源策略：它是浏览器的安全策略，浏览器不允许向不同的域发送请求获取数据
	同一个域(同源)：ip地址和端口号完全一致
    请求发出去，后端执行了，但是到前端浏览器，被拦截了，不让进
    
    
# xss 跨站脚本攻击
# csrf：跨站请求伪造
#cors：跨域资源共享


# 3 通过CORS（跨域资源共享）解决---》服务端，只要在响应头中加入固定的东西，浏览器就能允许数据进入
	
    
    
#4  浏览器将跨域请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）
	-简单请求只发一次
    -非简单请求发送两次---》第一次是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

            
 #5  解决，没有第三方，我们自己解决
	-写个中间件---process_resposne中
    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
        

        
# 6 使用第三方
	-第一步：安装---装完确认以下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',

        )