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

环境搭建(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:
    &quot;&quot;&quot;
    到这里只有2种情况：
    要么程序没出错
    要么出错了而Django或者restframework不识别
    &quot;&quot;&quot;
    view = context['vies']
    if isinstance(exc, DatabaseError):
        # 数据库异常
        logger.error('[%s] %s' % (view, exc))
        response = Response({'message': '服务器内部错误，请联系客服工作人员！'}, status=status.HTTP_507_INSUFFICIENT_STORAGE)
return response</code></pre><p>在siteapisettingsdev.py文件尾部添加：</p><pre><code>## 异常处理

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。