路飞项目篇:前台去掉全局样式、vue使用axios/cookies/elementui、跨域问题
目录
1 前台全局样式和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; /* 合并边框 */
}
# main.js引入全局css
-第一步:创建一个css样式,内容如上
-第二步:在main.js中引入即可
import './assets/css/global.css'
# 引入js
-跟后端交互,有个后端地址,设置成一个变量,以后要换,只要改这个变量即可
-第一步:写一个settings.js
export default {
base_url:'http://127.0.0.1:8000',
}
-第二步:在main.js中引入
import settings from '@/assets/js/settings'
//把settings对象,放到了Vue的原型中,相当于放到了Vue类中,类可以拿到,对象也可以拿到
Vue.prototype.$settings=settings
-第三步:以后再任意组件中直接使用
this.$settings
2 前台使用axios,cookies,elementui
# axios 跟后端交互
-第一步:安装
cnpm install axios -S
-第二步:在main.js中引入
import axios from 'axios'
Vue.prototype.$axios=axios
-第三步:使用
this.$axios.get()
# cookies 项目做了前后端分离,后端操作不了前端的cookie了,后端返回,前端自己把数据(token)放到cookie中,第三方模块,它可以方便我们直接使用js操作cookie
-第一步:安装
cnpm install vue-cookies -S
-第二步:在main.js中引入
import cookies from 'vue-cookies'
Vue.prototype.$cookies=cookies
-第三步:使用
this.$cookies.set('key','value',秒)
this.$cookies.get('key')
# js事件分别写入cookie、sessionStorage、localStorage
methods:{
handleCookie(){
this.$cookies.set('name','lqz',30)
},
handlesessionStroage(){
sessionStorage.setItem('name','pyy')
},
handlelocalStorage(){
localStorage.setItem('name','lyf')
}
},
# elementui :ui库,样式
cnpm install element-ui -S
# 补充:cookie,sessionStroage,localStorage的区别?
-cookie:会放到客户端浏览器的cookie中,有过期时间
-sessionStroage:放在客户端浏览器的会话存储中,没有过期时间,关闭浏览器,就没了
-localStorage:放在客户端浏览器的会话存储中,没有过期时间,永久生效
3 后台主页模块接口
# 软件开发模式:
-瀑布开发模式:设计,开发,测试,上线
-敏捷开发:按板块设计,开发,测试,上线 (周期基本上一个周,)
-学bbs时候,数据完全设计好了 瀑布开发模式
# 首页轮播图接口
# 操作步骤:
第一步:创建一个home app
第二步:在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 # BaseModel这个表,只用来继承用,不会在数据库生成
-banner表继承基表
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
第四步:录入数据 后台admin
# 学长问题:
-写个表:表中字段
-image:图片
-link:跳转地址
-type:跳转类型(0:跳app内部,1:跳外链,浏览器打开)
-写接口
{code:100,msg:成功,image:'http://127.0.0.1/media/banner/a.png',type:0,link:'Home'}
4 跨域问题详解,前后端打通
4.1 跨域问题分析及解决
#1 前后端分离后,前端向后端发送请求,会被禁止,所谓的跨域问题
#2 同源策略:它是浏览器的安全策略,浏览器不允许向不同的域发送请求获取数据
同一个域(同源):ip地址和端口号完全一致
请求发出去,后端执行了,但是到前端浏览器,被拦截了,不让进
# xss 跨站脚本攻击
# csrf:跨站请求伪造
#cors:跨域资源共享
# 3 通过CORS(跨域资源共享)解决---》服务端,只要在响应头中加入固定的东西,浏览器就能允许数据进入
#4 浏览器将跨域请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)
-简单请求只发一次
-非简单请求发送两次---》第一次是options预检请求,如果允许,再发送第二次真正的请求
-满足以下两个条件,就是简单请求
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
#5 解决,没有第三方,我们自己解决
-写个中间件---process_resposne中
from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
def process_response(self,request,response):
if request.method=="OPTIONS":
#可以加*
response["Access-Control-Allow-Headers"]="Content-Type"
response["Access-Control-Allow-Origin"] = "*"
return response
# 配置文件,导入中间件即可
MIDDLEWARE = [
...
'utils.corsheaders.CosMiddleWare'
]
4.2 第三方模块解决跨域问题(corsheaders)
# 6 使用第三方
-第一步:安装---装完确认以下django版本是否还是2.2.2
pip3 install django-cors-headers
-第二步:把它加入到app中
INSTALLED_APPS = (
...
'corsheaders',
...
)
-第三步:加入中间件
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware', #cors的中间件
]
-第四步:配置文件
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'accept-encoding',
'authorization',
'content-type',
'origin',
'user-agent',
)
# 完整配置文件,我们只需要用其中一部分,如上
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
CORS_ORIGIN_WHITELIST = (
'*'
)
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',
)
5 自定义配置
# django中有配置文件,项目自己会有一些配置信息,新增一个配置文件
#步骤
第一步:在settings文件夹下新建common_settings.py
第二步:写入 BANNER_COUNT = 3
第三步:在配置文件中导入
from settings.common_settings import *
拓展
# 什么是集群,什么是分布式?
# 什么叫负载均衡,有哪些常用算法?
# 通过数据库反向生成models?
https://github.com/meolu/walle-web # 运维自动化软件
https://github.com/Talkaboutcybersecurity/GitMonitor #监控软件
https://github.com/liqianglog/django-vue-admin