一. 项目目标
我们需要使用djangorestframwork和vue来实现博客的增删改查(crud)。
二. 步骤
(一) 后端
- 创建django项目
- 添加博客model,并添加一些原始数据
- 使用rest framework来添加serializer, viewset和urls
- 配置settings.py并使用cors headers解决跨域的问题
(二) 前端
- 安装node vue
- vue-cli创建前端项目
- 修改index.html主页,添加bootstrap css框架和fontawesome字体的依赖
- 修改App.vue和核心组件
- 添加axios http请求组件
- 添加请求后端代码
三. 具体操作
(一) 后端
-
创建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', ]
-
添加博客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并往表里面添加数据。
-
使用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')), ]
-
配置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
后端就基本实现了,接下来我们要实现前端页面展示:
https://blog.csdn.net/weixin_46129834/article/details/106313806