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, include

urlpatterns = [
...
    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 serializers

from sangfor.models import Sangfor
from sangfor.models import Login


class SangforSerializer(serializers.ModelSerializer):
    class Meta:
        model = Sangfor
        fields = '__all__'


class LoginSerializer(serializers.ModelSerializer):
    class Meta:
        model = Login
        fields = '__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 LoginSerializer


class SangforViewSet(viewsets.ModelViewSet):
    queryset = Sangfor.objects.all()
    serializer_class = SangforSerializer


class LoginViewSet(viewsets.ModelViewSet):
    queryset = Login.objects.all()
    serializer_class = LoginSerializer

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

from django.urls import path, include
from rest_framework.routers import DefaultRouter


from sangfor import views


router = 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/
出现如下操作界面说明后台接口没有问题：