DjangoRestFramework和Vue做一个简单的前后端分离的博客项目(一)

一. 项目目标

我们需要使用djangorestframwork和vue来实现博客的增删改查（crud)。

二. 步骤

(一) 后端

1. 创建django项目
2. 添加博客model，并添加一些原始数据
3. 使用rest framework来添加serializer, viewset和urls
4. 配置settings.py并使用cors headers解决跨域的问题

(二) 前端

1. 安装node vue
2. vue-cli创建前端项目
3. 修改index.html主页，添加bootstrap css框架和fontawesome字体的依赖
4. 修改App.vue和核心组件
5. 添加axios http请求组件
6. 添加请求后端代码

三. 具体操作

(一) 后端

1. 创建django项目和app

   # 创建backend项目
   django-admin startproject backend
   
   cd backend
   # 创建blogapp
   python manage.py startapp blogapp

   在settings.py里面加入blogapp和rest_framework

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

2. 添加博客model，并添加一些原始数据

   from django.db import models
   
   # Create your models here.
   class Blog(models.Model):
       title = models.CharField(max_length=50)
       content = models.CharField(max_length=500)
       class Meta:
           db_table = 't_blog'
           ordering  = ('-id',)

   ​ 在这个model里面，我们定义了两个字段，title和content, 在嵌套类里 面， 我们使用db_table属性来定义这个表的名字为t_blog, 排序 使用 ordering属性使它 按id 序排序。

   ​ 修改完models.py之后需要迁移数据库：

   python manage.py makemigrations
   python manage.py migrate
   

   ​ 使用navicat打开db.sqlite3并往表里面添加数据。

   ​

3. 使用rest framework来添加serializer, viewset和urls

   在blogapp文件夹下创建一个名为serializers.py的文件作为我们的序列器文件，此时的是文件树如下：

   

   blogapp/views.py

   from django.shortcuts import render
   
   # Create your views here.
   from rest_framework import viewsets
   from blogapp.serializers import BlogSerializer
   from blogapp.models import Blog
   
   class BlogViewSet(viewsets.ModelViewSet):
       """
       查看，编辑博客的API接口 
       """
       queryset = Blog.objects.all()
       serializer_class = BlogSerializer

   blogapp/serializers.py

   from blogapp.models import Blog
   from rest_framework import serializers
   
   class BlogSerializer(serializers.HyperlinkedModelSerializer):
      class Meta:
          model = Blog
          fields = ('id', 'url', 'title', 'content')
   

   backend/urls.py

   from django.contrib import admin
   # from django.urls import url, include
   from django.conf.urls import url, include
   
   from rest_framework import routers
   from blogapp import views
   
   
   router = routers.DefaultRouter()
   router.register(r'blog', views.BlogViewSet)
   
   
   urlpatterns = [
       url('admin/', admin.site.urls),
       url(r'^', include(router.urls)),
       url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework')),
   ]

   ​

4. 配置settings.py并使用cors headers解决跨域的问题
   在INSTALLED_APPS里面加入corsheaders

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

​ 在MIDDLEWARE里面加入corsheaders.middleware.CorsMiddleware

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',
]

​

---

配置好上面的文件：启动项目就可以了

python manage.py runserver

项目代码奉上：https://github.com/Ran-oops/Django-Vue-Project.git

---

All backend tasks were done here. The frontend will be updated in next blog article.

If any questions please leave your comments.

Good Luck!