zoukankan      html  css  js  c++  java
  • 路飞项目环境搭建

    路飞项目环境搭建

    1 pip换源

    %APPDATA% 来到C:UsersoldboyAppDataRoaming      
    创建一个pip文件夹
    新建一个文件pip.ini
    
    写入
    
    [global]
    index-url = http://pypi.douban.com/simple
    [install]
    use-mirrors =true
    mirrors =http://pypi.douban.com/simple/
    trusted-host =pypi.douban.com
    

    2 python虚拟环境搭建

    1 不同的项目依赖不同的模块版本,不能共用一套环境,所以每个项目都应该使用各自的虚拟环境
    
    
    2 在系统的python环境中安装2个模块
    
    	pip3 install virtualenv
        pip3 install virtualenvwrapper-win
    	-修改环境变量:
        	WORKON_HOME: D:Virtualenvs
        -在python安装路径内的scripts文件中执行virtualenvwrapper.bat文件
        
        
    3 使用:
    	命令行输入以下指令可以查看所有的虚拟环境或使用对应的虚拟环境
        -mkvirtualenv -p python3 luffy # 创建虚拟环境
    	-workon  	#列出有的虚拟环境(aaa)
        -workon aaa  #使用名为aaa的虚拟环境 
        -rmvirtualenv 虚拟环境名字 # 删除虚拟环境
        
        
    4 安装django环境
    	在使用workon aaa后会在命令行最左边出现一个(aaa)
        此时安装的第三方包都会安装到该虚拟环境
    	如:pip install django==2.2.2
        
        
    5 基于虚拟环境创建项目(pycharm选择已存在的环境)
    

    3 路飞后台创建,配置修改,目录变更

    # 在控制台直接指向项目 python manage.py runserver --->manage.py需要修改settings路径
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffyapi.settings.dev')
    
    # 项目上线,走的不是wsgi.py--->而是uwsgi.py,需要修改settings路径
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffyapi.settings.dev')
    
    # 国际化		将部分文字修改成中文
    LANGUAGE_CODE = 'zh-hans'
    TIME_ZONE = 'Asia/shanghai'
    USE_I18N = True
    USE_L10N = True
    USE_TZ = False
    
    
    # 创建app:
    startapp的执行位置,就是app的创建位置
    
    python ../../manage.py startapp home
        
    
    # 注册app
    
    在settings中配置
    sys.path.insert(0, BASE_DIR)
    sys.path.insert(1, os.path.join(BASE_DIR, 'apps'))
    
    右键apps文件夹,选择mark directory,设置为sources root
    
    
    # 最终效果
    ├── luffyapi
    	├── logs/				# 项目运行时/开发时日志目录 - 包
    	├── manage.py			# 脚本文件
    	├── luffyapi/      		# 项目主应用,开发时的代码保存 - 包
    		├── apps/      		# 开发者的代码保存目录,以模块[子应用]为目录保存 - 包
    		├── libs/      		# 第三方类库的保存目录[第三方组件、模块] - 包
    		├── settings/  		# 配置目录 - 包
    			├── dev.py   	# 项目开发时的本地配置
    			└── prod.py  	# 项目上线时的运行配置
    		├── urls.py    		# 总路由
    		└── utils/     		# 多个模块[子应用]的公共函数类库[自己开发的组件]
    	└── scripts/       		# 保存项目运营时的脚本文件 - 文件夹
    

    4 数据库配置

    # 创建项目依赖的数据库,luffyapi
    	-create database luffyapi;
        
    # 创建数据库用户,并且授予luffyapi该库的权限
    	-grant all privileges on luffyapi.* to 'luffyapi'@'%' identified by 'Luffy123?';
        -grant all privileges on luffyapi.* to 'luffyapi'@'localhost' identified by 'Luffy123?';
        -flush privileges;
        
    # 项目连接
    	-setting中配置
        	DATABASES = {
                'default': {
                    'ENGINE': 'django.db.backends.mysql',
                    'NAME': 'luffyapi',
                    'USER':'luffyapi',
                    'PASSWORD':'Luffy123?',
                    'HOST':'127.0.0.1',
                    'PORT':3306
    
                }
            }
            import pymysql
    		pymysql.install_as_MySQLdb()
         -用pymysql连接数据库
        	-django超过:2.0.7
            -需要改源码,两个地方
    
    

    5 User表配置

    # 用户要基于auth的user表,必须在数据库迁移命令之前操作好,后期如果再做,会出错
    	-把所有app下的迁移文件,全删除
        -admin,auth 	两个app下的迁移文件删除
            /Lib/site-packages/django/contrib/auth/migrations
            Libsite-packagesdjangocontribadminmigrations
        -删库(数据一定要导出来),重新迁移  
    
        
    # 继承AbstractUser,增加两个字段,telephone,icon(使用image字段必须安装pillow)
    
    # 在setting中配置
        MEDIA_URL='/media/'
        MEDIA_ROOT=os.path.join(BASE_DIR,'media')  
        # BASEDIR是luffyapi下的luffyapi
        AUTH_USER_MODEL='user.user'
        
    # 配置路由,开放media文件夹
    re_path('media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
    

    6 路飞前台搭建

    #1 安装node,官网下载,一路下一步
        node -v
        v10.16.3
        
    #2 换源
    	npm install -g cnpm --registry=https://registry.npm.taobao.org 
            
    #3 安装模块
    	npm install 模块名 #npm比较慢,用淘宝的cnpm来替换npm
     
    #4 创建vue的工程(需要一个vue脚手架)
    	cnpm install -g @vue/cli
        
    #5 如果出问题执行如下,重新走3,4
    	npm cache clean --force
        
    #5 命令行下敲
    	vue 就会有提示
        
    # 6 创建vue项目
        vue create luffycity
        选Manually
    
    
    #7 用pycharm打开
    	在terminal下敲:npm run serve
        
    #8 配置pycharm可用绿色箭头打开
    	绿色箭头旁的下拉框,选择edit configrations,输入serve
    

    7 目录介绍

    public
        -favicon.ico   # 图标
        -index.html    #整个项目的单页面
    src
        -assets     #静态文件,js,css,img
        -components # 小组件,头部组件,尾部组件
        -router     # 路由相关
        -store      # vuex相关,状态管理器,临时存储数据的地方
        -views      # 页面组件
        -App.vue    # 根组件
        -main.js    # 配置文件(跟django的setting一样)
        
        
        
    #任何一个组件都有三部分
    	<template>
        	#html相关
    	</template>
        <style>
    		# css相关
    	</style>
    
        <script>
    		# js相关
        </script>
    

    8 Response、异常和日志的封装

    response

    # utils/response
    from rest_framework.response import  Response
    
    
    class APIResponse(Response):
        def __init__(self,code=1,msg='成功',result=None,status=None,headers=None,**kwargs):
            dic={'code':code,'msg':msg}
            if result:
                dic['result']=result
            dic.update(kwargs)
            super().__init__(data=dic,status=status,headers=headers)
    

    exception

    #utils/exceptions.py
    from rest_framework.views import exception_handler
    from .response import APIResponse
    from .logger import log
    
    
    def common_exception_handler(exc, context):
        log.error('view是:%s ,错误是%s'%(context['view'].__class__.__name__,str(exc)))
        #context['view'] 是TextView对象,取出它的类名
        print(context['view'].__class__.__name__)
        ret=exception_handler(exc, context)  # 是Response对象,它内部有个data
    
        if not ret:  
            # drf内置的异常处理方法处理不了的异常,会返回空
            # 可以通过类的判断,更具体的捕获异常
            if isinstance(exc,KeyError):
                return APIResponse(code=0, msg='key error')
    
            return APIResponse(code=0,msg='error',result=str(exc))
        else:
            return APIResponse(code=0,msg='error',result=ret.data)
    
    
    
    

    logger

    # 封装logger
    # setting.py中配置日志
    LOGGING = {
        'version': 1,
        'disable_existing_loggers': False,
        'formatters': {
            'verbose': {
                'format': '%(levelname)s %(asctime)s %(module)s %(lineno)d %(message)s'
            },
            'simple': {
                'format': '%(levelname)s %(module)s %(lineno)d %(message)s'
            },
        },
        'filters': {
            'require_debug_true': {
                '()': 'django.utils.log.RequireDebugTrue',
            },
        },
        'handlers': {
            'console': {
                # 实际开发建议使用WARNING
                'level': 'DEBUG',
                'filters': ['require_debug_true'],
                'class': 'logging.StreamHandler',
                'formatter': 'simple'
            },
            'file': {
                # 实际开发建议使用ERROR
                'level': 'INFO',
                'class': 'logging.handlers.RotatingFileHandler',
                # 日志位置,日志文件名,日志保存目录必须手动创建,注:这里的文件路径要注意BASE_DIR代表的是小luffyapi
                'filename': os.path.join(os.path.dirname(BASE_DIR), "logs", "luffy.log"),
                # 日志文件的最大值,这里我们设置300M
                'maxBytes': 300 * 1024 * 1024,
                # 日志文件的数量,设置最大日志数量为10
                'backupCount': 100,
                # 日志格式:详细格式
                'formatter': 'verbose',
                # 文件内容编码
                'encoding': 'utf-8'
            },
        },
        # 日志对象
        'loggers': {
            'django': {
                'handlers': ['console', 'file'],
                'propagate': True, # 是否让日志信息继续冒泡给其他的日志处理系统
            },
        }
    }
    
    
    
    #utils/logger
    
    import logging
    
    # log=logging.getLogger('名字') # 跟配置文件中loggers日志对象下的名字对应
    log=logging.getLogger('django')
    
    
    # 后续使用:导入直接用
    from luffyapi.utils.logger import log
    log.info('xxxxxx')  # 不要写print
    

    9 跨域问题及解决

    # xss:跨站脚本攻击,cors:跨域资源共享,csrf:跨站请求伪造
    # 同源策略是浏览器进行的拦截,服务器并未阻止响应
    
    # 1 同源策略:请求的url地址,必须与浏览器上的url地址同源,也就是域名(ip),端口(port),协议(http,https)相同.
    
    # 2 CORS:跨域资源共享,允许不同域的请求访问服务器拿数据
    
    # 3 CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)
    	只要同时满足以下两大条件,就属于简单请求
        (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
    # 非简单请求会发两次请求,一次是OPTIONS请求,一次是真正的请求
    
    
    
    
    
    

    9.1 自己写中间件实现

    # 1 后端处理,开启cors,跨域资源共享(在中间件中写)
    class MyMiddle(MiddlewareMixin):
        def process_response(self, request, response):
            response['Access-Control-Allow-Origin'] = '*'
            if request.method == "OPTIONS":			# 可以加*
                response["Access-Control-Allow-Headers"] = "Content-Type"
                response["Access-Control-Allow-Headers"] = "authorization"
            return response
        
        
    # 2 在setting的中间件中配置
    
    

    9.2 用第三方模块实现

    使用第三方,django-cors-headers
    -pip install django-cors-headers
    -注册app:'corsheaders',
    -配置中间件:corsheaders.middleware.CorsMiddleware
    -setting中配置:
    CORS_ORIGIN_ALLOW_ALL = True
    CORS_ALLOW_METHODS = (
    	'DELETE',
    	'GET',
    	'OPTIONS',
    	'PATCH',
    	'POST',
    	'PUT',
    	'VIEW',
    )
    CORS_ALLOW_HEADERS = (
    	'authorization',
    	'content-type',
    )
    
    

    10 前后台打通

    #1 前台可以发送ajax的请求,axios
    
    #2 cnpm install axios
    
    #3 配置在main.js中
    import axios from 'axios'   //导入安装的axios
    //相当于把axios这个对象放到了vue对象中,以后用  vue对象.$axios
    Vue.prototype.$axios = axios;
    	
        
    #4 使用(某个函数中)
          this.$axios.get('http://127.0.0.1:8000/home/home/'). //向某个地址发送get请求
          then(function (response) {  	//如果请求成功,返回的数据再response中
            console.log(response)
          }).catch(function (error) {
            console.log(error)
          })
            
    #5 es6的箭头函数
    function (response) {console.log(response)}
    response=>{ console.log(response)}
    

    11 xadmin后台管理

    # 1 安装 pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2
    
    # 2 在settings中注册3个app
    	
        'xadmin', 			# xadmin主体模块
        'crispy_forms', 	# 渲染表格模块
        'reversion', 			# 为模型通过版本控制,可以回滚数据
        
    # 3 数据迁移
    python manage.py makemigrations
    python manage.py migrate
    
    # 4 主路由替换掉admin:主urls.py
        # xadmin的依赖
        import xadmin
        xadmin.autodiscover()
        # xversion模块自动注册需要版本控制的 Model
        from xadmin.plugins import xversion
        xversion.register_models()
    
        urlpatterns = [
            path(r'xadmin/', xadmin.site.urls),
        ]
        
        
    # 5 # 在项目根目录下的终端
    python manage.py createsuperuser
    # 账号密码设置:admin | Admin123
    
    
  • 相关阅读:
    linux(不会考特别难,牢记下面即可)
    ajax
    Javascript 和 Jquery
    开发环境及配置
    网络协议考点
    面向对象考点
    会话控制
    文件操作
    正则表达式
    自定义函数和内部函数
  • 原文地址:https://www.cnblogs.com/achai222/p/13332651.html
Copyright © 2011-2022 走看看