其他分享
首页 > 其他分享> > 路飞项目篇:前台去掉全局样式、vue使用axios/cookies/elementui、跨域问题、git安装

路飞项目篇:前台去掉全局样式、vue使用axios/cookies/elementui、跨域问题、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

标签:cookies,git,跨域,settings,models,vue,name
来源: https://www.cnblogs.com/williama/p/16452661.html