网站怎么样做,成都网站建设开发,三亚建设局网站,网络架构有几层前端
创建前端vue
使用vue-cil创建前端将无用的东西删除
配置
跟后端交互#xff1a;axios
安装插件#xff1a;cnpm install -S axios在main.js中写import axios from axios;
Vue.prototype.$axios axios后续使用就直接this.$axios即可
操作cookieaxios
安装插件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浏览就不再发送真正的请求了 只要同时满足以下两大条件就属于简单请求。
请求方法是以下三种方法之一 HEADGETPOST HTTP的头信息不超出以下几种字段 AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-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,PUTresponse[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_length32, uniqueTrue)# 需要pillow包的支持 pip install pillowicon mobile.ImageField(upload_toicon, defaulticon/default.png)class Meta:db_table luffy_userverbose_name 用户表verbose_name_plural verbose_namedef __str__(self):# 获取实例化对象时返回return self.username配置设置 AUTH_USER_MODEL user.User进行迁移 python manage.py makemigrationspython manage.py migrate
