Vue+Django+Mysql搭建前后端分离的个人博客网站

前言:本文适合有一定Vue或Django基础的开发者阅读，文中不会特别强调技术细节，只强调搭建的流程和配置，若有技术细节不懂请自行谷歌。

一、技术栈选择

二、环境配置

三、项目初始化

更新日志

一、技术栈选择

前端Vue的所有技术栈： vue2 + vuex + vue-router + webpack

UI库： element-ui

网络请求：axios

前端脚手架构建工具：vue-cli

后端技术栈：Python+Django

数据库： MySQL

前端技术栈选择原因：Vue是如今最火的MVVM框架之一，它的优势是双向数据绑定、文件组件化、生态较完善等。

后端技术栈选择原因：Django是基于Python的一款轻量级的后端框架，适合个人全栈快速开发，我青睐于它的原因是它的ORM方便高效、配置简单清晰、自带token等。

前后端分离模式选择原因：实现并行开发，开发结束后需要进行独立部署，前端通过ajax来调用http请求调用后端的restful api。前端只需要关注页面的样式与动态数据的解析&渲染，而后端专注于具体业务逻辑。

二、环境配置

本项目的系统环境：Ubuntu 18

本项目的开发环境：Node12.10.3 + Vue 2.9.6 + Python 3.6.8 + Django2.2.7

本项目的开发软件：Vscode、Pycharm

配置开发环境：

（1）安装Node.js 和 Python

（2）安装Django以及依赖包：

通过Pycharm安装 Django==2.2.7 pymysql==0.9.3 djangorestframework==3.1.3

（3）安装cnpm（直接用npm可行，但需科学上网）

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

（4）安装Vue-cli脚手架构建工具

$ cnpm install -g vue-cli

三、项目初始化

（1）在命令行界面输入下列指令，创建Django应用——PythonSky：

$ django-admin startproject PythonSky

（2）进入创建的项目，创建应用app——childName：

$ cd PythonSky

$ python manage.py startapp PythonSky

（3）在appName的跟目录，利用vue-cli创建vue应用——vueName：

$ vue-init webpack PythonSky

（4）进入vueName，安装模块并打包：

$ cd PythonSky

$ cnpm install

$ cnpm run dev

(5) 找到Django应用——PythonSky根目录里的urls.py(即PythonSky/urls.py)，配置url路径：

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('home.urls')),
]

（6）在PythonSky文件根目录里的settings.py添加python的app应用：


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

（7）本项目数据库为mysql，所以在PythonSky文件根目录里的settings.py修改数据库信息：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # 数据库引擎
        'NAME': 'databases',  # 数据库名
        'USER': 'root',  # 用户名
        'PASSWORD': 'root',  # 密码
        'HOST': '',  # 数据库主机，默认为localhost
        'PORT': '',  # 数据库端口，MySQL默认为3306
        'OPTIONS': {
            'autocommit': True,
        },
    }
}

（8）在PythonSky文件根目录里的init.py中添加pymysql配置：

import pymysql
pymysql.install_as_MySQLdb()

（9）修改Django的模板渲染路径及中国时区：


LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/Shanghai'

（10）修改home的urls，在home文件夹中创建新的api.py：

from rest_framework.response import Response
from rest_framework.decorators import api_view

@api_view(['GET'])
def Hello(request):
    jsonData = {'success': 'ok', 'message': 'hello world', 'data': ''}
    return Response(jsonData)

（11）在Pycharm中运行Django项目，并在浏览器打开：

更新日志

2019-11-07 15:30 初始化项目

一键三连呀！