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

编程 · 2023-08-17 · 182 人浏览

环境搭建(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。

Python
2023 - 2024 三毛笔记. All Rights Reserved.
Theme Jasmine by Kent Liao
闽公网安备35020602002927 | 萌ICP备20242345号