前后端分离项目完整版

整体流程

a)新建一个干净项目，项目名为day15+名字首拼
b)编写种类Kind模型类，由动物种类kind_name组成，并自己添加3条数据，例如食肉动物
c)编写动物Animal模型类，动物名ani_name、体重weight、高度height、所属种类kind(外键)组成，并自己添加测试数据
d)实现以下功能:
编写后端代码：
1.种类的增删查改
2.动物的增删查改
3.查询所有动物信息，外键展示内容为种类名称
编写前端代码：
创建种类页面(实现功能1-3) 和 动物页面(实现功能4-6)
1.展示所有的种类信息
2.输入种动物名搜索对应的信息
3.点击种类名称，转跳到动物页面，可以查询对应种类下的动物信息。
4.可以修改动物信息，要求所属种类使用下拉框实现
5.可以添加动物信息，要求所属种类使用下拉框实现
6.点击删除按钮，删除动物信息
7.新增页面： 查询全部动物信息，按照动物的体重进行排序并展示

一. 后端 1.创建django项目

指定文件夹下输出cmd
创建django项目:	django-admin startproject 项目名
运行jiango项目:  python manage.py runserver
创建子应用:      python manage.py startapp 子应用名
生成迁移文件:	python .manage.py makemigrations
执行迁移：		python .manage.py migrate
创建超级用户:	python .manage.py createsuperuser

2.配置项目settings.py

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

    'game',  # 子应用
    'rest_framework',  
    'corsheaders',
    # 'django_filters',  # 使用SearchFilter时,不需要注册django_filters
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',  #crf
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
    'corsheaders.middleware.CorsMiddleware'
]

CORS_ORIGIN_ALLOW_ALL = True

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'HOST': 'localhost',
        'PORT': 3306,
        'USER': 'root',
        'PASSWORD': 'root',
        'NAME': 'game',   # 需要创建数据库
    }
}

LANGUAGE_CODE = 'zh-Hans'

TIME_ZONE = 'Asia/Shanghai'

3.安装数据库__init__.py

import pymysql
pymysql.install_as_MySQLdb()

4.编写模型类

from django.db import models

# Create your models here.
class Kind(models.Model):
    kind_name = models.CharField(max_length=20,verbose_name='动物种类')
    class Meta:
        verbose_name='动物种类表'
        verbose_name_plural=verbose_name
        db_table='kind'
    def __str__(self):
        return self.kind_name

class Animal(models.Model):
    ani_name = models.CharField(max_length=20,verbose_name='动物名')
    weight = models.IntegerField(default=0,verbose_name='体重')
    height = models.IntegerField(default=0,verbose_name='高度')
    kind = models.ForeignKey(to=Kind,on_delete=models.CASCADE)
    class Meta:
        verbose_name='动物表'
        verbose_name_plural=verbose_name
        db_table='animal'
    def __str__(self):
        return self.ani_name

注册表 在admin.py

from django.contrib import admin
from myapp.models import Kind,Animal    # 模型类里面写的表
# Register your models here.
admin.site.register(Kind)
admin.site.register(Animal)

5.迁移，创建超级用户、添加测试数据

生成迁移文件: python .manage.py makemigrations
执行迁移： python .manage.py migrate
创建超级用户: python .manage.py createsuperuser

6.路由分发 6.1.子应用里里面创建子路由

from django.urls import path
from myapp import views
from rest_framework import routers

urlpatterns = [
    path('ani2/',views.AnimalView2.as_view()),
]

router = routers.SimpleRouter()
router.register('kind',views.KindView,'kind')
router.register('ani',views.AnimalView,'ani')
urlpatterns += router.urls

6.2.主路由分发

from django.contrib import admin
from django.urls import path,include
from myapp import urls

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include(urls)),
]

7.编写序列化器

from rest_framework import serializers
from myapp.models import Kind,Animal

class KindSerializer(serializers.ModelSerializer):
    class Meta:
        model = Kind
        fields = '__all__'

class AnimalSerializer(serializers.ModelSerializer):
    class Meta:
        model = Animal
        fields = '__all__'

class AnimalSerializer2(serializers.ModelSerializer):
    kind = serializers.StringRelatedField(read_only=True)
    class Meta:
        model = Animal
        fields = '__all__'

8.编写视图代码

from django.shortcuts import render
from rest_framework.viewsets import ModelViewSet
from myapp.models import Kind,Animal
from myapp.serializers import KindSerializer,AnimalSerializer,AnimalSerializer2
from rest_framework.generics import ListAPIView
from rest_framework.filters import OrderingFilter,SearchFilter

# Create your views here.

class KindView(ModelViewSet):
    queryset = Kind.objects.all()
    serializer_class = KindSerializer

class AnimalView(ModelViewSet):
    queryset = Animal.objects.all()
    serializer_class = AnimalSerializer


class AnimalView2(ListAPIView):
    queryset = Animal.objects.all()
    serializer_class = AnimalSerializer
    filter_backends = [SearchFilter,OrderingFilter]
    search_fields = ['kind__id','ani_name']		# 过滤字段
    ordering_fields = ['weight']  		# 排序

二. 前端 根目录下创建vue.config.js链接后端

# 编写完后需要重启终端
module.exports={
    devServer:{
        proxy:'http://127.0.0.1:8081/'   # 根据自己后端页面的路径来的
    }
}

在src文件夹下创建utils文件夹(后在utils文件夹在创建request.js文件)用于封装

import Axios from 'axios'

// 常用请求封装
export function get(url,params){
    return Axios.get(url,params)
}
export function post(url,params){
    return Axios.post(url,params)
}
export function put(url,params){
    return Axios.put(url,params)
}
export function del(url,params){
    return Axios.delete(url,params)
}

index.js里面配置路径

import Kind from '../views/kind/Kind.vue'
import Animal from '../views/kind/Animal.vue'
import Index from '../views/kind/Index.vue'


const routes = [
  {
    path: '/',
    name: 'Kind',
    component: Kind
  },
  {
    path: '/animal',
    name: 'Animal',
    component: Animal
  },
  {
    path: '/index',
    name: 'Index',
    component: Index
  },

]

App.vue里面配置需要的导航条

    动物种类页面|
    动物页面|

接下来编写自己所需要的曾删改查

编写前端代码：
创建种类页面(实现功能1-3) 和 动物页面(实现功能4-6)
1.展示所有的种类信息
2.输入种动物名搜索对应的信息
3.点击种类名称，转跳到动物页面，可以查询对应种类下的动物信息。
4.可以修改动物信息，要求所属种类使用下拉框实现
5.可以添加动物信息，要求所属种类使用下拉框实现
6.点击删除按钮，删除动物信息
7.新增页面： 查询全部动物信息，按照动物的体重进行排序并展示