前端
创建前端vue
- 使用vue-cil创建前端
- 将无用的东西删除
配置
跟后端交互:axios
- 安装插件:
cnpm install -S axios
- 在
main.js
中写import axios from "axios"; Vue.prototype.$axios = axios
- 后续使用就直接
this.$axios
即可
操作cookie: vue-cookies
- 安装插件:
cnpm install -S vue-cookies
- 在
main.js
中写import cookies from 'vue-cookies' Vue.prototype.$cookies = cookies;
- 后续使用就直接
this.$cookies
即可
ui库:elementui
- 安装插件:
cnpm install -S element-ui
- 在
main.js
中写import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; // 全局都会有这个css的样式
去除标签默认样式
- 创建文件
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; /* 合并边框 */ }
- 在
main.js
中导入:import '@/assets/css/global.css'
全局配置文件
配置一个全局配置方便改地址
- 创建
src/assets/js/setting.js
写全局配置export default {BASS_URL:'http://127.0.0.1:8000/' }
- 在
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,浏览就不再发送真正的请求了
只要同时满足以下两大条件,就属于简单请求。
- 请求方法是以下三种方法之一:
- HEAD
- GET
- POST
- HTTP的头信息不超出以下几种字段:
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
解决跨域问题
中间键解决跨域问题
- 定制一个中间键
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
- 在设置文件中配置中间键
第三方解决跨域
参考链接:在Django中解决跨域问题
后端数据库迁移
使用auth拓展表,需要在数据库迁移前写好表模型
-
搭建表模型
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
-
配置设置
AUTH_USER_MODEL = 'user.User'
-
进行迁移
python manage.py makemigrations
python manage.py migrate