luffy项目前端创建、配置、解决跨域问题、后端数据库迁移

前端

创建前端vue

  1. 使用vue-cil创建前端
  2. 将无用的东西删除

​配置

跟后端交互:axios

  1. 安装插件:cnpm install -S axios
  2. main.js中写
    import axios from "axios";
    Vue.prototype.$axios = axios
    
  3. 后续使用就直接this.$axios即可

操作cookie: vue-cookies

  1. 安装插件:cnpm install -S vue-cookies
  2. main.js中写
    import cookies from 'vue-cookies'
    Vue.prototype.$cookies = cookies;
    
  3. 后续使用就直接this.$cookies即可

ui库:elementui

  1. 安装插件:cnpm install -S element-ui
  2. main.js中写
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';  // 全局都会有这个css的样式
    

去除标签默认样式

  1. 创建文件src/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; /* 合并边框 */
    }
    
  2. main.js中导入:import '@/assets/css/global.css'

全局配置文件

配置一个全局配置方便改地址

  1. 创建src/assets/js/setting.js写全局配置
    export default {
        BASS_URL:'http://127.0.0.1:8000/'
    }
    
  2. main.js
    import settings from "@/assets/js/settings";
    	Vue.prototype.$setting = settings
    

跨域问题

前后端打通时回出现出现CORS policy 错误

原因是因为浏览器有同源策略

同源策略(Same origin policy)是一种约定,约定了请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同,如果违背了这个约定,浏览器就会报错
请求正常发送成功,服务端也响应了,但是回来到浏览器的时候,报错,被浏览器的同源策略拦截了

只有前后端分离的web项目,才会出,才需要解决跨域问题

CORS(跨域资源共享) ⟶ \longrightarrow 是一个后端技术 ⟶ \longrightarrow 后端只需要在响应头中加入固定的响应头,前端就不禁止了

CORS请求分成两类(浏览器发送请求之前判断)
简单请求:只发送一次请求,就是真正的请求
非简单请求:先发送一个options 预检请求,服务端如果写了cors,再发送真正的请求,如果没有写cors,浏览就不再发送真正的请求了
只要同时满足以下两大条件,就属于简单请求。
  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. 定制一个中间键
    from django.utils.deprecation import MiddlewareMixin
    class CORSMiddleWare(MiddlewareMixin):
        def process_response(self, request, response):
            # 简单请求
            response['Access-Control-Allow-Origin'] = '*'  # 允许所有客户端
            # 如果只允许客户端则在后面的字符串中写完整的网址
            # 非简单请求
            if request.method == 'OPTIONS':
                # res['Access-Control-Allow-Methods'] = 'DELETE,PUT'
                response['Access-Control-Allow-Methods'] = '*'
                response['Access-Control-Allow-Headers'] = '*'
            return response
    
  2. 在设置文件中配置中间键

第三方解决跨域

参考链接:在Django中解决跨域问题

后端数据库迁移

使用auth拓展表,需要在数据库迁移前写好表模型

  1. 搭建表模型

    from django.db import models
    from django.contrib.auth.models import AbstractUser
    
    class User(AbstractUser):
        # 扩写,加入手机号,加入头像
        mobile = models.CharField(max_length=32, unique=True)
        # 需要pillow包的支持  pip install pillow
        icon = mobile.ImageField(upload_to='icon', default='icon/default.png')
    
        class Meta:
            db_table = 'luffy_user'
            verbose_name = '用户表'
            verbose_name_plural = verbose_name
    
        def __str__(self):
            # 获取实例化对象时返回
            return self.username
    
  2. 配置设置

    AUTH_USER_MODEL = 'user.User'
    
  3. 进行迁移

    • python manage.py makemigrations
    • python manage.py migrate

你可能感兴趣的:(路飞项目,前端,django,python)