傻瓜式配置前后端分离新项目

上手要从头开始做一个新的前后端分离的新项目，从搭建环境、创建项目开始做起。下面以vue做前端，drf做后端为例，从头开始配置

后端

后端需要干的事情：创建虚拟环境，新建django项目，修改django项目目录

新建虚拟环境

Windows和mac和Linux的操作不同，只纪录windows的操作

pip换源

如果嫌pip原本的工具下载包慢，可以换清华源或者豆瓣源

2 pip3 install pymysql -i  地址
3 配置，以后pip3 install全走配好的源
	-来到C:UsersoldboyAppDataRoaming      %APPDATA% 
    -创建一个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

具体的参考百度，这一步没有难度

创建虚拟环境

python中使用虚拟环境需要先下载两个包

pip3 install virtualenv
pip3 install virtualenvwrapper-win

Windows中，在“此电脑”配置环境变量，分别设置变量值，变量名为：
```
WORKON_HOME: D:Virtualenvs
```
找到python的安装路径，scripts文件下执行virtualenvwrapper.bat

打开CMD，创建虚拟环境

workon #列出有的虚拟环境（aaa）
workon aaa  #使用这个虚拟环境 
mkvirtualenv -p python3 luffy # 创建虚拟环境
rmvirtualenv 虚拟环境名字 # 删除虚拟环境

创建完成后会自动进入这个虚拟环境，这个时候已经可以在虚拟环境中安装一些包了
```
pip install django==2.2.2
# 直接pip，因为在虚拟环境中，不会装到python2去
```

pycharm创建新django项目

创建新项目，创建的时候选择虚拟环境，第一次使用需要找到第一步中，安装虚拟环境的位置

也就是你环境变量的变量值的路径，找到python解析器
pycharm创建项目成功，下面开始整理目录

django目录整理

为了方便管理，不按照django原本的目录写代码，我们把应用都放在apps下管理，不放在根目录。不使用原本的settings，把settings放在settings文件夹里，里面放两个py文件，一个作为测试时候的settings.py，一个作为上线之后用的settings.py

此外，还要创建一些新的目录来放媒体文件media，第三方的模块文件libs，说明文档docs，script文件夹，里面放测试脚本

按照图片，新增包和文件，包括

把原本settings.py的代码拷贝进dev.py，pro.py

此时当然是没法启动的，需要去改配置

# settings/dev.py(原settings.py)

import os,sys
# 原来的BASE_DIR不需要改
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# 在环境变量中插入新的路径，给放应用的apps添加路径
sys.path.insert(0,BASE_DIR)
sys.path.insert(0,os.path.join(BASE_DIR,'apps'))
# 添加环境变量之后才能像以前一样注册

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'user',
    'home',
]

ROOT_URLCONF = 'luffyapi.urls'

WSGI_APPLICATION = 'luffyapi.wsgi.application'

# 添加媒体文件夹和路径
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR,'media')

因为settings的路径换了，manage中配置的路径要改

wsgi中类似

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffyapi.settings.dev')

配置路由，给media开个路由

from django.contrib import admin
from django.urls import path,include,re_path
from apps.home import views
from django.conf import settings
from django.views.static import serve
urlpatterns = [
    path('admin/', admin.site.urls),
    path('home/', views.Home.as_view()),
    re_path('media/(?P<path>.*)',serve,{'document_root':settings.MEDIA_ROOT})
]

创建应用

manage创建应用，会自动创建当前的目录下，所以以前我们创建应用才会在根目录中。

要把应用创建在apps下，应该在terminal中操作。先cd到要创建的目录，再在目录里面用../../找到manage.py，再创建应用

cd luffyapi
cd apps # 切换目录
python ../../manage.py startapp user # 找到manage.py 创建应用

配置数据库

这里使用pymysql。但是因为django是2.2.2版本，直接使用会报错，需要修改源码

一般开发中，不会使用root账户连接数据库，所以在mysql中事先创建一个用户，赋予权限

事先创建好库，在settings/dev.py中连接数据库

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'luffyapi',
        'USER':'luffyapi',
        'PASSWORD':'6008',
        'HOST':'127.0.0.1',
        'POST':3306
    }
}

import pymysql
pymysql.install_as_MySQLdb()

AUTH_USER_MODEL = 'user.user'
# 继承AbstractUser，必须在这配置，user应用中的user表

# user/models.py
from django.db import models
from django.contrib.auth.models import AbstractUser

class User(AbstractUser):
    phone = models.CharField(max_length=11)
    avatar = models.ImageField(upload_to='icon',default='icon/default.png')
    # 注意使用ImageField需要安装Pillow

像上面创建应用的方法，迁移数据库即可

给应用文件夹添加source

标记，这样才能在视图中点来点去

未完待续

前端

使用vue脚手架创建vue项目

首先安装node.js