Django vue 搭建前后端分离的web 二

bootstrap的安装和使用：

安装：
在vue项目下使用npm直接安装即可：
由于bootstrap依赖jQuery，所以第一步安装jQuery：
npm install jquery
检查在package.json的dependencies中是否已经存在代码：“jquery”: “x.x.x”
不存在就需要手动添加：“jquery”: “^x.x.x”

在build文件webpack.base.conf.js中添加两行代码：

const webpack = require('webpack')  //加在文件的变量定义区【文件开头】
module.exports = {resolve: {extensions: ['.js', '.vue', '.json'],alias: {'vue$': 'vue/dist/vue.esm.js','@': resolve('src'),'jquery': 'jquery' //这里是增加的}},plugins: [new webpack.ProvidePlugin({$: "jquery",jQuery: "jquery","windows.jQuery": "jquery"//这里是增加的})],
}

在main.js中加入如下代码：

import $ from ‘jquery’ ；

第二步安装bootstrap；
npm install bootstrap@3

在main.js 引入Bootstrap：

使用：

在组件中直接使用样式即可：

前后端项目通信的实现：开始

MVC模型:
M：model，主要封装对数据库层的访问，实现数据的增、删、改、查等操作;
V：View，用于结果封装生成页面展示给用户看;
C：Controller，用于控制，实现接受请求，完成请求的业务逻辑处理，与Modle和View交互
通过Django编写基于vue，前后端分离的后台接口：

第一步：安装插件，django-rest-framework(DRF)

pip install django-rest-framework

进入后端app目录创建urls.py

第二步：将DRF和sangfor配置到django项目中，打开项目中的settings.py文件，添加：

INSTALLED_APPS = ['django.contrib.admin','django.contrib.auth','django.contrib.contenttypes','django.contrib.sessions','django.contrib.messages','django.contrib.staticfiles',# demo add'rest_framework','sangfor',
]

第三步：后端项目的路由配置，让访问index/路径时候转到sangfor应用中的urls.py文件配置进行处理

from django.contrib import admin
from django.urls import path, includeurlpatterns = [
...path('index/', include('sangfor.urls')),
]

第四步：在models.py文件中写简单数据类

from django.db import models# Create your models here.class Sangfor(models.Model):name = models.CharField(max_length=30)author = models.CharField(max_length=30, blank=True, null=True)class Login(models.Model):name = models.CharField(max_length=20, blank=True, null=True)passwd = models.CharField(max_length=20, blank=True, null=True)

第五步：在sangfor文件夹中创建serializer.py文件，并写对应序列化器sangforSerializer：

from rest_framework import serializersfrom sangfor.models import Sangfor
from sangfor.models import Loginclass SangforSerializer(serializers.ModelSerializer):class Meta:model = Sangforfields = '__all__'class LoginSerializer(serializers.ModelSerializer):class Meta:model = Loginfields = '__all__'

第六步：在views.py文件中写对应的视图集SangforViewSet来处理请求：

from django.shortcuts import render# Create your views here.
from rest_framework import viewsets# from books.models import Books.
from sangfor.models import Sangfor
from sangfor.models import Login# from books.serializer import BooksSerializer
from sangfor.serializer import SangforSerializer
from sangfor.serializer import LoginSerializerclass SangforViewSet(viewsets.ModelViewSet):queryset = Sangfor.objects.all()serializer_class = SangforSerializerclass LoginViewSet(viewsets.ModelViewSet):queryset = Login.objects.all()serializer_class = LoginSerializer

第七步：在urls.py文件中写对应的路由映射：

from django.urls import path, include
from rest_framework.routers import DefaultRouterfrom sangfor import viewsrouter = DefaultRouter()
router.register('sangfor', views.SangforViewSet)
router.register('login', views.LoginViewSet)urlpatterns = [path('', include(router.urls)),
]

第八步：检查后端接口效果：

命令行运行：
python manage.py makemigrations
python manage.py migrate
python manage.py runserver

请求相应接口：
如：http://127.0.0.1:8000/index/sangfor/
http://127.0.0.1:8000/index/login/
出现如下操作界面说明后台接口没有问题：