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 AbstractUserclass User(AbstractUser):# 扩写,加入手机号,加入头像mobile = models.CharField(max_length=32, unique=True)# 需要pillow包的支持  pip install pillowicon = mobile.ImageField(upload_to='icon', default='icon/default.png')class Meta:db_table = 'luffy_user'verbose_name = '用户表'verbose_name_plural = verbose_namedef __str__(self):# 获取实例化对象时返回return self.username
    
  2. 配置设置

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/105784.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Three.js如何计算3DObject的2D包围框?

推荐:用 NSDT编辑器 快速搭建可编程3D场景 在Three.js应用开发中,有时你可能需要为3D场景中的网格绘制2D的包围框,应该怎么做? 朴素的想法是把网格的3D包围框投影到屏幕空间,例如,下图中的绿色框 3D包围框…

npm install报--4048错误和ERR_SOCKET_TIMEOUT问题解决方法之一

一、问题描述 学习vue数字大屏加载动漫效果时,在项目终端页面输入全局下载指令 npm install -g json-server 问题1、报--4048错误 会报如下错误 operation not permitted......errno: -4048code:EPERMsyscall: mkdir......The operation was reiected by your op…

【分布式计算】九、容错性 Fault Tolerance

分布式系统应当有一定的容错性,发生故障时仍能运行 一些概念: 可用性Availability:系统是否准备好立即使用 可靠性Reliability:系统连续运行不发生故障 安全性:衡量安全故障的指标,没有严重事件发生 可维护…

RBF神经网络案例——客户流失率预测

目录 背景介绍 1、径向基神经网络结构 2、符号说明 3、计算网络输出 4、计算能量函数 网络学习步骤 步骤1、先将能量函数E写成各参数的复合函数结构 步骤2、求E关于各参数的偏导 步骤3、求各参数的调整量 步骤4、计算各参数的调整量 5、按照步骤1-步骤4编写RBF神经网络…

【广州华锐互动】智轨列车AR互动教学系统

智轨列车,也被称为路面电车或拖电车,是一种公共交通工具,它在城市的街头巷尾提供了一种有效、环保的出行方式。智轨列车的概念已经存在了很长时间,但是随着科技的发展,我们现在可以更好地理解和欣赏它。通过使用增强现…

【设计模式】七、适配器模式

文章目录 现实生活中的适配器例子基本介绍工作原理举例:类适配器模式类适配器模式介绍类适配器模式应用实例 举例:对象适配器模式基本思路对象适配器模式应用实例 举例:接口适配器模式接口适配器模式应用实例适配器模式在 SpringMVC 框架应用…

并查集路径压缩

我们来看看如果要是100个数,往20个数的集合合并如何 那么我们应该,把数据量小的集合往数据量大的合并 解决另一种极端场景的路径压缩

ChatGPT快速入门

ChatGPT快速入门 一、什么是ChatGPT二、ChatGPT底层逻辑2.1 实现原理2.2 IO流程 三、ChatGPT应用场景3.1 知心好友3.2 文案助理3.3 创意助理3.4 角色扮演 一、什么是ChatGPT ChatGPT指的是基于GPT(Generative Pre-trained Transformer)模型的对话生成系…

设计模式03———包装器模式 c#

首先我们打开一个项目 在这个初始界面我们需要做一些准备工作 创建基础通用包 创建一个Plane 重置后 缩放100倍 加一个颜色 (个人喜好)调节渐变色 可更改同种颜色的色调 (个人喜好) 调节天空盒 准备工作做完后 接下我们做【…

java中okhttp和httpclient那个效率高

在比较OkHttp和HttpClient的效率时,需要考虑多个因素,包括性能、吞吐量、资源消耗等。这些因素往往取决于具体的使用场景和需求。 OkHttp是一个由Square开发的现代化HTTP客户端库,它在Android平台上广泛使用,并且也可以在Java应用…

接口测试如何测?最全的接口测试总结,资深测试老鸟整理...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、接口测试的流程…

点云目标检测——pointpillars环境配置与训练

点云目标检测——pointpillars环境配置与训练 (二十五)实践出真知——OpenPCDet 制作pointpillars自定义数据集 - 知乎 基于深度学习的高铁周界入侵监测方法研究 - 中国知网 基于点云数据的三维目标检测技术研究进展 - 中国知网 面向恶劣天气的自动驾驶三维目标检测算法研究…

Windows:Arduino IDE 开发环境配置【保姆级】

参考官网:Arduino - Home Arduino是一款简单易学且功能丰富的开源平台,包含硬件部分(各种型号的Arduino开发板)和软件部分(Arduino IDE)以及广大爱好者和专业人员共同搭建和维护的互联网社区和资源。 Arduino IDE软件…

算法村开篇

大家好我是苏麟从今天开始我将带来算法的一些习题和心得体会等等...... 算法村介绍 我们一步步地学习算法本专栏会以闯关的方式来学习算法 循序渐进地系统的学习算法并掌握大部分面试知识 , 期待和大家一起进步 . 索大祝大家学有所成 , 前程似锦.

车载电子电器架构 —— 国产基础软件生态简介

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

D - Square Permutation-AtCoder Beginner Contest 324

D - Square Permutation 给出长度为n的字符串s 通过排列组合问有多少种产生平方数的方式。 全排列时间复杂度O(13!)过大,不合适。 可以生成所有平方数放入数组,之后用这些数和输入的字符串位数字符数比较。 注意可以有前导0,所以长度不一致要…

vue3 新特性(defineOptions defineModel)

Vue3.3 新特性-defineOptions 背景说明&#xff1a; 有 <script setup> 之前&#xff0c;如果要定义 props, emits 可以轻而易举地添加一个与 setup 平级的属性。 但是用了 <script setup> 后&#xff0c;就没法这么干了 setup 属性已经没有了&#xff0c;自然无法…

专栏汇总(一)

专栏1&#xff1a;https://blog.csdn.net/lovemy134611/category_12417811.html 部分文章&#xff1a;PyTorch深度学习实战&#xff08;20&#xff09;——从零开始实现Fast R-CNN目标检测-CSDN博客

一文深入理解高并发服务器性能优化

我们现在已经搞定了 C10K并发连接问题 &#xff0c;升级一下&#xff0c;如何支持千万级的并发连接&#xff1f;你可能说&#xff0c;这不可能。你说错了&#xff0c;现在的系统可以支持千万级的并发连接&#xff0c;只不过所使用的那些激进的技术&#xff0c;并不为人所熟悉。…

Hadoop3教程(三):HDFS文件系统常用命令一览

文章目录 语法格式&#xff08;44&#xff09; HDFS的文件系统命令&#xff08;开发重点&#xff09;参考文献 语法格式 hdfs命令的完整形式&#xff1a; hdfs [options] subcommand [subcommand options]其中subcommand有三种形式&#xff1a; admin commandsclient comman…