2019-08-08|2019-08-08 Django+Vue.js实现前后端分离的单页面博客系统（1）项目的构建 2019-08-08Django+Vue.js实现前后端分

写在前面的话自从写完那个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的方式跳转到登录组件（少一个按钮肯定是美观一些）。复杂的地方还是在于前端不同组件之间的逻辑与数据的请求、渲染问题。
初步设想整个系统的前端由以下组件组成，比留言板项目的逻辑还是简单一些：

2019-08-08|2019-08-08 Django+Vue.js实现前后端分离的单页面博客系统（1）项目的构建

文章图片
数据库方面，感觉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 TemplateViewurlpatterns = [ 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的接口时可能会出现跨域问题。
【2019-08-08|2019-08-08 Django+Vue.js实现前后端分离的单页面博客系统（1）项目的构建】安装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#添加这一行

启动项目