我的项目day01:创建项目的前端和后端，以及对前后端项目的基本配置

一：企业的项目类型

1.面向互联网用户：

• 商城类型（微信小程序）
• 社交类型
• 二手交易类型（闲鱼，转转，找靓机）

2.公司内部项目：

• os系统
• 员工管理系统
• 第三方公司做的：
  • 医院，互联网，内部的项目
  • 银行内部的项目
  • 政府项目

3.其他类型

• 个人博客

• 知识分享付费平台：稀土掘金

• 房屋租赁：青客，自如

• 微信小程序：二维火

• 零售行业：便利店

• 问卷网

• 学校：考试系统

• 二次定制：django+simpleui

二：企业项目的开发流程

1.立项

2.需求分析

• 互联网项目：需求调研和分析：产品经理设计出来的
• 传统软件：需求调研和分析：市场人员和客户对接

3.原型设计

• 产品经理：懂业务

4.任务分发

• 前端团队：ui设计；前端写代码（pc, 小程序，移动端）
• 后端团队：架构：数据库设计；任务分发：用户，商品板块

5.项目开发

6.项目测试

• 联调测试

7.项目上线

三：开发人员的工作流程

1.新项目

1.新项目，先开会，设计技术选型，数据库设计

2.等原型与做好

3.老大在项目管理平台（禅道）分配任务给我

4.到管理平台就能够看到自己的任务，有相关功能的原型图，根据原型图实现效果

5.开发：不明白的地方，找产品对接，沟通，边写边自测

6.写好了，提交到版本仓库中（git, svn)

7.等所有的都开发完了，老大会分支合并，接着前端联调，最后发版

2.老项目

1.老大在项目管理平台（禅道）分配任务给我

2.到管理平台就能够看到自己的任务，有相关功能的原型图，根据原型图实现效果

3.开发：不明白的地方，找产品对接，沟通，边写边自测

4.写好了，提交到版本仓库中（git, svn)

5.等所有的都开发完了，老大会分支合并，接着前端联调，最后发版

四：路飞项目需求

1.项目的类型

• 商城：知识付费，视频课程

2.项目的需求

• 首页功能：轮播图，推荐课程接口
• 用户功能：密码登录，手机验证码登录，发送手机验证码，验证手机号是否注册过，注册接口
• 课程列表：课程列表接口，排序，过滤，分页
• 课程详情：课程详情接口，视频播放功能，视频托管（第三方，自己的平台）
• 下单功能：支付宝支付（生成支付链接，付款，回调修改订单）
• 购买功能：购买课程

五：pip永久换源

# 1.文件管理器文件路径地址栏敲：%APPDATA% 回车，快速进入 C:\Users\电脑用户\AppData\Roaming 文件夹中（C:\Users\oldboy\AppData\Roaming）

# 2.新建 pip 文件夹并在文件夹中新建 pip.ini 配置文件

# 3.新增 pip.ini 配置文件内容(下面代码写入到pip.ini中，并保存)

	[global]
    index-url = https://mirrors.aliyun.com/pypi/simple
    [install]
    use-mirrors =true
    mirrors =https://mirrors.aliyun.com/pypi/simple
    trusted-host =mirrors.aliyun.com
1
2
3
4
5
6
7
8
9
10
11
12

六：搭建虚拟环境

1.什么是虚拟环境？作用？使用场景？

操作系统装了python3.8
    	-使用django 2.2.2开发了一个项目
        -使用django 3.x 开发了一个i项目
        -把两个项目都打开，同时开发
    -每个项目都用自己独立的环境，装的模块相互不影响
1
2
3
4
5

2.虚拟环境的解决方案？

# 1.Virtualenv
# 2.pipenv
1
2

3.pycharm中搭建虚拟环境

4.终端创建虚拟环境

# 第一步：装2个模块
pip3 install virtualenv
pip3 install virtualenvwrapper-win  # win装它，linux和mac装virtualenvwrapper

# 第二步：配置环境变量
变量名：WORKON_HOME  变量值：自定义存放虚拟环境的绝对路径
eg: WORKON_HOME: D:\Virtualenvs
                 
# 第三步：同步配置信息：bat只是win的批处理文件（linux和mac的是：.sh)
去向Python3的安装目录 => Scripts文件夹 => virtualenvwrapper.bat => 双击

# 第四步：创建虚拟环境
	# 1.选取默认Python环境创建虚拟环境：
        -- mkvirtualenv 虚拟环境名称
    # 2.基于某Python环境创建虚拟环境：并进入
        -- mkvirtualenv -p python2.7 虚拟环境名称
        -- mkvirtualenv -p python3.8 虚拟环境名称
        
 # 第五步：查看自己现有的虚拟环境
 workon
    
 # 第六步：使用某个虚拟环境
 workon 虚拟环境名称
    
 # 第七步：进入退出改虚拟环境的python环境
 python | exit()
    
 # 第八步：为虚拟环境安装模块
 pip/pip3 install 模块名字
    
 # 第九步：退出当前虚拟环境
 deactivate
    
 # 第十步：删除虚拟环境（删除当前虚拟环境要先退出）
 rmvirtualenv 虚拟环境名称

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

七：luffy项目后台目录创建

1.注意事项

# 创建项目，需要选择咱们的虚拟环境创建
# 再使用虚拟环境创建路飞项目前，一定要先安装django，否则会以最先django创建
# 或者使用djagno-admin创建
1
2
3

2.项目目录

├── luffyapi
	├── logs/				# 项目运行时/开发时日志目录 - 包
    ├── manage.py			# 脚本文件
    ├── luffyapi/      		# 项目主应用，开发时的代码保存 - 包
     	├── apps/      		# 开发者的代码保存目录，以模块[子应用]为目录保存 - 包
        ├── libs/      		# 第三方类库的保存目录[第三方组件、模块] - 包
    	├── settings/  		# 配置目录 - 包
			├── dev.py   	# 项目开发时的本地配置
			└── prod.py  	# 项目上线时的运行配置
		├── urls.py    		# 总路由
		└── utils/     		# 多个模块[子应用]的公共函数类库[自己开发的组件]
    └── scripts/       		# 保存项目运营时的脚本文件 - 文件夹
1
2
3
4
5
6
7
8
9
10
11
12

3.修改的配置及需要注意的点

 # 1.要运行，修改manage.py第9行
	os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffy_api.settings.dev')
 # 2.要上线（后期上线改）
	wsgi.py的第14行
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffy_api.settings.prod')
    
    
 # 3.创建app时，要进入到apps文件夹下执行
	python ../../manage.py startapp home
    
    
 # 4.注册app
	-导入包，都要从环境变量开始导起
    
 # 5.settings/dev.py 加入
    import sys
    import os
    BASE_DIR = Path(__file__).resolve().parent.parent  #小luffy_api
    # 把小luffy_api和apps路径都加入到环境变量。以后直接从这俩路径下导起即可
    sys.path.append(str(BASE_DIR))
    sys.path.append(os.path.join(BASE_DIR,'apps'))
    
# 以后注册app，直接写app名字即可
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

八：日志功能的封装

1.目的：

# 1.配查问题，分析错误
# 2.分析用户行为
1
2

2.步骤：

第一步：把以下代码只需要粘贴到settings文件夹下面的dev.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': 10,
            # 日志格式:详细格式
            'formatter': 'verbose',
            # 文件内容编码
            'encoding': 'utf-8'
        },
    },
    # 日志对象
    'loggers': {
        'django': {
            'handlers': ['console', 'file'],
            'propagate': True,  # 是否让日志信息继续冒泡给其他的日志处理系统
        },
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

第二步：在utils中新建common_logger.py

import logging
# 通过配置问中的名字拿到logger对象，以后只需要导入，直接使用对象写日志即可
logger=logging.getLogger('django')
1
2
3

第三步：在要使用的地方，导入，直接使用：logger.info等，即可

from utils.common_logger import logger

def test(request):
    logger.warning('用户来访问了')
    return HttpResponse('ok')
1
2
3
4
5

九：封装全局异常

1.目的：

# 1.drf,处理了全局异常，只需要写个函数，配置在配置文件中，出了异常，这个函数就会执行
# 2.写一个函数，封装全局异常
	-1 统一返回格式
    -2 记录日志：出了异常，程序有问题，后期排查问题
1
2
3
4

2.步骤：

第一步：1 新建一个exceptions.py，写入一下代码

from rest_framework.views import exception_handler as drf_exception_handler
    from rest_framework.response import Response
    from utils.common_logger import logger


    def exception_handler(exc, context):
        # 程序出了异常，会走到这,我们都要记录日志
        # 请求地址，请求方式，请求时间，请求哪个视图函数，如果登录了，记录一下用户id
        request = context.get('request')
        try:
            user_id = request.user.pk
            if not user_id:
                user_id = '匿名用户'
        except:
            user_id = '匿名用户'
        view = context.get('view')
        logger.error('用户：【%s】，使用：【%s】 请求，请求：【%s】 地址，视图函数是：【%s】，出错了，错误是：【%s】' % (
            user_id, request.method, request.get_full_path(), str(view), str(exc)
        ))
        # 第一步：执行一下原来的异常处理:它只处理drf的异常，django的异常没有处理
        # res如果有值是Response的对象，说明是drf的异常
        # res如果是None，说明是django的异常
        res = drf_exception_handler(exc, context)
        # 在这里，可以通过状态码，把异常分的更细一些：比如有数据的异常，除以0的异常，列表越界异常。。。。
        if res:
            # drf异常
            # res=Response(data={'code':999,'msg':'服务器出错，请联系系统管理员'})
            res = Response(data={'code': 999, 'msg': res.data.get('detail', '服务器出错，请联系系统管理员')})
        else:
            # django的异常，状态码是888，错误信息是  exc异常对象转成字符串
            res = Response(data={'code': 888, 'msg': str(exc)})
        return res
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

第二步：在配置文件中配置

 REST_FRAMEWORK = {
        # 以后，只要出异常，就会执行exception_handler
            'EXCEPTION_HANDLER': 'utils.exceptions.exception_handler',
        }
1
2
3
4

十：后台配置之封装response

1.目的

# drf提供的Response对象，不能很方便的加入code和msg字段，自己封装一个Response类，以后都用我们自己封装的，方便咱们写code和msg
1

2.实现

第一步：在utils/response.py中，写入一下代码

from rest_framework.response import Response
    class APIResponse(Response):
        def __init__(self, code=100, msg='成功', status=None, headers=None, **kwargs):
            data = {'code': code, 'msg': msg}
            if kwargs:
                data.update(kwargs)
            super().__init__(data=data, status=status, headers=headers)
1
2
3
4
5
6
7

第二步：以后再视图类中，导入使用即可

return APIResponse(token='asfdasfd')

return APIResponse(token='asfdasfd',status=201,code=101)
1
2
3

十一：数据库配置

1.目的

# 数据库使用mysql，配置mysql

# 之前使用root用户作为项目的数据库用户，权限太高了，一般公司里，给项目单独建立一个用户，这个用户只对当前库有权限
1
2
3

2.实现

第一步：在mysql中创建一个用户luffy_api，给用户授予luffy库的所有权限

# 1.创建路飞数据库：create database luffy;

# 2.查看有哪些用户：select user,host from mysql.user;

# 3.创建一个luffy_api用户（之前有个root用户，权限很高）
    #授权账号命令：grant 权限(create, update) on 库.表 to '账号'@'host' identified 		by '密码'
    # 把luffy库下所有表的权限都授予luffy_api这个用户，允许远程链接
    grant all privileges on luffy.* to 'luffy_api'@'%' identified by 'Luffy123?';
    # 把luffy库下所有表的权限都授予luffy_api这个用户，允许本地链接
    grant all privileges on luffy.* to 'luffy_api'@'localhost' identified by 'Luffy123?';
    
# 4.以luffy_api用户登录，查看，只能看到luffy库

# 5.在项目中配置好使用mysql数据
	
    user = os.environ.get('USER', 'luffy_api')
	password = os.environ.get('PASSWORD', '****')

    DATABASES = {
        'default': {
            'ENGINE': 'django.db.backends.mysql',
            'NAME': 'luffy',
            'USER': user,
            'PASSWORD': password,
            'HOST': '127.0.0.1',
            'PORT': 3306
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

第二步：下载模块：mysqlclient,解决一切问题

 运行项目会报错，django默认使用mysqlDB操作mysql，mysqlDB这个模块，在python2可以的，在python3中不支持，于是咱们使用pymysql替换，到了django2.0.7以后，如果使用pymysql替换，需要改django的源代码，后期使用mysqlclient，替换pymysql，mysqlclient是mysqlDB的python3.x版本
     -如果使用pymysql，需要改源码，需要执行
        import pymysql
		pymysql.install_as_MySQLdb() # 猴子补丁，把里面所有mysqlDB的对象，都替换成pymysql
        
        
以后再django中不使用pymysql了，使用mysqlclient，不需要再执行任何补丁了

猴子补丁是：在程序运行过程中得动态替换技术:https://www.liuqingzheng.top/python/Python%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/24-%E5%8D%8F%E7%A8%8B%E4%B9%8Bgevent%E6%A8%A1%E5%9D%97/
1
2
3
4
5
6
7
8
9

pip install mysqlclient 
1

3.补充知识点：mysql的utf8编码和utf8mb4的区别？

-utf8：一个字符，占两个字节（byte--->1个byte是8个比特位  10101010）

-utf8mb4：一个字符，占4个字节，表情符号

-咱们学的utf-8：可变长可以1---4字节表示一个字符
1
2
3
4
5

研究一下 以下两种登录方式的区别？第一个快
mysql -uroot -p

mysql -h 192.168.1.11 -P 3306 -uroot -p
1
2
3
4

十二：重写auth_user表

第一步：创一个用户app：python …/…/manage.py startapp user

第二步：user 的app的models.py中扩写用户表

from django.db import models
from django.contrib.auth.models import AbstractUser


# Create your models here.


class UserInfo(AbstractUser):
    mobile = models.CharField(max_length=11, unique=True)
    icon = models.ImageField(upload_to='icon', default='icon/default.png')

    class Meta:
        db_table = 'luffy_user'  # 指定表名
        verbose_name_plural = '用户表'

    def __str__(self):
        return self.username
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

第三步：在dev.py文件中配置

# 用户表的配置,注册app，安装pillow模块
AUTH_USER_MODEL = 'user.UserInfo'
1
2

第四步：数据库迁移

python manage.py makemigrations

python manage.py migrate
1
2
3

十二：开放media访问

第一步：在配置文件中配置

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
1
2

第二步：新建media文件夹，icon文件夹，放一张图片进去

第三步：在路由中加入

    path('media/', serve, kwargs={'document_root': settings.MEDIA_ROOT}),
1

十三：路飞前台项目的创建

第一步：cmd终端直接创建项目

vue create luffy_city
1

第二步：删除一些不用的文件或者内容，剩下下面这些

# 1 App.vue中只保留
    <template>
      <div id="app">
        <router-view/>
      </div>
    </template>
    
# 2 HomeView.vue
    <template>
      <div class="home">
        <h1>首页</h1>
      </div>
    </template>
    <script>
    export default {
      name: 'HomeView',
    }
    </script>
# 3 router/index.js
	const routes = [
        {
            path: '/',
            name: 'home',
            component: HomeView
        },
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

1.安装及配置axios

# 1 安装
cnpm install axios

# 2 配置 main.js中
import axios from 'axios'
Vue.prototype.$axios=axios

# 3 以后再任意组件中使用
this.$axios.get()
1
2
3
4
5
6
7
8
9

2.安装及配置element-ui

-安装：cnpm i element-ui -S

    -配置：main.js中
    	import ElementUI from 'element-ui';
        import 'element-ui/lib/theme-chalk/index.css';
        Vue.use(ElementUI);
    -使用：在任意组件中复制粘贴（template，script，style）

#vue3 使用 element-plus
1
2
3
4
5
6
7
8
9

3.安装及配置bootstrap, jquery

# 咱的项目没使用，但是引入，以后可以用

# bootstrap基于jquery

# 使用步骤：
	1 安装
    	cnpm install jquery -S
		cnpm install bootstrap@3 -S
        
    2 配置：main.js
        import 'bootstrap'
        import 'bootstrap/dist/css/bootstrap.min.css'
        
    3 vue.config.js配置(直接覆盖掉原有的)
        const webpack = require("webpack");
        module.exports = {
            configureWebpack: {
                plugins: [
                    new webpack.ProvidePlugin({
                        $: "jquery",
                        jQuery: "jquery",
                        "window.jQuery": "jquery",
                        "window.$": "jquery",
                        Popper: ["popper.js", "default"]
                    })
                ]
            }
        };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

4.安装及配置vue-cookies

# 1 安装
	cnpm install vue-cookies -S
# 2 配置：main.js中
	import cookies from 'vue-cookies'
    Vue.prototype.$cookies=cookies
# 3 使用：任意组件中
	this.$cookies.set()
1
2
3
4
5
6
7