路飞前台全局css，js文件，安装axios,安装vue-cookies，安装elementui，安装bootstrap和jq，后台主页模块表设计，后台主页模块轮播图接口，录入数据，跨域问题详解

标签：cookies vue 请求 主页 models js 模块 import 安装

路飞前台全局css，js文件，安装axios,安装vue-cookies，安装elementui，安装bootstrap和jq，后台主页模块表设计，后台主页模块轮播图接口，录入数据，跨域问题详解

路飞前端全局css，js文件

1.项目的创建和配置

# 1 创建项目
# 2 删除一些不用的
    -App.vue中只保留
    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
# 3 HomeView.vue
    <template>
      <div class="home">
        <h1>首页</h1>
      </div>
    </template>
    <script>
    export default {
      name: 'HomeView',
    }
    </script>
# 4 router/index.js
    const routes = [
        {
            path: '/',
            name: 'home',
            component: HomeView
        },
    ]

2.前台全局样式和js配置

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

settings.js

export default {
    BASE_URL:'http://127.0.0.1/api/v1'
}

main.js

// 使用全局的css样式，导入就会生效
import '@/assets/css/global.css'

// 引入setting.js，把settings对象放入到vue的原型中
import setting from "@/assets/js/setting";
Vue.prototype.$settings = setting

安装axios

第一步：安装  cnpm install axios -S
第二步：把axios放到vue原型中,main.js中
    	import axios from "axios";
		Vue.prototype.$axios=axios
第三步：在任意组件中使用
    this.$ajax.get()

安装vue-cookies

第一步：安装  cnpm install vue-cookies -S
第二步：把vue-cookies放到vue原型中,main.js中
    	import cookies from "vue-cookies";
		Vue.prototype.$cookies=cookies
第三步：在任意组件中使用
        this.$cookies.set()
        this.$cookies.set()

安装elementui

第一步：安装 cnpm install element-ui -S
第二步：main.js配置
    import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);
第三步：复制，粘贴

安装bootstrap，jquery

# bootstrap基于jquery

# 使用步骤：
    1 安装
    	cnpm install jquery -S
		cnpm install bootstrap@3 -S
        
    2 配置：main.js
        import 'bootstrap'
        import 'bootstrap/dist/css/bootstrap.min.css'
        
    3 vue.config.js配置
        const webpack = require("webpack");
        module.exports = {
            configureWebpack: {
                plugins: [
                    new webpack.ProvidePlugin({
                        $: "jquery",
                        jQuery: "jquery",
                        "window.jQuery": "jquery",
                        "window.$": "jquery",
                        Popper: ["popper.js", "default"]
                    })
                ]
            }
        };

后台主页模块表设计

编写一个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  # 只用来继承，不用来在数据库创建

编写banner表

from django.db import models

from utils.common_model 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

数据迁移

 python manage.py makemigrations

 python manage.py migrate

后台主页模块轮播图接口

# 1 分路由---》home的app中新建urls.py
总路由：
	urlpatterns = [
		path('admin/', admin.site.urls),
		path('api/v1/home/', include('home.urls')),
		path('media/<path:path>', serve, kwargs={'document_root': settings.MEDIA_ROOT}),
	]
分路由：
	from . import views
	from rest_framework.routers import SimpleRouter
	router = SimpleRouter()
	router.register('banner', views.BannerView, 'banner')
	urlpatterns = [
	]
	urlpatterns += router.urls


# 2 视图函数中
	from rest_framework.viewsets import GenericViewSet
	# 获取所有
	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

# 3 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)

# 4 序列化类 serializer.py
	class BannerSerializer(serializers.ModelSerializer):
		class Meta:
			model = Banner
			fields = ['title', 'image', 'link'] 

录入数据

admin.py:
from django.contrib import admin

from .models import Banner
admin.site.register(Banner)

创建用户

python manage.py createsuperuser

录入数据

接口返回的数据

跨域问题详解

# 前端发送ajax请求，到后端，会有跨域的拦截
# 出现的原因
# 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现
	-请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
    -发送ajax请求的地址，必须跟浏览器上的url地址处于同域上 域[域名，地址，端口，协议]
    -请求成功，数据库返回，但是浏览器拦截
    
    
# 补充：浏览器中输入域名，没有加端口
	-www.baidu.com---->dns--->解析成地址  192.168.2.3----》没有加端口，默认是80
    -dns解析，先找本地的host文件
    	-可以修改本地的host做映射
 

# 由于同源策略的存在，不允许跨域访问，解决这个问题
	-方式一CORS：后端代码控制，咱们采用的方式
	-Nginx反向代理 （常用）
    -JSONP：很老，不会用了，只能发get请求
	-搭建Node代理服务器（）
    
    
# cors：    xss，csrf
-跨域资源共享：后端技术，就是在响应头中加入 固定的头，就会运行前端访问了
    
    
# CORS基本流程
浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段。
浏览器发出CORS非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错


# 什么是简单请求，什么是非简单请求
	# 符合如下条件，就是简单请求
	（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   
        
 # 演示简单和非简单请求
	-如果是简单，直接发送真正的请求
    -如果是非简单，先发送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"]="*"

        # 允许前端的地址，所有请求头允许
        response["Access-Control-Allow-Origin"] = "*"
        return response

第三方模块帮咱们解决了跨域

# 第一步：安装
	pip install django-cors-headers
# 第二步：配置app
    INSTALLED_APPS = [
        'corsheaders'
    ]

# 第三步：配置中间件
    MIDDLEWARE = [
        'corsheaders.middleware.CorsMiddleware',
    ]
# 第四步：在配置文件配置
# 允许所有域
CORS_ORIGIN_ALLOW_ALL = True
# 允许的请求方式
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',
	'token',
)

标签：cookies,vue,请求,主页,models,js,模块,import,安装
From： https://www.cnblogs.com/zx0524/p/17166149.html