前后端分离项目完整版

整体流程

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 = TrueDATABASES = {'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_namedb_table='kind'def __str__(self):return self.kind_nameclass 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_namedb_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 routersurlpatterns = [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 urlsurlpatterns = [path('admin/', admin.site.urls),path('',include(urls)),
]

7.编写序列化器

from rest_framework import serializers
from myapp.models import Kind,Animalclass KindSerializer(serializers.ModelSerializer):class Meta:model = Kindfields = '__all__'class AnimalSerializer(serializers.ModelSerializer):class Meta:model = Animalfields = '__all__'class AnimalSerializer2(serializers.ModelSerializer):kind = serializers.StringRelatedField(read_only=True)class Meta:model = Animalfields = '__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 = KindSerializerclass AnimalView(ModelViewSet):queryset = Animal.objects.all()serializer_class = AnimalSerializerclass AnimalView2(ListAPIView):queryset = Animal.objects.all()serializer_class = AnimalSerializerfilter_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里面配置需要的导航条

    <router-link to="/">动物种类页面router-link>|<router-link to="/Animal">动物页面router-link>|

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

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

<template><div><h3>动物种类页面h3><table width=800 border="1" style="margin : 0 auto"><tr><th>编号th><th>种类名th>tr><tr v-for="(item,i) in kindList" :key="i"><td>{{item.id}}td><td><router-link :to="{name:'Animal',params:{id:item.id}}">{{item.kind_name}}router-link>td>tr>table><p>动物名: <input type="text" v-model="ani_name"><button @click="search">搜素button>p><p>{{searchdata}}p>div>
template><script>
import { get } from '../../utils/request'
export default {name:'Kind',data(){return{kindList:[],ani_name:[],searchdata:[],}},mounted(){this.getKindData();},methods:{getKindData(){// 'kind/'是根据后端路由视图的操作来定义的get('kind/').then(resp=>{console.log(resp);this.kindList = resp.data;}).catch(err=>{console.log(err);})},search(){let url = 'ani2?search=' + this.ani_name;get(url).then(resp=>{console.log(resp);this.searchdata = resp.data;}).catch(err=>{console.log(err);})}}}
script><style>style>

<template><div><h3>动物页面h3>{{kind_id}}<table width=800 border="1" style="margin : 0 auto"><tr><th>编号th><th>动物名th><th>体重th><th>高度th><th>外键th><th>操作th>tr><tr v-for="(item,i) in animalList" :key="i"><td>{{item.id}}td><td>{{item.ani_name}}td><td>{{item.weight}}td><td>{{item.height}}td><td>{{item.kind}}td><td><button @click="getAni(i)">修改button><button @click="remove(item.id)">删除button>td>tr>table><p>修改p><p>动物名:<input type="text" v-model="ani_name">p><p>体重:<input type="text" v-model="weight">p><p>高度:<input type="text" v-model="height">p><p>外键:<input type="text" v-model="kind">p><p><button @click="update">修改button>p>div>
template><script>
import { del, get, put } from '../../utils/request'
export default {name:'Animal',data(){return{kind_id : this.$route.params.id,   //接收上个页面传过的idanimalList:[],ani_name:'',weight:11,height:22,kind:0,}},mounted(){this.getAniamlData();},methods:{getAniamlData(){// 地址根据后端路由视图的操作来定义的let url = 'ani2/?search=' + this.kind_idget(url).then(resp=>{console.log(resp);this.animalList = resp.data;}).catch(err=>{console.log(err);})},getAni(i){this.id = this.animalList[i].id;this.ani_name = this.animalList[i].ani_name;this.weight = this.animalList[i].weight;this.height = this.animalList[i].height;this.kind = this.animalList[i].kind;},update(){// 地址根据后端路由视图的操作来定义的let url = 'ani/' + this.id + '/';let obj = {ani_name:this.ani_name,weight:this.weight,height:this.height,kind:this.kind}put(url,obj).then(resp=>{console.log(resp);alert('修改成功');this.getAniamlData();}).catch(err=>{console.log(err);})},remove(id){// 地址根据后端路由视图的操作来定义的let url = 'ani/' + id +'/';del(url).then(resp=>{console.log(resp);alert('删除成功');this.getAniamlData();}).catch(err=>{console.log(err);})}}}
script><style>style>

<template><div><h3>信息h3><table width=800 border="1" style="margin : 0 auto"><tr><th>编号th><th>动物名th><th>体重th><th>高度th><th>外键th>tr><tr v-for="(item,i) in AniList" :key="i"><td>{{item.id}}td><td>{{item.ani_name}}td><td>{{item.weight}}td><td>{{item.height}}td><td>{{item.kind}}td>tr><tr><td colspan="6"><button @click="rank">排序button>td>tr>table>div>
template><script>
import { get } from '../../utils/request'
export default {name:'Index',data(){return{AniList:[],}},mounted(){this.getAniList();},methods:{getAniList(){// 地址根据自己后端路由视图的操作来定义的get('ani/').then(resp=>{console.log(resp);this.AniList = resp.data;}).catch(err=>{console.log(err);})},rank(){// 地址根据自己后端路由视图的操作来定义的let url = 'ani2/?ordering=weight';get(url).then(resp=>{console.log(resp);this.AniList = resp.data;}).catch(err=>{console.log(err);})}}}
script><style>style>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！