写在前面的话

自从写完那个PHP项目之后就一直处于很颓废的状态。今天把Vue.js学的差不多了，终于决定要开始做这个项目了。

这个开发任务是小组布置的另一个任务。今天刚把Django官方文档里那个入门项目做完，我就感觉到Django这个东西一点也不简单，而我要写的这个项目更不简单。虽然配合vue-cli实现前后端分离并且做成单页面应用可以降低后端开发的难度——后端只用管数据处理、存储就可以了，其他的都交给前端，博客系统也没有特别复杂的后端逻辑，而且自己也经常用Python写一些脚本，对这门语言还算熟悉。但是……毕竟这东西不像PHP那么简单，也没用它进行过后端开发，一时半会肯定是学不完的了……

最近刚刚接触了vue-cli，感觉这个东西还挺神奇的，似乎也非常好用，对提高网站的性能应该是有很大的帮助。虽然学Vue学了有一段时间了，也用Vue写过一部分页面，自己也非常喜欢这个框架，但是使用vue-cli做单页面应用，这还是第一次。单页面应用、前后端分离、Ajax，几乎全都是我的知识盲区。但是毕竟自己喜欢前端开发，单页面应用和前后端分离是以后的主流，所以就硬着头皮决定用这样的方式搭建这个项目了。毕竟，没有学习就没有进步嘛，如果因为害怕难而不去学、不去做，又哪来的进步呢。

这次肯定不会像上次那个PHP前后端不分离的项目一样那么快就完成，规划的是15天左右，在8月25日之前完成就可以了，不过具体需要多少天……我心里也没底，毕竟是第一次做这样的项目，而且网上也没有很多可参考的资料。不像PHP随便一搜就是一大堆，还得为参考哪个更好而发愁，这次是有相关资料就不错了。。。

因为这个项目的前端是vue-cli做的单页面应用，重点在前端的数据处理、渲染、用户交互等方面，所以页面的设计与美化我也不是很想花太大力气了，决定使用Bootstrap框架配合少量的手写完成对前端的美化。还不是因为MDUI实在是看腻了又不想手写才会考虑Bootstrap。。。

所以最后其实是打算边做这个项目边学习Vue.js和Django。

需要用到的知识点

后端

• Python
• Django
• 跨域、Django的CSRF token等

前端

• Bootstrap
• Vue.js
• vue-cli
• vue-router
• Vue.js组件化开发
• Ajax
• 前后端分离
• 单页面应用（SPA）的开发

开发工具

后端

• PyCharm

前端

• IntelliJ IDEA（装了Vue的插件并进行了相关设置）
• Visual Studio Code

项目的总体逻辑

如果不考虑评论功能的话，登录到博客系统的用户只有一个，那就是博主本人，所以用户管理方面不是很复杂，可以不设置注册页面而只有登录页面，在设置数据库的时候加上博主这个用户就可以，前端也可以没有登录按钮，以输入url的方式跳转到登录组件（少一个按钮肯定是美观一些）。复杂的地方还是在于前端不同组件之间的逻辑与数据的请求、渲染问题。

初步设想整个系统的前端由以下组件组成，比留言板项目的逻辑还是简单一些：

数据库方面，感觉Django自带的SQLite似乎很好用，虽然对它不如对MySQL熟悉，但是还是决定用它，也省去一些配置上的麻烦。具体怎么用还是需要继续摸索。

项目的建立

首先建立整个项目：

django-admin startproject Blog

后端

cd Blog
python manage.py startapp backend

前端

vue-init webpack frontend
cd frontend
npm install

前端一些需要用到的库

Bootstrap4

npm install bootstrap --save --save-exact

Ajax

npm install axios vue-axios --save --save-exact

打包Vue项目

主要是为了生成index.html，方便Django中的设置。

npm install
npm run build

Django视图、静态文件搜索路径配置

参考：
http://blog.csdn.net/liuyukuan/article/details/70477095
http://blog.csdn.net/qq_39785489/article/details/82751868

因为是单页面应用，所以也就只有一个index.html，配置一下即可。

Blog/urls.py

from django.contrib import admin
from django.urls import path
from django.views.generic import TemplateView

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html'))    #默认访问index.html
]

Blog/settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['frontend/dist'],    #添加
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

# 添加以下项
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'frontend/dist/static')
]

解决跨域问题

参考： https://blog.csdn.net/ros_donggua/article/details/82800510

在开发前端时使用npm run dev命令，在请求Django的接口时可能会出现跨域问题。

安装django-cors-headers：

pip install django-cors-headers

我这里是直接就有了，不需要安装。

Blog/settings.py

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',    #在这里添加
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

CORS_ORIGIN_ALLOW_ALL = True    #添加这一行

启动项目

python manage.py runserver

访问127.0.0.1:8080，就可以看到Vue.js的默认页面了，也代表项目基本构建完成，可以进行后续的开发了。