前后端分离:(一)

项目的搭建

一丶虚拟环境的搭建

# 使用 virtualenvwrapper工具
    mkvirtualenv luffy

创建虚拟环境：               mkvirtualenv 虚拟环境名称
创建虚拟环境(指定python版本)： mkvirtualenv -p python3 虚拟环境名称
查看所有虚拟环境：            workon+2次tab键
使用虚拟环境：               workon 虚拟环境名称
退出虚拟环境：               deactivate
删除虚拟环境（必须先退出虚拟环境内部才能删除当前虚拟环境）:
                            rmvirtualenv 虚拟环境名称
    
其他相关命令：
查看虚拟环境中安装的包：              pip freeze  或者 pip list
收集当前环境中安装的包及其版本：       pip freeze > requirements.txt
在部署项目的服务器中安装项目使用的模块： pip install -r requirements.txt

二丶技术选型和模块的安装

1. 注册支付宝的开发者账号
2. 注册阿里云账号,如果可以购买一个服务器,或者第一次使用的可以申请一个免费外网服务器
3. 注册容联云短信接口平台的账号
4. 注册保利威视频服务平台的账号[先不要注册，有个免费的测试开发时间，7天]
5. 注册gitee[码云]的账号
6. 如果有条件的,可以申请一个域名进行备案[ICP备案和公安部备案],如果没有的话, 可以注册natapp

# 在虚拟环境下安装模块包
pip install django  -i https://pypi.douban.com/simple

pip install djangorestframework  -i https://pypi.douban.com/simple

pip install PymySQL  -i https://pypi.douban.com/simple

pip install Pillow  -i https://pypi.douban.com/simple

pip install django-redis  -i https://pypi.douban.com/simple

三丶后端项目搭建

目录结构优化

# 1. 创建 
    mkdir luffy
    cd luffy
    django-admin startproject luffyapi   # 更改解释器为虚拟环境解释器

# 2. 调整目录
    luffy/
      ├── docs/          # 项目相关资料保存目录
      ├── luffycity/     # 前端项目目录
      ├── luffyapi/      # api服务端项目目录
           ├── logs/          # 项目运行时/开发时日志目录
           ├── manage.py
           ├── luffyapi/      # 项目主应用，开发时的代码保存
           │    ├── apps/      # 开发者的代码保存目录，以模块[子应用]为目录保存
           │    ├── libs/      # 第三方类库的保存目录[第三方组件、模块]
           │    ├── settings/
           │         ├── dev.py   # 项目开发时的本地配置[不需要上传到线上或者服务器]
           │         ├── prod.py  # 项目上线时的运行配置
           │    ├── urls.py    # 总路由
           │    ├── utils/     # 多个模块[子应用]的公共函数类库[自己开发的组件]
           └── scripts/       # 保存项目运营时的脚本文件
       
       
# 3. 修改配置
    修改manage.py文件中 main函数的第一行,DJANGO_SETTINGS_MODULE设置为dev.py目录
    

数据库配置

# 1 .建库
    create database luffycity default charset=utf8;

# 2. 创建用户
    create user luffy_user identified by 'luffy';
    grant all privileges on luffycity.* to 'luffy_user'@'%';
    flush privileges;
    
# 3.settings/dev.py配置
    DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.mysql",
        "HOST": "127.0.0.1",
        "PORT": 3306,
        "USER": "luffy_user",
        "PASSWORD": "luffy",
        "NAME": "luffycity",
        }
    }       
    
# 4.  __init__.py  连接数据库
    import pymysql
    pymysql.install_as_MySQLdb()
    
# 5. 调整错误   , 因为版本的不同
    # 1. 注释版本信息,
    # 2. 把query查询结果转换格式为 bytes类型
            query=query.encode()
        

日志配置

# settings/dev.py追加如下内容
# 1. django 日志对象配置
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': {
            'level': 'DEBUG',
            'filters': ['require_debug_true'],
            'class': 'logging.StreamHandler',
            'formatter': 'simple'
        },
        'file': {
            'level': 'INFO',
            'class': 'logging.handlers.RotatingFileHandler',
            'filename': os.path.join(os.path.dirname(BASE_DIR), "logs/luffy.log"),
            'maxBytes': 300 * 1024 * 1024,
            'backupCount': 10,
            'formatter': 'verbose'
        },
    },
    'loggers': {
        'django': {
            'handlers': ['console', 'file'],
            'propagate': True,
        },
    }
}

# 2. 使用日志对象
    import logging 
    # 生成log对象
    log=loging('django')

异常处理配置

# 1.  utils包下/exceptions.py
    from rest_framework.views import exception_handler

    from django.db import DatabaseError
    from rest_framework.response import Response
    from rest_framework import status

    import logging
    logger = logging.getLogger('luffy')

    # 重写 drf 的异常处理函数
    def custom_exception_handler(exc, context):
        """
        自定义异常处理
        :param exc: 异常类
        :param context: 抛出异常的上下文
        :return: Response响应对象
        """
        # 调用drf框架原生的异常处理方法
        response = exception_handler(exc, context)

        '''
            # 备注: 
                针对drf 不能处理
        '''
        if response is None:
            view = context['view']
            if isinstance(exc, DatabaseError):
                # 数据库异常
                logger.error('[%s] %s' % (view, exc))
                response = Response({'message': '服务器内部错误'}, status=status.HTTP_507_INSUFFICIENT_STORAGE)

        return response


# 2 . settings/dev.py下配置文件中添加
    REST_FRAMEWORK = {
        ...
        # 异常处理
        'EXCEPTION_HANDLER': 'luffy.utils.exceptions.custom_exception_handler',
    }

更改启动配置

# 1.由于更改了目录结构, 不能使用Django自带的启动按钮启动项目
# 2.利用manager启动项目
    # 1).编辑manager.py
        runserver api.luffycity.cn:8000

四丶git仓库的创建

初始仓库:  git init
创建分支:  git branch dev
切换分支:  git checkout dev    # 切换本地分支代码
添加代码:  git add 代码目录   # 添加代码到上传队列
查看提交项目的状态 : git status        # 查看当前项目的版本状态
提交代码到本地: git commit -m '添加项目代码'  # 提交代码到本地仓库， -m 表示本次提交的描述
推送代码到仓库的dev分支: git push origin dev:dev

五丶前端vue项目搭建

创建配置项目基础

# 1. 创建项目
    cd ~/Desktop/luffy
    vue init webpack lufei_pc
    
# 2. 更给启动配置    
    1).新建一个npm
    2).设置scripts运行参数:dev    
    
# 3. 把项目的首页页面和VUE清除

路由组件

# 1.安装
    npm i vue-router -S
    
# 2.在src目录下创建routers路由目录,新建index.js文件
    import Vue from "vue"
    import Router from "vue-router"

    // 这里导入可以让让用户访问的组件

    Vue.use(Router);

    export default new Router({
      // 设置路由模式为‘history’，去掉默认的#
      mode: "history",
      routes:[
        // 路由列表
        {
          path: '/',
        }
      ]
    })

# 3.注册路由信息 , 把router对象注册到main.js文件中
    import Vue from 'vue'
    import App from './App'
    // 导入 router对象
    import router from './routers/index';
    
    Vue.config.productionTip = false

    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    });

# 4.在App.vue视图中显示路由对应的页面
<template>
      <div id="app">
        <router-view/>     # 加入路由视图
      </div>
</template>

<script>
    export default {
      name: 'App',
      components: {

      }
    }
</script>

举个视图的'梨子'

#  1. 在 index.js文件内
    // 导入Home.vue文件
    import Home from "../components/Home"
    
    // 在路由视图列表,添加home视图的
 routes:[
    // 路由列表
     {
       name:"Home",
       path:"/",
       component:Home,
     },
      {
       name:"Home",
       path:"/home",
       component:Home,
     },
   ]

# 2. 在components/Home.vue 创建Home.vue文件
<template>
      <div id="home">
        前端首页
      </div>
</template>
<script>
  export default {
      name:"Home",
      data(){
          return {

          }
      }
  }
</script>

<style scoped>

</style>

初始化全局变量

# 1.在src目录下,创建settings.js 站点配置文件,假如如下内容
    export default {
      Host:"http://127.0.0.1",
    }
    
# 2.main.js中引用
import settings from "./settings"
    // 配置成全局的变量,以后通过this可以获得
Vue.prototype.$settings = settings;

引入ElementUI

# 1. 下载 
    npm install element-ui --save

# 2. 在main.js中导入ElementUI，并调用。
    // elementUI 导入
    import ElementUI from 'element-ui';
    // 调用插件
    Vue.use(ElementUI);
    
# 3. App.vue，全局css初始化代码
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* 声明全局样式和项目的初始化样式 */
body,h1,h2,h3,h4,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,li{
  list-style: none;
}
table{
  border-collapse: collapse; /* 合并边框 */
}

/* 工具的全局样式 */
.full-left{
  float: left!important;
}
.full-right{
  float: right!important;
}

[class*=" el-icon-"], [class^=el-icon-]{
  font-size: 50px;
}
.el-carousel__arrow{
  width: 120px;
  height: 120px;
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background: #ffc210;
  border-color: #ffc210;
  border: none;
}
.el-checkbox__inner:hover{
  border-color: #9b9b9b;
}
.el-checkbox__inner{
  width: 16px;
  height: 16px;
  border: 1px solid #9b9b9b;
  border-radius: 0;
}
.el-checkbox__inner::after{
  height: 9px;
  width: 5px;
}

</style>

引入axios

# 1 . 安装
    npm i axios -S
    
# 2. 在main.js 配置 axios    
    import axios from 'axios'; // 从node_modules目录中导入包
    // 允许ajax发送请求时附带cookie
    axios.defaults.withCredentials = true;

    Vue.prototype.$axios = axios; // 把对象挂载vue中

六丶跨域CORS

### 由于是本地测试  , 服务器设置允许跨域
流程:
    # 1. 前端后端的域名设置
        前端`www.luffycity.cn`
        后端`api.luffycity.cn`
    
    # 2. 更改hosts文件
        sudo vim /etc/hosts
        加入:
        127.0.0.1   localhost
        127.0.0.1   api.luffycity.cn
        127.0.0.1   www.luffycity.cn

前端修改配置

# 1. 修改 config/index.js 
        host: 'www.luffycity.cn', // can be overwritten by process.env.HOST
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: true,
                        

后端修改配置

#  1.  settings/dev.py
    # 设置哪些客户端可以通过地址访问到后端
    ALLOWED_HOSTS = [
        'api.luffycity.cn',
    ]
    
# 2. 修改pycharm的manage.py的配置参数 
    runserver api.luffycity.cn:8000
 

# 3. 使用django-cors-headers
    # 1. 安装
    pip install django-cors-headers
    # 2. 添加应用
        INSTALLED_APPS = (
                ....
                'corsheaders',
            )
        
    # 3. 中间件配置, 放在第一个位置
    MIDDLEWARE = [
            'corsheaders.middleware.CorsMiddleware',
            ...
        ]
    
    # 4. 添加白的名单 ,在 settings/dev.py
        # CORS组的配置信息
        CORS_ORIGIN_WHITELIST = (
            'www.luffycity.cn:8080',
        )

        CORS_ALLOW_CREDENTIALS = True  # 允许ajax跨域请求时携带cookie