django项目练习

model 类
from django.db import models


class Lian(models.Model):
    name = models.CharField(max_length=20)
    salary = models.IntegerField()
    class Meta:
        db_table = 't_lian'

class Consumer(models.Model):
    name = models.CharField(max_length=20)
    age = models.IntegerField()
    ci = models.IntegerField(default=0)
    lian = models.ForeignKey(to=Lian,on_delete=models.CASCADE)
    class Meta:
        db_table='t_consumer'

序列化器

from rest_framework import serializers

from userapp.models import *


class LianSer(serializers.ModelSerializer):
    class Meta:
        model = Lian
        fields = '__all__'


class ConsumerSer(serializers.ModelSerializer):
    l = serializers.SerializerMethodField()

    def get_l(self, obj):
        return obj.lian.name

    class Meta:
        model = Consumer
        fields = '__all__'

视图

from userapp.models import Lian, Consumer
from userapp.myser import LianSer, ConsumerSer


class LianView(ListCreateAPIView):
    queryset = Lian.objects.all()
    serializer_class = LianSer
class ConsumerView(ListCreateAPIView):
    queryset = Consumer.objects.all()
    serializer_class = ConsumerSer

class ConsumerSing(APIView):
    def get(self,request,id):
        object = Consumer.objects.get(id=id)
        object.ci+=1
        object.save()
        ser = ConsumerSer(object)
        return Response(ser.data)

class Zhuan(APIView):
    def put(self,request,pk):
        print(pk)
        lian_id = request.data.get('lian_id')
        Consumer.objects.filter(id=pk).update(lian_id=lian_id)
        return Response('转移成功')

子路由

from django.urls import path

from userapp.views import *

urlpatterns = [
    path('lian/',LianView.as_view()),
    path('cons/',ConsumerView.as_view()),
    path('sing/<id>/',ConsumerSing.as_view()),
    path('zhuan/<pk>/',Zhuan.as_view()),
]

vue页面
教练添加

<template>
  <div>
    名称 <input type="text" v-model="name"><br>
    时薪 <input type="text" v-model="salary"><br>
    <button @click="btn">添加</button>
  </div>
</template>

<script>
export default {
  name: "lian",
  data(){
    return{
      name:'',
      salary:''
    }
  },
  methods:{
    btn(){
      this.$axios.post('lian/',{
        name:this.name,
        salary:this.salary
      }).then(res=>{
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>

</style>

教练展示

<template>
  <div>
    <table border="1">
      <tr v-for="i in datas">
        <td>{{i.id}}</td>
        <td>{{i.name}}</td>
        <td>{{i.salary}}</td>
        <td><button @click="btn1(i.id)">跳转</button></td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "lianlist",
  data(){
    return{
      datas:[],

    }
  },
  methods:{
    btn(){
      this.$axios.get('lian/')
      .then(res=>{
        this.datas = res.data
      })
    },
    btn1(id){
      this.$router.push({name:'xiaolist',query:{
        id:id
        }})
    }
  },
  mounted() {
    this.btn()
  }
}
</script>

<style scoped>

</style>

消费者添加

<template>
<div>
  名字 <input type="text" v-model="name"><br>
  年龄 <input type="text" v-model="age"><br>
  教练 <select v-model="lian">
  <option :value="i.id" v-for="i in datas">{{i.name}}</option>
</select><br>
  <button @click="btn1">添加</button>
</div>
</template>

<script>
export default {
  name: "xiao",
  data(){
    return{
      datas:[],
      name:'',
      age:'',
      lian:''
    }
  },
  methods:{
    btn(){
      this.$axios.get('lian/')
      .then(res=>{
        console.log(res.data)
        this.datas=res.data
      })
    },
    btn1(){
      this.$axios.post('cons/',{
        name:this.name,
        age:this.age,
        lian:this.lian
      }).then(res=>{
        console.log(res)
      })
    }
  },
  mounted() {
    this.btn()
  }
}
</script>

<style scoped>

</style>

消费者展示

<template>
 <div>
   <table border="1">
     <tr>
       <td>姓名</td>
       <td>年龄</td>
       <td>教练</td>
       <td>次数</td>
       <td colspan="2">操作</td>
     </tr>
     <tr v-for="i in datas">
       <td>{{i.name}}</td>
       <td>{{i.age}}</td>
       <td>{{i.l}}</td>
       <td>{{i.ci}}</td>
       <td><button @click="btn1(i.id)">详情</button></td>
       <td><button @click="btn2(i.id)">转移</button></td>
     </tr>
   </table>
 </div>
</template>

<script>
export default {
  name: "xiaolist",
  data(){
    return{
      datas:[],
      id:this.$route.query.id
    }
  },
  methods:{
    btn(){
      this.$axios.get('cons/?lian_id='+this.id)
        .then(res=>{
          this.datas=res.data
        })
    },
    btn1(id){
      this.$router.push({
        name:'xiaoxiang',
        query:{id:id}
      })
    },
    btn2(id){
      this.$router.push({path:'/xiaozhuan',query:{
          id:id
        }})
    }
  },
  mounted() {
    this.btn()
  }
}
</script>

<style scoped>

</style>

消费者详情

<template>
  <div>
    详情: {{datas.id}}==={{datas.name}}==={{datas.age}}==={{datas.ci}}==={{datas.l}}<br>
  </div>
</template>

<script>
export default {
  name: "xiaoxiang",
  data(){
    return{
      datas:[],
      id:this.$route.query.id
    }
  },
  methods:{
    btn(){
      this.$axios.get('sing/'+this.id +'/')
        .then(res=>{
          this.datas =res.data
        })
    },
  },
  mounted() {
    this.btn()
  }
}
</script>

<style scoped>

</style>

教练转移

<template>
    <div>
      <select v-model="lianid" >
        <option :value="i.id" v-for="i in datas">{{i.name}}</option>
      </select><br>
      <button @click="btn2">转移</button>
    </div>
</template>

<script>
export default {
  name: "xiaozhuan",
  data(){
    return{
      datas:[],
      id:this.$route.query.id,
      lianid:''
    }
  },
  methods:{
    btn1() {
      this.$axios.get('lian/')
        .then(res => {
          console.log(res)
          this.datas = res.data
        })
    },
    btn2(id){
      this.$axios.put('zhuan/'+this.id+'/',{
        lian_id:this.lianid
      })
        .then(res=>{
          console.log(res)
        })
    }
  },
  mounted() {
    this.btn1()
  }
}
</script>

<style scoped>

</style>