路飞项目篇:前台去掉全局样式、vue使用axios/cookies/elementui、跨域问题、git安装
2022/7/7 6:21:38
本文主要是介绍路飞项目篇:前台去掉全局样式、vue使用axios/cookies/elementui、跨域问题、git安装,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
目录- 1 前台全局样式和js配置
- 2 前台使用axios,cookies,elementui
- 3 后台主页模块接口
- 4 跨域问题详解,前后端打通
- 4.1 跨域问题分析及解决
- 4.2 第三方模块解决跨域问题(corsheaders)
- 5 自定义配置
- 6 git介绍和安装
- 拓展
1 前台全局样式和js配置
# 引入全局css -第一步:创建一个css样式 -第二步:在main.js中引入即可 import './assets/css/global.css' # 引入js -跟后端交互,有个后端地址,设置成一个变量,以后要换,只要改这个变量即可 -第一步:写一个settings 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 *
6 git介绍和安装
# 多人,个人开发程序,需要解决的问题 1 帮助开发者合并开发的代码 2 如果出现冲突代码的合并,会提示后提交合并代码的开发者,让其解决冲突 3 做版本管理,找回很久以前写的代码 # 可以做版本管理和合并代码的软件 软件:SVN 、 GIT #名词解释 git,gitee,github,gitlab # git 是版本管理软件,可以装在不同操作系统平台,主要用来做版本管理 # github:全球最大的开源软件仓库(私有软件,花钱,国内公司一般不放在github) # gitee:码云 中国版的github(少量公司用码云) # gitlab:公司内部使用的代码托管平台 # svn和git git:集群化,有没有客户端,git都可以使用 svn是客户端---》服务端架构 # git 的安装 -linux:centos yum install git -y -mac 下: -https://github.com/timcharper/git_osx_installer/releases 下载软件,下一步安装 -win下 -https://git-scm.com/download/win 下载软件,下一步安装
拓展
# 什么是集群,什么是分布式? # 什么叫负载均衡,有哪些常用算法? # 通过数据库反向生成models? https://github.com/meolu/walle-web # 运维自动化软件 https://github.com/Talkaboutcybersecurity/GitMonitor #监控软件 https://github.com/liqianglog/django-vue-admin
这篇关于路飞项目篇:前台去掉全局样式、vue使用axios/cookies/elementui、跨域问题、git安装的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-26React入门教程:从零开始搭建你的第一个React应用
- 2024-12-25Vue2入门教程:轻松掌握前端开发基础
- 2024-12-25Vue3入门指南:快速搭建你的第一个Vue3项目
- 2024-12-25JS基础知识入门教程
- 2024-12-25React基础知识详解:从入门到初级应用
- 2024-12-25Vue3基础知识详解与实战指南
- 2024-12-25Vue3学习:从入门到初步掌握
- 2024-12-25Vue3入门:新手必读的简单教程
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用