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:
"""
到这里只有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。
当前页面是本站的「Google AMP」版。查看和发表评论请点击:完整版 »