Vue+Django前后端分离实战项目

共计 5358 个字符，预计需要花费 14 分钟才能阅读完成。

环境搭建 (Windows)

创建虚拟环境

virtualenv django_env
django_envScriptsactivate # 激活虚拟环境
django_envScriptsdeactivate # 退出 

依赖包安装

pip install django
pip install djangorestframework
pip install PymySQL
pip install pillow
pip install django-redis

pip list # 查看虚拟环境中安装的包
pip freeze > requirements.txt # 收集当前环境中安装的包及其版本
pip install -r requirements.txt # 安装项目使用到的模块 

项目搭建

mkdir django
cd django
django-admin startproject siteapi

使用 PyCharm 打开新建的项目 siteapi，点击「File」->「Settings」->「Project: siteapi」->「Python Interpreter」。

点击右上角的⚙️->「Add…」->「Existing environment」，找到虚拟环境下的 Python 解释器（django_envScriptspython.exe）。

打开 manage.py，右键「Run ‘manage’」，点击右上角「manage」->「Edit Configurations…」，在 Parameters: 填入参数：runserver 0.0.0.0:8000。

重新运行 manage.py，然后浏览器访问 http://127.0.0.1:8000/。

调整目录结构

在项目文件夹下新建 logs 目录，用来存放日志文件；新建 scripts 包，用来存放项目运行时的脚本文件。

在 siteapi 目录下新建包：apps、libs、utils（分别用来存放开发的代码、第三方库、开发的组件）。

在 siteapi 目录下新建 settings 包，包下面新建文件：dev.py、prod.py（分别用来存放项目开发时的本地配置、项目上线时的运行配置），然后把 settings.py 重命名为 settings_origin.py。把 settings_origin.py 文件的内容复制到 dev.py 中。

修改 manage.py 文件中的 os.environ.setdefault(‘DJANGO_SETTINGS_MODULE’, ‘siteapi.settings’) 为 os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'siteapi.settings.dev')。

创建代码版本

cd django
git init
git add .
git commit -m '项目搭建和调整目录结构'
git remote add origin 远程仓库地址
git push -u origin "master"

git branch dev # 创建分支
git checkout dev # 切换分支 

日志配置

在 siteapisettingsdev.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 %(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.FileHandler',
            'filename': Path.joinpath(BASE_DIR.parent, 'logs/site.log'),
            'formatter': 'verbose'
        },
    },
    'loggers': {
        'django': {'handlers': ['console', 'file'],
            'propagate': True,
        },
    }
}

异常处理

在 siteapiutils 目录下新建文件：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('django')

def custom_exception_handler(exc, context):
    """
    自定义异常处理
    exc：本次请求发生的异常信息
    context：本次请求发生异常的执行上下文
    """
    response = exception_handler(exc, context)

    if response is None:
        """
        到这里只有 2 种情况：要么程序没出错
        要么出错了而 Django 或者 restframework 不识别
        """
        view = context['vies']
        if isinstance(exc, DatabaseError):
            # 数据库异常
            logger.error('[%s] %s' % (view, exc))
            response = Response({'message': '服务器内部错误，请联系客服工作人员！'}, status=status.HTTP_507_INSUFFICIENT_STORAGE)
    return response

在 siteapisettingsdev.py 文件尾部添加：

## 异常处理
REST_FRAMEWORK = {'EXCEPTION_HANDLER': 'siteapi.utils.exceptions.custom_exception_handler'}

数据库配置

## 连接数据库
mysql -u root -p
## 创建数据库
create database siteapi charset=utf8mb4;
## 创建数据库用户
create user siteapi_user identified by '123';
grant all privileges on siteapi.* to 'siteapi_user'@'%';
flush privileges;

接下来，在 siteapisettingsdev.py 文件中进行配置和修改：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'siteapi',
        'USER': 'siteapi_user',
        'PASSWORD': '123',
        'HOST': '127.0.0.1',
        'PORT': 3306,
    }
}

在 siteapi__init__.py 文件中添加如下代码：

import pymysql

pymysql.install_as_MySQLdb()

前端搭建

Node.js 安装，官网下载地址：https://nodejs.org/en/download/

npm config set registry https://registry.npm.taobao.org 
npm install --global vue-cli
vue -V # 检查是否安装成功 

创建项目

cd django
vue init webpack site_pc
? Project name site_pc
? Project description A Vue.js project
? Author google <qq@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

cd site_pc
npm run dev

打开浏览器，访问 http://localhost:8080，查看效果。

使用 PyCharm 打开新建的项目 site_pc，点击右上角 [Add Configurations…] -> 左上角 [+]，找到 npm 选中，在 Scripts: 填入：dev。

初始化

删掉 srcrouterindex.js 文件里面的如下代码：

import HelloWorld from '@/components/HelloWorld'

name: 'HelloWorld',
component: HelloWorld

清除 srcAPP.vue 中的默认样式：img 标签和 #app。

删除默认的 HelloWorld 组件（srccomponentsHelloWorld.vue）。

前端首页

在 srccomponents 目录下新建文件：Home.vue，然后到 srcrouterindex.js 文件进行引入：

import Home from "../components/Home"

export default new Router({
  mode: "history",
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }, {
      path: '/home',
      name: 'Home',
      component: Home
    }
  ]
})

初始化全局变量和方法

在 src 目录下新建文件：settings.js，并添加：

export default {"HOST": "http://localhost:8080/",}

在 srcmain.js 中引入：

import settings from "./settings"

Vue.prototype.$settings = settings

引入 ElementUI

npm i element-ui -S

在 srcmain.js 中导入 ElementUI，并调用：

// element-ui 配置
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 调用插件
Vue.use(ElementUI)

成功引入 ElementUI，就可以开始进入前端页面开发，首先是首页。

在 static 目录下新建目录：css，在 css 目录下新建文件：reset.css，写入：

/* 声明全局样式和项目的初始化样式 */
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;
}
在 srcmain.js 中导入 css 初始化样式：import '../static/css/reset.css'

srccomponents 目录下新建文件：Header.vue、Banner.vue、Footer.vue。