⼿把⼿Django+Vue前后端分离开发⼊门（附demo）
前⾔
众所周知，Django对于⽹站快速开发⾮常友好，这得益于框架为我们做了很多事情，让我们只需要做⼀些简单的配置和逻辑即可把⽹站的功能开发出来。但是，在使⽤Django的过程中，有⼀个地⽅⼀直是⽐较难受的，那就是使⽤Django⾃带的模版，这种通常需要⾃⼰利⽤HTML+CSS+Jquery的⽅式总感觉是上⼀个时代的做法，前后端分离⽆论对于开发效率、多端⽀持等等都是很有好处的。所以，本⽂希望通过⼀个简单的demo，讲⼀讲基于Django+Vue的前后端分离开发，将Django作为⼀个纯后端的服务，为前端Vue页⾯提供数据⽀持。
本⽂采⽤的django版本号2.2.5，Vue版本2.9.6。
如果⽂章太长，可先收藏关注⼀波~
本⽂demo代码已上传github，关注"进击的程序⼈"回复"代码"即可获取~
项⽬准备
1. 对于django和Vue的安装这⾥就略过了~
2. 创建前后端项⽬：创建⼀个⽂件夹，然后命令⾏创建项⽬即可，如下图~
3. 测试：
命令⾏进⼊后端⽂件夹book_demo，输⼊下⾯命令，浏览器登陆127.0.0.1:8000看见欢迎页即成功。
python manage.py runserver
再进⼊前端⽂件夹appfront，输⼊下⾯命令，浏览器登陆127.0.0.1:8080看见欢迎页即成功。
npm run dev
上⾯两个命令也是对应前后端项⽬的启动命令，后⾯就直接将过程说成启动前/后端项⽬。
后端实现
为了⽅便后端的实现，作为django做后端api服务的⼀种常⽤插件，django-rest-framework(DRF)提供了许多好⽤的特性，所以本⽂demo中也应⽤⼀下，命令⾏输⼊命令安装：
pip install django-rest-framework
进⼊book_demo⽬录，创建⼀个新的名为books的应⽤，并在新应⽤中添加urls.py⽂件，⽅便后⾯的路由配置，命令⾏输⼊：
python manage.py startapp books
cd books
touch urls.py
现在的⽬录结构如下：
下⾯开始做⼀些简单的配置：
将DRF和books配置到django项⽬中，打开项⽬中的settings.py⽂件，添加：
# book_demo/settings.py
INSTALLED_APPS = [
'ib.admin',
'ib.auth',
'ttypes',
'ib.sessions',
'ssages',
'ib.staticfiles',
# demo add
'rest_framework',
'books',
]
对整个项⽬的路由进⾏配置，让访问api/路径时候转到books应⽤中的urls.py⽂件配置进⾏处理。
# book_demo/settings.py
ib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('books.urls')), # demo add
]
下⾯在books应⽤中写简单的逻辑，demo只最简单涉及对书本的增删改查。因为这⼀部分不是本⽂重点，所以这⾥只介绍写代码流程和贴代码，对代码不做详细解释：
在models.py⽂件中写简单数据类Books：
# books/models.py
from django.db import models
class Books(models.Model):
name = models.CharField(max_length=30)
author = models.CharField(max_length=30, blank=True, null=True)
在books⽂件夹中创建serializer.py⽂件，并写对应序列化器BooksSerializer：
# books/serializer.py
from rest_framework import serializers
dels import Books
class BooksSerializer(serializers.ModelSerializer):
class Meta:
model = Books #序列化的对象名
fields = '__all__' #序列化的字段名，或者指定字段 fields = ("id","name","age")
在views.py⽂件中写对应的视图集BooksViewSet来处理请求：
# books/views.py
from rest_framework import viewsets
dels import Books
from books.serializer import BooksSerializer
class BooksViewSet(viewsets.ModelViewSet):
queryset = Books.objects.all()
serializer_class = BooksSerializer
在urls.py⽂件中写对应的路由映射：
jquery在项目里是干啥的# books/urls.py
from django.urls import path, include
from uters import DefaultRouter
from books import views
router = DefaultRouter()
urlpatterns = [
path('', include(router.urls)),
]
对于books应⽤中的内容，如果对DRF和Django流程熟悉的同学肯定知道都⼲了些什么，篇幅关系这⾥只能简单解释，DRF通过视图集ViewSet的⽅式让我们对某⼀个数据类Model可以进⾏增删改查，⽽且不同的操作对应于不同的请求⽅式，⽐如查看所有books⽤get⽅法，添加⼀本book⽤post⽅法等，让整个后端服务是restful的。如果实在看不懂代码含义，只需知道这样做之后就可以通过不同的⽹络请求对后端数据库的Books数据进⾏操作即可，后续可以结合Django和DRF官⽅⽂档对代码进⾏学习，或关注本⼈未来分享的内容。
到这⾥，可以运⾏⼀下后端项⽬看看效果，命令⾏运⾏：
python manage.py makemigrations
python manage.py migrate
python manage.py runserver
得益于DRF提供的api可视化界⾯，浏览器访问127.0.0.1:8000/api/books/，如果出现了以下界⾯并添加数据正常，则说明后端的基本逻辑已经ok了~下图为添加了⼀条数据之后的效果。
前端实现
接下来的⼯作以appfront项⽬⽬录为根⽬录进⾏，开始写⼀点前端的展⽰和表单，希望达到两个⽬标，⼀是能从后端请求到所有的books 列表，⼆是能往后端添加⼀条book数据。说⽩了就是希望把上⾯的页⾯⽤Vue简单实现⼀下，然后能达到相同的功能。对于Vue项⽬中各个⽂件的功能这⾥也不多解释，可以参考其⽂档系统学习。这⾥只需要知道欢迎页⾯中的样式是写在App.vue和
components/HelloWorld.vue中即可。
这⾥直接⽤HelloWorld.vue进⾏修改，只求功能不追求页⾯了~
// appfront/src/components/HelloWorld.vue
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<!-- show books list -->
<ul>
<li v-for="(book, index) in books" :key="index" >
{{index}}-{{book.name}}-{{book.author}}
</li>
</ul>
<!-- form to add a book -->
<form action="">
输⼊书名：<input type="text" placeholder="book name" v-model="inputBook.name"><br>
输⼊作者：<input type="text" placeholder="book author" v-model="inputBook.author"><br>
</form>
<button type="submit" @click="bookSubmit()">submit</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
// books list data
books: [
{name: 'test', author: 't'},
{name: 'test2', author: 't2'}
],
// book data in the form
inputBook: {
"name": "",
"author": "",
}
}
},
methods: {
loadBooks () {...}, // load books list when visit the page
bookSubmit () {...} // add a book to backend when click the button
},
created: function () {
this.loadBooks()
}
}
</script>
...
启动前端项⽬，浏览器访问127.0.0.1:8080，可以看到刚写的页⾯已经更新上去了，丑是丑了点，意思到了就⾏~如下图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。